This is the 9th day of my participation in the More Text Challenge in August. For more details, see more Text Challenge

Form components

Input, button, checkbox-group, checkbox, radio-group, radio, textarea, picker

The local store

Wechat applet, there are also local storage objects.

Store content

Asynchronous storage

wx.setStorage({

Key: the name of the storage,

Value: stored content,

Success: the callback function after the store is completed

})

Synchronous storage

wx.setStorageSync(key, value);

Key: specifies the name of the storage

Value: specifies the stored content

demo:

wx.setStorageSync("name", {
  a: 1
})
Copy the code

Storage results: View the results in the Storage panel of the console panel

Extract the contents

Asynchronous data extraction

wx.getStorage({

Key: The name of the content to be extracted

Success: callback function after extraction

The callback function takes one parameter, which is an object, and the extracted content is on the parameter object

ErrMsg: Indicates the extracted prompt message

Data: Extracted data

})

Synchronous data extraction

wx.getStorageSync(key)

Key: The name of the content to be extracted

Return value: the extracted data

demo:

var wanglaowu = wx.getStorageSync("name");
console.log(wanglaowu)
Copy the code

Output results:

other

Wx.removestoragesync (key) wX.removeStorage ({key: key})

Delete all data: wx.clearstorage () wX.clearStoragesync ()

Now, there’s a way to pass data between different pages.

URL passes data

When jumping to a normal page, you can pass the data by mounting the Query section to the URL. TabBar pages do not support this mode.

The component jumps to the page and passes data

Delivery mode:

<navigator url="/pages/index/index? a=1&b=2&c=3">

Obtaining method:

There is one parameter in the onLoad lifecycle function of the target page

demo:

<navigator url="/pages/second/second? a=1&b=2&c=3"> Go to the second page </navigator>Copy the code

Output:

Note: Data can be passed in redirectTo mode

<navigator open-type='redirectTo' url="/pages/second/second? a=a&b=b&c=c"> Go to the second page </navigator>Copy the code

Note: The switchTab cannot use query to pass data

The code jumps and passes the data

wx.navigateTo({
  url: "/pages/second/second? a=1&b=2&c=3"
})
Copy the code

Data is passed through global objects

The app.js file is a global lifecycle configuration file. It can be accessed from any page.

In the page.js file:

var app = getApp();
Copy the code

App object:

You can use it to pass data.

For example: in page A, getApp and set A data. Then go to getApp on page B to get the data

The RPX unit

Px is a unit of pixels. Is the unit we use most often. But PX can’t be responsive.

So wechat designed the RPX unit.

750 pieces from left to right.

1rpx is 1/750 of the actual width.

If iPhone5: full width 320px: 1rpx = 320/750

If it is iPhone6: full width 375px: 1rpx = 375/750

The above is the RPX performance of iPhone5 and iPhone6.

Web-View

This component allows users to embed HTML5 pages in wechat mini programs.

Properties: the SRC

demo:

<web-view src="https://www.baidu.com"></web-view>
Copy the code

Warning: Access is not allowed because the service domain name is not configured.

For testing purposes, click the details button at the top of the Edit code panel.

Pop up a panel, in the panel to find do not verify the legitimate domain name, web-view information tick √

Open the component

This component is a component used to get user information. Wx. GetUserInfo interface is used to replace the original WX.

The original interface is not available:

Now: To use through the open-data component

<open-data type="userNickName"></open-data>
Copy the code

The data originally obtained from wX.getUserInfo

“NickName” (type=”userNickName”)

Select * from ‘city’ where type=”userCity”

Type =”userCountry” type=”userCountry”

And so on.

Rule: type=”user” + key

Use the hump.