页面开发

Weex框架要求使用 Vue2.0 进行页面开发。开发者通过编写 *.vue 文件，基于<template>,<style>,<script> 快速构建组件化的应用。

页面开发模式

页面开发模式：

  • 第一种：单页面（SPA） 通过 Vue-router + Vuex 来实现。这种方式是通过Router的方式来进行页面切换，如果页面不需要太多的交互效果，可以使用这种方式来实现。
  • 第二种：独立页面，每个页面都独立一个 bundle js 文件，通过 navigator对象进行页面切换，交互效果较好。

推荐的开发模式

整体架构使用独立页面的方式，在 src/entry 配置好每一个独立入口。通过 buiweex 提供的 $push 和 $pop 来实现页面交互。局部使用 Router 的方式进行组件切换。

以上的方式并不是绝对的，可以根据实际需要进行调整。

第一步，页面入口配置

首先在 src/view 下创建 index.vue 文件（脚手架工程默认会有个app.vue）

结构如下：

  1. <template>
  2.     <div>
  3.         <text>Hello BUI-Weex</text>
  4.     </div>
  5. </template>
  6. <style lang="sass" src="bui-weex/src/css/buiweex.scss"></style>
  7. <script>
  8.     var globalEvent = weex.requireModule('globalEvent');
  9.     module.exports = {
  10.         data: function () {
  11.             return {}
  12.         },
  13.         methods: {},
  14.         mounted(){
  15.             globalEvent.addEventListener("androidback", e => {
  16.                 this.$pop();
  17.             });
  18.         }
  19.     }
  20. </script>

之后，在 src/entry 下创建 index.js

  1. import Index from '../views/index.vue'
  2. import buiweex from 'bui-weex' //将bui-weex注入到全局，无需逐个引用
  3. Vue.use(buiweex);
  4. Index.el = '#root'
  5. new Vue(Index)

webpack 会根据 src/entry 的文件自动在dist下生成index.weex.js，这就是一个独立的Bundle JS。如果没有生成文件，请重新运行 npm run dev。

第二步，页面组装

bui-weex 里面提供了很多UI组件，开发者只需要通过组装的方式进行开发。

引入 js（0.2.0+已经不需要引入）

里面包含了一些工具方法，例如push,pop,alert,toast等:

  1. var buiweex = require("bui-weex");

引入 css

如果想使用到布局等基础样式，需要引入buiweex.scss,注意这里是使用sass的语法。

第三步，页面跳转和传递参数

假设想从 App.vue 跳转到 Index.Vue ，实际上是从 app.weex.js 跳转到 index.weex.js 。

App.vue 中调用如下接口：（假设点击Button）

  1.  var url = this.$getContextPath()+"/index.weex.js";
  2.  this.$push(url);

传递参数:

  1. var params={'name':'yulsh','company':'BingoSoft'}
  2. var url = this.$getContextPath()+"/index.weex.js";
  3. this.$push(url,params);

Index.vue 中获取参数: 

  1. mounted:function(){
  2.     var pageParams=this.$getPageParams();
  3. }

第四步，返回上个页面

  1. methods:{
  2.     "back":function(){
  3.         this.$pop();
  4.     }
  5. }

假如想要在返回到同时刷新 App.vue 页面的数据，可以在 App.vue 的顶级元素中添加 viewappear 来实现。（比较理想的做法还是通过 BroadcastChannel,可惜目前无法使用）

  1. <template>
  2.      <div @viewappear="onViewappear">
  3.          ...
  4.      </div>
  5. </template>

到此，您已经可以基于 bui-weex 提供的工程进行页面开发了！Enjoy ！