Major documentation for project development reference

Mpvue official documentation: http://mpvue.com/mpvue/#_1

WeChat official documentation: https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18080816

Vue official documentation: https://cn.vuejs.org/index.html

Meituan small program framework MPvue squat guide: https://github.com/noahlam/articles/blob/master/%E7%BE%8E%E5%9B%A2%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A1%86%E6%9E%B6mpvue%E8% B9%B2%E5%9D%91%E6%8C%87%E5%8D%97.md

Meituan small program start guide: https://www.cnblogs.com/noahlam/p/8910026.html

Be sure to understand the life cycle

WeChat life cycle: https://developers.weixin.qq.com/miniprogram/dev/image/mina-lifecycle.png?t=18082414

Vue life cycle: https://cn.vuejs.org/images/lifecycle.png

Mpvue life cycle: http://mpvue.com/assets/lifecycle.jpg

Vue Mounted life cycle is triggered only after mpvue onReady. In addition to the Vue lifecycle, MPVue is compatible with the applets lifecycle, but the website states that applets lifecycle hooks are not recommended except in special cases.

The applets get the parameters passed from the previous page in onLoad, for example: options.id

This.$root.$mp.query is called after the onLoad lifecycle is triggered, for example, onShow

Mpvue entering the page is the hook function triggering process

Enter the page components has been destroyed in turn trigger onLoad, onShow, onReady, beforeMount, mounted into has destroyed child components for the first time in turn trigger onLoad, onReady, beforeMount, mounted OnLoad,onShow, and onReady are triggered on the second entry into the destroyed child, and onShow is triggered only on the second entry into the undestroyed page child

Knock down the little blackboard

  • 【mpvue】 The bindChange event in the applet is written as @change in mpvue
  • 【mpvue】 Data in MPvue is not declared as a variable. When v-model is used, no error will be reported, but the changed value will not be obtained
  • 【mpvueDo not use arrow functions on option properties or callbacks, such ascreated: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod()). Since the arrow function is bound to the parent context,thisWill not be Vue instance as you do expect, andthis.a 或 this.myMethodIt’s going to be undefined.
  • [MPvue] You can use vuex
  • 【 Native applets 】 Native applets can be set to the placeholder by placeholder-class styles
  • 【 native applet 】 call wechat applet API pay attention to this point!!
  • No DOM objects in applets!! Don’t manipulate dom!! Use wechat wx.setStorage instead of localStorage
  • [Native applet] Avatars and nicknames can use open-data, no need to call API, but the content obtained can only be displayed and not stored in the database, to save the database use getuserInfo

Guide line pit

  • Mpvue uses Flyio for global request interceptor and interface token verification

    Var Fly = require(var Fly = require("flyio/dist/npm/wx.js"Var fly = new fly (); var fly = new fly (); fly.config.baseURL = BASE_URL var token =' '/ / add interceptors (processing related token validation logic in the interceptor) fly. The interceptors. Request. Use (asyncfunction(config, promise) {// display loading wx.showLoading({title:'Loading... '}) // Set token //let token = wx.getStorageSync('token')
  if(! token) { fly.lock() // getToken().then(res => {return getToken().then(res => {
      token = res
      config.headers['token'] = token
      returnconfig }).finally(() => { fly.unlock(); });});}); }else {
    config.headers['token'] = token
    returnConfig}}) / / intercept the returned data processing fly. The interceptors. Response. Use ((response, promise) = > {wx. HideLoading ()if(! response.data.Success){if (response.data.Code === 401000) {
        token = ' '
        return fly.request(response.request);
      }
      wx.showToast({
        title: response.data.Message,
        icon: 'none',
        duration: 2000
      })
    }
    return response.data
  },
  (err) => {}
)

export default fly

Copy the code

    Reference link: github.com/wendux/fly

  • [mpvue] When the same route is switched, the last page data is retained. id=1 -> pageB? id=2 –back-> pageB? Id =1; id=1; id=1;

    To solve

      onUnload() {// solve the page cache problem after different parameters enter the same page //mpvue step on the trap object.assign (this).$data,this.$options.data())} // Clears data at onUnload hookCopy the code

    Native applets do not have this problem, because there is a hidden attribute webviewId in the data of each native page, the same page with different parameters webviewId is different, and the same parameter webviewId is the same, but MPVue does not seem to deal with this. The data is the same regardless of the parameter on the same page.

    Refer to the link https://github.com/Meituan-Dianping/mpvue/issues/140

  • [mpvue] add file and configure it in project.config.json “XXX is not defined in app.json”

    To solve

    npm run dev
Copy the code

    Because the file compiled by WebPack is determined by the configured entry, the new page does not add entry, so you need to manuallynpm run devthe

  • 【 native small program 】 rich text to change the width of the picture

    To solve

    <rich-text nodes="{{Detail.content}}" type='text'Res. content = content.replace(/\<img/gi,')
Copy the code

    Use the re to style the image (use the vertical-align:top attribute to remove the space between images). Other solutions: Make it mandatory to control the image width when editing rich text, and zoom the large image to 320px to accommodate multiple screens without spilling over

  • [Native applet] Configure the forwarding function in the upper right corner

    To solve

    Define the onShareAppMessage event handler in the Page to customize the forwarding content for that Page. This event requiresreturnAn Object for customizing the forwarding content onShareAppMessage:function (res) {
        if (res.from === 'button') {// From the page forward button console.log(res.target)}return {
          title: 'Custom Forwarding title',
          path: '/page/user? id=123'}}Copy the code

    The global configuration is invalid and the function can only be configured on the specified page for forwarding

  • 【 native small program 】 about whether tabBar page jump between

    To solve

    NavigateTo: Keep the current page, go to a page in the app, (the previous page will not be destroyed, just switch to the background) using wx.navigateBack to the original page. Wx. redirectTo: Closes the current page and switches to a page in the application. Wx. switchTab: Switches to the tabBar page and closes all non-Tabbar pagesCopy the code

    TabBar can use API to control the display and hiding. If a tabBar page is hidden, switch to the tabBar page. Also, use wx.switchTab to switch to the tabBar display and hiding

    
onShow(){
    wx.hideTabBar()
},
onHide(){
    wx.showTabBar()
}

Copy the code

  • [Native small program] The mask cannot cover the tabBar defined by wechat when setting a custom shell layer

    To solve

    Instead of using wechat to configure tabBar, write your own bottom navigation

Add a wechat applets share interface adjustment announcement

As of July 5, when users share messages with friends in widgets and games, developers won’t be able to know whether they’ve been shared or not, nor will they be able to get group ids immediately after sharing. In the latest version of the developer tool, you can choose the base library version 2.0.8 to pre-experience this strategy. Specific adjustment points are as follows:

(1) After the sharing interface is invoked, the sharing result event will not be returned. For details, please refer to forwarding introduction

(2) By calling wx.showShareMenu and setting withShareTicket to true, when the user forwards the small program to any group chat, the shareTicket of this forwarding is no longer supported. However, when this forwarding card is opened by another user in a group chat, shareTicket can still be obtained from app.onlaunch () or app.onshow. For more information about forwarding, see Section