如何搭建微信小程序

今天小編給大家分享一下如何搭建微信小程序的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　準備域名和證書

　　任務時間：20min ~ 40min

　　小程序后臺服務需要通過 HTTPS 訪問，在實驗開始之前，我們要準備域名和 SSL 證書。

　　域名注冊

　　如果您還沒有域名，可以在騰訊云上選購，過程可以參考下面的視頻：

　　視頻 - 在騰訊云上購買域名

　　域名解析

　　域名購買完成后, 需要將域名解析到實驗云主機上，實驗云主機的 IP 為：

　　<您的 CVM IP 地址>

　　在騰訊云購買的域名，可以到控制臺添加解析記錄，過程可參考下面的視頻：

　　視頻 - 如何在騰訊云上解析域名

　　域名設置解析后需要過一段時間才會生效，通過 ping 命令檢查域名是否生效 [?]，如：

　　ping www.yourmpdomain.com

　　如果 ping 命令返回的信息中含有你設置的解析的 IP 地址，說明解析成功。

　　注意替換下面命令中的 www.yourmpdomain.com 為您自己的注冊的域名

　　申請 SSL 證書

　　騰訊云提供了 SSL 證書的免費申請，申請方式可參考下面視頻：

　　視頻 - 在騰訊云上申請 SSL 證書

　　申請提交后，審批結果會以短信的形式通知。審批通過后，可以到 SSL 控制臺下載您的證書文件，可參考下面的視頻：

　　視頻 - 在騰訊云上下載 SSL 證書

　　搭建小程序開發環境

　　任務時間：15min ~ 30min

　　在開始搭建我們的小程序服務器之前，需要先完成客戶端小程序開發環境的搭建。

　　注冊開發者賬號

　　如果你還不是小程序開發者，請先在微信公眾平臺并注冊：

　　具體注冊流程可參考如下視頻：

　　視頻 - 注冊開發者賬號

　　若您已注冊，請點擊下一步。

　　配置小程序服務器信息

　　登錄微信公眾平臺后，依次進入 設置 - 開發設置 - 服務器域名 - 修改。

　　掃碼完成身份校驗后，request 合法域名和 socket 合法域名均填寫在上一步準備好的域名地址。

　　配置完成后，點擊 保存并提交。您可以點擊如下視頻查看如何進行配置：

　　視頻 - 配置小程序服務器信息

　　運行配套小程序代碼

　　要運行本實驗配套的小程序代碼，請下載下列資源：

　　實驗配套源碼

　　微信小程序開發工具

　　源碼下載后，請解壓到本地工作目錄。

　　開發工具下載后，請安裝并啟動，然后用微信掃碼登錄。

　　登錄后，選擇 本地小程序項目 - 添加項目，使用以下配置：

　　AppID：填寫小程序的 AppID，請登錄公眾平臺后在 設置 - 開發設置 - 開發者 ID 中查看

　　項目名稱：填寫任意您喜歡的名稱

　　項目目錄：選擇剛才解壓的配套源碼目錄(目錄包含 app.js)

　　填寫完成后，點擊 添加項目。具體操作可查看如下視頻：

　　視頻 - 運行配套小程序代碼

　　設置實驗域名

　　在開發工具的 編輯 面板中，選中 app.js 進行編輯，需要修改小程序通信域名[?]，請參考下面的配置：

　　App({

　　config: {

　　host: 'www.yourdomain.com' // 這個地方填寫你的域名

　　},

　　onLaunch () {

　　console.log('App.onLaunch()');

　　}

　　});

　　當然，這步操作也錄制了對應的視頻：

　　視頻 - 設置實驗域名

　　實驗配套源碼所用通信域名都會使用該設置，為了您順利進行實驗，請把域名修改為之前步驟準備的域名

　　搭建 HTTP 服務

　　任務時間：15min ~ 30min

　　下面的步驟，將帶大家在服務器上使用 Node 和 Express 搭建一個 HTTP 服務器

　　安裝 NodeJS

　　使用下面的命令安裝 NodeJS

　　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/

　　安裝完成后，使用下面的命令測試安裝結果

　　node -v

　　編寫 HTTP Server 源碼

　　使用下面的命令在服務器創建一個工作目錄：

　　sudo mkdir -p /data/release/webapp

　　進入此工作目錄

　　cd /data/release/webapp

　　在工作目錄創建 package.json 文件，并修改文件的訪問權限。

　　sudo touch package.json

　　sudo chmod a+r+w package.json

　　修改 package.json 添加我們服務器包的名稱和版本號，可參考下面的示例。

　　示例代碼：/data/release/webapp/package.json

　　{

　　"name": "webapp",

　　"version": "1.0.0"

　　}

　　完成后，使用 Ctrl + S 保存文件

　　在工作目錄創建 app.js

　　cd /data/release/webapp

　　sudo touch app.js

　　sudo chmod a+rw app.js

　　修改 app.js 文件，使用 Express.js 來監聽 8765 端口[?]，app.js文件可參考下面的示例代碼。

　　示例代碼：/data/release/webapp/app.js

　　// 引用 express 來支持 HTTP Server 的實現

　　const express = require('express');

　　// 創建一個 express 實例

　　const app = express();

　　// 實現唯一的一個中間件，對于所有請求，都輸出 "Response from express"

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

　　response.write('Response from express');

　　response.end();

　　});

　　// 監聽端口，等待連接

　　const port = 8765;

　　app.listen(port);

　　// 輸出服務器啟動日志

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

　　本實驗會以 8765 端口的打開作為實驗步驟完成的依據，為了后面的實驗步驟順利進行，請不要使用其它端口號

　　運行 HTTP 服務

　　在開始之前，我們先來安裝 [PM2]

　　sudo apt-get install npm

　　sudo npm install -g pm2

　　PM2 安裝時間可能稍長，請耐心等候 [?]

　　我們的服務器源碼里使用到了 Express 模塊，下面的命令使用 NPM 來安裝 Express

　　cd /data/release/webapp

　　sudo npm install express --save

　　安裝完成后，使用 PM2 來啟動 HTTP 服務

　　cd /data/release/webapp

　　pm2 start app.js

　　現在，您的 HTTP 服務已經在 http://<您的 CVM IP 地址>:8765 運行

　　要查看服務輸出的日志，可以使用下面的命令：

　　pm2 logs

　　如果要重啟服務，可以使用下面的命令：

　　pm2 restart app

　　我們使用 PM2 來進行 Node 進程的運行、監控和管理

　　NPM 倉庫在國內訪問速度可能不太理想，如果實在太慢可以嘗試使用 CNPM 的 Registry 進行安裝：npm install pm2 -g --registry=https://r.cnpmjs.org/

　　搭建 HTTPS 服務

　　任務時間：15min ~ 30min

　　微信小程序要求和服務器的通信都通過 HTTPS 進行

　　安裝 Nginx

　　在 Ubuntu 上，可直接使用 apt-get 來安裝 Nginx

　　sudo apt-get install nginx -y

　　安裝完成后，使用 nginx 命令啟動 Nginx：

　　sudo /etc/init.d/nginx start

　　此時訪問 http://<您的域名> 可以看到 Nginx 測試頁面

以上就是“如何搭建微信小程序”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。