Weex开发体验之一：环境搭建及调测

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&＃xff0c;欢迎购买。点击进入详情

参考文档

https://weex.apache.org/cn/guide/
快速上手所需资料可以在这里找到&＃xff0c;这边简要总结一下&＃xff0c;达到速查的目的。

本机开发环境

windows7 64bit

搭建步骤

1. 下载node
   node包括Javascript的运行环境和npm&＃xff1b;
   下载地址&＃xff1a;https://nodejs.org/zh-cn/download/
   安装好后&＃xff0c;检测版本号&＃xff0c;输入node -v和npm -v;
   
2. 安装weex-toolkit

npm install weex-toolkit -g


然后同样输入weex -v查看weex的版本号:

3. 创建weex项目
这里所说的weex项目不是指单纯的android还是ios或者vue&＃xff0c;而是包括三者的一个整体项目。
命令行cd到一个目录下&＃xff0c;敲入&＃xff1a;weex create awesome-app
这样就创建了一个awesome-app项目&＃xff0c;然后依次输入&＃xff1a;
cd awesome-app&＃xff1a;进入目录
npm install&＃xff1a;安装项目依赖
npm start&＃xff1a;npm run serve
为什么说npm start对应的是npm run serve命令呢&＃xff1f;我们可以在package.json找到配置&＃xff1a;

"scripts": {"start": "npm run serve",


npm run serve命令有什么作用呢&＃xff1f;它可以开启HotReload服务器&＃xff0c;代码改动的将会实时同步到网页中。
也就是说我们更改vue的代码&＃xff0c;在网页上能够实时地显示出更改效果。
运行npm start后&＃xff0c;系统会告诉我们网页访问地址&＃xff0c;也就是网页调试地址&＃xff1a;

网页预览

vue的代码在项目根目录的/src文件夹内&＃xff0c;按照上面描述&＃xff0c;开启HotReload后&＃xff0c;可以在网页上实施查看效果http://192.168.2.104:8081

手机预览

同样可以在手机里面查看效果&＃xff1a;
我们需要先安装一个playground&＃xff1a;https://weex.apache.org/cn/tools/playground.html
然后我们开启HotReload后&＃xff0c;实际上还会有一个预览页面&＃xff0c;地址&＃xff1a;http://192.168.2.104:8081/web/preview.html
效果如下&＃xff1a;

然后用手机上的playground app扫描即可。
注&＃xff1a;

1. 官网的预览页面少了web这个目录&＃xff0c;直接是http://192.168.2.104:8081/preview.html&＃xff0c;这样打不开预览页面的&＃xff1b;
2. 官网的playground只支持简单的功能调测&＃xff0c;如果涉及到复杂的native交互的功能&＃xff0c;需要native开发人员自行修改playground用于调测。

要在android上面看到效果&＃xff0c;需要先建立一个android工程&＃xff0c;在项目根目录下输入如下命令&＃xff1a;

weex platform add android


这样系统会在根目录的platforms目录下创建android目录&＃xff0c;里面就是android工程。
前提是我们本机已经配置好android的开发环境。
我们可以输入&＃xff1a;

weex run ios
weex run android
weex run web


这样的命令直接在手机或者模拟器上启动app。
不过配合前端vue代码&＃xff0c;android这边可以按照如下的调试步骤&＃xff1a;

1. 生成js文件
   根目录下输入npm run build&＃xff0c;生成Web和Native平台可用的bundle文件。
   在根目录的dist文件夹下。
2. 复制js文件
   通过命令npm run copy:android将生成的 bundle 文件拷贝到 Android 项目的资源目录&＃xff0c;也就是app\src\main\assets下。
3. 运行android
   通过weex run android命令启动app&＃xff0c;或者在android studio里面加载该工程后启动。
   注&＃xff1a;
   运行此命令在windows平台会报错&＃xff1a;‘cp’ 不是内部或外部命令,也不是可运行的程序
   解决方法就是用windows的copy命令&＃xff0c;或者手工移动。

1. npm 报错&＃xff1a;npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR!
   一般是在package.json的scripts没有定义这个字段。