Vue+koa2開發一款全棧小程式(服務端環境搭建和專案初始化)
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', // 騰訊雲相關配置可以去各大論壇找尋一下相關文章 qcloudAppId: '你的appid', qcloudSecretId: '你的雲api祕鑰id', qcloudSecretKey: '你的雲api祕鑰key', wxMessageToken: 'weixinmsgtoken', networkTimeout: 30000,
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專案
瀏覽器訪問
.
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.微信公眾平臺小程式全域性配置文件地址
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
發現已經不報錯啦! ##總結 以上就是我要說的內容,希望以上的內容可以幫助到正在默默艱辛的大家,希望大家在往後的工作與面試中一切順利。 那如何學習才能快速入門並精通呢? 當真正開始學習的時候難免不知道從哪入手,導致效率低下影響繼續學習的信心。 但最重要的是不知道哪些技術需要重點掌握,學習時頻繁踩坑,最終浪費大量時間,所以有一套實用的視訊課程用來跟著學習是非常有必要的。 本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。 對web開發技術感興趣的同學,歡迎加入Q群:866109386,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊檔案資料。 最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。