微信小程序笔记 整理

微信小程序笔记 整理

地址： 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 --> 页面的模板结构文件

• 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()启动

小程序的页面渲染过程

1. 加载解析页面的.json 配置文件
2. 加载页面的.wxml 模板 和 .wxss样式
3. 执行.js文件,调用Page() 创建页面实例
4. 渲染完成

小程序的数据赋值

不能直接赋值,需要调用 this.setData({xx:123}) 这种方式

数据传参

• 自定义属性传参:

需要在传参的地方提供一个 data-xx的属性传参,接收是按照 (e.target.dataset.xxx)接收

• 导航传参:

路径后面?拼接参数,key=value,用&链接,(eg:url=“/pages/index/index?name=zh&age=22”),被导航的页面,直接在onLoad时间中获取

父子组件中的通讯

1. 属性绑定

   父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据

   在wxml声明子组件的时候,将数据绑定到属性上,子数据通过

   properties节点声明对应的数据并使用

2. 事件绑定

   子组件向父组件传递数据(任何数据)

   ① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

   ② 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件

   ③ 在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, { /* 参数对象 */ }) ，将数据发送到父组件

   ④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

3. 获取组件实例

   父组件通过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() 监听页面卸载,一个页面只调用一次

自定义组件

1. 新建commponents组件
2. 在全局/局部的.json 引入(usingComponents)
3. 在.wxml 文件将 引入的 key注册在页面

组件页面布局

data --> 数据存放

methods --> 逻辑处理

properties --> 属性列表,用来接受外界到组件中的传参

observers --> 数据监听

组件的生命周期

定义在**lifetimes **中

created() 组件刚被创建好

attached() 组件初始化完毕,进入页面节点树后

detached() 组件离开页面节点树后

组件在页面的声明周期

定义在 pageLifetimes中

show() 页面展示

hide() 页面隐藏

resize() 页面尺寸变化

多个插槽启用

默认每个自定义组件只能使用一个插槽(如果没有没有声明位置的话,默认在组件尾部加载)

在.js文件中配置

options: {

multipleSlots: true // 配置支持多个插槽,默认是false,只能持之一个插槽

}

插槽根据配置的name来区分