weex开发文档

一、spon-weex脚手架命令

tips: 此脚手架插件基于spon,需要提前安装spon工具

  • spon weex add

    添加weex的脚手架页面,包含一个vue文件、js入口文件以及一个html入口文件。

  • spon weex install -n wxc-tabbar/0.0.1

    将封装好的UI组件下载的本地.spon隐藏文件夹,webpack打包将从这个文件夹进行模块依赖。

  • spon weex dev -n xxx

    本地开启服务器进行开发调试,配合weex-loadervue-loader,实时编译.vue文件。与spon mb dev相比删除了线上拉取component组件环节。

    在开发过程中.vue文件会被分别编译成xx.min.jsxx.weex.min.js文件,其中xx.min.jsvue-loader编译,用于H5页面的脚本,而xx.weex.min.jsweex-loader编译,用于APP。

  • spon weex debug -n xxx

    封装了官方的weex-devtool,开启native调试模式。

    spon-weex在每次调用官方weex-devtool时都会检查此weex-dev-tool是否是最新版本,若不是,会强制更新。

  • spon weex build -n xxx

    打包资源。同开发环境,最后会生成两个js文件。xx.min.jsxx.weex.min.js文件

  • git 相关发布流程与当前环境一致

在开发以及调试weex页面期间需要保证spon weex devdev环境始终开启,这样会保证在debug模式下调试app真机时二维码代表的是实时的编译后文件。

此spon-weex插件仅在正常业务项目录下工作

|-shop-m
|--build
|--src
|----pages
|------weex-test
|--------weex-text.js
|--------weex-text.vue
|--------weex-text.html

二、H5端weex的源码管理

介绍

  • 通过npm管理H5weex的依赖文件,包括vue.runtime.js以及weex-vue-render.js
  • 编写三端层面的component与module,需要与iOS、andriod共同约定接口功能。需要保证三端功能一致。

gitlab地址

weex-extend项目

STEPS to demonstrate

  1. npm install
  2. npm run serve 开启服务器
  3. npm run watch 开启webpack watch 同时可以添加component module 组建并实时查看demo效果
  4. npm run build 生成最终的weex.min.js
  5. visit http://localhost:12581/index.html, then you'll see the demo page.

HOW to add component & module

|--src
|----components
|----modules
|----main.js

main.js

这是weex源码管理的入口文件,component和module在这里进行注册

// add module
import shopModal from './modules/shop-modal'  
window.weex.registerModule('shopModal', shopModal)

// add component
import TestComponent from './components/test/test.vue'  
Vue.component('test-component', TestComponent)  

HOW to demonstrate the component you just write?

|--demo
|----index.js
|----index.vue

在index.vue文件中引用写好的module或者component,就能实时查看编写的组件是否正常工作

const shopModal = weex.requireModule('shopModal')  

HOW to get final weex.js for H5

组件编写测试完成后需要编译得到最后的脚本。

|--dist
|----weex.js
|----weex.min.js

http://10.1.2.60:12581/dist/weex.js未压缩版本,有较好提示sourcemap,此地址也可以放到本地服务器进行项目测试

http://10.1.2.60:12581/dist/weex.min.js 压缩版本,适用线上

命令

npm run build  

三、fecomponent层面的前端组件

介绍

将三端提供的component、module封装成weex层面的通用功能UI组件,组件存放在gitlab上的fecomponent组。

gitlab地址

点击前往

例子

wxc-tabbar

编写规范

入口 index.js

// 入口文件依赖需要的vue文件

'use strict';

module.exports = require('./src/wxc-tabbar.vue');  

资源vue文件 src

// 在src文件夹内编写相应的vue文件,vue文件名就会相应的组件名

src/wxc-tabbar.vue  

组件命名规则

该组件project的命名规则wxc-xxx.

wxc开头,代表这个组件是weex component

require('fecomponent/mobi-wxc-tabbar/0.0.1');  

四、components层面的前端组件

说明

将三端提供的component、module封装成weex层面的通用业务UI组件,但是此类组件与业务耦合。components组件存放在shop工程的components目录下。

gitlab地址

点击前往 components

例子

weex-no-list

这个组件是list上拉加载更多时首屏加载后没有数据时的占位图,在许多list页面都会使用,所以抽离成一个组件,但是与业务耦合,所以在当前工程内维护。

编写规范

入口文件

weex-no-list.js

module.exports = require('./weex-wait-list.vue');  

命名规则

weex-xxx形式命名,以在components目录中区分是weex组件。

require('components/weex-no-list/weex-no-list');  

五、如何跳转

由于三端都做了协定,vue文件中编写跳转统一以a标签的href属性约定,编写相对地址。

<a href="/u/order/detail/?orderNumber={{order.orderNumber}}"></a>  

南洋

继续阅读此作者的更多文章

尚妆大厦 http://www.lvdada.org