微信小程序笔记 整理
微信小程序笔记 整理
地址： https://mp.weixin.qq.com/
小程序的基本构成
-
pages --> 用来存放所有小程序的页面
- 页面以文件夹的格式保存在pages里,每个页面由四个基本文件组成
- xx.js --> 页面数据 和 逻辑处理的文件
- xx.json --> 页面的配置 ( 如果和app.json内配置文件冲突,xx 页面 采用就近原则,优先按照xx.json)
- xx.wxss --> 页面的样式文件(如果和app.wxss内配置文件冲突,xx 页面 采用就近原则,优先按照xx.wxss)
- xx.wxml --> 页面的模板结构文件
- 页面以文件夹的格式保存在pages里,每个页面由四个基本文件组成
-
utils --> 用来存放工具性质的模块
app.js --> 小程序的入口文件
app.json – > 全局配置文件
- pages --> 小程序所有的页面路径
- window --> 小程序的背景色,文字颜色等
- style --> 采用的样式版本
- sitemapLocation --> 用来指明 sitemap.json 的位置
app.wxss --> 小程序的全局样式文件
project.config.json 项目配置文件
sitemap.json 配置小程序以及页面是否允许被微信索引
- sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false
小程序文件中,js总分为三大类
app.js 整个小程序的入口,通过 APP()函数来启动小程序
页面内的.js 是页面的入口文件,根据Page()函数创建并运行页面
普通的.js文件 是普通的功能模块文件,用Component()启动
小程序的页面渲染过程
- 加载解析页面的.json 配置文件
- 加载页面的.wxml 模板 和 .wxss样式
- 执行.js文件,调用Page() 创建页面实例
- 渲染完成
小程序的数据赋值
不能直接赋值,需要调用 this.setData({xx:123}) 这种方式
数据传参
- 自定义属性传参:
需要在传参的地方提供一个 data-xx的属性传参,接收是按照 (e.target.dataset.xxx)接收
- 导航传参:
路径后面?拼接参数,key=value,用&链接,(eg:url=“/pages/index/index?name=zh&age=22”),被导航的页面,直接在onLoad时间中获取
父子组件中的通讯
-
属性绑定
父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据
在wxml声明子组件的时候,将数据绑定到属性上,子数据通过
properties节点声明对应的数据并使用
-
事件绑定
子组件向父组件传递数据(任何数据)
① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件
③ 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, { /* 参数对象 */ }) ，将数据发送到父组件
④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据
-
获取组件实例
父组件通过this.selectComponent() [id或者类选择器]获取子组件实例对象.访问和调用子组件内的数据和方法
wx:if 和 hidden对比
wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏
下拉刷新的方式
app.json -> window -> 把 enablePullDownRefresh 的值设置为 true, onPullDownRefresh() 函数可监听当前页面的下拉刷新事件【wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。】
上拉触底
app.json -> window -> 为 onReachBottomDistance 设置新的数值
onReachBottom() 函数即可监听当前页面的上拉触底事件
页面导航
-
声明式导航(在页面上声明一个 导航组件,通过点击 组件实现页面跳转 )
-
导航到tabBar open-type=“switchTab”
-
导航到非tabBar open-type=“navigate”
-
回退 open-type= “navigateBack” delate 是数字,表示回退层级
-
-
编程式导航(调用小程序的导航 API，实现页面的跳转)
- 导航到 tabBar wx.switch() 方法
- 导航到非tabBar wx.navigateTo()方法
- 回退 wx.navigateBack()方法
应用的声明周期函数(app.js)
onLauch() 小程序初始化完成,执行次函数,全局只执行一次
onShow() 小程序启动/从后台进入前台展示时触发
onHide() 小程序从前台进入后台时触发
页面的声明周期函数(xx.js)
onLoad() 监听页面加载,一个页面只调用一次
onShow() 监听页面显示
onReady() 监听页面初次渲染完成,一个页面只调用一次
onHide() 页面隐藏
onUnload() 监听页面卸载,一个页面只调用一次
自定义组件
- 新建commponents组件
- 在全局/局部的.json 引入(usingComponents)
- 在.wxml 文件将 引入的 key注册在页面
组件页面布局
data --> 数据存放
methods --> 逻辑处理
properties --> 属性列表,用来接受外界到组件中的传参
observers --> 数据监听
组件的生命周期
定义在**lifetimes **中
created() 组件刚被创建好
attached() 组件初始化完毕,进入页面节点树后
detached() 组件离开页面节点树后
组件在页面的声明周期
定义在 pageLifetimes中
show() 页面展示
hide() 页面隐藏
resize() 页面尺寸变化
多个插槽启用
默认每个自定义组件只能使用一个插槽(如果没有没有声明位置的话,默认在组件尾部加载)
在.js文件中配置
options: {
multipleSlots: true // 配置支持多个插槽,默认是false,只能持之一个插槽
}
插槽根据配置的name来区分