Vue+koa2開發一款全棧小程式(5.服務端環境搭建和專案初始化）

摘要： 1.微信公眾平臺小程式關聯騰訊雲 騰訊雲的開發環境是給免費的一個後臺，但是隻能夠用於開發，如果用於生產是需要花錢的，我們先用開發環境吧 1.用小程式開發郵箱賬號登入微信公眾平臺 2.【設定】→【開發者工具】→第一次是git管理，開啟騰訊雲關聯 3.會一路跳轉到騰訊雲的【開通開發...

1.微信公眾平臺小程式關聯騰訊雲

騰訊雲的開發環境是給免費的一個後臺，但是隻能夠用於開發，如果用於生產是需要花錢的，我們先用開發環境吧

1.用小程式開發郵箱賬號登入微信公眾平臺

2.【設定】→【開發者工具】→第一次是git管理，開啟騰訊雲關聯

3.會一路跳轉到騰訊雲的【開通開發環境】的流程要走

1.已經完成

2.下載安裝微信開發者工具，也已經下載安裝了

3.下載Node.js版本Demo

將demo中的server資料夾，複製到mpvue專案中

在專案下的project.config.json中，增加程式碼：

"qcloudRoot":"/server/",

在server資料夾下的config.js中，在pass後填寫Appid

然後在微信開發者工具中，開啟專案，點選右上角的【騰訊雲】→【上傳測試程式碼】

首次上傳選【模組上傳】，然後如圖把相應的地方勾選，以後就選智慧上傳就可以了。

2.搭建本地環境

1.安裝SQL/">MySQL資料庫

2.配置本地server資料夾下的config.js，加入配置程式碼

serverHost: 'localhost',
tunnelServerUrl: '',
tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
// 騰訊雲相關配置可以檢視雲 API 祕鑰控制檯：https://console.cloud.tencent.com/capi
qcloudAppId: '你的appid',
qcloudSecretId: '你的雲api祕鑰id',
qcloudSecretKey: '你的雲api祕鑰key',
wxMessageToken: 'weixinmsgtoken',
networkTimeout: 30000,

獲取雲api祕鑰id和key地址：https://console.cloud.tencent.com/capi

獲取appid的地址：https://console.cloud.tencent.com/developer

3.新建cAuth資料庫

開啟MySQL控制檯，執行命令

create database cAuth;

資料庫名cAuth，是與server專案中保持一致。

如果本地的MySQL設定了密碼，將server檔案下的config.js中的資料庫密碼配置，填寫你mysql資料庫的密碼

4.啟動server服務端

開啟cmd，cd到server專案目錄下，執行

cnpm install

cnpm install -g nodemon

5.測試一下本地環境是否搭建好了

在server專案下controllers目錄下，新建demo.js檔案

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

在server專案目錄下的router目錄下的index.js中新增路由

router.get('/demo',controllers.demo)

然後執行執行server專案的命令

npm run dev //啟動server專案

瀏覽器訪問

http://localhost:5757/weapp/demo

.

3.專案初始化

1.新建mpvue專案 開啟cmd，cd到想要存放專案的目錄下

cnpm install -g vue-cli//安裝腳手架
vue init mpvue/mpvue-quickstart mydemo
Project name mydemo
wxmp appid //登入微信小程式後臺，找到appid
//然後全都預設即可

cd mydemo
cnpm install
npm run dev//啟動新建的mpvue專案

2.用vscode開啟mydemo專案

1.將圖片素材庫資料夾img複製到mydemo/static目錄下

2.在src目錄下，新建me目錄，目錄下新建mian.js和index.vue

main.js程式碼

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

index.vue

<template>
<div>
個人中心頁面
</div>
</template>
<script>
export default {


}
</script>
<style>

</style>

3.在src目錄下，新建books目錄，目錄下新建mian.js和index.vue

main.js程式碼

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

index.vue程式碼

<template>
<div>
圖書頁面
</div>
</template>
<script>
export default {


}
</script>
<style>

</style>

4.在src目錄下，新建comments目錄，目錄下新建mian.js和index.vue

main.js程式碼

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

index.vue程式碼

<template>
<div>
評論過的書頁面
</div>
</template>
<script>
export default {


}
</script>
<style>

</style>

嗯，是的，3，4，5步驟中，main.js 的程式碼是一樣的，index.vue程式碼基本一樣

5.防止程式碼格式報錯導致專案無法啟動，先到專案目錄下的build目錄下的webpack.base.conf.js中，將一段配置程式碼註釋掉

6.在mydemo專案下的app.json中修改新增配置程式碼

app.json程式碼

{
"pages": [
"pages/books/main", //將哪個頁面路徑放第一個，哪個頁面就是首頁，加^根本不好使，而且還報錯
"pages/comments/main",
"pages/me/main",
"pages/index/main",
"pages/logs/main",
"pages/counter/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#EA5149",
"navigationBarTitleText": "蝸牛圖書",
"navigationBarTextStyle": "light"
}


}

7.在cmd中重啟mydemo專案，在微信開發者工具中開啟

3.底部導航

1.微信公眾平臺小程式全域性配置文件地址

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全域性配置

2.根據官方文件，在app.json填寫底部導航配置程式碼

{
"pages": [
"pages/books/main",
"pages/comments/main",
"pages/me/main",
"pages/index/main",
"pages/logs/main",
"pages/counter/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#EA5149",
"navigationBarTitleText": "蝸牛圖書",
"navigationBarTextStyle": "light"
},
"tabBar": {
"selectedColor":"#EA5149",
"list": [{

"pagePath": "pages/books/main",
"text": "圖書",
"iconPath":"static/img/book.png",
"selectedIconPath":"static/img/book-active.png"
},
{

"pagePath": "pages/comments/main",
"text": "評論",
"iconPath":"static/img/todo.png",
"selectedIconPath":"static/img/todo-active.png"
},
{

"pagePath": "pages/me/main",
"text": "我",
"iconPath":"static/img/me.png",
"selectedIconPath":"static/img/me-active.png"
}
]
}


}

3.效果圖

4.程式碼封裝

1.開啟cmd，cd到server下，執行後端

npm run dev

2.在mydemo/src 目錄下，新建config.js

//配置項

const host="http://localhost:5757"

const config={
host
}
export default config

3.在src目錄下新建until.js

//工具函式

import config from './config'

export function get(url){
return new Promise((reslove,reject)=>{
wx.request({
url:config.host+url,
success:function(res){
if(res.data.code===0){
reslove(res.data.data)
}else{
reject(res.data)
}
}
})
})
}

4.App.vue中新增程式碼

<script>
import {get} from './until'

export default {
async created () {
// 呼叫API從本地快取中獲取資料
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

const res=await get('/weapp/demo')
console.log(123,res)
console.log('小程式啟動了')
}
}
</script>

<style>
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/* this rule will be remove */
* {
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
</style>

5.在微信開發者工具中，在右上角點選【詳情】，勾選不校驗合法域名

6.執行mydemo

npm run dev

5.使用ESLint自動規範程式碼

1.將mydemo/build/webpck.base.conf.js中之前註釋的程式碼恢復

2.在mydemo專案下的package.json中的“lint”配置中加入--fix

3.執行程式碼，規範程式碼

npm run lint//如果一般的格式錯誤，就會自動修改，如果有程式碼上的錯誤，則會報出位置錯誤

4.執行執行程式碼

npm run dev

發現已經不報錯啦！