1. 程式人生 > >用mpvue構建微信小程序

用mpvue構建微信小程序

export quick work api exports tid ken .html nod

背景

由於機器人協會進行鼓勵大家多讀書的活動,所以為了可以更好的、更有效果,所以我跟會長提了一個建議,做一個微信小程序,那麽為什麽是微信小程序呢?
1、現在微信小程序比較好,用戶也比較多;利用微信小程序做推廣,效果好;
2、小程序的痛點在於不需要在手機裏額外安裝app,利用微信提供的入口,用時掃碼,用後清除;
3、開發周期與開發難度小於原生app。

技術棧

采用前後端分離
1、Vue全家桶
2、mpvue
3、koa2+mysql

構建過程

1、安裝工作
a)安裝好node
b)安裝vue-cli
c)安裝mysql
2、前端構建

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由於眾所周知的原因,可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 一般是要 sudo 權限的
$ npm install --global vue-cli

# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev

3、後端構建
a)騰訊雲的配置
騰訊雲支持
b)本地導入node代碼
wafer2-startup,將其中的server文件夾放到項目目錄下。
配置server——config.js

const CONF = {
      // 其他配置 ...
    serverHost: ‘localhost‘,
    tunnelServerUrl: ‘‘,
    tunnelSignatureKey: ‘27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89‘,
      // 騰訊雲相關配置可以查看雲 API 秘鑰控制臺:https://console.cloud.tencent.com/capi
qcloudAppId: ‘您的騰訊雲 AppID‘,//[賬戶信息](https://console.qcloud.com/developer) qcloudSecretId: ‘您的騰訊雲 SecretId‘,//[獲取地址](https://console.qcloud.com/cam/capi) qcloudSecretKey: ‘您的騰訊雲 SecretKey‘,//[獲取地址](https://console.qcloud.com/cam/capi) wxMessageToken: ‘weixinmsgtoken‘, networkTimeout: 30000 }

4、test
/routes/index.js

//註冊demo路由
router.get(‘/demo‘, controllers.demo)

/controllers/demo.js

module.exports = async (ctx)=>{
    ctx.state.data = {
        msg: ‘hello, 小程序後臺‘
    }
}

5、本地環境搭建
a)在命令行執行新建默認名為cAuth的數據庫
技術分享圖片

b)npm install -g nodemon
c)進入server目錄,開啟server

技術分享圖片
6、打開微信開發工具,新建並導入項目
技術分享圖片

項目目錄
技術分享圖片

7、test結果
技術分享圖片

本地運行

git clone 
npm install
npm run dev

用mpvue構建微信小程序