微信小程序开发手账

从今天起，打算记录一下自己从入门开发微信小程序到小程序上线的完整流程。
如果没有意外的话打算每周更新一次。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