Wepy编码规范

技术栈:wepy+zanui

一、安装wepy

全局安装或更新WePY命令行工具

npm install wepy-cli -g

安装依赖

npm  install

开启实时编译

wepy build --watch

二、导入ZanUI

下载

git clone https://github.com/youzan/zanui-weapp.git

使用ZanUI

Step1：打开下载好的zanui找到dist文件包，把整个dist文件拷贝打自己的项目的src下，并更名为zanui.
Step2：在页面中使用zanui，在config中配置

config = {
  usingComponents:{
    "zan-button": "/zanui/btn/index",
    "zan-cell": "/zanui/cell/index"
  }
}

三、Wepy编码规范

1. style中使用scoped
   在定义样式需要在style定义<style lang="less" scoped></style>,表明该样式只作用于当前文件
2. rpx与px
   rpx:px单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应规,定屏幕宽为750rpx。
   所以在开发时我们最好使用设备宽度为750px比较容易计算750px。

3. 使用promise和async

   // 原生代码:
   
   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);
   }

   ① 下载安装babel

   cnpm install --save babel-preset-es2015
   cnpm install --save babel-preset-stage-1

   ② 在wepy.config.js中配置

   babel: {
      sourceMap: true,
      presets: [
         'env',
         'es2015',
         'stage-1'
      ],
      plugins: [
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-object-rest-spread',
        'transform-export-extensions',
        'syntax-export-extensions'
     ]
   }

   ③ 在app.wpy中配置

   import 'wepy-async-function'
   export default class extends wepy.app {
     constructor () {
       super()
       this.use('requestfix')
       this.router = routerList
     }
   }

4. 数据绑定

   // bad
   <view> {{ message }} </view>
   onLoad: function () {
       this.setData({message: 'hello world'});
   }
   // good
   <view> {{ message }} </view>
   onLoad () {
       this.message = 'hello world';
   }

5. Wepy数据绑定
   WePY使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查

   this.title = 'this is title';

   但是在异步函数中更新数据的时候，必须手动调用$apply

   setTimeout(() => {
       this.title = 'this is title';
       this.$apply();
   }, 3000);

6. 组件应用
   WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相 同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。

   <template>
       <view class="child1">
           <child></child>
       </view>
   
       <view class="child2">
           <anotherchild></anotherchild>
       </view>
   </template>
   
   
   <script>
       import wepy from 'wepy';
       import Child from '../components/child';
   
       export default class Index extends wepy.component {
           components = {
               //为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题
               child: Child,
               anotherchild: Child
           };
       }
   </script>

   注意：WePY中，在父组件template模板部分插入驼峰式命名的子组件标签时，不能将驼峰式命名转换成短横杆式命名(比如将childCom转换成child-com)。

7. 组件循环渲染
   当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签<repeat>

   <template>
       <!-- 注意，使用for属性，而不是使用wx:for属性 -->
       <repeat for="{{list}}" key="index" index="index" item="item">
           <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
           <child :item="item"></child>
       </repeat>
   </template>
   

8. props传值
   ① 静态传值

      静态传值为父组件向子组件传递常量数据，因此只能传递**String字符串类型**。

   ② 动态传值

   <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
   
   data = {
       parentTitle: 'p-title'
   };
   
   
   // child.wpy
   
   props = {
       // 静态传值
       title: String,
   
       // 父向子单向动态传值
       syncTitle: {
           type: String,
           default: 'null'
       },
   
       twoWayTitle: {
           type: String,
           default: 'nothing',
           twoWay: true
       }
   };
   
   onLoad () {
       console.log(this.title); // p-title
       console.log(this.syncTitle); // p-title
       console.log(this.twoWayTitle); // p-title
   
       this.title = 'c-title';
       console.log(this.$parent.parentTitle); // p-title.
       this.twoWayTitle = 'two-way-title';
       this.$apply();
       console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
       this.$parent.parentTitle = 'p-title-changed';
       this.$parent.$apply();
       console.log(this.title); // 'c-title';
       console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
   }

9. 组件通信与交互
   wepy.component基类提供$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互