微信小程序wepy框架學(xué)習(xí)和使用心得詳解

npm install wepy-cli -g

wepy new myproject

cd myproject

npm install

wepy build --watch

 ├── dist          小程序運(yùn)行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
 ├── node_modules      
 ├── src          代碼編寫的目錄（該目錄為使用WePY后的開發(fā)目錄）
 |  ├── components     WePY組件目錄（組件不屬于完整頁面，僅供完整頁面或其他組件引用）
 |  |  ├── com_a.wpy   可復(fù)用的WePY組件a
 |  |  └── com_b.wpy   可復(fù)用的WePY組件b
 |  ├── pages       WePY頁面目錄（屬于完整頁面）
 |  |  ├── index.wpy   index頁面（經(jīng)build后，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
 |  |  └── other.wpy   other頁面（經(jīng)build后，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
 |  └── app.wpy      小程序配置項（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會在dist目錄下生成app.js、app.json和app.wxss文件）
 └ ── package.json      項目的package配置

   // wepy 列表循環(huán),外面可套一層repeat標(biāo)簽,注意和vue寫法的區(qū)別
  <repeat for="{{list}}" key="index>
    <view>{{item}}</view>
  </repeat>
  
  // vue 列表循環(huán),外面可套一層template標(biāo)簽
  <template v-for="(item,index) in list" :key="index"> // 不推薦key直接用索引index
    <div>{{item}}<div>
  </template>

<view wx:if="{{show}}"></view>
<div v-if="show"></div>

// parent.wpy
    
    <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
    
    data = {
      parentTitle: 'p-title'
    };
    
    
    // child.wpy
    
    props = {
      // 靜態(tài)傳值
      title: String,
    
      // 父向子單向動態(tài)傳值
      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中的屬性值改變時，會同時改變父組件對應(yīng)的值
      this.$parent.parentTitle = 'p-title-changed';
      this.$parent.$apply();
      console.log(this.title); // 'c-title';
      console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修飾符的props屬性值，當(dāng)在父組件中改變時，會同時改變子組件對應(yīng)的值。

// wx.request原生代碼:
wx.request({
  url: 'xxx',
  success: function (data) {
    console.log(data);
  }
});

// WePY 使用方式, 需要開啟 Promise 支持，參考開發(fā)規(guī)范章節(jié)
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);

// 原生的事件傳參方式:
<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
Page({
  tapName: function (event) {
    console.log(event.currentTarget.dataset.id)// output: 1
    console.log(event.currentTarget.dataset.title)// output: wepy
    console.log(event.currentTarget.dataset.other)// output: otherparams
  }
});

// WePY 1.1.8以后的版本，只允許傳string。
<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
methods: {
  tapName (id, title, other, event) {
    console.log(id, title, other)// output: 1, wepy, otherparams
  }
}