Weexplus是基于weex官方的二次开发版本,weex和react native一样同属第2代跨平台技术,解决了第一代性能低下,体验不好的问题,同时保留了第一代多平台一套代码,基于web技术栈,支持动态发版等所有优点。weex基于vue技术栈决定了它比react native在设计高度上有着跨越式的领先。
WeexPlus开发步骤:
- 安装NodeJs,已安装的请忽略
最简单的安装方法就是直接安装官网的安装包,至于其它的使用包管理或者源码安装的方法请自行搜索。
- 安装weex-toolkit,已安装的请忽略
npm install weex-toolkit -g或 cnpm install weex-toolkit -g
- 安装脚手架工具weexplus,已安装的请忽略
npm
install weexplus -g
或
cnpm
install weexplus -g
- 创建项目
切换到工作目录,执行(windows下务必确保使用管理员模式打开的cmd)
weexplus create
下载失败,请直接前往 https://github.com/weexplus/boilerplate
- 下载并安装weexplus开发包
一个apk程序,地址 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q
注意:手机端weex playground 扫描浏览器上生成二维码时,报" connect timed out"
问题解决:
1.手机和电脑是否在同一局域网
排查方法:先看手机和电脑连的是不是同一个wifi,然后看下手机和PC上的IP地址是否在同一个网段(电脑和手机连的是同一个wifi,但浏览器上服务端IP和手机端IP不在一个网段, Weex取的是电脑虚拟网卡的IP,禁用虚拟网卡后)。
2.确认下PC上wifi的连接策略;
排查方法:点击PC上wifi的属性,看下是公用还是专用。我原先设置的是公用,这个策略限制了同网段机器的网络访问权限,改为专用,然后手机再扫码,渲染正常。
- 运行创建的项目
cd my_project
npm install
native效果:
1.npm run native
2.
新启一个控制台
weexplus start
web版效果:
1.weexplus start
2.npm run web
Weexplus更新
切换到工作目录
weexplus update
WeeexPlus使用Weex Ui
- 安装前建议你的node版本是 >= 8.0
node -v
v8.2.1
npm --version
5.3.0
- 确保weex-toolkit为新版本
npm install
-g weex-toolkit@latest
或
cnpm install
-g weex-toolkit@latest
最新版本:
weex -v
- 使用 weex-toolkit 创建一个项目
weex create your_project
安装相关依赖
npm i
- 项目中使用 Weex Ui
安装 weex-ui
npm i weex-ui@latest -S
安装babel-preset-stage-0 和 babel-plugin-component 插件,前者用于babel编译,后者用于优化 weex-ui 包的组件引用
npm i babel-plugin-component babel-preset-stage-0 -D
- 修改.babelrc如下
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-ui",
"libDir": "packages",
"style": false
}
]
]
}
- 运行
启动
web
服务器
npm run serve
- 测试Android 编译和打包
weex platform add android
weex run android