针对初入门weex的小白,详细的介绍如何创建项目,如何实现页面跳转。还有附赠源码,喜欢的点个赞吧。
先参考weex环境搭建,确保版本一致。
vue-router
此方案是单页面架构,通过vue-router控制路由跳转。源码戳我
优点:
适合单页面,与单页面应用开发流程相似,容易上手
支持web端,调试方便
缺点:
在移动端跳转生硬
详细步骤:
- 创建项目
## 初始化weex项目
weex create project-name
- 修改webpack.config.js文件
修改入口文件
## 原始
const entry = {};
const weexEntry = {};
## 修改后
const entry = './src/xxx.js';
const weexEntry = './src/xxx.js';
最后编译好的dist目录中,main.js是入口文件
注释 walk()
// walk()
原因分析:
配置文件中walk()会遍历src目录,生成的entry是多个,即多个入口,类似多页面应用,而我们需要一个入口就足够了。
HtmlWebpackPlugin插件是将JSBundle注入到html模板中,虽然entry是多个,但是只有最后一个JS Bundle文件被注入到模板中,这导致每次打开页面都是最后一个页面。
- 在src目录下开发
新建router.js 控制路由
新建main.js 入口文件
新建APP.vue 根组件
注意:
weex内置了vue,所以不需要引入vue
在根组件创建时,要设置默认路由,否则页面空白
navigator
此方案是多页面架构,通过weex内置组件navigator控制路由跳转。源码戳我
优点:
适合多页面,在移动端跳转比较流畅
缺点:
不支持web端,仅限真机调试
详细步骤:
- 创建项目
## 初始化weex项目
weex create project-name
在src目录下直接写项目即可
调试页面
## 调试目录,并指定入口页面
weex debug src -e index.vue
该命令会唤起Chrome浏览器打开调试页面,而且会监听页面的变化,但是需要手动刷新
这个调试主页上会有两个二维码,一个二维码是连接调试,使用Playground App 扫这个二维码开启 Playground 调试;一个二维码是index.js对应的url。
这个命令会编译你指定目录下所有的vue文件,并把编译好的 JS Bundle 部署到 debug 服务器,他们的地址会映射到http://localhost:8080/weex/下
开启调试后,设备列表中会出现您的设备,根据提示进行后续的调试操作。
- 使用Playground App 。
先扫描第一个二维码,连接调试;
再扫描第二个二维码开始调试。