These are not must-know points, but knowing them will make you a little better.

1. rpx

RPX is a unit of length invented by applet to accommodate different widths of mobile phone screens. No matter what kind of phone screen, the width is 750rpx. When you actually run the program, it will automatically convert it to PX based on the size of the phone’s screen. If an element is half the width of the page, just write width: 375rpx; Can.

2. globalData

The globalData is in the app.js file, and the app () method’s parameter configuration object has a globalData property, which is the value we want to share across multiple pages. In fact, any property of a configuration object can be shared, and is usually named globalData for easy identification.

//app.js
App({
  globalData: {
    now: (new Date()).toLocaleString()
  }
});

// index.js
const app = getApp();
Page({
  data: {
    now: app.globalData.now
  }
});
Copy the code

The getApp() function is a function method natively provided by the applet to get the App instance object from the page. Once you get the instance object, you can get the globalData property of the global configuration object from it, and then assign app.globalData.now to the page script’s now property, which becomes the page’s global variable now via data binding.

3. The second argument to this.setdata ()

The second argument to this.setdata () is an assignment. The second argument to the this.setdata () method is a function that automatically calls this anonymous function after the page has changed (this.setdata () has been executed).

// index.js Page({ data: { age: '23' }, nextYearBtn(event) { this.setData({ age: '24'}, function () {wx.showtoast ({title: 'another year ', duration: 3650}); })}});Copy the code

4. Block tags


tag, which is similar to

<block> <view>block2</view> <view>block3</view> </block> <view>block1</view> <view>block2</view> <view>block3</view>Copy the code

Within a file, we have several labels of the same rank. If there is no block node, we need to do this:

<view>
  <view>block1</view>
  <view>block2</view>
  <view>block3</view>
</view>
Copy the code

The effect is to render an extra layer of DOM root nodes, which adds some memory and wastes performance. So blocks are better at dealing with this waste and are more commonly used with wx:if

<block wx:if="{{ isShow }}">
  <view wx:for="{{ arr }}" wx:key="index">{{ item }}</view>
</block>

Copy the code

5. Images are highly adaptive

When the image width is set to scale, such as 100%, the height is not adaptive. I’ve been teasing this for a long time, because the bottom layer of the applet has added width and height to the image, so the default is 240px. The solution is to add a mode attribute to the image element

    <image src="example.png" mode="widthFix"></image>
Copy the code

When you add this mode and set the image to 100% width, the applet automatically calculates its height and makes the image self-adaptive. Nonsense. As soon as I began to write small procedures, I found this, began to think of their own problems, and then found that this is not adapted to this, but also their own attributes. Every time I have to query the pixel ratio of the picture, their conversion ratio, but sometimes the background to base64 verification code, I have to slowly test to know the width to height ratio, or the product asked me why the verification code deformation… Me: Transform! . Is there any weird mobile phone using our product? ! . It’s my problem.

6. The refs

Bindtap =’click(itme)’ bindtap=’click(itme)’ bindtap=’click(itme)’ Wechat creates a property data-[name yourself]=”{{parameter to pass}}”. You can set multiple Settings. Note: WXML sets data-[parameter name] to pass parameters. [parameter name] can only be lowercase, not uppercase

//wxml <view> <text wx:for="{{ arr }}" wx:key="{{ index }}" bindtap='click' data-id="{{ index }}"> {{ item.name }} < / text > < view > / / js function to the click (e) {/ / e click event production parameters, such as position, attribute and so on the let id = e.c. with our fabrication: urrentTarget. Dataset. The id; Wx. NavigateTo ({url: '.. /index/index? id=' + id }) }Copy the code

Of course, we can also do this: WXML page (multiple parameter can be “&”)

<navigator url='.. /index/index? id=1&name=aaa'></navigator>Copy the code

Or add the click event, js jump to pass the parameter with navigateTo, both effects are the same

wx.navigateTo({ url: '.. /index/index? id=1&name=aaa', })Copy the code

And then finally, both of these pages are going to look like this, when onLoad is loaded

OnLoad: function (opts) {console.log(opts)}Copy the code