退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 介绍与开始

weex 介绍
未命名-1.png
特点(利用原生组件和能力,从而提高运行效率)
在开发阶段,一个 Weex 页面就像开发普通网页一样;在运行时,Weex 页面又充分利用了各种操作系统的原生组件和能力

weex 坑多吗?
经过大概2个月的开发与使用,总结 :“weex 坑并不多!”,不论是学习还是使用一门语言或者技术要学会取其精华!遇到“坑”要学会绕过去!
本教程也会详细讲解一些基本的注意事项,请仔细观看;

在 uni-app 中使用 weex

uni-app App端内置 weex 引擎,提供了原生渲染能力。
uni-app 里可以使用所有 weex 的内置组件和内置模块,编写页面时页面后缀名为 .nvue(native vue),.nvue 目前只会编译到 App端,暂不支持在 Chrome 或小程序开发工具中预览,需使用真机测试运行。
nvue 相当于 weex + plus + uni-app api。以往的 weex ,有个很大的问题是它只是一个高性能的渲染器,没有足够的API能力,使得开发时非常依赖原生工程师协作,开发者本来想节约成本,结果适得其反。而 nvue 解决了这个大问题,让前端工程师可以直接开发完整 App,并提供原生插件的市场交易和云打包,如果开发者需要一个原生插件,不必雇佣原生工程师,只需在插件市场购买插件然后直接云打包即可。这些组合方案,让 weex 能够切实的帮助开发者提高效率、降低成本。
如果你已经是 weex 的开发者,具有 weex 的填坑能力,那么 nvue 是你的更优选择,能切实提升你的开发效率,降低成本。
如果你是web前端,不熟悉 weex,那么建议你仍然以使用 vue 为主,在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充:
左右拖动的长列表。在webview里,通过swiper+scroll-view实现左右拖动的长列表,前端模拟下拉刷新,这套方案的性能不好。此时推荐使用nvue,比如新建uni-app项目时的新闻示例模板,就是首页采用了nvue
为了解决 vue 页面的原生控件层级问题和原生导航栏的灵活自定义问题,uni-app 还提供了 subnvue 方案,将一个非全屏的 nvue 页面覆盖到 vue 页面上,详见nvue 的开发遵循 weex 开发规范,并有所扩展。

文档地址 : https://uniapp.dcloud.io/use-weex?id=%E4%BB%8B%E7%BB%8D

新建页面、运行方法请观看视频教程。

合理的使用 weex
即使不使用 weex ,在 uni-app 平台下您一样可以开发跨平台应用,再次前端使用 weex 的目的是提供运行体验(不是自寻烦恼哦)!
使用使用 weex 的正确场景是 :

1、页面组件量比较大,比如 数据量很大的长列表、选项卡等界面;
2、weex 可以修改下拉刷新位置、样式等;


您需要知道:

1、uni-app 的组件运行环境是浏览器,这意味着大部分的组件是模拟的和原生效率是无法比的;
2、weex 只能用于 app 端(自动编译),如果您的项目需要发布为小程序或H5 普通的 uni-app 模式代码也是必须写的;


weex 难吗?好学吗?
如何您之前学过 uni-app、小程序、vue.js ,学习 weex 是非常容易的,weex 布局遵循 flex 后面的课程我们会进行详细讲解;