WePY使用

一、WePY介绍

WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

二、WePY 使用
1、WePY的安装或更新都通过npm进行：
npm install -g wepy-cli //全局安装或更新WePY命令行工具（wepy脚手架）： wepy-cli

• wepy -v //查看wepy-cli版本
• wepy init standard //新建wepy小程序项目,1.7.0之前的版本使用：wepy new myproject
• wepy list //查看项目模板
• cd //切换至项目目录
• npm install //安装依赖
• wepy build --watch //开启实时编译

2、代码高亮WebStorm/PhpStorm（其他工具参见：wepy官网代码高亮）
（1）打开Settings，搜索Plugins，搜索Vue.js插件并安装。
（2） 打开Settings，搜索File Types，找到Vue.js Template，在Registered Patterns添加*.wpy，即可高亮。
3、代码优化
（1）代码规范
wepy标签和原生一样
自定义组件命名应避开：原生组件名（input、button、view、repeat等）、WePY的辅助标签
变量/方法名尽量使用驼峰式命名，避免使用$开头（$开头的标识符是WePY内建属性/方法，可在js中以this.的方式直接使用，具体请参考API文档）
app、pages、components文件名的后缀为.wpy，外链的文件可以是其它后缀。 具体请参考wpy文件说明。
支持ES6/7的一些新特性，框架在ES6(ECMAScript 6)下开发（默认使用babel编译），因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。
wepy继承了wx对象的方法，建议在wepy框架开发中不要用到wx对象的方法，虽然运行时效果是一样，但是打包时会cli报错（wepy中没有wx对象）wepy中组件中使用的是class,vue中使用的的是对象。
（2）数据绑定
小程序页面渲染层和JS逻辑层分开的，setData操作实际就是JS逻辑层与页面渲染层之间的通信，在同一次运行周期内多次执行setData操作时，通信的次数是一次还是多次取决于API本身的设计。WePY使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查，一来可以不用关心页面多次setData是否会有性能上的问题，二来可以更加简洁去修改数据实现绑定，不用重复去写setData方法。

//原生小程序
this.setData({
   title: 'this is title'});//通过Page提供的setData方法来绑定数据

//wepy
this.title = 'this is title';


//wepy 在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行
setTimeout(() => {
   
    this.title = 'this is title';
    this.$apply();
}, 3000)


//保留setData方法，但不建议使用setData执行绑定，修复传入undefined的bug，并且修改入参支持： 
this.setData(target, value) 
this.setData(object)

（3）事件绑定以及传参优化

<view @tap="click"></view> //​​​​​ 原 bindtap="click"（省略了.default后缀 ）绑定小程序冒泡型事件
<view @tap.stop="click"></view> //​​​​​ 原catchtap="click"  绑定小程序捕获型事件，如catchtap
<view @tap.capture="click"></view> //​​​​​ 原 capture-bind:tap="click"
<view @tap.capture.stop="click"></view> //​​​​​ 原 capture-catch:tap="click"
<!--事件传参-->
<view @tap="click({
   {index}})"></view> //​​​​​ 原bindtap="click" data-index={
   {index}}

（4）框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发，同时修复了一些原生API的缺陷（如：wx.request的并发问题等）

// 原生代码:

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 支持，参考 WIKI
async function request () {
   
   let d = await wepy.request('xxxxx');
   console.log(d);
}

（5）computed 计算属性computed计算属性（类型: { [key: string]: Function }），是一个有返回值的函数，可直接被当作绑定数据来使用，类似于data属性。需要注意的是，只要是组件中有任何数据发生了改变，那么所有计算属性就都会被重新计算。

  data = {
   
      a: 1
  }

  // 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过{
   { aPlus }}来插值
  computed = {
   
      aPlus () {
   
          return this.a + 1
      }
  }

（6）watcher 监听器
通过监听器watcher（类型: { [key: string]: Function }）能够监听到任何属性的更新。监听器适用于当属性改变时需要进行某些额外处理的情形。

  data = {
   
      num: 1
  }

  // 监听器函数名必须跟需要被监听的data对象中的属性num同名，
  // 其参数中的newValue为属性改变后的新值，oldValue为改变前的旧值
  watch = {
   
      num (newValue, oldValue) {
   
          console.log(`num value: ${
   oldValue} -> ${
   newValue}`)
      }
  }

  // 每当被监听的属性num改变一次，对应的同名监听器函数num()就被自动调用执行一次
  onLoad () {
   
      setInterval(() => {
   
          this.num++;
          this.$apply();
      }, 1000)
  }

（7）WXS (WeiXin Script)
WePY 从1.7.x 版本开始支持 wxs 语法，但语法与原生 wxs 稍有出入

a.wxs是基于原生的wxs去实现的，只是通过编译把现在的语法编译为原生语法

②wxs必须是外链文件。并且后缀为.wxs

③wxs引入后只能在template中使用，不能在script中使用

/**
project
└── src
    ├── wxs
    |   └── mywxs.wxs      wxs 文件 
    ├── pages
    |   └── index.wpy      页面
    └──app.wpy           
**/

// mywxs.wxs

module.exports = {
   
  text: 'This is from wxs'