Wepy編碼規範

時間 2019-11-07

原文原文鏈接

技術棧:wepy+zanuicss

1、安裝wepy

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

npm install wepy-cli -g

安裝依賴github

npm  install

開啓實時編譯npm

wepy build --watch

2、導入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"
  }
}

3、Wepy編碼規範

style中使用scoped
在定義樣式須要在style定義<style lang="less" scoped></style>,代表該樣式只做用於當前文件
rpx與px
rpx:px單位是微信小程序中css的尺寸單位，rpx能夠根據屏幕寬度進行自適應規,定屏幕寬爲750rpx。
因此在開發時咱們最好使用設備寬度爲750px比較容易計算750px。

使用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);
}

① 下載安裝babelpromise

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中配置babel

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

數據綁定app

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

Wepy數據綁定
WePY使用髒數據檢查對setData進行封裝，在函數運行週期結束時執行髒數據檢查
```
this.title = 'this is title';
```
可是在異步函數中更新數據的時候，必須手動調用$apply
```
setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);
```

組件應用
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)。

組件循環渲染
當須要循環渲染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>

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屬性值，當在父組件中改變時，會同時改變子組件對應的值。
}