微信小程序開發環境配置實戰（阿里雲服務搭建+可運行的demo）

最近微信小程序異常火爆，不少人在學習，下面帶着你們搭建下微信小程序的調試環境（client+server），並調試一套demo源碼（JavaScript和node.js基礎便可,微信推薦使用的語言，無前端編程基礎，去菜鳥教程簡單學習下 JavaScript，node.js，mysql便可），方便你們學習。

微信小程序搭建環境必需的兩點：雲服務器，域名，下面一步步給搭建演示若是在一臺阿里雲服務器上搭建微信小程序服務端環境。

 

一、雲服務器準備：可在阿里雲購買輕量應用服務器或者ECS服務器（領取現金卷）

領取現金券最低2折優惠，付款時候還可使用現金劵

 

系統鏡像選擇CentOS 目前用的比較多的免費Linux系統，和ubuntu基本同樣，首次購買可享受比較大的優惠，能夠根據本身須要購買

若是是須要作微信小程序分銷的能夠直接購買阿里自營的移動分銷商城（包含小程序商城）

二、域名準備：阿里雲服務器也可購買，這個能夠隨意購買個最便宜的隨意後綴的域名

域名購買後，添加域名解析到前面購買的服務器IP地址上,而後須要申請ssl證書（博主實在阿里雲上免費申請的，可是好像如今找不到了，不肯定，你們也能夠百度下第三方申請）

阿里雲又能夠免費申請證書了，在阿里雲註冊域名之後，控制檯-域名-域名列表

 

兩個條件準備好之後咱們下面開始搭建微信小程序的服務器環境。

 

一、設置遠程鏈接服務器（瀏覽器操做太彆扭），控制檯找到本身的輕量應用服務器，並設置遠程鏈接密碼

 

設置密碼

 

若是你們安裝的不是純淨的centos環境，阿里雲配套安裝的軟件不是很好用，能夠重置系統

 

使用ssh工具鏈接服務器，安裝須要的環境：(node.js、nginx、mysql5.7)

1、安裝node.js
新建目錄www
mkdir /www
cd /www

下載nodejs
wget https://npm.taobao.org/mirrors/node/v8.2.1/node-v8.2.1-linux-x64.tar.xz

解壓
tar -xvf node-v8.2.1-linux-x64.tar.xz

測試是否安裝成功
進入解壓目錄下的 bin 目錄，執行 ls 命令
cd node-v8.2.1-linux-x64/bin && ls
有node 和 npm
測試
./node -v


安裝成功
如今 node 和 npm 還不能全局使用，作個連接
ln -s /www/node-v8.2.1-linux-x64/bin/node /usr/local/bin/node 
ln -s /www/node-v8.2.1-linux-x64/bin/npm /usr/local/bin/npm
如今能夠全局使用了

 

 

2、安裝nginx

 

Node.js 是單進程的，咱們能夠經過多開 Node.js 並配合 Nginx 來實現多進程 Node.js 負載均衡，而且一些靜態文件咱們也能夠直接經過 Nginx 代理，提升性能。其中第一步就是安裝 Nginx。
經過 SSH 鏈接上雲服務器，直接使用包管理工具 yum 安裝 Nginx 便可：


yum -y install nginx
安裝完成以後會顯示 Complete!，能夠經過以下命令檢查 Nginx 是否安裝成功：


nginx -v

 

3、安裝mysql5.7

一、配置YUM源

# 下載mysql源安裝包
wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm

# 安裝mysql源
yum localinstall mysql57-community-release-el7-8.noarch.rpm

檢查mysql源是否安裝成功
yum repolist enabled | grep "mysql.*-community.*"

 

二、安裝MySQL
yum install mysql-community-server

三、啓動MySQL服務
systemctl start mysqld

查看MySQL的啓動狀態
shell> systemctl status mysqld

 

四、開機啓動
systemctl enable mysqld
systemctl daemon-reload

 

五、修改root本地登陸密碼
mysql安裝完成以後，在/var/log/mysqld.log文件中給root生成了一個默認密碼。經過下面的方式找到root默認密碼，而後登陸mysql進行修改：
grep 'temporary password' /var/log/mysqld.log

登錄並修改默認密碼
mysql -u root -p

mysql>ALTER USER 'root'@'localhost' IDENTIFIED BY '新密碼!'; 

新建一個數據庫名爲 cAuth，排序規則爲 utf8mb4_unicode_ci，小程序後臺用到
mysql>CREATE DATABASE IF NOT EXISTS cAuth，排序規則爲 DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci; 

 

 

服務端使用的工具軟件已經安裝好了，下面導入ssl證書，測試下nginx，

新建/data/release/nginx

使用sftp軟件（FileZilla）鏈接服務器，把ssl證書放到/data/release/nginx目錄下

 

上傳後服務器上查詢

 

 

