一、微信小程序wepy框架介绍：微信小程序WePY框架是腾讯官方推出的框架。类似的框架还有美团的mpvue和京东的Taro；目前公司主要使用微信原生方法和官方的wepy框架开发小程序；wepy框架在开发过程中参考了Vue等现有框架的一些语法风格和功能特性，重新封装了原生小程序的开发模式，更接近MVVM架构模式，支持ES6的一些新特性/7。相对易用，提高开发效率；2.WePY项目创建及目录结构WePY的安装或更新是通过npm进行的，WePY命令行工具npminstallwepy-cli-g全局安装或更新在开发目录下生成一个demodevelopmentProjectwepynewmyproject切换到项目目录cdmyproject安装依赖npminstall开启实时编译wepybuild--watchWePY项目的目录结构如下├──dist小程序运行代码目录（该目录是WePY的自动编译的build命令，请不要直接修改该目录下的文件）├──node_modules├──src代码写入目录（该目录为使用WePY后的开发目录）|├──componentsWePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）||├──com_a.wpy可重用WePY组件a||└──com_b.wpy可重复使用的WePY组件b|├──pagesWePY页面目录（属于完整页面）||├──index.wpy索引页面（构建后会在dist目录下的pages目录下生成index.js、index.json、index.wxml和index.wxss文件）||└──other.wpy其他页面（构建完成后，dist目录下的pages目录下会生成other.js、other.json、other.wxml和other.wxss文件）|└──app.wpy小程序配置项（全局数据、样式、声明钩子等；构建完成后，dist目录下会生成app.js、app.json和app.wxss文件）└──package.json项目的package配置项目构建完成后，IDE需要配置代码高亮，文件后缀为.wpy可以共享vue的高亮规则，但是需要手动设置。具体配置可以参考wepy的官方文档。总结一下：wepy代码风格和Vue类似，computed，data，methods等，用法类似。熟悉Vue开发的同学可以通过看文档轻松上手，但是还是有很多地方写的容易混淆。总结一下自己在工作中遇到的几个，比如列表循环，条件渲染，父子组件传值等等，下面举例说明：1）。wepy和vuelist循环比较：//wepylist循环，外面可以放一层repeat标签，注意写法和vue的区别{{item}}//vuelist循环，//key不建议直接使用索引index{{item}}
2).wepy和vue的条件渲染中，wepy需要添加{{}}，vue不需要，可以在里面写表达式判断：
3).父子组件传值都是通过子组件中的props来接收的，可以在props中定义可以接收的数据类型，如果不匹配就会报错wepy可以使用.sync修饰符实现父组件数据绑定到子组件的效果，也可以通过设置子组件props的twoWay:true来实现子组件数据绑定到父组件的效果那么如果使用.sync修饰符，在子组件props中添加twoWay:true，就可以实现双向数据绑定；//parent.wpy
data={parentTitle:'p-title'};//child.wpyprops={//静态传递title:String,//从父到子的单向动态传值syncTitle:{type:String,default:'null'},twoWayTitle:{type:String,default:'无',twoWay:true}};onLoad(){console.log(this.title);//p-titleconsole.log(this.syncTitle);//p-titleconsole.log(this.twoWayTitle);//p-titlethis.title='c-title';console.log(this.$parent.parentTitle);//p-title.this.twoWayTitle='双向标题';这个。$申请（）；console.log(this.$parent.parentTitle);//双向标题。---当twoWay为true时，子组件props中的属性值发生变化时，也会改变父组件对应的值this.$parent.parentTitle='p-title-changed';这个。$parent.$apply();console.log(this.title);//'c-title';console.log(this.syncTitle);//'p-title-changed'---带有.sync修饰符的props属性值，在父组件中改变时，也会改变子组件对应的值2、wepy支持自定义组件开发，实现组件复用，减少代码冗余，提高开发效率；3、wepy支持引入npm包，扩展了很多方法；4.支持Promise、ES2015+特性，如asyncawait等；5.支持多种编译器，Less/Sass/Styus、Babel/Typescript、Pug；6.支持多种插件处理、文件压缩、图片压缩、内容替换等；7、支持Sourcemap、ESLint代码规范管理等；8、修改小程序wx.request方法参数，返回Promise对象，优化事件传参。具体用法如下：//wx.requestnativecode:wx.request({url:'xxx',success:function(data){console.log(data);}});//要使用WePY，需要开启Promise支持，参考开发规范章节wepy.request('xxxx').then((d)=>console.log(d));//要使用async/await，需要开启Promise和async/await支持，参考WIKIasyncfunctionrequest(){letd=awaitwepy.request('xxxxx');console.log(d);//原生Event参数传递方式：点我！Page({tapName:function(event){console.log(event.currentTarget.dataset.id)//输出：1console.log(event.currentTarget.dataset.title)//输出：wepy控制台。log(event.currentTarget.dataset.other)//输出ut:otherparams}});//WePY1.1.8及以后版本只允许传字符串点我！methods:{tapName(id,title,other,event){console.log(id,title,other)//output:1,wepy,otherparams}}四、最后的小感悟：总结一下这个文章比较简单，很多地方都不太详细。欢迎大家留言一起交流讨论。不断学习，不断探索和总结。Vue官方开发文档
