Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to build WeChat Mini Programs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Prepare domain names and certificates

Task time: 20min ~ 40min

The Mini Program backend service needs to be accessed through HTTPS. Before the experiment starts, we need to prepare the domain name and SSL certificate.

Domain name registration

If you do not have a domain name, you can purchase it on Tencent Cloud. For more information, please see the following video:

Video-purchase domain names on Tencent Cloud

Domain name resolution

After the domain name is purchased, you need to resolve the domain name to the experimental CVM. The IP of the experimental CVM is:

For domain names purchased from Tencent Cloud, you can add resolution records to the console. For more information, please see the following video:

Video-how to resolve domain names on Tencent Cloud

It will take some time for domain name resolution to take effect. Check whether the domain name is valid [?] through the ping command, such as:

Ping www.yourmpdomain.com

If the information returned by the ping command contains the parsed IP address you set, the resolution is successful.

Note to replace the www.yourmpdomain.com in the following command for your own registered domain name

Apply for SSL certificate

Tencent Cloud provides a free application for SSL certificate. For more information, please see the following video:

Video-apply for SSL certificate on Tencent Cloud

After the application is submitted, the approval result will be notified by SMS. After approval, you can download your certificate file from the SSL console. Please refer to the following video:

Video-download SSL certificate on Tencent Cloud

Build Mini Program development environment

Task time: 15min ~ 30min

Before we start to build our Mini Program server, we need to complete the construction of the client Mini Program development environment.

Register a developer account

If you are not already a Mini Program developer, please register on Wechat public platform first:

For more information on the registration process, please see the following video:

Video-sign up for developer account

If you have already registered, please click next.

Configure Mini Program server information

After logging in to the Wechat public platform, go to Settings-Development Settings-Server Domain name-modify.

After the identity verification is completed by scanning the code, enter the domain name address prepared in the previous step for both request and socket legal domain names.

When the configuration is complete, click Save and submit. You can click the following video to see how to configure:

Video-configure Mini Program server information

Run the supporting Mini Program code

To run the Mini Program code that comes with this lab, please download the following resources:

Experimental matching source code

WeChat Mini Programs development tools

After downloading the source code, please extract it to the local working directory.

After downloading the development tools, please install and start them, and then log in with Wechat scan code.

After logging in, select the local Mini Program project-add the project, using the following configuration:

AppID: enter the AppID of Mini Program. Log in to the public platform and check it in Settings-Development Settings-developer ID.

Project name: fill in any name you like

Project directory: select the supporting source directory that you just extracted (the directory contains app.js)

When you are finished, click add item. For more information, please see the following video:

Video-run the matching Mini Program code

Set up the experimental domain name

In the editing panel of the development tool, select app.js to edit. You need to modify the Mini Program communication domain name [?]. Please refer to the following configuration:

App ({

Config: {

Host: 'www.yourdomain.com' / / fill in your domain name in this place

}

OnLaunch () {

Console.log ('App.onLaunch ()')

}

})

Of course, this step also records the corresponding video:

Video-set the experimental domain name

This setting will be used in all the communication domain names used in the experimental source code. In order for you to carry out the experiment smoothly, please modify the domain name to the one prepared in the previous steps.

Set up HTTP service

Task time: 15min ~ 30min

The following steps will take you to build a HTTP server using Node and Express on the server

Install NodeJS

Install NodeJS using the following command

Sudo apt-get update

Sudo wget https://mc.qcloudimg.com/static/archive/262420521a966befe17dfa0070ddb272/node-v6.11.0.tar.gz

Sudo tar xvf node-v6.11.0.tar.gz

Cd node-v6.11.0

Sudo. / configure

Sudo make

Sudo make install

Sudo cp / usr/local/bin/node / usr/sbin/

After the installation is complete, test the installation results using the following command

Node-v

Write HTTP Server source code

Create a working directory on the server using the following command:

Sudo mkdir-p / data/release/webapp

Enter this working directory

Cd / data/release/webapp

Create a package.json file in the working directory and modify the access permissions for the file.

Sudo touch package.json

Sudo chmod a+r+w package.json

Modify package.json to add the name and version number of our server package, please refer to the following example.

Sample code: / data/release/webapp/package.json

{

"name": "webapp"

"version": "1.0.0"

}

When finished, use Ctrl + S to save the file

Create an app.js in the working directory

Cd / data/release/webapp

Sudo touch app.js

Sudo chmod a+rw app.js

Modify the app.js file and use Express.js to listen on port 8765 [?]. The app.js file can refer to the following sample code.

Sample code: / data/release/webapp/app.js

/ / reference express to support the implementation of HTTP Server

Const express = require ('express')

/ / create an express instance

Const app = express ()

/ / implement a unique middleware that outputs "Response from express" for all requests

App.use ((request, response, next) = > {

Response.write ('Response from express')

Response.end ()

})

/ / listen on the port and wait for the connection

Const port = 8765

App.listen (port)

/ / output server startup log

Console.log (`Server listening at http://127.0.0.1:${port}`);

In this experiment, the opening of port 8765 will be used as the basis for the completion of the experimental steps. For the following experimental steps to proceed smoothly, please do not use other port numbers.

Run the HTTP service

Before we begin, let's install [PM2]

Sudo apt-get install npm

Sudo npm install-g pm2

PM2 installation time may be a little longer, please wait patiently [?]

The Express module is used in our server source code. The following command uses NPM to install Express.

Cd / data/release/webapp

Sudo npm install express-save

After installation is complete, use PM2 to start the HTTP service

Cd / data/release/webapp

Pm2 start app.js

Your HTTP service is now running on http://:8765

To view the log of the service output, use the following command:

Pm2 logs

If you want to restart the service, you can use the following command:

Pm2 restart app

We use PM2 to run, monitor and manage Node processes

The access speed of NPM warehouse in China may not be ideal. If it is too slow, you can try to install it using CNPM's Registry: npm install pm2-g-- registry= https://r.cnpmjs.org/

Set up HTTPS service

Task time: 15min ~ 30min

WeChat Mini Programs requires that the communication with the server be carried out through HTTPS.

Install Nginx

On Ubuntu, you can use apt-get directly to install Nginx

Sudo apt-get install nginx-y

After the installation is complete, use the nginx command to start Nginx:

Sudo / etc/init.d/nginx start

When you visit http://, you can see the Nginx test page.

These are all the contents of the article "how to build WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.