小程序高級實戰開發

1.微信基本組件的高級解讀

• 數據綁定，記住使用{{}}
• 列表，使用wx:for，同時設置好wx:key。否則，編輯器老是有紅色警告。
• 條件，使用wx:if,wx:else or wx:elif
• 模板不建議大量使用用，由於沒法使用本身的樣式
• 事件，強記下哪些冒泡事件和非冒泡事件。在使用組件，尤爲是組件套組件時，特別注意此類事件。
• 引入，import = 引入模板文件，include = 複製文件源碼， @import 引入樣式文件
• wxss，理解並使用rpx來替代px

2.自定義組件的使用

a 自定義組件的使用場景

能夠抽象，並重復使用的就能夠作成組件。
好比：分享組件、Tab組件、Pannel組件等等。

b 示例

***組件使用，支持服務器下發分享按鈕文本和分享內容***
<comp-share text="{{shareconfig.ShareButtonText}}"></comp-share>

***share.js***
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    text: {
      type: String,
      value: '分享給好友'
    }
  },
  /**
   * 組件的初始數據
   */
  data: {
  },
  /**
   * 組件的方法列表
   */
  methods: {
    onTapButton (e) {
      this.triggerEvent('tapbutton', {e})
    }
  }
})

***share.wxml***
<view class="flex items-center">
  <button open-type="share" class="button">{{text}}</button>
</view>

***share.wxss***
@import '../../static/wxss/common.wxss';
.button {
  background: linear-gradient(#AEAEF9, #9ED1FA);
  box-shadow: 1rpx 1rpx 1rpx 1rpx #C28230;
    position: fixed;
  align-content: center;
    bottom: 30rpx;
    width: 30%;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
  margin: 0 35%;
  color: white;
  line-height: 60rpx;
}

效果圖

3.目錄結構規劃

4.經常使用組件的封裝

b 請求api

***使用***
// 獲取金幣收入列表
var Request = require('request.js')
function getIncome(page = 1, success) {
  var url = Common.API + '/User/MyIncome/' + page
  Request.Get(url, success)
}

***request.js***
function Get(url, success, err = errhandle, header = HEADER) {
  ShowLoading()
  return wx.request({
    url: url,
    success: function (res) {
      // console.log('geturl', res)
      wx.hideLoading()
      if (res.statusCode != 200) {
        err(res.data)
        return
      }
      success(res.data.data)
    },
    header: header
  })
}

function Post(url, data, success, err = errhandle, header = HEADER) {
  wx.hideLoading()
  return wx.request({
    url: url,
    data: data,
    method: 'POST',
    success: function (res) {
      wx.hideLoading()
      if (res.statusCode != 200) {
        err(res.data)
        return
      }
      success(res.data.data)
    },
    header: header
  })
}

module.exports = {
  Get: Get,
  Post: Post
}

c 分享組件

見本文

5.生命週期分析

• onLoad： 初始化數據，包括：從服務器獲取頁面數據
• onReachBottom： 可用於，列表加載下一頁。
• onShareAppMessage： 設置頁面分享數據。不設置該方法，頁面不支持分享

6.如何發送模板消息

a 小程序須要作什麼

在小程序段必須使用form，獲取到form_id,並和其餘數據一塊兒傳給服務器。

b 後端須要如何操做

在小程序後臺申請模板消息，發送消息是帶上form_id.

*** php代碼示例，使用lavavel框架，和easywechat組件 ***
public static function SendTpl($uid, $coin, $formId, $page = 'pages/index/index')
    {
        $find = User::find($uid);
        if ($find) {
            $data = [
                'touser' => $find->openid,
                'template_id' => 'Bg7IEAsOqXhFsjkcu3Wdz7Im6HTbBYIdgq_T9EnfcSY',
                'page' => $page,
                'form_id' => $formId,
                'data' => [
                    'keyword1' => '您有一筆金幣入帳',
                    'keyword2' => $coin . '金幣',
                    'keyword3' => '哇~有這麼多金幣呢~~趕快到商店裏看看，能夠兌換好東西哦~'
                ]
            ];
            $miniprogram = EasyWeChat::miniProgram();
            $miniprogram->template_message->send($data);
        }
    }

7.巧計

a 片斷代碼的使用技巧

b 與後端的安全認證

8.遇到的一些坑

a 定義在tabbar的頁面，不能使用wx.navigateTo 應該使用wx.switchTab

b 在小程序外，如何帶參數？以及如何獲取參數？

pages/index/index?pid=12直接在頁面後帶參數

• 獲取參數：

onLoad: function (options) {
  if (options.pid) {
      this.apprentice(options.pid)
    }
}

c 組件內列表場景下，點擊按鈕，如何帶上所選行參數？

** js組件的方法列表**
  methods: {
    onTapButton(e) {
      var detail = e.detail.target.dataset.detail
      detail["formId"] = e.detail.formId ? e.detail.formId : ''
      console.log('tapbutton', e, detail)
      this.triggerEvent('tapbutton', { detail: detail, event: e }) // , formId: formId
    }
  }

*** wxml ***
<view class="col-3">
            <form bindsubmit="onTapButton" report-submit="{{true}}">
              <button class="pannel-btn" type="warn" size="mini" data-detail="{{item}}" plain="{{item.lotery > 0 ? false : true}}" formType="submit">{{item.lotery > 0 ? '兌換' : '補貨中'}}</button>
              </form>
</view>

***頁面使用***
bindExchange (e) {
    app.aldstat.sendEvent('商城-商品-' + e.detail.detail.title);
    wx.navigateTo({
      url: '../exchange/exchange'
    })
  }

d 自定義組件，組件內的樣式若是須要使用公共樣式，須要單獨引入。