认识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

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

  • 怎么获取参数

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

那些坑

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

  • 网速慢,安装淘宝镜像
$ 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;
}

文档

其他

基于weex的app开发脚手架weexplus学习笔记的更多相关文章

  1. iPhone App开发实战手册学习笔记(9)之设计IOS App的目标

    1 前言 如果我们要做一个属于自己的App需要达到那些目标呢,今天就来介绍一下. 2 详述 2.1 关注用户及其需求 你的主要目标永远都是在设计方案之前先想好用户用例.有些开发人员喜欢编写用户故事来确 ...

  2. 初学者福音——10个最佳APP开发入门在线学习网站

    根据Payscale的调查显示,现在的APP开发人员的年薪达到:$66,851.这也是为什么那么多初学的开发都想跻身到APP开发这行业的主要原因之一.每当你打开App Store时候,看着琳琅满目的A ...

  3. 基于51单片机IIC通信的PCF8591学习笔记

    引言 PCF8591 是单电源,低功耗8 位CMOS 数据采集器件,具有4 个模拟输入.一个输出和一个串行I2C 总线接口.3 个地址引脚A0.A1 和A2 用于编程硬件地址,允许将最多8 个器件连接 ...

  4. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  5. ASP.Net开发基础温故知新学习笔记

    申明:本文是学习2014版ASP.Net视频教程的学习笔记,仅供本人复习之用,也没有发布到博客园首页. 一.一般处理程序基础 (1)表单提交注意点: ①GET通过URL,POST通过报文体: ②需在H ...

  6. Windows驱动开发工具 WDK 学习笔记(1)

    目标:能够把电脑当作一个集成有高性能处理器的开发板用起来,当然,还自带了一个高级的操作系统Windows(必须的).总之,就是在一个带了操作系统的高性能开发板上的驱动程序开发. 性质:纯属业余爱好 1 ...

  7. Python 开发与接口测试学习笔记

    这是我跟着虫师学习中积累下来的学习笔记,写得比较简单,适合想学习Python开发与接口测试的初学者学习. 一.开发投票系统 1.参考官网文档,创建投票系统. https://docs.djangopr ...

  8. lua游戏开发实践指南学习笔记1

    本文是依据lua游戏开发实践指南做的一些学习笔记,仅用于继续自己学习的一些知识. Lua基础 1.  语言定义: 在lua语言中,标识符有非常大的灵活性(变量和函数名),只是用户不呢个以数字作为起始符 ...

  9. 基于jdk1.8的HashMap源码学习笔记

    作为一种最为常用的容器,同时也是效率比较高的容器,HashMap当之无愧.所以自己这次jdk源码学习,就从HashMap开始吧,当然水平有限,有不正确的地方,欢迎指正,促进共同学习进步,就是喜欢程序员 ...

随机推荐

  1. SpringMVC中参数绑定

    SpringMVC中请求参数的接收主要有两种方式, 一种是基于HttpServletRequest对象获取, 另外一种是通过Controller中的形参获取 一  通过HttpServletReque ...

  2. CoreData的简单使用

    一.基础知识: CoreData是对SQLite的封装,使用的时候比较方便,减少对SQL语句的使用. CoreData中的核心对象 NSManagedObjectModel:代表Core Data 的 ...

  3. python运行js

    安装 pip install PyExecJS # 需要注意, 包的名称:PyExecJS 简单使用 import execjs execjs.eval("new Date") 返 ...

  4. pymongo 学习总结

    1.简介 MongoDB是一种强大.灵活.追求性能.易扩展的数据存储方式.是面向文档的数据库,不是关系型数据库,是NoSQL(not only SQL)的一种.所谓的面向文档,就是将原来关系型数据库中 ...

  5. storage.go

    package storage import (     "fmt"     "os" ) const DEFAULT_STORAGE_ENGINE = &qu ...

  6. Elasticsearch笔记八之脑裂

    Elasticsearch笔记八之脑裂 概述: 一个正常es集群中只有一个主节点,主节点负责管理整个集群,集群的所有节点都会选择同一个节点作为主节点所以无论访问那个节点都可以查看集群的状态信息. 而脑 ...

  7. 【BZOJ 4016】 [FJOI2014]最短路径树问题

    题目链接: TP 题解:  我就是个智障.明明是道大水题,硬是拖了6h. 关于这道题我唯一想说的就是,记得更新拆分后的子树大小!!!我就是ZZ恒(QwQ. 代码: #define Troy 10/26 ...

  8. Python Django 2.2登录功能_2

    #Now 让我们继续对上篇的登录进行操作 #对于csrf,以后再开篇章记录 #修改index.html <form method="post" action="/l ...

  9. Spring AOP就是这么简单啦

    前言 只有光头才能变强 上一篇已经讲解了Spring IOC知识点一网打尽!,这篇主要是讲解Spring的AOP模块~ 之前我已经写过一篇关于AOP的文章了,那篇把比较重要的知识点都讲解过了一篇啦:S ...

  10. Postman----Newman的使用

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #fffff ...