微信小程序开发-学习笔记
1.前期准备
注册微信小程序账号（微信账号注册）->下载并安装开发工具（下载稳定版 stable-build）->选择创建文件（微信扫码登录）
注册地址 :
微信公众平台微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。
https://mp.weixin.qq.com/
2.微信开发者工具
3.新项目创建流程
填写：AppID（小程序-开发管理-开发设置-开发者ID）->不使用云服务->选择js基础版
新建项目成功：
4.结构
| 1.page 存放小程序所有页面 |
| 2.utils 存放工具性质的模块 |
| 3.app.js 小程序的项目入库文件 |
| 4.app.json 小程序的全局配置文件 |
| 5.app.wxss 小程序的全局样式文件 |
| 6.project.config.json 项目配置 |
| 7.sitemap.json 用来配置小程序及其页面是否被微信索引 |
pages
1. .js文件（页面脚本，存放页面数据，事件处理函数） 2. .json 文件（当前页面的配置文件，配置窗口的外观表现） 3. .wxml 文件 （页面的模块结构文件） 4. .wxss文件（页面的样式文件）
app.json内容描述：
小程序全局配置，包含页面路径，窗口外观，界面表现，底部tab.
pages:存放页面路径 （第一个默认为小程序首页）(tabbar 必须放在首位）
window:全局窗口的样式
style: 全局定义小程序组件的版本
5.语法-事件-标签
1.数据绑定Mustanche 语法，{{属性名称}}
2.常用事件
| 类型 | 绑定方式 | 事件描述 |
| tap | bind:tap / bindtap | 触摸事件 |
| input | bind:input / bindinput | 文本框输入事件 |
| change | bind:change / bindchange | 状态发生改变触发事件 |
3.事件产生的回调函数
当事件触发时，会接收到事件对象 event,详细属性如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经历的毫秒数 |
| target | Object | 触发事件的组件一下属性值集合 |
| currentTarget | Object | 当前的一些属性值集合 |
| detail | object | 额外的信息值 |
| touches | Array | 触摸事件，当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息数组 |
事件名称（e）{
console.log(e.detail.value)
}4.条件判断-循环
vx:if wx:elif wx:else hidden 同 VUE 语法类似
wx:for 写法同vue2 写法稍有差别：
{{item.name}}
5.常用组件 详见微信开发文档
视图容器 | 微信开放文档
6.tabber 导航，声明式导航，编程式导航，上拉刷新，下拉触底
1.tabber 的配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| position | string | 否 | bottom | 位置 top/tottom |
| borderStyle | String | 否 | black | 上边框颜色 black/white |
| color | HexColor | 否 | tab上的文字颜色 | |
| selectedColor | HexColor | 否 | 文字选中颜色 | |
| backgroudColor | HexColor | 否 | 背景色 | |
| list | Array | 是 | 列表 2-5个 |
2.tab项配置选项
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，页面必须在pages中定义 |
| text | String | 是 | tab上的文字显示 |
| iconPath | String | 否 | 未选中的图片，position未top不显示icon |
| selectediconPath | String | 否 | 选中的图片，position未top不显示icon |
3.写法-位置
在app.json 文件中新增tabbar4
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/首页-置灰.png",
"selectedIconPath": "images/天猫形象2.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/安全保障.png",
"selectedIconPath": "images/天猫形象2.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系",
"iconPath": "/images/消息-置灰.png",
"selectedIconPath": "images/天猫形象2.png"
}
]
}4.声明式导航
使用navigation组件
url指定路径，普通导航页面 open-type属性无效添加，在导航到tabbar页面时需要在open-type改为 switchTab.后退导航需要 open-type属性为 navigateBack,delta指定回退的层级navigation组件传递参数 url中使用 ？参数名称={{值}}&参数名称={{值}}
获取参数：在页面js文件中的 onload 的options获取
跳转到tabber
跳转到普通
后退导航
传参
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options)
}5.编程式导航
通过js进行导航，导航到tabbar wx.switch(Object object),导航到普通： wx.navigateTo
后退导航： wx.navigateBack
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码：：
wx.switchTab({
url: 'url',
})
wx.navigateTo({
url: 'url',
})
wx.navigateBack()({
url: 'url',
})6.下拉刷新和上拉触底
下拉刷新：在页面对应的Json文件中 enablePullDownRedewsh 开启下拉刷新，backgroudColor 背景颜色，backgroudTextStyle 刷新条颜色
在触发刷新事件时可以通过 onPullDownRefresh()
停止下拉刷新效果：wx.stopPullDownRefresh()
上拉触底：在页面下拉触底时 通过事件 onReachBottom() 进行监听，同时可以使用 wx.showLoading()加载动画，wx.hideLoding() 结束动画。
*在使用下拉触底时可以 使用节流阀进行节流，方式上次请求未结束发起下次请求
7 .页面配置中常用的配置项
此处配置是具体到某一页面的配置，在对应页面的.json 文件处使用
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarbackgroundColor | HexColor | #000000 | 当前页面导航栏的背景颜色 |
| navigationBarTextStyle | String | white | 当前页面导航栏标题演示 black/white |
| navaigationBarTiitleText | String | 当前页面导航栏标题文字内容 | |
| backgroudColor | HexColor | #ffffff | 当前页面窗口的背景色 |
| backgrondTextStyle | String | dark | 当前页面的下拉刷新样式 |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新效果 |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发是页面与底部的距离 单位：px |
7.生命周期函数：
1.小程序的生命周期
app.js文件
App({
onLaunch：function（options）{}，//小程序初始化完成时，执行此函数，全局触发一次。
onShow:function(options){},// 小程序启动，或后台进入前台显示时触发
onHide:function(){} //小程序从前台进入后台时触发
})
2.小程序页面的生命周期：
页面的.js 文件
Page({
onLoad:function(options){}, //监听页面加载，一个页面调用一次
onShow:function(){}, //监听页面显示
onReady:function(){}, //监听页面初次渲染完毕，一个页面调用一次
onHide:function(){}, //监听页面隐藏
onUnload:function(){} //监听页面卸载，一个页面调用一次
})8.小程序的一些函数
1.页面标题
wx.setNavgationBaeTitle({})
2.请求
wx.request({
url:'http://www.***.com/cate/${this.data.query.id}/shops',
method:'GET',
data:{
_page:this.data.page,
_limit:this.data_pageSize,
},
success:(res) =>{
this.setDate({
shopList:[...this.data.shopList,...res.data]
})
})3.提示框
wx.showToast({
title:'数据加载完毕',
lcon:'none'
})
9.组件/自定义组件
1.自定义组件创建
在根目录下创建components文件夹,创建components类型文件，编写自定义组件内容同普通页面内容方式一致（组件和普通页面的文件结构也一致），组件可在其他页面引用，引用方式为：在使用页面下的.json文件中 usingComponts 编写组件名称与路径
2.组件的样式隔离
（1）app.wxss的全局样式对组件无效
（2）只有class选择器会有样式隔离效果，id选择器，属性选择器，属性选择器，标签选择器不受样式隔离影响
建议使用class选择器
(3) 去除组件隔离方法 组件js 文件中component 添加
option：{
stylelsolation:'apply-shared'
}
| 可选值 | 默认值 | 描述 |
|---|---|---|
| isolated | true | 表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会影响 |
| apply-shared | false | 表示页面wxss样式将影响自定义组件，但自定义组件wxss中指定的样式不会影响页面 |
| shared | false | 表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响到页面和其他设置了apply-shared 或 shared 的自定义组件。 |
3.组件属性
properties,用于组件接收外接传递数据
Components({
properties:{
max:{
type:Number,
value:10
}
}
})
//使用方式
4.监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。语法格式：
Components({
observers:{
'字段a,字段b':function(字段a新值，字段b新值）{
}
}
})
5.组件生命周期函数
| 生命周期函数 | 参数 | 描述说明 |
| created |
无 | 在组件实例刚刚被创建时执行 |
| attached | 无 | 在组件实例进入页面节点树时执行 |
| ready | 无 | 在组件在视图层布局完成后执行 |
| moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
| detached | 无 | 在组件实例被从页面节点树移除时执行 |
| error | ObjectError | 每当组件抛出错误执行 |
在使用生命周期函数时，建议编写lifetime字段中，优先级更高。
Component({
lifetimes:{
attached(){},//在组件实例进入页面节点树时执行
attached(){} //在组件实例被从页面节点树移除时执行
}
})组件所在页面的生命周期：
| 生命周期函数 | 参数 | 描述 |
| show | 无 | 组件所在页面被展示时执行 |
| hide | 无 | 组件所在页面被隐藏时执行 |
| resize | Object | 组件所在页面尺寸变化时执行 |
6.插槽
这是组件的内容节点
这是插槽的内容
7.父子组件之间的通信的方式
（1）属性绑定
用于父组件向子组件指定属性设置数据，仅能设置JSON兼容的数据
Component({
/**
* 组件的属性列表
*/
properties: {
count:Number
},
})
（2）事件绑定
用于子组件向父组件传递数据，可以传递任意数据
步骤：1父组件的js中定义一个函数，这个函数通过自定义事件形式与子组件进行交互
2.在父组件的wxml 通过自定义事件将1中的函数引用，传递给子组件。
3.在子组件js中通过 this.triggerEvrnt('自定义事件名称'，{/*参数传递*/}，将数据发送到父组件
4.在父组件的js中,通过e.detail获取到子组件传递过来的数据。
//父组件wxml
（3）获取组件实例
父组件可以通过this.selectComponenr()获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法10
10.分包
分包后，一个小程序项目由一个主包+多个分包组成：
主包：一般包含项目的启动页面和tabber页面以及分包所需的公共资源
分包：只包含和当前分包相关的页面和私有资源
使用：在app.json文件中定义 subPackages， "independent": true 设置独立分包（不依赖主包可独立运行）
{
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"subPackages": [
{
"root": "pkgA",
"name":"p1",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
]
},
{
"root": "pkgB",
"name":"p2",
"pages": [
"pages/apple/apple"
],
"independent": true
}
],
}分包预下载：
分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。
配置app.json中的preloadRule节点
"preloadRule": { //分包预下载的规则
"pages/contact/contact":{ // 触发分包预下载的页面路径
"packages": [//需要下载的分包
"p1"
],
"network": "all"//选择下载的网络模式，all(不限制），wifi(仅wifi)
}