WeChat applet development (the first development environment preparation + demo to obtain WeChat user information)

---

1. Development tool preparation

1. Download WeChat Developer Tools

2. Register a WeChat Mini Program account

---

Two, small case

Effect picture:

---

Development steps:

1. Open the WeChat developer tool and create a new project

2. Delete the original file directory and rewrite as needed

3. Create the required files

1. app.js
   

2. app.json

3. app.wxss
   

4. Right-click index to create a new Page, four files will be automatically generated
   

4. Write app.json file

I found that the style has changed here

5. Write index interface

6. Write index.wxss style

The above has completed the UI drawing of a simple small program. Now add some dynamic data on the basis of the original

---

Three, advanced small cases

1. Data binding ( index.js)

Initialization data

  /** 页面的初始数据*/
  data: {
    
    
    msg:"初始化数据测试"
  },

Use data

<view> {
    
    {
    
     mag }}</view>

Set data this.setData()

  /** 生命周期函数--监听页面加载 */
  onLoad: function (options) {
    
    // onLoad函数在页面刚加载时就 执行这个函数
    console.log(this.data.msg);
    // 使用 this.setData 来设置Data数据
    this.setData({
    
    
      msg:"修改后的数据"
    });
    console.log(this.data.msg);
  },

2. Event binding

Event classification

1. Bubbling event: When an event on a component is triggered, the event will be passed to the parent node.
2. Non-bubble events: Form events and custom events are usually non-bubble events.

Bound event

1. bind binding: Event binding does not prevent bubbling events from bubbling upwards.
2. Catch binding: Event binding can prevent bubbling events from bubbling up.

Use of events

index.wxml

index.js

3. Route jump (for page jump)

API interface address

Use the official API for routing jumps

index.wxml

index.js

4. Obtain basic user information

There are two types of obtaining user information:

1. User authorized: wx.getUserInfo()get through to.
2. User first logs: Through the button open-type="getUserInfo"to get.

1. Get user information by clicking the button

Use the developer documentation to view the use of the button component:

The following is the data printed by console.log(res)

2. Get user information through wx.getUserInfo

  onLoad: function (options) {
    
    // onLoad函数在页面刚加载时就 执行这个函数
    // wx.getuserInfo 获取用户信息
    wx.getUserInfo({
    
    
      success:(res)=>{
    
     // 获取成功
        this.setData({
    
    
          userInfo: res.userInfo,
        });
      },
      fail:(err)=>{
    
     // 获取失败
        console.log(err);
      }
    });
  },

Let's set the login authorization of WeChat applet according to the actual situation!

1. When the user logs in for the first time, he needs to hide the picture and show the button;
2. If the user logs in again and is authorized, the user information will be displayed directly;

To achieve the above effects, you need to use conditional rendering!

When wx:if='condition' is established, the component displays

effect:

---

QQ Exchange Group of Ma Nong Cloud Library: 1139680855