Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

To prepare

Download the wechat developer tool

Stable Stable Build | WeChat open document (qq.com)

Creating a new project

  • Project name: The name of the entire project.
  • Directory: Where the project exists.
  • AppID: Create a new project for the first time, where the AppID can use the test number and can be changed at any time during subsequent development.
  • Development mode: select small program on the line.
  • Back-end services: Do not use cloud development. (Small program · Cloud development is a professional small program development service jointly launched by wechat team and Tencent Cloud. Developers can use cloud development to quickly develop small programs, small games, public pages, and native through wechat open ability. Developers do not need to build a server, and can directly use the API provided by the platform for business development without authentication.)
  • Language: Just choose JavaScript.

The file type

The project structure

└ ─ the empty folder / · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · project directory ├ ─ pages / · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · page directory │ ├ ─ Index / · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · the index page │ │ ├ ─ index. The js · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · the index page logic │ │ ├ ─ Index. WXML · · · · · · · · · · · · · · · · · · · · · · · · · · · · the index page structure │ │ └ ─ but WXSS · · · · · · · · · · · · · · · · · · · · · · · · · · · · the index page style │ └ ─ logs / · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · logs page │ ├ ─ logs. The js · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · logs page logic │ ├ ─ logs. WXML · · · · · · · · · · · · · · · · · · · · · · · · · · · · · logs page structure │ └ ─ logs. WXSS · · · · · · · · · · · · · · · · · · · · · · · · · · · · · logs page style ├ ─ utils / · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · public scripts directory │ └ ─ util. Js · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · tool script ├ ─ app. Js · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · application logic ├ ─ app. Json · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · application configuration └ ─ app. WXSS ···································· ·····Copy the code
  • When a page is created, it is created in Pages

Basic file

  • WXML: wechat template file, similar to HTML file for web development. WXML syntax reference.
  • WXSS: wechat style sheet file, used to style the page. WXS syntax reference.
  • Js: Script file, the code logic is written here, syntax rules are very similar to Vue.
  • Json: static data configuration file.

Global configuration file

app.json

{
  "pages": ["pages/index/index"."pages/logs/logs"]."window": {"backgroundTextStyle":"light".// Background text style optional Light dark
    "navigationBarBackgroundColor": "#fff".// Navigation background color, can define any color
    "navigationBarTitleText": "Weixin".// Navigation title, can define any text
    "navigationBarTextStyle":"black"  // Navigation text color, optional black white}},Copy the code

  • Pages: Used to store an array of pages, all pages in the small program will be stored in pages.

  • Window: : set the background color, text color, title, etc. at the top of all pages. This is a global configuration and changes will take effect on all pages. Of course, we can define unique styles within the json configuration of a single page to override the global configuration, such as making the header color different for each page.

Wechat authorized login

Small programs can easily obtain the user identification provided by wechat through the login ability provided by wechat official, and quickly establish the user system within small programs.

The login process

Authorized to log in

  • Obtain code** by **wx.login (user login credentials, valid for 5 minutes, immediately invalid after use, can be obtained several times)

  • Developers need to call code2Session in developer server background and use code to exchange openID, UnionID, session_key and other information

    • Session_key: session keysession_keyUser dataEncrypted signatureThe key. For the security of the application’s own data, the developer serverThe session key should not be issued to applets, nor should it be provided externally.
    • Unionid: unique identifier under wechat open platform account.
    • Openid: Unique identifier of the current applets.
wx.login({
  success (res) {
    if (res.code) {
      // Initiate a network request
      wx.request({
        url: 'https://example.com/onLogin'.// Own server
        data: {
          code: res.code	/ / send a code}})}else {
      console.log('Login failed! ' + res.errMsg)
    }
  }
})
Copy the code

Check whether the login status has expired

Check whether the login status has expired. The login status obtained through the Wx. login interface has a certain timeliness. The longer the user does not use the applets, the more likely it is that the user login state will fail. Otherwise, if the user has been using the mini program, the user login status remains valid. The specific timing logic is maintained by wechat and transparent to developers. The developer only needs to call the wx.checkSession interface to check whether the current login status of the user is valid.

wx.checkSession({
  success () {
    //session_key has not expired and remains valid for this life cycle
  },
  fail () {
    // Session_key has expired and the login process needs to be re-executed
    wx.login()	 // Log in again}})Copy the code

Obtain wechat user information

There are two ways for wechat applet to get user information: wx.getUserProfile (wx.getUserInfo) and open-data

wx.getUserInfo

New versions of applets released after April 13, 2021 will not be able to retrieve user information (avatar, nickname, gender and region) via wx.getUserInfo and will directly retrieve anonymous data. I’m not going to go into the details here.

wx.getUserProfile

For new versions of applets released after April 13, 2021, you need to obtain personal information through wx.getUserProfile.

The code block

<button v-if="canUseGetUserProfile" hover-class="none" @tap="getUserProfile">WeChat login</button>
<button v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo">WeChat login</button>
Copy the code
Page({
  data: {
    userInfo: {},
    hasUserInfo: false.canIUseGetUserProfile: false,},onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true})}},getUserProfile(e) {
    Wx.getuserprofile is recommended to obtain user information. Every time the developer obtains user information through this interface, the user must confirm
    // The developer keeps the avatar nicknames quickly filled in by the user to avoid repeated pop-ups
    wx.getUserProfile({
      desc: 'To improve member information'.// Specify the purpose of obtaining the user's personal information, which will be displayed in the subsequent pop-up window
      success: (res) = > {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true})})},})Copy the code

Successful example

open-data

<! Get user profile picture -->
<open-data type="userAvatarUrl"></open-data>
<! Get user name -->
<open-data type="userNickName"></open-data>
Copy the code

At the bottom of the navigation

The sample

Configure the app.json file

Tabbar is a navigation component for applets

If the applet is a multi-tab application (there is a TAB bar at the bottom or top of the client window to switch pages), you can use the tabBar configuration item to specify the appearance of the TAB bar and the corresponding page to be displayed when the TAB is switched.

"tabBar": {
    "color": "# 000000".// Text color
    "selectedColor": "#169BD5".// Select the text color
  	"position": "bottom".//tabBar position top or bottom
    "list": [{"pagePath": "pages/homepage/homepage".// The corresponding page
        "text": "Home page"./ / text
        "iconPath": ". / ico/homepage. PNG".// Default icon
        "selectedIconPath": ". / ico/home page (2). The PNG"  // The selected icon
      },
      {
        "pagePath": "pages/publish/publish"."text": "Upload"."iconPath": ". / ico/write. The PNG"."selectedIconPath": ". / ico/write (2). The PNG"
      },
      {
        "pagePath": "pages/user/user"."text": "I"."iconPath": ". / ico/personal. PNG"."selectedIconPath": ". / ico/personal (2). The PNG"}},Copy the code
  • The list attribute added to the tabBar configuration item contains at least two to a maximum of five TAB lists.
  • The pagePath in pagePath must exist in pages.