1. Setting up the development environment of "WeChat Mini Program Development Guide"

Development environment construction of "WeChat Mini Program Development Guide"

1.1 Introduction to WeChat Mini Programs

WeChat Mini Program is a brand-new way to connect users and services. It can be easily obtained and disseminated in WeChat, and has an excellent user experience.

Thinking: Why are WeChat Mini Programs so popular?

First of all, for a start-up company, in order to verify the feasibility of a certain business model in the early stage, the standard R&D team is relatively expensive, at least:

One for iOS development, one for Android development, one for UI designer, one for product manager, and one for backend development

To develop a WeChat applet, you only need to:

One front-end WeChat applet development, one UI designer, one product manager, and one back-end development

Of course, in the long run, if you want to become bigger and stronger, it is better to use a standard R&D team to develop native applications, which can provide more powerful functions without various restrictions.

WeChat applets are not only cross-platform, but also do not need to consider the adaptability of various Android models and devices of different sizes.

WeChat applets have a better user experience than mobile browsers for viewing websites/using H5 Apps, and are closer to native App user experience

Sitting on more than one billion users of WeChat, it can be easily shared and forwarded for use, without downloading, hot update, and better security.

1.2 WeChat Mini Program Registration

Before starting, you need to prepare an email address that has not registered a WeChat official account

If you do not have a suitable email account in hand, you can go to 163 mailbox to register one

PS: Give the 163 mailbox a big praise, it is very convenient to apply for registration.

Open the WeChat Mini Program registration page and fill in the required information to register.
insert image description here

PS: After clicking "Register" and opening your email, you will find an activation link, click to open and activate successfully.

1.3 Log in to the background of the WeChat applet to set up

After logging in to https://mp.weixin.qq.com , you can see the AppID of our applet in the menu "Settings" - "Development-Development Management-Settings", where the AppSecret key needs to be generated for the first time.

Here: Be sure to write down the AppID (small program ID) and AppSecret (small program key), which are needed for back-end development.

The background of the WeChat applet has iterated many versions, and it can be seen in the settings and development settings in the early days.

1.4 If a worker wants to do a good job, he must first sharpen his tools

Having said so much, how to develop WeChat applets?

WeChat officially provides official development tools for small programs

After opening the download address, you can see that there are multiple download types, and it is generally recommended to download the stable version insert image description here

1.6 Create a new Hello World WeChat applet

After the software is successfully installed, the first opening may be such an interface, we select the applet in the applet project.
Then fill in the name of the project, the path where the project is saved and other information in turn
It is worth noting that we are only developing and learning here, and we can check and use the test number here.
- In the future, if you want others to use the applet we developed, you can use our AppID.
In the development mode, there are two options, applet and plug-in, we must choose applet here.
Back-end service options, here we choose not to use cloud services, because we choose this for the time being for the sake of learning.
For the template option, it is recommended that we choose the JavaScript basic version to learn, and then choose the TypeScript basic template or use other advanced templates for advanced teaching.

After the project is opened, you can see a file directory similar to the following:

For better learning and understanding, we now plan to convert the output Hello world into, Hello World, a small program!

We only need to change the string bound to motto in index.js.

The complete modified code looks like this:

// index.js
// 获取应用实例
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') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    
    
    wx.navigateTo({
    
    
      url: '../logs/logs'
    })
  },
  onLoad() {
    
    
    if (wx.getUserProfile) {
    
    
      this.setData({
    
    
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    
    
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
    
    
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
    
    
        console.log(res)
        this.setData({
    
    
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    
    
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
    
    
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

Then, click compile, and then click real machine debugging
insert image description here

Here's a place to complain:

If the code is modified, click on the real machine to debug directly, and the result is still the code before the modification, you need to click to compile first. . .

I don't know when WeChat official will fix this bug.

Then a QR code will pop up, scan it with WeChat to open an interface similar to the following:
insert image description here

Here you will find that the effect is different from the preview. . .

Ordinarily, it should have the same effect as the preview, just load the WeChat avatar and nickname.

But in fact, it was possible before, but it is not possible now. Why?

Mini Program User Avatar Nickname Acquisition Rules Adjustment Announcement

This Article Source Code Example Download

Do you understand now? The official sample code is actually outdated.

In the early days, the user's avatar and nickname could be obtained when the applet was started, but it was disabled later. Later, it was required that the user and nickname can only be obtained after clicking the button to authorize, and it is now disabled.

Now, if you want to obtain the nickname and avatar of the WeChat applet, you need to manually select it, which becomes more troublesome. . .

There is no need to go into detail here for the time being, just have a general impression first. In the next blog post, we will share the whole process of how to use WeChat authorized login to establish our account system.

1.5 What learning resources are worth recommending for learning WeChat Mini Programs?

View the official documentation of the WeChat Mini Program
Read physical books or e-books
, such as "WeChat Mini Program Development Practice" produced by Dark Horse Programmer
Follow the blogger's column to learn together

This article is over~

The next article will share the actual combat of WeChat authorized login in the "WeChat Mini Program Development Guide".