微信小程序開發手賬

從今天起，打算記錄一下自己從入門開發微信小程序到小程序上線的完整流程。
如果沒有意外的話打算每周更新一次。20201231

準備工作

hbuilder、java環境（springboot）或者php環境（tp5，php7.3），數據庫（暫定mysql，后期可能生成為oracle）、微信開發者客戶端、微信小程序申請、微信支付申請、gitee申請（好吧版本管理十分重要，因為期間我不小心覆蓋了一部分文件，導致大量返工。）

前端配置：

1、hbuilder、微信開發者客戶端都直接用就行。
本次使用colorUI

2、安裝git插件，并下載tortoisegit，安裝后插件可裝。
3、微信開發者工具》登錄》設置》安全》服務端口

4、現在開始新建項目（由于原項目我沒搞得懂怎么配置git，所以導入項目后，將colorUI復制進去，然后上傳，注意.gitignore上傳策略）

基礎配置

首先看下目錄結構

配置ignore

引入vant（下載也好直接引入后從dist復制也好）

引入步驟：

pages.json

"globalStyle": {"mp-alipay": {/* 支付寶小程序特有相關 */"transparentTitle": "always","allowsBounceVertical": "NO"},"navigationBarBackgroundColor": "#0081ff","navigationBarTitleText": "全局首頁","navigationStyle": "custom","navigationBarTextStyle": "white",// 以下為引用的vant組件，看著自己改。"usingComponents": { //這里為方便，全局引入了所有組件，也可以在某個page下單獨引用某個組件"demo-block": "/wxcomponents/vant/demo-block/index","van-action-sheet": "/wxcomponents/vant/action-sheet/index","van-area": "/wxcomponents/vant/area/index",// "van-badge": "/wxcomponents/vant/badge/index",// "van-badge-group": "/wxcomponents/vant/badge-group/index","van-button": "/wxcomponents/vant/button/index","van-card": "/wxcomponents/vant/card/index","van-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-checkbox": "/wxcomponents/vant/checkbox/index","van-checkbox-group": "/wxcomponents/vant/checkbox-group/index","van-col": "/wxcomponents/vant/col/index","van-dialog": "/wxcomponents/vant/dialog/index","van-field": "/wxcomponents/vant/field/index","van-goods-action": "/wxcomponents/vant/goods-action/index","van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index","van-goods-action-button": "/wxcomponents/vant/goods-action-button/index","van-icon": "/wxcomponents/vant/icon/index","van-loading": "/wxcomponents/vant/loading/index","van-nav-bar": "/wxcomponents/vant/nav-bar/index","van-notice-bar": "/wxcomponents/vant/notice-bar/index","van-notify": "/wxcomponents/vant/notify/index","van-panel": "/wxcomponents/vant/panel/index","van-popup": "/wxcomponents/vant/popup/index","van-progress": "/wxcomponents/vant/progress/index","van-radio": "/wxcomponents/vant/radio/index","van-radio-group": "/wxcomponents/vant/radio-group/index","van-row": "/wxcomponents/vant/row/index","van-search": "/wxcomponents/vant/search/index","van-slider": "/wxcomponents/vant/slider/index","van-stepper": "/wxcomponents/vant/stepper/index","van-steps": "/wxcomponents/vant/steps/index","van-submit-bar": "/wxcomponents/vant/submit-bar/index","van-swipe-cell": "/wxcomponents/vant/swipe-cell/index","van-switch": "/wxcomponents/vant/switch/index",// "van-switch-cell": "/wxcomponents/vant/switch-cell/index","van-tab": "/wxcomponents/vant/tab/index","van-tabs": "/wxcomponents/vant/tabs/index","van-tabbar": "/wxcomponents/vant/tabbar/index","van-tabbar-item": "/wxcomponents/vant/tabbar-item/index","van-tag": "/wxcomponents/vant/tag/index","van-toast": "/wxcomponents/vant/toast/index","van-transition": "/wxcomponents/vant/transition/index","van-tree-select": "/wxcomponents/vant/tree-select/index","van-datetime-picker": "/wxcomponents/vant/datetime-picker/index","van-rate": "/wxcomponents/vant/rate/index","van-collapse": "/wxcomponents/vant/collapse/index","van-collapse-item": "/wxcomponents/vant/collapse-item/index","van-picker": "/wxcomponents/vant/picker/index"}},"usingComponts": true,"condition": { //模式配置，僅開發期間生效"current": 0, //當前激活的模式(list 的索引項)"list": [{"name": "表單2", //模式名稱"path": "pages/buyer/index", //啟動頁面"query": "" //啟動參數}]}

測試即可使用vant

pages.json中，這句話意思是去除頂部標題欄

參考資料

修改默認首頁

pages.json中，第一個為首頁，最后一個為默認頁（一般為404頁）

vue中，可以使用模板進行套用。格式：

vue套用模板怎么配

//引入用戶標準白板。 import BlankLayout from '@/components/layouts/BlankLayout' {//這個是模板文件path: '/user',component: BlankLayout,// redirect: '/user/blank',hidden: true,//這個是模板下的文件children: [{path: 'index',name: 'index',component: () => import(/* webpackChunkName: "user" */ '@/views/user/Index')},// {// path: 'register',// name: 'register',// component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')// },// {// path: 'register-result',// name: 'registerResult',// component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')// },// {// path: 'alteration',// name: 'alteration',// component: () => import(/* webpackChunkName: "user" */ '@/views/user/Alteration')// },]},

動態路由生成【未配】

由于使用了pages.json，所以對于app.addrouter不知道支持否，暫時開發沒有用到相關技術。
沒有暫時沒有打算使用router.js，所以如果以后需要則再此記錄。20210105

總結

以上是生活随笔為你收集整理的微信小程序开发手账从入门到部署【持续更新】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。