1. Configure/use global variables

When you first create the applet, you should notice that in the framework that initializes the project, there is an app.js configuration file in the root directory.

Configuration: We simply place global variables into globalData as arrays.

Use: When you need to use configured global variables in other JS pages:

  1. First, we need to get the application instance const app = getApp()

  2. ImgServer: imgServer: app.globalData. ImgServer: app.globalData

  3. Of course, it can also be used at any time in js in the corresponding click event

var test_imgServer = app.globalData.imgServer; // Assign console.log(test_imgServer) // Use </pre>Copy the code

2. What other method is there to reference a variable in a configuration file other than using const

Wechat applet defines a tool file utils, whose JS file is intended to be valid within this file. When other sub-pages want to call js methods or variables in this file, two steps are required:

  1. In the js file where utils is called, the object-oriented mode model outputs: module.exports={function name to call: function name to call};

  2. Var object=require(“utils is called by the js file address “); You can print object to see the method being called.

3. Wechat applet requests data from the backgroundmethod: 'POST'andmethod: 'GET'

  • Get is used to Get data from the server, and Post is used to pass data to the server

  • Get is insecure because the data is placed in the requested URL during transmission

  • The data transmitted by Post can be correctly translated into Chinese by setting the encoding. The data transmitted by Get does not change

4. Use the custom navigation bar

Navigation bar as a common component to do simple encapsulation, of course, you can also directly copy the code structure to modify their own, to achieve personalized purposes.

  1. Get system information in app.js:
onLaunch: function() { wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; }})},Copy the code
  1. Remove the system navigation bar in the app. json configuration and import components globally
"window": {
 "navigationStyle": "custom"
},
"usingComponents": {
 "cu-custom":"/colorui/components/cu-custom"
}
Copy the code
  1. WXML can be called directly from your own page.wxml page
<cu-custom bgColor=" bG-gradual -pink" isBack="{{true}}"> <view slot="backText"> Return </view> <view slot="content"> Navigation bar </view> </cu-custom>Copy the code

5. Wechat applet about page data transmission

If the data from page A is transmitted to page B, I use the method of URL splicing string to achieve this. The URL here refers to the link path when A jumps to page B. On page A:

Wx. NavigateTo ({url: '.. /.. /.. /pages/trade/tradeParticulars/pay/payment/payment? haha=' + JSON.stringify(that.data.courseInfo.pinList) + '&www=' + that.data.courseInfo.name / * this is the path of the jump page B behind the question mark is transmitted from A page with the data of different data connection with A plus sign, also use number and connection between the key and the value (like this = '+' & WWW. That data. CourseInfo. Name) passed the content of the brackets is A parameter, And the key value must be enclosed in quotes */})},Copy the code

Here I would like to distinguish between the preach the difference between the array when the array, use the following methods: JSON. The stringify (that) data. CourseInfo. PinList) / / pass to the JSON object into a string; When page B receives, the code is as follows:

Parse (options.haha) var that = this var haha = json. parse(options.haha) // Convert the received string into a JSON object Var WWW = options.www) that.setdata ({haha: haha[0]. Name, WWW // single data is directly used})Copy the code

From: www.cnblogs.com/houyi521/p/… Personal note: in addition to splicing can also use global variables, save to the buffer and other methods

6. New methods in ES6Object.keys()

The object.keys () method returns an array of the given Object’s own enumerable properties. If our object is empty, it returns an empty array,

