Have encountered the pit

Applets stack up to ten layers

NavigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo navigateTo This is because using the Wx. navigateTo jump saves the current page to the page stack, which is up to ten levels.

The require path does not support absolute paths

Problem: Referencing utils/request.js in deeply nested directory hierarchies requires slow.. / to the root directory

// in page.js
const util = require('.. /.. /.. /.. /utils/util.js');
Copy the code

= = = = = = = = = = = = = = = = = = = = = = = = =

// in app.js
App({
  onLaunch(){},require(path) {
    return require(`${path}`)}})// in page.js
const app = getApp()
const util = app.require('./utils/util.js');
Copy the code

Some compatibility issues

  • The IOS Date constructor does not support dates in the format 2018-04-26 and must be converted to 2018/04/26
  • The IOS operating system does not support WebP
  • Use web-view to open PDF in the small program, IOS can open normally, Android open blank

Solution: use wx.downloadFile and wx.openDocument

wx.downloadFile({
  url: 'https://... /XXX.pdf'.// The address of the PDF to preview
  success: function (res) {
    if (res.statusCode === 200) { / / success
      var Path = res.tempFilePath // Return the temporary address of the file to be used later to open the local preview
      wx.openDocument({
        fileType: 'pdf'.// File type
        filePath: Path, // The path to the file to open
        success: function (res) {
          console.log('Open PDF successfully'); }}}}),fail: function (err) {
    console.log(err); / / fail}})Copy the code

​

The commonly used libraries

​miniprogram-api-promiseExtend the applets API to support Promise

The installation

npm install --save miniprogram-api-promise
Copy the code

To use (Used in open source projects)

Invoke promisifyAll once in the applets portal (app.js). Example:

import { promisifyAll, promisify } from 'miniprogram-api-promise';

const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)

/ / use
wxp.login().then(res= > {
  // do something
})
Copy the code

​wx-promise-proExtend the applets API to support Promise

The installation

npm i wx-promise-pro -S
Copy the code

use

Invoke promisifyAll once in the applets portal (app.js). Example:

import { promisifyAll, promisify } from 'wx-promise-pro'

// promisify All WX's API
promisifyAll()

/ / use
wxp.login().then(res= > {
  // do something
})
Copy the code

​Vant Retry P Applet UI component library

The installation

npm i @vant/weapp -S --production
Copy the code

preview

Plug-ins that may be used

Wechat simultaneous interpretation

introduce

Wechat simultaneous interpretation plug-in is a plug-in package of voice input, text translation and other functions developed by wechat, which is used for third-party applets to call.

experience

Performance optimization

Image Rendering optimization

  • Using compression technology to compress the image, in the picture display quality is not affected too much, you can compress the image moderately
  • The Image component of the applet supports lazy loading by configuring the lazy-load parameter
  • Use CDN service provider (Ali Cloud OSS) to provide the ability to obtain appropriate pictures, support format conversion, quality conversion, size processing
  • Android phones use WebP images
// Get the user's mobile operating system
let supportWebp = false
const res = wx.getSystemInfoSync()
if(res.platform.toLocaleLowerCase() ! = ='ios') {
  supportWebp = true
} else {
  supportWebp = false
}

// In app. WXS uses the services provided by Ali Cloud OSS to convert image formats
var wrapUrl = function (supportWebp, url) {
  var fConfig = ' '
  if (supportWebp) {
    fConfig = '? x-oss-process=image/format,webp'
  }
  return url + fConfig
}

// in wxml
<image src="{{ tools.wrapUrl(supportWebp, url) }}"  />
Copy the code

Reduce code package size

Use the miniprogram slimming tool to reduce the size of the small program code package by eliminating useless files, compressing images, and reusing code

npm install -g miniprogram-slim
Copy the code

The subcontract to load

In some cases, the developer needs to divide the applets into different subpackages, which are packaged into different subpackages at build time and loaded by users as needed. When building a applets subcontract project, the build outputs one or more subcontracts. Each subcontracting applet must contain a main package. The main package, which places the default startup page /TabBar page, and some common resource /JS scripts for all the subpackages; Subcontracting is divided according to the developer’s configuration. When the small program starts, the main package will be downloaded and the page in the main package will be started by default. When the user enters a page in the subpackage, the client will download the corresponding subpackage and display it after downloading. Currently, the subcontracting size of small program has the following limitations:

  • The whole small program all subcontracting size is not more than 20M
  • The size of a single subcontract/main package cannot exceed 2M

Subcontracting the applets optimizes the download time for the first startup of the applets and allows better decoupling and collaboration when multiple teams work together.

Reference article:

  1. How to create small program experience score full marks – Jingxi small program optimization practice
  2. Strongly recommended several micro channel small program development tips, simple and practical​

Other articles by author:

  1. Wechat applets app. OnLaunch and Page. OnLoad asynchrony problem
  2. Hand in hand, take you to the small program mall

​

PS: I open source mall project Bytemall, continue to update, welcome your attention.