preface

It took nearly half a month, finally put the micro channel web development of the small project to test, in the continuous progress of the project summed up a set of micro channel web development process, enough to meet the use of the development environment, now share it out for you. WeChat webpage development demo has been uploaded to Github, you can clone it: Weike-Learning

1. Environment preparation

Because the development of wechat requires a domain name, the first step to solve the development problem is to have a domain name. We don’t need to buy a domain name, but we can solve this problem by using the Intranet mapping method provided by third-party software, such as peanut shell software.

1.1 domain name solution

Here are two solutions. The advantage of using peanut shell is that the domain name is fixed, and the disadvantage is that it charges (but the cost is not high, just 6 yuan). The advantage of using ngrok is that it is free, but the domain name is randomly generated and accessed from abroad, which is a bit slower.

1.1.1. Peanut shells

  1. Download the Peanut Shell client
  2. Register or log in
  3. To purchase a public domain name, the approximate cost is 6 to 8 yuan
  4. Log in to the client and configure the server on the Intranet to which your public domain name is mapped:

Note: Since my server is running inside a virtual machine, the configured address is my Linux address and the port is the port number that the server listens for.

  1. Test the domain name configuration successfully

1.1.2, Ngrok

  1. Downloading a Client
  2. No registration or installation is required. Run the following command in a CMD window (Windows) :HTTP 192.168.56.101 ngrok. Exe: 9090
  3. The interface is as follows:

1.2 preparations for wechat terminal

  1. Download the wechat Web developer tool
  2. Apply for a wechat test account

  3. Log in developer tools and test numbers using wechat respectively:

  4. After logging in to the test account successfully, you can get a test number information:

  5. Change the JS interface security domain name to your public domain name. Note: Be sure to fill in the level 1 domain name of your public domain name, otherwise “invalid URL domain” will be displayed when calling the API of wechat SDK later. I only need to fill in ngrok. IO, because I use ngrok.

  6. Configure the page authorization callback domain name: in the test number pageExperience interface permission tableFind the following line in:

Click Modify and enter the domain name you get. Don’t add HTTP, just enter your domain name

  1. Follow your test official account, pick up your mobile phone and scan the QR code of the test number:

Now that we’re almost done, there’s one more small task that needs to be completed after our server starts up, so let’s start the next task.

2. Start the NodeJS server

  1. Download the code weChat- Learning
  2. npm i
  3. npm run dev

  4. Browser access:8c40d2df.ngrok.ioIf this page appears and the above URL indicates that your internal and external network is open:

  5. At this time to go back toWechat test public account, configure the interface configuration information, as shown in the figure:

Each of these configurations has a place in the NodeJS server:

First you have to deal with the wechat server’s getSignature request, so in the demo we will implement this route:

router.get('/getsignature', userController.getSignature)
Copy the code

Then we need to configure the following information in the configuration file: config/development.js

appId: 'wx7f70a1cadda24881',
appSecret: '5da26c0c6d1b9cf5cef5baf76ee784a8',
domain: 'http://8c40d2df.ngrok.io',
appToken: '11111111',
Copy the code

The appToken corresponds to the Token in the figure above.

If the two interfaces correspond to each other correctly, the configuration will be successful when we submit the interface configuration information. If the configuration fails, please confirm whether the wechat request is processed by your server. Normally, one of the following requests should be printed out:

3. Start testing wechat webpage authorization

Now you can test your web page, open wechat Web developer tool, enter your domain name, if all goes well will jump to this page first:

If it is the second login, the following page should be displayed:

Note:

In the wechat development document, it is clearly pointed out that there are two authorization methods: silent authorization and non-silent authorization

1. As mentioned above, for web page authorization with SNSAPi_base as scope, silent authorization is not perceived by users; 2. For the user who has followed the public account, if the user enters the webpage authorization page of the public account from the session or custom menu of the public account, even if the scope is SNSAPi_userinfo, it is silent authorization and the user has no perception. Specifically, the web page authorization process is divided into four steps: 2. Exchange web authorization access_token (different from access_token in basic support) by code. 3. 4. Obtain basic user information through web access_token and OpenID (support UnionID mechanism)Copy the code

That is to say, if you pay attention to the public number, direct access is not the above confirmation of the page

Tips: About unionId

Through the interface of obtaining user basic information, developers can obtain user basic information through OpenID, and if developers have multiple public accounts, they can use the following method to communicate user accounts among multiple public accounts through the UnionID mechanism.

  1. Bind multiple public accounts to the same wechat open platform (open.weixin.qq.com) account, that is, under the same Union

  2. The uniqueness of users can be distinguished by obtaining the UnionID in the user basic information interface. However, it should be noted that the public account can only obtain the UnionID after it is bound to the wechat open platform account. As long as it is a public account under the same wechat open platform account, the user’s UnionID is unique. In other words, the same user, for different applications under the same wechat open platform account, UnionID is the same.

Tips: About OpenId

OpenId generation depends on the public account you access and personal information to generate a unique Hash value, so switching different public accounts will get different OpenId.

The whole wechat webpage authorization is similar to CAS authorization, and its general process is as follows:

4. How to use wechat SDK

After the authorization is successful, you can enter the home page of your server. The home page of Demo is as follows:

4.1. Json Server

In todoController.js there is the following code:

Promise.all([
      request.getCityList(),
      getSignature(`${config.domain}/index`)
    ])
Copy the code

Our list of cities is from another server, so we need to install jSON-server.

Start the JSON server using todolist. json in the demo:

json-server todoList.json