If (object.keys (Object).length === 0) {return false // If null, return false} return true // If not null, this step will be executed, return trueCopy the code

7. The following error occurs when uploading cloud functions:

Error: ResourceNotFound FunctionName, FunctionName specified resources does not exist. (A213CA69-D274-471E-A411-D225E185A597)

  1. In cloud Development Control-Cloud Functions, manually create a new function name with the same name

  2. In the wechat developer tools in the bar cloud function re-upload deployment can be

8.openid

9. Empty judgment of wechat small program

  1. Undefined judgment:
var tmp = undefined; if (typeof(tmp) == "undefined"){ 
 console.log("undefined"); 
}
Copy the code
  1. Judge null:
var tmp = null; if (! tmp && typeof(tmp)! ="undefined" && tmp! =0){ console.log("null"); }Copy the code
  1. Judge NaN:
var tmp = 0/0; if (isNaN(tmp) ){ 
 console.log("NaN"); 
}
Copy the code

Note: NaN is illegal, and if you compare NaN to any value, including itself, you get false, so you can’t use the == or === operators to determine if a value is NaN. Tip: The isNaN() function is usually used to test the results of parseFloat() and parseInt() to see if they represent valid numbers. You can also use the isNaN() function to detect arithmetic errors, such as dividing by 0.

  1. Undefined and null:
var tmp = undefined; if (tmp== undefined) { 
 console.log("null or undefined"); }var tmp = undefined; if (tmp== null) { 
 console.log("null or undefined"); 
}
Copy the code
  1. Undefined, null, and NaN:
var tmp = null; if (! tmp) { console.log("null or undefined or NaN"); }Copy the code

Tip: Generally not so differentiated use this enough.

  1. Null objects allow an object to be initially null by determining whether it is null. In addition, new methods are available through ES6Object.keys()Determine whether an Object is empty: the object.keys () method returns an array of the given Object’s own enumerable properties. If our object is empty, it returns an empty array like this:
Var a = {} object.keys (a) // We can use object.keys () to tell whether it is empty by judging its length. If (object.keys (Object).length === 0) {return false // If null, return false} return true // If not null, this step will be executed, return trueCopy the code
  1. Check whether options existsIf (options){// exists} else{// does not exist}

Error 10.Cannot convert undefined or null to object

Error cause:

  1. Wrong argument passed in object.keys ()

  2. Since undefined and null cannot be converted to objects, an error will also be reported if they are used as arguments to object.assign () (which has only one argument)

11. Refresh the previous page data when returning to the previous page

If you jump from page A to page B (A– >B), you need to refresh the data on page A after the operation on page B is complete. The second method is recommended.

  1. A’s page is called when A’s page is returnedonShow()Method, query and load page A again, the code is:
OnShow: function () {this.onload (); },Copy the code

This method needs to reload the page when returning A, too slow, too Low!!

  1. This method is highly recommended: refresh page A in the background when performing operations on page B, and there is no need to refresh and load page A when returning to page A: The specific steps are divided into two steps:

    1. Add a method to refresh data in the parent page:
changeData:function(){ this.onLoad(); // It is better to write only the code of the area that needs to be refreshed, onload can also be used, low efficiency, a little low}Copy the code
2. Add methods to child pages: and call them where needed (e.g. 'thate.changeparentData ()' after setData in success method)Copy the code
changeParentData: function () { var pages =getCurrentPages(); // Current page stack if (pages.length >1) {var beforePage = pages[pages.length- 2]; // Get the previous page instance object beforePage.changeData(); // trigger method in parent page}}Copy the code

12. Use the page stack to modify the data of the previous page

Two more detailed analytic: blog.csdn.net/mossbaoo/ar… Blog.csdn.net/u012302552/…

13.collection.watchRealize real-time monitoring of cloud data

Introduction to the monitoring process of cloud data using Collection. watch: blog.csdn.net/qq_36696964…

For bugs you may encounter (db.collection(…)) .where(…) .Watch is not a function)

OnLoad: function (options) {const db = wx.cloud.database() db.collection('Messages'). Where ({name: Watch ({onChange: {onChange: {onChange: {onChange: {onChange: {onChange: {onChange: {onChange: Function (snapshot) {console.log('docs\' changed events', snapshot.docChanges) console.log('query result snapshot after the event', snapshot.docs) console.log('is init data', snapshot.type === 'init') }, onError:(err) => { console.error(err) } }) },Copy the code

14. Limit method of reading data more than 20,100 by wechat mini program

Reference: blog.csdn.net/c0411034/ar… No matter the small program side a single read database up to 20, cloud function a single read database up to 100, this is the official limit, is not able to break, but if you can hack into TX to change the limit, then I will worship. So the solution is to break up a single query into several

15. Why can’t the onReachBottom event trigger?

OnReachBottom: onReachBottom: onReachBottom: onReachBottom: onReachBottom: onReachBottom: onReachBottom: onReachBottom

16. The solution to wechat background-image that cannot be displayed on the real computer

Solutions:

  1. Background-image can only be specified in style in WXML, and the first/in the URL needs to be removed. (Invalid specified in WXSS, plus ‘/’ will also be invalid)

  2. B. Transfer the image to Base64 format

Reference: developers.weixin.qq.com/community/d… www.jianshu.com/p/69d5fe483…

17. An error:Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.

Wechat applets to customize tabbar

The example in this document causes the console to report an error: VM113:1 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors

Error: Component and reference component pages cannot use id selector (#a), attribute selector ([a]), and tag name selector. Use class selector instead.

Solutions:

Tip:

#a {} /* Can't use */ [a] {} /* can't use */ / button {} /* Can't use */. A >. B {} /* Can't use */Copy the code

18. Customize tabbar

[WeChat applet custom tabBar and some of the problems] (www.cnblogs.com/Mrrabbit/p/)…

19. Handle the situation that the icon blinks after the tabbar switch of custom tabbar

Custom tab-bar/index.js file:

  1. Assign the selected value defined in data to -1 instead of default

  1. Delete the selected assignment from switchTab (methods). (Note: The selected assignment was already assigned to the onShow method of homepage, category, shopping cart, and my page.)

20.Overlay a translucent color layer on top of the image and overlay text on top of the translucent color layer

HTML code:

<div class="bg_img"> <! <img SRC ="... /photo/8_cont1_6.jpg" height="152" width="225"/> <! < SPAN class="ms"> SPAN tag </span> <! <div class="toumingzi"> </div> </div>Copy the code

The Css code:

.bg_img {/* relative position */ position: relative; width: 225px; height: 152px; }.ms {/* absolute position */ position: absolute; background: #a82327; /* Opacity */ opacity: 0.8; /*span width: 225px; height: 20px; /* offset to div */ left: 0; /*span */ bottom: 0.1px; text-align: center; color: white; */ /*filter:alpha(opacity=60); * / / * - moz - opacity: 0.6. */ } .toumingzi { position: absolute; background: cornflowerblue; /* Opacity */ opacity: 0.8; /* align: center */ text-align: center; /*div tag up */ top: 0.1px; width: 225px; height: 20px; }Copy the code

21. Wechat applet uses weUI extension component to step on pit

The solution

22.TypeError: Cannot read property ‘$router’ of undefined at eval

The solution