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

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.安裝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

發現已經不報錯啦！