前言：适用于有一定基础的前端开发同学，完成从网页开发到小程序开发的知识转换。
先立框架，后砌墙壁
回顾：了解微信小程序开发流程-CSDN博客
初始页面结构，三部分pages、utils、配置，分别存放页面、工具类函数、全局文件。
全局文件常用的三个：app.js、app.json、app.wxss，分别是项目入口、页面配置、全局样式
其余：
- .eslintrc：配置规则集和插件，用于检查代码质量，规范编码的
- project.config：个性化配置，以及配置项目的打包；后面挨着的project.private.config是他孪生兄弟，可以覆盖前者配置
- sitemap：小程序的结构和组织方式，让微信可以搜索到该小程序
配置是基础，优先掌握
一、配置
1、全局配置
在app.json中的全局配置参数，常见的有：
- navigationBarTextStyle 顶部背景颜色，只支持设置黑色和白色
- navigationBarTitleText 顶部全局标题（即小程序名称）
- enablePullDownRefresh下拉刷新
- onReachBottomDistance 上拉触底
小程序官网_页面配置对于字段的用法和含义写的很全面
2、新建页面
小程序页面分两种，tabBar和非tabBar，tabBar就是最底下的导航栏
备注：同样可参考小程序官网_全局配置
1.1 tabar页面
/***app.json****/
若要加新页面，在pages和tabBar中添加地址、文本和图标即可
在pages里写了地址，pages文件夹中会自动生成页面文件的
{
"pages": [
"pages/index/index",
"pages/shopping/shopping"
],
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/tabs/index.png",
"selectedIconPath": "/images/tabs/index-active.png"
},
{
"pagePath": "pages/shopping/shopping",
"text": "商城",
"iconPath": "/images/tabs/shopping.png",
"selectedIconPath": "/images/tabs/shopping-active.png"
}]
}
}1.2 非tabBar页面
就是直接点击即跳转的页面，只需要在上面pages里新增个地址即可。
二、导航
1、声明式
1、跳转到tabBar页面
<navigator url="/pages/orderDetail/orderDetail" open-type="seitchTab"></navigator >
2、到非tabBar页面，区别仅在于open-type参数
<navigator url="/pages/orderDetail/orderDetail" open-type="navigate"></navigator >
3、传参
只需要把参数拼接在url后面即可
<navigator url="/pages/orderDetail/orderDetail?test=12&price=78">传参</navigator>
接收参数
在跳转到的页面的onload方法里，可接受到传递来的参数
onLoad(options) {
console.log(options);
},
4、回退
(只在非tabBar页面生效)
delta代表回退层级，默认为1
<navigator open-type="navigateBack" delta="1"></navigator>2、编程式
1、跳转到tabBar页
在页面wxml添加
小程序中 bindtap 就相当于 click
<button bind:tap="gotoHome">跳转</button>
在对于js文件中调用方法即可
gotoHome(){
wx.switchTab({
url: '/pages/index/index',
})
}
2、跳转到非tabBar页面
只需要把switchTab换成navigateTo就行了
<button bind:tap="goDetail">详情</button>
goDetail(){
wx.navigateTo({
url: '/pages/orderDetail/orderDetail',
})
}
3、传参
和声明式一样，把参数拼接在url后面
4、回退
参数为空则默认回退1层
<button bind:tap="goBack">回退</button>
goBack(){
wx.navigateBack()
},三、生命周期
分为2类，应用生命周期和页面生命周期
类似于网页，都是初始化->渲染显示->销毁 的过程；不同点在于多了个周期：onHide隐藏在后台运行
1、应用
在全局入口文件app.js中控制
App({
/** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */
onLaunch: function () {},
/** * 当小程序启动，或从后台进入前台显示，会触发 onShow*/
onShow: function (options) {},
/*** 当小程序从前台进入后台，会触发 onHide */
onHide: function () {},
/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/
onError: function (msg) {}
})2、页面
在页面自己的文件夹下js文件中控制
Page({
onLoad(options) {}, // 监听页面加载,一个页面只调用1次
onReady() {}, // 监听页面初次渲染完成,一个页面只调用1次
onShow() {}, // 监听页面显示
onHide() {}, // 监听页面隐藏
onUnload() {}, //-监听页面卸载
//初始化时还会默认有下面几种监听事件
onPullDownRefresh() {}, // 监听用户下拉动作
onReachBottom() {}, // 页面上拉触底事件的处理函数
onShareAppMessage() {} // 用户点击右上角分享
})
