Application for applets Development Account (AppID)

  1. Log on to the wechat public platform mp.weixin.qq.com
  2. Click Register now: Fill in account information -> Activate Account (email activation)-> Register information (select subject type)
  3. Install the developer tools: mp.weixin.qq.com/debug/wxado…

Ii. Start of small program development:

  1. Reading small application development guide: developers.weixin.qq.com/miniprogram…
  2. Applets framework template deployment: (mpVue framework documentation: mpvue.com)
// Global install vue-cli
$ npm install --global vue-cli

// Create a new project based on the mpvue-QuickStart template
$ vue init mpvue/mpvue-quickstart my-project  
 
// Install dependencies
$ cd my-project
$ npm install

// Start the build
$ npm run dev
Copy the code
  1. Start the wechat developer tool and introduce the WX folder in project directory Dist to preview the simple MPvue applet.

Three. Small program version distinction:

  1. Development version: Use developer tools to run the code and click Upload to upload the code to the developer version.
  2. Experience version:
    • You can select a development version as the experience version, and an AppID has only one qr code of the experience version at a time.
    • Experiencers need to log in to the wechat public platform by using a small program to develop their account and add them to experience members.
  3. Version under review:
    • Select a development version to submit for review only after completing the basic information of the applets.
    • Only one piece of code can be reviewed, and the results can be posted online.
    • Developers should strictly test the version before submitting it for review. If too many reviews fail, the subsequent time may be affected.
  4. Online version: The version of the code used by all users online, which is overwritten and updated after a new version of the code is released.

