Introduction to syntax commonly used in small programs

This article brings you an introduction to the grammar commonly used in small programs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Next, I will start from the perspective of a beginner. Of course, the following articles will not introduce the knowledge points of small programs in detail one by one. They will mainly compare some ideas of Android. , to express some personal thoughts.

Introduction to api syntax

1. Box model Flex

1. flex-wrap:

nowrap (default): no line wrapping.
wrap: wrap, with the first line at the top.
wrap-reverse: wrap, the first line is below.

2. justify-content: The position where all child views are displayed in the parent View

flex-start (default value): left-aligned
flex-end: right-aligned
center: centered
*space-between: Align both ends, and the intervals between items are equal. Therefore, this can be considered as setting the weight layout, with each sub-View occupying one share. If there is only one sub-View, it is equivalent to flex-start
*space-around: evenly distributed on the row, leaving half of the gap space on both sides. The space between items is twice as large as the space between items and the border. If there is only one child view (acting on the parent view), then the child view is actually centered and aligned

space-between property graphic display:

3. align-content

Content is centered. Only applicable to multi-line flex containers, single line does not work
flex-start: aligned with the starting point of the cross axis.
flex-end: aligned with the end point of the cross axis.
center: aligned with the midpoint of the cross axis.
space-between: Align with both ends of the cross axis, and the intervals between the axes are evenly distributed.
space-around: The intervals on both sides of each axis are equal. Therefore, the distance between the axes is twice as large as the distance between the axes and the frame.
stretch (default value): The axis occupies the entire cross axis.

4. align-items

Align each View in the parent view. Applies to all flex containers.
flex-start: Align the starting point of the cross axis.
flex-end: Align the end point of the cross axis.
center: Align the midpoint of the cross axis.
baseline: The baseline alignment of the first line of text of the item.
stretch (default value): If the item does not set a height or is set to auto, it will occupy the entire height of the container.

5. Example

1) Let the child View of the container be displayed in the center
Add in the container (parent View):

 display: flex;
 align-items: center;

2) Let a View layout is displayed at the bottom or top layer, similar to FramLayout layout
Use z-index attribute:

{        
 position:absolute;              
 left:0px;              
 top:0px;              
  z-index:-1;            
 }

Note:
1) z-index can only be started in absolute Function
2) z-index:-1, the modified View is displayed at the bottom layer (can be used as the background) z-index:1, displayed at the outermost layer

2. js Related api

1, variable

We know that in Java, if it is an object that needs to be used in the entire class, we will declare it as a member variable in the class, in a certain Valid declarations within concrete methods are local variables. Then the corresponding applet is:
var: member variable in java
let: local variable in java

2. Basic data type Boolean

    var test0 = ""            //false
    var test1 = "aaaaaaaa"   // true
    var test2 = null          // false
    var test3 = 11           // true
    var test4 = 0            // false
    var test5 = {}           // true

Summary: This is the same as java The difference is still very big
1) For numeric types (int, float), as long as the number is non-0, it is true;
2) For string (String), only null, and "" empty string are true is false, everything else is false
3) For objects, except that the object is null, it is false, and everything else is true. Even if this object is an empty object {}

3. Function

(1) Function definition
​ Definition in page:

  onShow: function (params) {
    //方法体
  },

Definition in non-page:

function test(params){
    //方法体}

Summary:
​ ​ ​ 1. The first definition must add a "," comma at the end, while the second method cannot add
​ ​ ​ 2. Different from java, the function parameter params does not need to specify a type, so in theory, any type can be passed when calling the method. But this is generally not done. Personally, I think Java is more rigorous and more readable.
3. There is no limit on the number of parameter params

(2) Callback function
1) Function definition

  function request(onFail){
  //调用接口
      wx.request({
        success: function (res) { //接口返回数据
         onFail（res）
      })
    }

2) Function call

             wx.cyou.cache.getCacheValue("key_test", function(result){
                console.log("result==", result)
            })

(3) Notes

1) The applet does not support function overloading and function rewriting
2) When a function calls a function, the function method does not support direct transfer. Look at the following example:

   function request1(function1) {
          request2(function1）
        }
       问题： 这在request1方法调用request2的时候，参数也是一个函数function1，直接将function1传递给request2是不可以的

       解决方式：        
       function request1(function1) {
          request2(new function{
              function1()

          }}）
        }

        在request2方法的回调函数中去调用function1方法

4. Object variables

class Person{
  String name;  int age;
}

In java, if you want to traverse to obtain the Person attribute value name, age, and attribute type String, int. They are all implemented using reflection. So, in small programs, it is much simpler and more crude than Java. Implementation

for (var propertyName in Person){           
var name = propertyName               //对象Person的属性（String、int）
var value = testInfo[propertyName]    // 对象Person的属性值(name、age)
        }

5、export使用

在调用一个类中的方法或者属性值时，必须要在被调用的方法和属性值，定义的时候用export声明

6、disableScroll使用

问题描述：
有时候，小程序跑在苹果手机上时，会左右滑动退出，也会上下滑动，这样体验不好。这个时候要禁止滑动。

 在app.json中，将disableScroll值设置为true 就可以了：  
 "window": {          
 "disableScroll": true
      }

7、页面page数据的获取与设置

  let pages = getCurrentPages()          
  let curPage = pages[pages.length - 1]         //获取当前页面
          if (curPage.route == url){        //比较获取的页面的url是否跟实际的一致(如url:"pages/order/order")
            curPage.setData({                                //设置数据
              usingOrderList: usingOrderList
            })
          }

8、获取所有的页面

          let pages = getCurrentPages()            // 获取上一个页面
          let prePage = pages[pages.length - 2]          //给页面设置数据
          prePage.setData({
            refreshUserInfo:true
          })          //返回到上一个页面
          wx.navigateBack({
            delta: 1
          })

注意事项：
调用getCurrentPages()不需要在page环境中(可以视为Android中的Context环境)，可以在任何地方直接获取，即util等自定义类中同样生效。类似的还有wx.开头的方法

9、showToast时长设置失效问题

  let title = new String(msg)  //延时弹toast,是为了解决有时候在接口请求后，设置的duration时间不起作用
  setTimeout(function () {
    wx.showToast({
      title: title,
      duration: 1200,
      icon: "none"
    })
  }, 100)

10、reLaunch跳转失效问题

     //延时跳转,是为了解决有时候wx.reLaunch不起作用，设置的时间不起作用
    setTimeout(function(){
      wx.reLaunch({
        url: '/pages/home/home'
      })
    },100)

The above is the detailed content of Introduction to syntax commonly used in small programs. For more information, please follow other related articles on the PHP Chinese website!