Weex开发Weex开发技巧weex社区

weex页面跳转方案

2017-10-09  本文已影响1010人  回调的幸福时光

针对初入门weex的小白,详细的介绍如何创建项目,如何实现页面跳转。还有附赠源码,喜欢的点个赞吧。

先参考weex环境搭建,确保版本一致。

vue-router

此方案是单页面架构,通过vue-router控制路由跳转。源码戳我

优点:

适合单页面,与单页面应用开发流程相似,容易上手

支持web端,调试方便

缺点:

在移动端跳转生硬

详细步骤:
## 初始化weex项目
weex create project-name
## 原始
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文件被注入到模板中,这导致每次打开页面都是最后一个页面。

注意:
weex内置了vue,所以不需要引入vue
在根组件创建时,要设置默认路由,否则页面空白

navigator

此方案是多页面架构,通过weex内置组件navigator控制路由跳转。源码戳我

优点:

适合多页面,在移动端跳转比较流畅

缺点:

不支持web端,仅限真机调试

详细步骤:
## 初始化weex项目
weex create project-name
## 调试目录,并指定入口页面
weex debug src -e index.vue

该命令会唤起Chrome浏览器打开调试页面,而且会监听页面的变化,但是需要手动刷新

这个调试主页上会有两个二维码,一个二维码是连接调试,使用Playground App 扫这个二维码开启 Playground 调试;一个二维码是index.js对应的url。

这个命令会编译你指定目录下所有的vue文件,并把编译好的 JS Bundle 部署到 debug 服务器,他们的地址会映射到http://localhost:8080/weex/

开启调试后,设备列表中会出现您的设备,根据提示进行后续的调试操作。

上一篇 下一篇

猜你喜欢

热点阅读