Summary of WeChat Mini Program Basic Knowledge

1. Page file

1. The page file in the applet is divided into four,index.wxml、index.wxss、index.js和 index.json
2. index.wxmlIs the layout file, index.wxssis the style file, index.jsis the logic file, index.jsonis the configuration file
3. The page-level configuration will override the global-level configuration
4. There are only app.wxss, app.jsand app.jsonfiles in the global general configuration file of the applet , but app.wxmlnot the file
5. Applet page-level configuration file has index.js, index.json, index.wxmland index.wxssfiles
6. Layering, configuration layer (.json), view layer (.wxml、.wxss), and logic layer of WeChat applet(.js)

Second, the tabBar component

1. tabBarThe components must be configured list, the number is at least two, and the maximum is five, which listis an array
2. listIt is configured pagePathand text, pagePathfor the page path textto tabthe button text, iconPaththe default image path, selectedIconPathto select the picture path
3. When positionis topnot displayed icon, it is not displayed iconPath, andselectedIconPath
4. positionThe default is bottom, at the bottom
5. colorAs the tabBardefault color selectedColorto tabBarthe selected color
6. The sample code is as follows:

"tabBar":{
    
    
    "backgroundColor": "#030",
    "position": "top",
    "color": "#ccc",
    "selectedColor": "#f00",
    "list": [
      {
    
    
        "selectedIconPath": "",
        "iconPath": "",
        "pagePath": "pages/test/test",
        "text": "首页"
      },
      {
    
    
        "selectedIconPath": "",
        "iconPath": "",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

3. Mini Program Framework MINA

1. Based react nativeresponsive development framework, component-based development, a data driver
2. Divided into view layer and logic layer, data changes, logic will also change
3. Data binding, through interpolation expressions,{ {}}
4. Conditional rendering,wx:if、wx:elif、wx:else
5. List rendering wx:for, and needs time to traverse wx:key, if necessary change the name, double loop inside the loop to get out of the loop, as modified item, compared wx:for-item="user",
   modify index, compared withwx:for-index="idx"
6. Sample code

• test.js

data: {
    
    
    "msg": 'hello word',
    "list": [
      "vue",
      "react",
      "node"
    ],
    "show": true,
    "list2": [
      {
    
    name: "张三", city: "上海", course: ["vue", "react", "node"]},
      {
    
     name: "李四", city: "北京", course: ["vue", "react", "node"]},
      {
    
     name: "王五", city: "深圳", course: ["vue", "react", "node"]}
    ]
  },

• test.wxml

<!--pages/test/test.wxml-->
<text wx:if="{
     
     { show }}">
  {
   
   { msg }}
  {
   
   { list }}
</text>

<view wx:for="{
     
     { list }}" wx:key="{
     
     { index}}">
  {
   
   { item }} {
   
   { index }}
</view>

<view wx:for="{
     
     { list2 }}" wx:key="{
     
     {index}}" wx:for-item="user" wx:for-index="{
     
     {idx}}"> 
  {
   
   {user.name}} {
   
   { user.city}} {
   
   { idx }}
  <view wx:for="{
     
     { user.course }}" wx:key="{
     
     { index }}">
    {
   
   { item}} {
   
   { index }}
  </view>
</view>

Fourth, the page configuration of the applet

1. dataIt is the initial data used for the first rendering of the page. When the page is loaded, datait will be in JSONthe form of a string passed to the rendering by the logical layer level, and therefore datathe data must be transformed into JSONtypes: string, number, Boolean, object array.
2. Life cycle function

• onLoad(Object query) Triggered when the page loads, only called once

• onShow() Triggered when the page is displayed/cut to the foreground

• onReady() Triggered when the first rendering of the page is completed, a page will only be called once, which means that the page is ready to interact with the view layer

• onHide() Triggered when the page is hidden/cut into the background

• onUnload() Triggered when the page is unloaded

3. Page event handler

• onPullDownRefresh() Monitor user pull-down refresh events

• onReachBottom() Monitor user pull-up bottoming event

• onPageScroll(Object object) Monitor user sliding page events

• onShareAppMessage(Object object) Monitor the user's click on the forward button on the page (button component open-type="share") or the "forward" button in the upper right corner menu, and customize the forwarding content

• onResize(Object object) Triggered when the applet screen is rotated

• onTabItemTap(Object object) Triggered when tab is clicked

Five, the global configuration of the applet

1. Global Configuration applet into
   pagesthe page path list, windowthe global default window performance, tabBarthe bottom of the tabperformance bar, networkTimeoutnetwork time-out and debugopen debugmode and so many
2. The global applet configuration app.jsonfile
3. Sample code app.json

{
    
    
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    
    
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#0f0",
    "navigationBarTitleText": "Dell",
    "navigationBarTextStyle": "white",
    "backgroundColor": "pink",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    
    
    "color": "purple",
    "selectedColor": "red",
    "position": "bottom",
    "list": [
      {
    
    
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "resources/buy.png",
        "selectedIconPath": "resources/sell.png"
      },
      {
    
    
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "resources/buy.png",
        "selectedIconPath": "resources/sell.png"
      }
    ]
  },
  "networkTimeout": {
    
    
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": false,
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Six, the logic layer of the applet

1. app.js

//app.js
App({
    
    
  onLaunch: function () {
    
    
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
    
    
      success: res => {
    
    
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
    
    
      success: res => {
    
    
        if (res.authSetting['scope.userInfo']) {
    
    
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
    
    
            success: res => {
    
    
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
    
    
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    
    
    userInfo: null
  }
})

2. index.js

//index.js
//获取应用实例
const app = getApp()

Page({
    
    
  data: {
    
    
    motto: 'Hello World',
    userInfo: {
    
    },
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    
    
    wx.navigateTo({
    
    
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    
    
    if (app.globalData.userInfo) {
    
    
      this.setData({
    
    
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
    
    
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
    
    
        this.setData({
    
    
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
    
    
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
    
    
        success: res => {
    
    
          app.globalData.userInfo = res.userInfo
          this.setData({
    
    
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    
    
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
    
    
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

3. logs.js

//logs.js
const util = require('../../utils/util.js')

Page({
    
    
  data: {
    
    
    logs: []
  },
  onLoad: function () {
    
    
    this.setData({
    
    
      logs: (wx.getStorageSync('logs') || []).map(log => {
    
    
        return util.formatTime(new Date(log))
      })
    })
  }
})

4. index.wxml

<view class="userinfo">
    <button wx:if="{
     
     {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{
     
     {userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{
   
   {userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{
   
   {motto}}</text>
  </view>