wepy

移动端跨平台开发框架 UPDATE：2020/4/16 uniapp开始部分支持快应用开发 。 UPDATE：微信也正式加入多端大战了， https://github.com/Tencent/kbone 各框架比较 https://ask.dcloud.net.cn/article/35947 *上图严格来讲wepy不是多端框架，只是用vue写小程序；而myvue也是2.0版本后才加入 另一篇比较文章， 传送门 ，结论是： uni-app > taro > mpvue > 原生微信小程序、wepy https://cml.js.org/#/ 滴滴变色龙 https://weex.apache.org/ 阿里作品，Vue.js来开发的。vue和weex的整合解决方案 Eros https://taro.aotu.io/ 京东的一套遵循 React 语法规范的多端统一开发框架（ 几套小程序框架的比较 ） https://ionicframework.com/ angularjs编程语言 https://github.com/Tencent/omi 腾讯推出的 https://uniapp.dcloud.io/ 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 效果体验 https://phonegap

这里说的去除小程序框架其实并不严谨，因为小程序本身也算是一个框架，而且是一个功能更加完善的框架系统。在前端的概念中，我们一般说一个框架是指一个用来帮助开发者构建用户界面的框架，而小程序框架本身不仅仅包含了UI层的功能，还提供了API能力、服务端的能力，所以说小程序框架本身是一个比常规的前端框架更完善的东西，或者说是一个完善的构建应用系统。本文中所说的原生小程序与小程序框架的对比，均指与第三方小程序框架的对比。 在小程序的世界里，原生小程序框架已经足够好，它就是那把给你雕刻小而美应用的雕刻刀，而不必要去寻找一把屠龙刀。 1、框架的取舍 最近Vue作者尤大关于框架设计平衡的分享中也提到了框架的取舍问题。 当我们去构建一个复杂的前端应用的时候，如果没有工具，而是使用原生JavaScript去开发的话，那只会花费更多的时间。对小程序来说，原生小程序框架就是我们的工具，它足以用来构建一个复杂的小程序应用。 然而web应用的开发环境是否也适用于小程序开发呢？ 小程序框架在小程序生态发展的初期的确起到了很大的促进作用，然而随着小程序原生框架的不断完善，这些小程序框架的作用已经不再具备优势。 框架的确给前端带来了生产力的提高，也带动了前端界生态的发展。所以在小程序出现之后，一股框架之风也很快的出现，微信小程序刚推出之后，就出现了两个比较出名的小程序开发框架，wepy、mpvue。

1.最常见的框架官方框架MINA 地址： https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 2.WeUI 小程序 地址： https://weui.io/ 官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。 3.美团小程序框架mpvue 地址： http://mpvue.com/ 官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。 4.组件化开发框架wepy 地址： https://wepyjs.github.io/wepy-docs/ 官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm

