1. 程式人生 > >微信小程式開發環境(阿里雲服務搭建+可執行的demo)

微信小程式開發環境(阿里雲服務搭建+可執行的demo)

最近微信小程式異常火爆,很多人在學習,下面帶著大家搭建下微信小程式的除錯環境(client+server),並除錯一套demo原始碼(JavaScript和node.js基礎即可,微信推薦使用的語言,無前端程式設計基礎,去菜鳥教程簡單學習下 JavaScript,node.js,mysql即可),方便大家學習。

微信小程式搭建環境必需的兩點:雲伺服器,域名,下面一步步給搭建演示如果在一臺阿里雲伺服器上搭建微信小程式服務端環境。

1、雲伺服器準備:可在阿里雲購買輕量應用伺服器或者ECS伺服器現金卷,最高可減1000元)

最後付款的時候可以使用現金劵

系統映象選擇CentOS 目前用的比較多的免費Linux系統,和ubuntu基本一樣,

首次購買可享受比較大的優惠,可以根據自己需要購買

如果是需要做微信小程式分銷的可以直接購買阿里自營的移動分銷商城(包含小程式商城)

2、域名準備:阿里雲伺服器也可購買,這個可以隨意購買個最便宜的隨意字尾的域名

域名購買後,新增域名解析到前面購買的伺服器IP地址上,然後需要申請ssl證書(博主實在阿里雲上免費申請的,但是好像現在找不到了,不確定,大家也可以百度下第三方申請)

阿里雲又可以免費申請證書了,在阿里雲註冊域名以後,控制檯-域名-域名列表

兩個條件準備好以後我們下面開始搭建微信小程式的伺服器環境。

1、設定遠端連線伺服器(瀏覽器操作太彆扭),控制檯找到自己的輕量應用伺服器,並設定遠端連線密碼

設定密碼

如果大家安裝的不是純淨的centos環境,阿里雲配套安裝的軟體不是很好用,可以重置系統

使用ssh工具連線伺服器,安裝需要的環境:(node.js、nginx、mysql5.7)

一、安裝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
現在可以全域性使用了

二、安裝nginx

Node.js 是單程序的,我們可以通過多開 Node.js 並配合 Nginx 來實現多程序 Node.js 負載均衡,並且一些靜態檔案我們也可以直接通過 Nginx 代理,提高效能。其中第一步就是安裝 Nginx。
通過 SSH 連線上雲伺服器,直接使用包管理工具 yum 安裝 Nginx 即可:


yum -y install nginx
安裝完成之後會顯示 Complete!,可以通過如下命令檢查 Nginx 是否安裝成功:


nginx -v

三、安裝mysql5.7

1、配置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.*"

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


3、啟動MySQL服務
systemctl start mysqld


檢視MySQL的啟動狀態
shell> systemctl status mysqld

4、開機啟動
systemctl enable mysqld
systemctl daemon-reload

5、修改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 ID
    appId: '',// 微信小程式 App Secret
    appSecret: '',

    // 是否使用騰訊雲代理登入小程式
    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/capi
    qcloudAppId: '你的騰訊雲 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"}
則表示配置成功。你現在可以使用開發者工具來進行聯調測試啦!

最後在小程式開發工具上點選測試登陸介面和請求登陸狀態如下:

正確執行如下:

到此你就可以開發自己的小程式了

下面是需要學習的相關知識

mysql

還有就是學習小程式的時候最好是有本書,現在小程式相關書,內容差異都不大,主要是要新,博主在京東上找了本2018年1月初出版的,比較新的一本書推薦給大家,可能大家都不太喜歡看書學習,但是還是覺得有本書可以有個流程學習,書上的內容網上都能找的到,但是一本書籍整理的流程還是挺好的,先學什麼,再學什麼。