基于weex的app开发脚手架weexplus学习笔记

用vue开发app

Posted by KUNG on April 8, 2018

认识weexplus

weexplus是基于weex官方的二次开发版本,weex和react native一样同属第2代跨平台技术,解决了第一代性能低下,体验不好的问题,同时保留了第一代 多平台一套代码,基于web技术栈,支持动态发版 等所有优点。–weexplus脚手架作者

开发

  • 运行开发环境(默认已经安装好node环境)
    $ npm install  weex-toolkit -g
    $ npm install weexplus -g
    $ git clone XXX //下载项目到本地
    $ cd XXX // 进入项目根目录
    $ npm install
    $ npm run dev
    $ npm run weexplus
    
  • 怎么请求数据?前端已经封装好net模块,使用方法https://weexplus.github.io/doc/mo-kuai/netwang-luo-fang-95ee29.html

20180222151927000473585.png

  • 页面怎么传参数?运用navigator导航控制器模块实现传参(具体参考文档https://weexplus.github.io/doc/mo-kuai/notify.html)

20180222151927123753943.png

  • 怎么获取参数? 通过weexglobalEvent模块的addEventListener监听onPageInit模块的事件(具体参考文档http://weex.apache.org/cn/references/modules/globalevent.html)

20180222151927117348221.png

那些坑

  • 报文件未找到错误(如下图),解决方案:按照报错指定路径新建文件config.json

20180222151926927719367.png

网速慢,安装淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

返回的bug(保存数据多层返回)

//在列表页注册页面
var notify=weex.requireModule('notify');
notify.regist('twoPlusListTab',(p)=>{
    this.status=p.index;
})
navigator.setPageId('twoPlusList');//唯一,最好根据当前页面的文件名来命名

//最后的操作页面返回到首页
var notify=weex.requireModule('notify');
notify.send('twoPlusListTab', {index:0});//传参
nav.backTo('twoPlusList');//返回到列表 
//需要返回刷新
//在列表页注册页面
var notify=weex.requireModule('notify');
notify.regist('twoPlusListTab',(p)=>{
    this.status=p.index;
})
//需要在全局事件监听里设置setPageId
globalEvent.addEventListener("onPageInit", () => {
    navigator.setPageId('twoPlusList');//唯一
})

//在需要刷新的页面
var that = this;
var notify=weex.requireModule('notify');
notify.regist('threeUnlinkList',(p)=>{
    that.refresh();//页面需要有刷新方法
})

//最后的操作页面返回到列表页 twoPlusList,需要写到数据请求的回调函数里
net.post("sinochem/tripartiteContract/add", query, res => {
    modal.toast({ message: "保存成功!" });
    var notify=weex.requireModule('notify');
    notify.send('twoPlusListTab', {index:0});//传参到列表页
    notify.send('threeUnlinkList', {})//跟需要刷新的页面通信
    navigator.backTo('twoPlusList');//返回到列表页
});

常用代码块

  • alert弹窗(weex debug有点坑安卓的基本不能用,有时候需要用这个来做人工断点)
var modal = weex.requireModule('modal');

modal.alert({
    message: 'This is a alert',
    duration: 0.3
}, function (value) {
    console.log('alert callback', value)
})
//不需要回调函数简写
modal.alert({message:'This is a alert');
  • confirm确认框弹窗
//确认框
modal.confirm({
    message: 'Do you confirm ?',
    duration: 0.3
}, function (value) {
    console.log('confirm callback', value)
})
//  有回调函数的确认框
modal.confirm(
    {
        message:"this is message",
        okTitle: "确认",
        cancelTitle: "取消"
    },
    function(obj) {
        if (obj == "确认") {
            modal.alert({message:'确认'});
        } else {
            modal.alert({message:'取消'});
        }
    }
);

正则匹配

//只能输数字 不能输负数(金额、面积)
if(!(/^[-]?[0-9]*\.?[0-9]+(eE?[0-9]+)?$/).test(this.area)||this.area<=0){ 
    modal.toast({message:'请输入正确的合同面积'})
    return false;
}
// 校验身份证号
if(!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/).test(p.identityCode)){
    modal.toast({ message: "请输入正确的身份证号" });
    return;
}

文档

  • weexplus https://weexplus.github.io/doc/
  • weex官方文档 http://weex.apache.org/cn/guide/
  • weex踩坑攻略 https://juejin.im/entry/59577001f265da6c2211848b
  • vue官方文档 https://cn.vuejs.org/
  • weex使用过程中的那些坑 http://tech.dianwoda.com/2017/12/25/weexshi-yong-guo-cheng-zhong-de-na-xie-keng/

其他