背景： 使用VsCode +wepy框架开发微信小程序 操作： 分包 <config> { pages: [ ' pages/login/index ' , ' pages/qrcode/index ' , ], 　 // 分包 ， 红色字体为固定部分 ' subPackages ' : [ { ' root ' : ' pages/settlement ' , // 分包根路径 " pages " : [ ' index ' , ' accountManage/index ' , ' cashout/index ' , ' apply/apply ' , ' apply/dataManage/index ' , ' apply/dataManage/accountInfo/index ' ] } ], 设置重新编译后可以在微信开发工具中查看分包代码量情况 来源： oschina 链接： https://my.oschina.net/u/4257871/blog/4300600

来源： oschina 链接： https://my.oschina.net/u/4385631/blog/4294948

微信小程序使用login获取unionid时可能获取不到，原因可能是该微信账号没有关注小程序所在公众号等。但在微信小程序中使用微信注册，必须要用unionid注册时，大部分用户就会因此无法注册成功。 微信小程序获取unionid的方法(wepy 写法)： wepy.login({ success (res) { wepy.getUserInfo({ withCredentials: true, success (data) { // 获得用户信息的加密数据 即data.encryptedData 　　　　　// 将encryptedData和iv传给后台解密 解密参考文档 https://developers.weixin.qq.com/miniprogram/dev/api/signature.html 　　　　　// 其中session_key的获取需要code即res.code wepy.request({ url: '后台接口地址', data: {code: res.code, encryptedData: data.encryptedData, iv: data.iv} 　　　　　　　... 　　　　　　　success(info) { 　　　　　　　　　console.log(info.unionid ) // 后台返回 　　　　　　　} }) } }) } })

纯粹用来记录wepy及相关联内容，以防再犯~ 1. 接手的wepy项目版本是 1.7.2 ，so我没有初始化的过程.... 2. 安装wepy命令工具， npm install wepy-cli -g ， 在VScode终端安装后可能需要 重启编辑器才能生效，通过wepy -v命令判断是否成功； 3. 结合MinUI框架使用时，安装组件假死一动不动，需要node版本切换为8.x版本（原本10.x）； 4. 小程序元素上加了伪代码（::after）后 会影响事件向上冒泡 （我无知） ，catch失效； 　　 解决办法：多嵌套一层标签，提高显示层级 　　 理由：元素上加了伪代码后多了遮罩层 5. wepy实时编译， wepy build --watch ， 如果实时编译不好使，请手动编译一次，相信我一定要去手动编译； 　　 比如我只改变了template的元素内容，wepy就不会自动编译了，因为它监听不到改变地方！ 　　style部分也有这种情况~ 　　 不知道wepy-cli抽什么风~ 　　不好使可用重启编译命令： wepy build --no-cache 6. wepy 在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行 　　this.$apply() 7. wepy 中使用ES6 async/await 语法时, 需要npm安装'wepy

小程序框架wepy文档 快速入门 项目 创建与使用 安装 wepy 一下安装都通过 npm 安装 安装wepy 命令行工具 npm install wepy-cli -g 在开发目录生成开发demo wepy new myproject 开发实时编译 wepy new myproject 开发实时编译。 wepy build --watch 项目目录结构 dist node_modules src components com_a.wpy com_b.wpy pages index.wpy page2.wpy app.wpy package.json 开发使用说明 使用微信开发者工具新建项目，本地开发选择dist目录。 微信开发者工具 --> 项目 --> 关闭ES6转ES5。 本地项目根目录运行wepy build --watch，开启实时编译。 代码规范： 变量与方法使用尽量使用驼峰式命名，避免使用$开头。 以$开头的方法或者属性为框架内建方法或者属性，可以被使用，使用前请参考API文档。 入口，页面，组件的命名后缀为.wpy。外链的文件可以是其它后缀。 请参考wpy文件说明 使用ES6语法开发。 框架在ES6下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。 使用Promise 框架默认对小程序提供的API全都进行了 Promise

【WePY小程序框架实战一】-创建项目 【WePY小程序框架实战二】-页面结构 父子组件传值 静态传值 静态传值为父组件向子组件传递常量数据，因此只能传递String字符串类型。 父组件 (parent.wpy) <view> <child name="leinov"></child> </view> 子组件(child.wpy) <template lang="wxml"> <view> {{name}} </view> </template> <script> props={ name:String } onLoad(){ console.log(this.name);//leinov } </script> 动态传值 sync修饰符来达到父组件数据绑定至子组件的效果 也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果 如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。 <font color="red">异步数据父子组件传值注意</font> parent <script> export default class Parents extends wepy.page { data = { tabdata:{}, //下面要用这里必须要写上 } async onLoad() {

【WePY小程序框架实战一】-创建项目 【WePY小程序框架实战二】-页面结构 【WePY小程序框架实战三】-组件传值 async await 是对promise的近一步优化,既解决了promise链式then的这种写法壁垒，又让异步请求更像同步，若对async await不太了解的同学可以直接参考阮一峰老师的文章 async 函数的含义和用法 ,这里我们只关注怎么在小程序wepy架构中如何使用。 依赖库 import 'wepy-async-function' app.wpy中启用 export default class extends wepy.app { constructor () { super() this.use('promisify'); } } 使用实例 getData(x){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ if(x%2 === 0){ resolve(x) }else{ reject(`${x}是不正确的输入`); } },x*1000) }) } async onLoad() { try{ let data1 = await this.getData(2); console.log(data1); let data2 = await this.getData(1);