【WeChat applet】Collaborative work and publishing data binding

Hits: 0

Table of contents

🍘 Collaborative work and publishing – Mini Program member management

1. Two aspects of membership management

2. Permissions corresponding to different project members

3. Developer Permission Description

4. Add project members and experience members

🍍Working together and publishing – Mini Program version

1. Different versions in the software development process

2. The version of the applet

🍓 Collaborative work and release – release goes live

1. The overall steps for the launch of the Mini Program

2. Upload code

3. View the uploaded version in the background

4. Submit for review

5. Post

6. Promotion based on Mini Program Code

🍇 Collaborative work and publishing – operational data

1. Two ways to view the operation data of Mini Programs

🍒WXML Template Syntax – Data Binding

1. Basic principles of data binding

2. Define the data of the page in data

3. Format of Mustache syntax

4. Application scenarios of Mustache syntax

🍘 Collaborative work and publishing – Mini Program member management

1. Two aspects of membership management

Mini Program member management is reflected in the administrator ‘s management of Mini Program project members and experience members :

① Project members :

Indicates members participating in the development and operation of the Mini Program

You can log in to the applet management background

Administrators can add, delete project members, and set the roles of project members

② Experience members :

Indicates members who participated in the internal beta test experience of the Mini Program

You can use the trial version of the applet, but you are not a project member

Administrators and project members can add and delete experience members

2. Permissions corresponding to different project members

permission operator Developer data analyst
Developer permissions
Experiencer’s Permission
Log in
data analysis
WeChat Pay
promote
Development management
Development settings
service paused
Disassociate the official account
Tencent Cloud Management
applet plugin
Game operation management

3. Developer ‘s permission description

①Developer permission : You can use the applet developer tools and code development for the functions of the applet

②Experience Permission : You can use the experience version of the applet

③Login authority : You can log in to the applet management background without administrator confirmation

④Development settings : Set the applet server domain name, message push and scan the QR code of the ordinary link to open the applet

⑤ Tencent Cloud Management: Settings related to cloud development

4. Add project members and experience members

🍍 Collaborative work and release – version of applet

1. Different versions in the software development process

In the software development process, different software versions will be produced according to different time nodes, for example:

① While writing the code, the developer conducts a self-test on the project code ( development version )

② Until the program reaches a stable and experienceable state, the developer gives the experience version to the product manager and testers for experience testing

③ After the bugs of the program are finally fixed, the official version is released for external users to use

2. The version of the applet

version stage illustrate
development version Using the developer tools, code can be uploaded into the development build. The development version only retains the latest uploaded code per person. Click Submit for review to submit the code for review. The development version can be deleted without affecting the code of the online version and the version under review.
trial version You can choose a development version as the trial version, and select a trial version.
Version under review Only one code can be under review. After the review results are available, they can be published online, or they can be directly resubmitted for review, overwriting the original review version.
online version The code version used by all online users, the version code will be overwritten and updated after the new version code is released.

🍓 Collaborative work and release – release goes live

1. The overall steps for the launch of the Mini Program

The release of a small program generally goes through the three steps of uploading code -> submitting for review -> publishing .

2. Upload code

① Click the ” Upload ” button in the toolbar at the top of the developer tools

3. View the uploaded version in the background

4. Submit for review

Why do you need to submit for review: In order to ensure the quality of Mini Programs and comply with relevant specifications, the release of Mini Programs needs to be officially reviewed by Tencent. How to submit for review: In the list of development versions, click the ” Submit for Review ” button, follow the prompts on the page to fill in the relevant information, and then submit the Mini Program to Tencent’s official website for review.

5. Post

6. Promotion based on Mini Program Code

Compared with ordinary QR codes, the advantages of small program codes are as follows: ① More recognizable and visual impact in style ② The brand image of Mini Programs can be more clearly established ③ It can help developers to better promote Mini Programs 5 steps to get the applet code: Log in to the applet management background -> settings -> basic settings -> basic information -> applet code and offline material download

🍇 Collaborative work and publishing – operational data

1. Two ways to view the operation data of Mini Programs

① View in “Mini Program Background” 1. Log in to the applet management background 2. Click “Statistics” in the sidebar 3. Click the corresponding tab to see the relevant data ② Use “Mini Program Data Assistant” to view 1. Open WeChat 2. Search for “Mini Program Data Assistant” 3. View the data related to the published Mini Programs

🍒WXML Template Syntax – Data Binding

1. Basic principles of data binding

① Define data in data ② Using data in WXML

2. Define the data of the page in data

In the .js file corresponding to the page, define the data in the data object:

Here is the default index page:

// index.js 
// Get the application instance 
const app = getApp()

Page({
  data : {
     motto : 'Hello World' ,
     userInfo : {},
     hasUserInfo : false ,
     canIUse : wx.canIUse( 'button.open-type.getUserInfo' ),
     canIUseGetUserProfile : false ,
     canIUseOpenData : wx.canIUse( 'open-data .type.userAvatarUrl' ) && wx.canIUse( 'open-data.type.userNickName' ) // If you want to try to get user information, you can change it to false
  },
  // event handler
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // It is recommended to use wx.getUserProfile to obtain user information. Every time the developer obtains the user's personal information through this interface, the user needs to confirm it. The developer properly keeps the avatar nickname that the user quickly fills in to avoid repeated popups
    wx.getUserProfile({
      desc : 'Display user information' , // Declare the purpose of obtaining the user's personal information, which will be displayed in the pop-up window later, please fill in carefully 
      success: ( res ) => {
         console .log(res)
         this .setData({
           userInfo : res.userInfo,
           hasUserInfo : true
        })
      }
    })
  },
  getUserInfo(e) {
    // It is not recommended to use getUserInfo to obtain user information. It is expected that from April 13, 2021, getUserInfo will no longer pop up a pop-up window, and will directly return anonymous user personal information 
    console .log(e)
     this .setData({
       userInfo : e .detail.userInfo,
       hasUserInfo : true
    })
  }
})

Create a new page and open the js file

Page({

  data: {
    word: "content"
  }

})

3. Format of Mustache syntax

To bind the data in data to the page for rendering, use the Mustache syntax (double curly braces) to wrap the variable. The syntax format is: { {name of data to bind}}

4. Application scenarios of Mustache syntax

The main application scenarios of Mustache syntax are as follows: binding content

WXML:

Page({

  data: {
    word: "roll up and rush rush"
  }

})

WXSS:

Page({

  data: {

    image:"/image/a.jpg"
  }

})

Effect:

bind property WXML:

Page({

  data: {

   randomNum:Math.random()*100
  }

})

WXSS:

Page({

  data: {

   randomNum:Math.random().toFixed(2)
  }
})

Effect:

Ternary operation The data of the page is as follows:

Page({

  data: {

   randomNum:Math.random()*100
  }

})

The structure of the page is as follows:

<view>{{randomNum>=50 ? 'greater than or equal to 50' : 'less than 50' }}</view>

The generated random number is: 97.50952738069331>50

arithmetic operations

The data of the page is as follows:

Page({

  data: {

   randomNum:Math.random().toFixed(2)
  }
})

The structure of the page is as follows:

<view>{{randomNum*100}}</view>

You may also like...

Leave a Reply

Your email address will not be published.