Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Recently for a long time do not write small program, about the common syntax of small program, feel to forget, today before the reason when writing small program encountered small problems.

Remove the default shadow effect after view/ Navigator clicks

When using Navigator, there will be a default shadow when we click, which the product sometimes requires to remove, otherwise it will affect the user experience.

<navigator hover-class="no-shadow"></navigator>

.no-shadow {
  hover-class:none;
}
Copy the code

To avoid overwriting this style in the page, place it at the bottom of the WXSS.

Hide the Back home button

When we enter the small program for the first time, when we enter not the home page, this time the page will default display “back home” button, this time we need to hide.

You can hide it by calling the hideHomeButton method in the onShow page

wx.hideHomeButton()
Copy the code

Face recognition

Nowadays face recognition is more and more common in the use of small programs, official documents written is still very clear, face recognition, fingerprint recognition and so on (voice print recognition is not currently supported)

Example:

startface(name, idcard) {
   const that = this; wx.startFacialRecognitionVerify({name: that.data.custName,// Name of id card
　　　　idCardNumber: that.data.custIdCard,// Id card number
　　　　success: function(res) {var verifyResult = res.verifyResult; // Authentication result
 　　　　　　// Call the interface},checkAliveType: 2.// Screen flicker (face verification interaction mode, default 0, read numbers)
　　　　fail: err= >{wx. ShowToast ('Please keep the light well lit and your face facing the phone with no shade.')}})},Copy the code

Version update

In the small program, prompt users to update when version is updated, and check and update in app.js:

onLaunch: function(){
  this.updateManager()
},

 updateManager() {
      const updateManager = wx.getUpdateManager();
      updateManager.onUpdateReady(function() {
        wx.showModal({
          title: 'update Prompt'.content: 'The new version is ready. Do you want to restart the application? '.success(res) {
            if(res.confirm) { updateManager.applyUpdate(); }}}); }); },Copy the code

Environmental management

Due to the limitation of small programs, whether it is the experience version, the development version or the official version, when we use the back-end address, we often need to switch back and forth address, which is not only inconvenient, sometimes forget, but also delay the development and testing time. Here is a simple way to write my processing:

  • Start by creating an environment file

(Create legible JS files according to the situation)

  • In the file
const accountInfo = wx.getAccountInfoSync();
 switch (accountInfo.miniProgram.envVersion) {
      case 'develop':
        this.globalData.url = 'Local address'; 
        break;
      case 'trial':
        this.globalData.url = 'Test address';
        break;
      case 'release':
        this.globalData.url = 'Online address';
        break;
      default:
        this.globalData.url = 'Alternate address';
        break;
    }
Copy the code

AccountInfo. MiniProgram. EnvVersion can have three values:

  1. -Lily: We’ll develop it
  2. Trial: Trial
  3. Release: official release

This way, when we submit code, the applet will automatically match the corresponding address.

Organize again, deepen the impression again!