升级2.0.x版本指引

升级weexbox 2.0.x 使用指引

  • 更新到weexbox 2.0.x 版本后，debug界面的ui发生重大变化。

@weexbox/cli

  1. # 安装cli
  2. cnpm i -g @weexbox/cli
  4. # 新建一个weex工程
  5. weexbox create project-name
  6. # 或者
  7. # 新建一个weex和flutter混合工程
  8. weexbox create project-name -f
  10. # 进入工程
  11. cd project-name
  13. # 安装依赖
  14. cnpm i
  16. # 开始写bug

查看package.json，可以看到新增了许多命令：

  2. "develop": "weexbox-service build develop",
  3. "test": "weexbox-service build test",
  4. "preRelease": "weexbox-service build preRelease",
  5. "release": "weexbox-service build release",
  6. "watchDevelop": "weexbox-service watch develop",
  7. "watchTest": "weexbox-service watch test",
  8. "watchPreRelease": "weexbox-service watch preRelease",
  9. "watchRelease": "weexbox-service watch release",
  10. "debug": "weexbox-service debug",
  11. "lint": "eslint --fix --ext .js,.vue src",

npm run watchDevelop

开发时，我们主要使用watchDevelop命令，其它命令可自行尝试。

初始化的项目里已经内置了 @weexbox/service，它负责调试功能。

在src下建立业务模块，根据给定的项目结构，建立自己的页面结构。

例如：建立一个HelloWorld页面，我们建立的结构为：

升级2.0.x版本指引 - 图1

在HelloWorld/index文件夹中，App.vue以及index.js名字保持不变，App.vue中就是我们自己页面的逻辑内容，可参考*src/page/home/App.vue建立结构，index.js中的内容复制src/page/home/index.js*中的即可。

刚刚在App.vue中书写的代码，我们如何能在app中查看到效果呢？

在项目结构中，运行命令 npm run watchDevelop

例如：

  2. # 代码
  3. npm run watchDevelop

代码编辑器中，会输入如下所示：

升级2.0.x版本指引 - 图2

打开我们自己生成的app（apk或ipa），如图所示

升级2.0.x版本指引 - 图3

点击右边的浮层按钮，点击照相icon，打开摄像头，扫描浏览器打开的页面：

升级2.0.x版本指引 - 图4

iOS扫描后界面为：

升级2.0.x版本指引 - 图5

Android扫描后界面为：(因渲染方式不同，Android会自动打开js调试模式，iOS不需要；在日志等级中，Android默认设置为debug，需要手动调整为log模式，即可查看输入日志了。)

升级2.0.x版本指引 - 图6

手机端进入weex页面，随意更改页面内容，就可以看到页面中的输出了。

自此，我们将手机跟pc联系起来了，我们就能将本地书写的页面在app上预览调试了。

::: danger 确保电脑与手机处于同一网段。 :::

@weexbox/service

初始化的项目里已经内置了 @weexbox/service，它负责打包功能。

编译打包热更新一条龙服务

  1. # 开发环境
  2. npm run develop
  4. # 测试环境
  5. npm run test
  7. # 准生产环境
  8. npm run preRelease
  10. # 生成环境
  11. npm run release

这个步骤会

  • 生成一份内置包到app中，你可以再次构建打包生成app。
  • 生产一份更新包deploy，你可以将它部署到nginx。