weex页面跳转方案

针对初入门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 。
  先扫描第一个二维码，连接调试；
  再扫描第二个二维码开始调试。