上傳完證書之後，能夠開始配置 Nginx，進入服務器的 /etc/nginx/conf.d 目錄，新建一個weapp.conf 文件，將文件拷貝到本地，打開編輯，寫入以下配置（請將配置裏 wx.ijason.cc 修改成你本身的域名，包括證書文件）：

 

•  

upstream app_weapp {server localhost:5757;keepalive 8;}server {listen      80;server_name www.yudingfan.com;rewrite ^(.*)$ https://$server_name$1 permanent;}server {listen      443;server_name www.yudingfan.com;ssl on;ssl_certificate           /data/release/nginx/1_www.yudingfan.com_bundle.crt;ssl_certificate_key       /data/release/nginx/2_www.yudingfan.com.key;ssl_session_timeout       5m;ssl_protocols             TLSv1 TLSv1.1 TLSv1.2;ssl_ciphers               ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA;ssl_session_cache         shared:SSL:50m;ssl_prefer_server_ciphers on;location / {proxy_pass http://app_weapp;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}}

 

修改完將這個文件上傳到服務器上，而後在 ssh 中輸入：

nginx -t

 

若是顯示以下信息，則配置成功：

配置成功以後，輸入 nginx 回車，便可啓動 Nginx。

若是訪問 http://你的域名/weapp/a 會自動跳轉到 HTTPS 上，並顯示 502 Bad Gateway，則表示配置成功：

 

若是沒有成功，使用netstat -ntpl查看下 nginx的https監聽是否啓動（443端口）

 

 

至此，服務端的環境已經徹底搭建好了

 

 

登錄小程序官網，註冊帳號，獲取AppID(小程序ID)，AppSecret(小程序密鑰)，配置服務器域名，域名須要備案後才能填寫，備案所有操做能夠在阿里雲網上進行，大概1周左右

 

下載小程序開發工具，

下載demo源碼：連接：https://pan.baidu.com/s/1i6I831z 密碼：knsw

使用開發工具打開demo源碼。

 

編輯server中的config.js（先在服務器上建立一下目錄/data/release/weapp，也就是下面的rootPathname）

 

 

•  

const CONF = {port: '5757',rootPathname: '',    // /data/release/weapp// 微信小程序 App IDappId: '',		// 微信小程序 App SecretappSecret: '',// 是否使用騰訊雲代理登陸小程序useQcloudLogin: true,               // 可直接使用微信登錄小程序/**     * MySQL 配置，用來存儲 session 和用戶信息     * 若使用了騰訊雲微信小程序解決方案     * 開發環境下，MySQL 的初始密碼爲您的微信小程序 appid     */mysql: {host: '雲數據庫內網IP',port: 3306,user: 'root',db: 'cAuth',pass: '雲數據庫密碼',char: 'utf8mb4'},cos: {/**         * 區域         * 華北：cn-north         * 華東：cn-east         * 華南：cn-south         * 西南：cn-southwest         * 新加坡：sg         * @see https://cloud.tencent.com/document/product/436/6224         */region: 'cn-south',// Bucket 名稱fileBucket: 'qcloudtest',// 文件夾uploadFolder: ''},// 微信登陸態有效期wxLoginExpires: 7200,// 其餘配置 ...serverHost: '你的域名',tunnelServerUrl: 'http://tunnel.ws.qcloud.la',tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',// 能夠註冊一個騰訊雲帳號，獲取一下配置。騰訊雲相關配置能夠查看雲 API 祕鑰控制檯：https://console.cloud.tencent.com/capiqcloudAppId: '你的騰訊雲 AppID',qcloudSecretId: '你的騰訊雲 SecretId',qcloudSecretKey: '你的騰訊雲 SecretKey',wxMessageToken: 'weixinmsgtoken',networkTimeout: 30000}module.exports = CONF

 

紅色單引號裏面都是必填項，修改好server後，修改下client中的host:"你申請的域名"

 

都配置好之後，如今須要將server端的代碼上傳的服務器上的/data/release/weapp目錄下，

 

server代碼上傳後，cd /data/release/weapp下

 

代碼傳完後作以下操做：

輸入如下命令切換npm 源到淘寶鏡像，防止官方鏡像下載失敗：

npm config set registry https://registry.npm.taobao.org 

使用npm安裝全局依賴

 

npm install -g pm2

而後安裝本地依賴：


npm install

 

接着使用 Demo 代碼裏的 tools/initdb.js 工具初始化數據庫：


node tools/initdb.js

 

初始化成功則會提示「數據庫初始化成功！」
接着執行以下代碼啓動 Node.js


node app.js

 

順利完成以上操做，就完成了 Wafer Demo 在本身服務器上的部署。直接訪問 http://你的域名/weapp/login，會提示：


{"code":-1,"error":"ERR_HEADER_MISSED"}
則表示配置成功。你如今可使用開發者工具來進行聯調測試啦！

 

最後在小程序開發工具上點擊測試登錄接口和請求登錄狀態以下：

 

正確運行以下：

 

到此你就能夠開發本身的小程序了