1. Advanced interpretation of WeChat basic components

Data binding, remember to use{{}}
List, use wx:for, and set up at the same time wx:key. Otherwise, the editor always has a red warning.
Condition, use wx:if, wx:elseorwx:elif
The template is not recommended to use a lot, because you ca n’t use your own style
Events, strongly note which bubbling events and non-bubbling events. When using components, especially component sets, pay special attention to such events.
Import, import= import template file, include= copy file source code, @importimport style file
wxss, understand and use rpx instead of px

2. Use of custom components

a Custom component usage scenarios

Components that can be abstracted and reused can be made into components.
For example: sharing components, Tab components, Pannel components, etc.

b Example

***组件使用，支持服务器下发分享按钮文本和分享内容***
<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;
}

Renderings

3. Directory structure planning

4. Packaging of common components

b Request 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 Share component

See this article

5. Life cycle analysis

onLoad: Initialize data, including: get page data from server
onReachBottom: Can be used to load the next page in the list.
onShareAppMessage: Set page sharing data. If this method is not set, the page does not support sharing

6. How to send a template message

a What the applet needs to do

In the small program segment, you must use form, get the form_id, and pass it to the server with other data.

b How to operate the backend

Apply for template messages in the background of the applet, and send the message with 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. Crafty

a Tips for using snippet code

b. Security certification with backend

8. Some pits encountered

a Defined in the tabbar page, can not use wx.navigateTo should use wx.switchTab

b How to take parameters outside the applet? And how to get the parameters?

pages/index/index?pid=12Take parameters directly after the page

Get parameters:

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

c. In the list scene in the component, click the button, how to bring the selected line parameters?


** 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'
    })
  }

Advanced practical development of small programs