Iv. Preparation for the release and launch of small programs (review version – online version)

  1. Check wechat development account:
    • Make sure the AppID to be online is correct (modify it in the project.config.json file)
    • Ensure that the online AppID has completed the subject authenticity confirmation through wechat authentication
  2. Check the project environment configuration: Make sure the project environment is switched to ‘production’ (change in SRC /biz/ apiconfig.js)
  3. Check domain name configuration in the production environment :(development-integration-acceptance)
    • Ensure that the server domain name and service domain name of the production environment are successfully added in the configuration server option on the applet public platform
    • The service domain name must be registered by ICP. The new registered domain name can be configured 24 hours later. The domain name format supports only uppercase and lowercase letters, digits, and hyphens (-), but does not support IP addresses. After the service domain name is configured, any valid subdomain name can be opened.
    • Download the verification file and place it in the root directory of the domain name, for example, wx.qq.com, and ensure that the file is accessible.
  4. Fill in the mini program information: If the mini program information is not filled in on the wechat public platform, the audited version cannot be published:
    • Applets name :(4-30 characters in length, one Chinese character equals 2 characters)
    • Small program abbreviation: (Optional: length of 4-10 characters, one Chinese character is equal to 2 characters)
    • The name of the small program involving a specific industry should be provided :(the size of each picture is less than 5M) business license or organization code certificate, which must be affixed with the company’s official seal, trademark registration certificate and other relevant industry legal permission or filing documents, as well as relevant professional or practice certificates
    • Small program head: (format: PNG, BMP, JPEG, JPG, GIF; The recommended image size should be 144px*144px.
    • Small program introduction: the words of introduction is 4~120 words
    • Service category of applets: Select the corresponding service category. For example, trust services in the financial industry. Need to provide: Financial License or Financial Institution License (upload the original or copy, the copy must be stamped with company seal)

Five. The core concept of small program development

  1. Summary of the life cycle process of applets

    • Application lifecycle:
      • OnLaunch: triggered when applets are initialized (globally only triggered once)
      • OnShow: Triggered when the applet starts or enters the foreground display from the background
      • OnHide: triggered when the applet enters the background from the foreground (close in the upper right corner, press the Home button of the mobile device)
      • OnError: Raised when a script error occurs in the applet or an API call fails
    • Page life cycle:
      • OnLoad: listens for the page to load before onShow and onReady (only once before the page is destroyed)
      • OnShow: Listen to page display, trigger event before onReady
      • OnReady: Listens for the first rendering of the page (triggered to indicate that the page is interactive, only triggered once before the page is destroyed)
      • OnHide: Listen page hide (wx.navigateTo switch to another page, bottom TAB switch triggered)
      • OnUnload: Listening page unloads (triggered when wx.redirectTo or wx.navigateBack returns to another page)

  2. Page redirection and routing

Wechat applet uses the form of page stack to manage pages. The host environment of the applet limits the maximum level of this page stack to 10 layers. The page stack data is now [pageA,pageB,pageC], and pageC is at the top, which is the interface that the user sees.

* wx.navigateBack() ({url:'pageD'}) {pageA, pageB, pageC, pageD] * wx.navigateBack(); RedirectTo ({url:'pageE'}) replaces the current page with pageE. Wx. switchTab({url:'pageF'}) switch to TAB page pageF, [pageF] * wx.reLaunch({url:'pageH'}) Restart the applet and open pageH, now the page stack is [pageH].Copy the code
  1. Corresponding relationship between trigger mode of page routing and page life cycle function:
routing trigger Pre-routing page life cycle Post – routed page life cycle
Initialize the The first page that the applet opens There is no onLoad, onShow
Open a new page call API wx.navigateTo onHide onLoad, onShow
Page redirection call API wx.redirectTo onUnload onLoad, onShow
Page back call API wx.navigateBack onUnload onShow
Tab Switch call API Wx. switchTab Case by case Case by case
restart Call API wx. ReLaunch onUnload onLoad, onShow

Six. Small program development step pit collection

  1. IOS screen width adaptation problem

For block-level element labels, use 100% instead of 750rpx (except for absolute and fixed labels). If a padding or border is set, change box-sizing to border-box.

  1. Date in iOS does not support the format yyyY-MM-DD. You can replace the format with YYYY/MM/ DD

  2. Applets page state is not destroyed until onUnload is triggered

Since the page life cycle onLoad is triggered only once before being destroyed, data returned by data() in the page is not actively initialized when the onShow() and onHide() life cycles are triggered. You need to manually rework the data state or use wx.redirectto to jump to the page when you leave the page to trigger the onUnload() behavior.

  1. The level of textarea and input of small programs is too high, resulting in the penetration of the filling content

Native components are at the highest level, so no matter how much z-index is set to other components on the page, they cannot be overlaid on native components. The solution is to hide the Textarea and display the input in a text box when the textarea is finished. When the text input box is clicked, the text is hidden to display the Textarea, and the focus of the Textarea is selected to continue the input.

  1. The widget acoustic component Button cannot remove the default border style

Button ::after{border:none} removes the default border.

  1. Small programs do not support ::placeholder selectors

Add placeholder-class=”place-holder” to the input tag and define the place-holder{color:red; }

  1. How do I get the parameters passed by the applet on the page

This is available in all page components via this.root.root.root.mp.query.

  1. The applets Web-view component cannot preview PDF files directly on Android

Due to the differences between Android and ios in web-view components, the solution is as follows: Use wx.getSystemInfo() to obtain device information, while ios directly uses Web-view to preview PDF files. Wx.downloadfile () is used to download files for the Android system, and wx.openDocument() is used to open files to simulate the preview effect. (The following code has promised part of the applet API)

// First make the applet API promise in utils.js
function wxPromisify(functionName, params) {
  return new Promise((resolve, reject) = >{ wx[functionName]({ ... params,success: res= > resolve(res),
      fail: res= > reject(res)
    });
  });
}
function getSystemInfo(params={}){  // Obtain system information
  return wxPromisify('getSystemInfo',params);
}
function downloadFile(params={}){   // Download the file
  return wxPromisify('downloadFile',params);
}
function openDocument(params={}){   // Open the file
  return wxPromisify('openDocument',params);
}

// Applet preview file fully compatible method

showDocHandle(){
  let docId = this.uuid;
  let resultUrl = `${apiConfig.request.getPubFile}/The ${this.xxxPubUrl}`
  wx.showLoading({title: 'Identifying device! '})
  utils.getSystemInfo()
    .then(res= > {
      if(res.system.indexOf('iOS') != -1){
        wx.hideLoading();
        this.show = true;
        this.resultUrl = resultUrl;
      }else{
        this.show = false;
        wx.showLoading({title: 'Caching files! '});
        return utils.downloadFile({url: resultUrl});
      }
    })
    .then(res= > {
      let tempFilePath = res.tempFilePath;
      wx.hideLoading();
      wx.showLoading({title: 'Opening a file! '})
      return utils.openDocument({filePath: tempFilePath})
    })
    .catch(err= > {
      wx.hideLoading();
      utils.showToast("Failed to cache file!")
    })
    .then(res= > {
      wx.hideLoading()
      utils.showToast("File opened successfully!")
    })
    .catch(err= > {
      wx.hideLoading();
      utils.showToast("Failed to open file!")
      wx.navigateBack({delta:1})})}Copy the code