“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情”

小程序

起步

小程序与普通网页开发的区别

小程序运行在微信环境中
无法调用DOM和BOM的API
- 可以调用微信环境提供的各种API
  - 地理定位、扫码、支付

代码的构成

WXSS

WXSS是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS。

WXSS 和 CSS 的区别

新增了rpx尺寸单位
提供了全局的样式和局部样式
- 项目根目录中的app.wxss 会作用于所有小程序页面
- 局部页面的.wxss 样式仅对当前页面生效
WXSS仅支持部分CSS选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before 等伪类选择器

JS 逻辑交互

①app.js

是整个小程序项目的入口文件，通过调用 App() 函数来启动整个小程序

②页面的 .js 文件

是页面的入口文件，通过调用 Page() 函数来创建并运行页面

③普通的 .js 文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用

宿主环境

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：Android

系统和 iOS 系统是两个不同的宿主环境。手机微信是小程序的宿主环境。

小程序宿主环境包含的内容

①通信模型

小程序中通信的主体是渲染层（WXML模板和WXSS样式）和逻辑层（JS脚本）

渲染层和逻辑层之间的通信；逻辑层和第三方服务器之间的通信都是由微信客户端进行转发

②运行机制

启动的过程

①把小程序的代码包下载到本地
②解析 app.json 全局配置文件
③执行 app.js 小程序入口文件，调用 App() 创建小程序实例
④渲染小程序首页
⑤小程序启动完成

页面渲染的过程

①加载解析页面的 .json 配置文件
②加载页面的 .wxml 模板和 .wxss 样式
③执行页面的 .js 文件，调用 Page() 创建页面实例
④页面渲染完成

③组件

分类：

①视图容器

view
- 类似于HTML 中的 div，是一个块级元素
scroll-view
- 可滚动的视图区域
- scroll-y 允许纵向滚动
- scroll-x 允许横向滚动

swiper 和 swiper-item

轮播图容器组件和轮播图 item 组件

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

②基础内容

text
- 类似于HTML 中的 span 标签，是一个行内元素
- selectable
  - 实现长按选中文本内容的效果
rich-text
- 支持把HTML 字符串渲染为 WXML 结构
- nodes
  - 把 HTML 字符串渲染为对应的 UI 结构
  - nodes="<h1>标题</h1>"
- rich-text 组件会进行安全处理，屏蔽掉html标签上的事件
button
- 通过open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
- type
  - 指定按钮类型
- size
  - 按钮尺寸
- plain
  - 镂空按钮
- :heavy_exclamation_mark: 调用微信功能
  - open-type="contact"
    - 调用微信客服系统
  - open-type="share"
    - 调用页面分享

image

image组件默认宽度约 300px、高度约 240px
支持图片懒加载，常用于长列表图片展示
- <image lazy-load src="../../images/dog.jpg" />

可以通过 mode 修改相框和图片的渲染模式

mode 值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的`长`边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的`短`边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。(`微信朋友圈多图展示：就是用短边显示模式`)
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

:heavy_exclamation_mark: 经验：
- 在小程序中使用到图片，基本都要修改宽高
- 小程序的图片可以理解为：相框 + 图片

③表单组件

input组件

注意点：

需要 /> 结束标签

2. 没有边框样式

3. model:value 简单双向绑定

④导航组件

navigator

类似于HTML 中的 a 链接
基础
- <navigator url="../fruit/index">连接1</navigator>
跳转tabBar页
- 跳转tabBar页的时候, 会清理页面历史记录, 所以 tabBar 页左上角没有后退箭头
  
  <navigator open-type="switchTab" url="../index/index">链接4 - ../index/index - 不能返回</navigator>
跳转其他小程序
- <navigator target="miniProgram"(其他小程序) app-id="wxf9e01cdca4779ccb"></navigator>
- 接口配置
```
"navigateToMiniProgramAppIdList": [
    "wx77af438b3505c00e"
  ],
```

⑤媒体组件

⑥map 地图组件

⑦canvas 画布组件

⑧开放能力

⑨无障碍访问

④API

事件监听 API
- 以on 开头，用来监听某些事件的触发
- wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步 API
- 以Sync 结尾的 API 都是同步 API
- 同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
- wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步 API
- 类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
- wx.request() 发起网络数据请求，通过 success 回调函数接收数据

wx.showToast() 小程序的API，消息提示框

模板与配置

WXML模板语法

数据绑定

基本原则：

在 data 中定义数据

// .js

Page({
  data:{
      info:'xx'
  }
})

在 WXML 中使用数据---插值表达式
- Mustache 语法的格式
  - 绑定内容
    - {{ info }}
  - 绑定属性
    - <image src="{{ imgSrc }}"
    - <view data-index="{{index}}">
  - 运算（三元运算、算数运算）
    - {{ num > 5 ? 'a' : 'b' }}
  - undefined
    - 不显示
使用数据一般解构出来
- const { list } = this.data

事件绑定

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

常用的事件

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

catchtap 事件捕获，解决事件冒泡带来的问题

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示:

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

data-id="xx"

const {id} = e.target.dataset

target 和 currentTarget 的区别

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定 的组件。

点击里面的按钮（target）触发了外面绑定了 bindtap 事件的 view （currentTarget)

bindtap

bindtap="btnTapHandler"
在 .js 中
- btnTapHandler(e){ }
- 在事件处理函数中为 data 中的数据赋值
  - 调用 this.setData(dataObject) 方法
  - this.setData{ count: this.data.count + 1}
  - 对象赋值
    - "person.age" = this.data.person.age+1
- 事件传参
  - :heavy_exclamation_mark: 不能在绑定事件的同时为事件处理函数传递参数
  - 提供 data-* 自定义属性传参，其中 *代表的是参数的名字
  - data-info="{{ 2 }}"
    - event.target.dataset.参数名获取参数的值
    - e.target.dataset.info
- 在 .js 中访问 data
  - this.data.msg

bindinput

通过input事件来响应文本框的输入事件

实现文本框和 data 之间的数据同步（现在用 model:value 简单双向绑定）

实现步骤：

①定义数据

data:{ msg:'hello'}

②渲染结构

<input value="{{ msg }}" bindinput="iptHandler"></input>

③美化样式

input{
  border: 1px solid #eee;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}

④绑定 input 事件处理函数 msg = e.detail.value

iptHandler(e){
    this.setData({
        msg:e.detail.value
    })
}

条件渲染

wx:if="{{ condition }}"
- wx:elif="{{ condition2 }}"
- wx:else
结合 <block> 使用 wx:if

一次性控制多个组件的展示与隐藏
- <block wx:if="{{ true }}"><view></view><view></view></block>

block 只是一个包裹性质的容器，不会在页面中做任何渲染。
- ❌ 引号与花括号之间不要有空格，会默认为 true ❌ wx:if=" {{false}}"

hidden
- 直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏

wx:if 与 hidden 的对比

①运行方式不同

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

②使用建议

频繁切换时，建议使用 hidden
控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换

列表渲染

wx:for
- 索引用 index 表示；当前循环项用 item 表示。
- wx:for="{{ array }}"
手动指定索引和当前项的变量名
- wx:for-index="xx"
- wx:for-item="yy"
wx:key 提高列表性能
- 类似于 Vue 列表渲染中的**:key**
  1. *this 表示循环中的 item 本身，适用于字符串数组和数值数组
    - 提高性能1: 字符串数组或数值数组 --> 用 wx:key="*this"
  2. 对象键名称，若 vue 中写法为 item.id ，小程序中只写 id wx:key="id"
    - 提高性能2: 对象数组 --> 用对象键名称
    - 其他地方要写 item.id

WXSS 模板样式

WXSS是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

注意点：

小程序中不能使用通配符 *
推荐写法
- rpx 响应式单位
- vw 响应式单位

与 CSS 相比，WXSS 扩展的特性有：

rpx 尺寸单位
- 用来解决屏适配的尺寸单位
- 实现适配的原理
  - 在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。
    - 在较小的设备上，1rpx 所代表的宽度较小
    - 在较大的设备上，1rpx 所代表的宽度较大
- rpx 与 px 之间的单位换算
  - 750rpx = 375px = 750 物理像素
  - 1rpx = 0.5px = 1物理像素
@import 样式导入
- 需要用相对路径，用 ; 表示语句结束。

全局样式

app.wxss

局部样式

页面的.wxss

:heavy_exclamation_mark:就近原则：局部的样式会覆盖全局样式

引入样式

/* pages/wxss/index.wxss */

@import '../../styles/my.wxss';

全局配置

全局配置文件

app.json

常用配置项

`pages`

记录当前小程序所有页面的存放路径
可以在这里创建新的页面文件（写在路径即可）

`window`

全局设置小程序窗口的外观

属性名	类型	默认值	说明
`navigationBarTitleText`	String	字符串	导航栏`标题`文字内容
`navigationBarBackgroundColor`	HexColor	#000000	导航栏`背景颜色`， ❗只支持十六进制，五颜六色实现不了
`navigationBarTextStyle`	String	white	导航栏`标题`颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	`下拉刷新的窗口`的背景色
backgroundTextStyle	String	dark	`下拉 loading 的样式`，仅支持 dark / light
`enablePullDownRefresh`	Boolean	false	是否`全局`开启`下拉刷新`
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面`底部`距离，单位为px

注：布尔值不加引号

`tabBar`

设置小程序底部的 tabBar效果
分类
- 底部 tabBar
- 顶部 tabBar
  - 不显示 icon 只显示文本
:heavy_exclamation_mark:注
- 最少 2 个、最多 5 个 tab 页签

组成部分

backgroundColor
- tabBar 的背景色
selectedIconPath
- 选中时的图片路径
borderStyle
- tabBar上边框的颜色
iconPath
selectedColor
color

"tabBar":{
    "list":[
        {
            "pagePath":"pages/...",
            "text":"首页"
        },...
    ]
}

配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少 2 个、最多 5 个 tab

每个 tab 项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义，注意要直接以 pages/ 开头
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

`style`

是否启用新版的组件样式

页面配置

页面级别的.json配置文件

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

直接在页面.json 文件中写即可

网络数据请求

限制：

①只能请求 HTTPS 类型的接口

②必须将接口的域名添加到信任列表中

配置 request 合法域名

在微信公众平台更改

发起请求

发起 GET / POST 请求

wx.request()

wx.request({
    url:'xx',
    method:'GET',
    data:{
        name:'zs',...
    },
    success:(res) => {
        
    }
})

在页面刚加载时请求数据

.js onLoad 事件

this.getSwiperList()

getSwiperList写在 onLoad 外面

跳过 request 合法域名校验

仅限在开发与调试阶段使用！在详情那里修改

关于跨域和 Ajax 的说明

Ajax技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

视图与逻辑

页面导航

页面导航指的是页面之间的相互跳转。

小程序实现页面导航的两种方式

① 声明式导航

在页面上声明一个 <navigator> 导航组件

通过点击 <navigator> 组件实现页面跳转

导航到 tabBar 页面

需要指定 url 属性和 open-type 属性

url 表示要跳转的页面的地址，必须以 / 开头
open-type 表示跳转的方式，必须为 switchTab
<navigator url="/xxx" open-type="switchTab">

导航到非 tabBar 页面

url 表示要跳转的页面的地址，必须以 / 开头
open-type 表示跳转的方式，必须为 navigate（可省略）
<navigator url="/xx">

后退导航

open-type 的值必须是 navigateBack，表示要进行后退导航
delta 的值必须是数字，表示要后退的层级
- 只是后退到上一页面，则可以省略delta属性，因为其默认值就是1。
- <navigator open-type="navigateBack" delta='2'>

② 编程式导航

调用小程序的导航 API，实现页面的跳转

导航到 tabBar 页面

wx.switchTab(Object object) Object 参数对象的属性列表：

属性	类型	是否必选	说明
url	string	是	需要跳转的 tabBar 页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.switchTab({ url:'/pages/xxx'}) 写在事件函数里等

导航到非 tabBar 页面

wx.navigateTo(Object object)

属性	类型	是否必选	说明
url	string	是	需要跳转到的非 tabBar 页面的路径，路径后可以带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

后退导航

wx.navgateBack()

导航传参

声明式导航传参 / 编程式导航传参

路径的后面还可以携带参数：

参数与路径之间使用 ? 分隔
参数键与参数值用 = 相连
不同参数用 & 分隔

在 onLoad 中接收导航参数

onLoad:function(options){// options 为参数对象}

页面事件

下拉刷新事件

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

启用下拉刷新

①全局开启下拉刷新

在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

②局部开启下拉刷新

在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true

配置下拉刷新窗口的样式

backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

wx.showLoading({title:'数据加载中'})

在网络请求的 complete 回调函数结束 loading

complete:() => { wx.hideLoading() }

监听页面的下拉刷新事件

onPullDownRefresh:function(){this.setData({ count:0 })}

停止下拉刷新的效果

wx.stopPullDownRefresh() 放置在下拉刷新事件的函数里... 回调里...

上拉触底事件

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

监听页面的上拉触底事件

onReachBottom:function(){}

配置上拉触底距离

onReachBottomDistance

对上拉触底进行节流处理

①在 data 中定义 isloading 节流阀（Boolean）

isLoading:false

②在 getColors() 方法中修改 isloading 节流阀的值

在刚调用 getColors 时将节流阀设置 true
在网络请求的 complete 回调函数中，将节流阀重置为 false
- complete:()=>{ this.setData({ isLoading: false})}

③在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

if(this.data.isLoading) return
this.getColors()

生命周期

生命周期函数

是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用

允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。

生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期函数的分类

① 应用的生命周期函数

特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
需在 app.js 中声明

② 页面的生命周期函数

特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
需在 .js 文件中进行声明

WXS 脚本

WXS（WeiXinScript）是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

wxml中无法调用在页面的.js中定义的函数，但是，wxml 中可以调用wxs中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”。

wxs 和 JavaScript 的关系 *

①wxs 有自己的数据类型

number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、

function 函数类型、array 数组类型、 date 日期类型、 regexp 正则

②wxs 不支持类似于 ES6 及以上的语法形式

不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...

支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

③wxs 遵循 CommonJS 规范

module 对象

require() 函数

module.exports 对象

基础语法

1、内嵌 wxs 脚本

必须提供module属性，用来指定当前 wxs的模块名称，方便在wxml中访问模块中的成员

// .wxml
<view>{{m1.toUpper('username')}}</view>

<wxs module="m1">
  module.exports.toUpper = function(str){
    return str.toUpperCase(str)
  }
</wxs>

2、定义外联的 wxs 脚本

// utils/tools.wxs

function toLower(str){
  return str.toLowerCase(str)
}

module.exports={
  toLower:toLower
}

3、使用外联的 wxs 脚本

module 用来指定模块的名称

src 用来指定要引入的脚本的路径，且必须是相对路径

// .wxml
<view>{{ m2.toLower('BHS') }}</view>
<wxs src="../utils/tools.wxs" module="m2"></wxs>

WXS 的特点

与 js 不同
不能作为组件的事件回调
- 应用场景：“过滤器”，经常配合Mustache语法进行使用
- 在 wxs 中定义的函数不能作为组件的事件回调函数
  - :heavy_multiplication_x: bindtap="m2.toLower"
隔离性

隔离性指的是wxs的运行环境和其他JavaScript代码是隔离的
- ①wxs 不能调用 js 中定义的函数
- ②wxs 不能调用小程序提供的 API
性能好
- 在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍
- 在 android 设备上，二者的运行效率无差异

本地生活（列表页面）

定义数据

query:{} 路径参数

shopList:[] 商品数据

page:1 当前页

pageSize:10 一页商品的数据

total:0 一共有多少条数据 page * pageSize >= total 说明没有下一页的数据了

isLoading 节流阀

页面导航并传参

页面导航：

// pages/home/home.wxml

<!-- 九宫格区域 -->
<navigator class="grid-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
    
</navigator>

onload函数接收参数：

this.setData({ query:options })

导航之后改变页面导航标题：

onReady --监听页面初次渲染完成

wx.setNavigationBarTitle({ title:this.data.query.title })

上拉触底时加载下一页数据

if(this.data.page * this.data.pageSize >= this.data.total)

证明没有下一页的数据了

return wx.showToast({ title:'数据加载完毕！',icon:'none' })

判断节流阀的值

if(this.data.isLoading) return

页码值 +1

this.setData({ page:this.data.page+1 })

下拉刷新列表数据

onPullDownRefresh --监听用户下拉动作

重置关键数据
- this.setData({ page:1,shopList:[],total:0 })
重新发起数据请求
- this.getShopList(()=>{ wx.stopPullDown() })

注意在页面 `.json` 中设置

"enablePullDownRefresh":true（必）

其他可选

基础加强

自定义组件

组件的创建与引用

创建组件：

component/test/test02(点击新建 Component)

引用组件：

局部引用组件：

页面的 .json中

{ "usingComponents":{ "my-test1":"url"}}

使用：.wxml

<my-test1></my-test1>

全局引用组件

app.json中定义

组件和页面的区别

组件的 .json 文件中需要声明 "component": true 属性
组件的 .js 文件中调用的是 Component() 函数
组件的事件处理函数需要定义到 methods 节点中

组件的样式

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构

:heavy_exclamation_mark:注意点

app.wxss 中的全局样式对组件无效
只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

修改组件的样式隔离选项

在组件的 .js 文件中新增如下配置
- options:{ styleIsolation:'isolated'}
或在组件的 .json 文件中新增如下的配置
- "styleIsolation":"isolated"

styleIsolation 的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件

数据、方法和属性 `.js`

data 数据

用于组件模板渲染的私有数据，需要定义到 data 节点中

methods 方法

事件处理函数和自定义方法需要定义到 methods 节点中

properties 属性

用来接收外界传递到组件中的数据（可读可写

与data其他方面作用都一样，除了还可以接收外界传递的数据

使用 setData 修改 properties 的值

this.setData({ max:this.properties.max + 1})

数据监听器

用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。

observers:{ 'A,B':funtion(新A,新B){ this.setData({ sum:新A + 新B})}}

监听对象属性的变化：

observers:{
'Object.A,Object.B':funtion(新A,新B){ 
    `触发`此函数的3 种情况：
    1：this.setData({ 'this.data.Object.A':this.data.Object.A + 1})
    2: 为B赋值
    3：为对象赋值
    
    fullColor:`${r},${g},${b}`
}
}

监听对象中所有属性的变化

'Object.**':function(Object){
    this.setData({
	 fullColor:`${r},${g},${b}`
    })
}

纯数据字段

定义：

纯数据字段指的是那些不用于界面渲染的data字段。

既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。

好处:

有助于提升页面更新的性能

使用规则

在Component构造器的options节点中，指定pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段

options:{ pureDataPattern: /^_/} 指定所有_开头的数据字段为纯数据字段

组件的生命周期

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

`created`:

:heavy_multiplication_x: 调用setData
只能用于给组件this 添加一些自定义属性字段

`attached`:

this.data已被初始化完毕
发请求获取初始数据

`detached`:

适合做一些清理性质的工作

`lifetimes`节点：

声明生命周期函数（优先级最高，推荐）

组件所在页面的生命周期

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行类似 created
hide	无	组件所在的页面被隐藏时执行 (跳转到非tab页面)
resize	Object Size	组件所在的页面尺寸变化时执行
onReady		类似 mounted
onUnload		类似 destoryed(跳转到非tab页面触发)

pageLifetimes 节点

定义组件所在页面的生命周期函数

插槽

在自定义组件的wxml结构中，可以提供一个节点（插槽），用于承载组件使用者提供的wxml结构。

单个插槽

默认每个自定义组件中只允许使用一个进行占位

启用多个插槽

在options节点

multipleSlots:true

定义多个插槽

<slot name="after"></slot>

使用多个插槽

slot="after"

父子组件之间的通信

①属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
只能传递普通类型的数据，无法将方法传递给子组件
父
- <son count="{{count}}">
子
- properties:{ count:Number }

②事件绑定

用于子组件向父组件传递数据，可以传递任意数据
父
- e.detail获取
- <son bind:sync="syncCount" / bindsync=...>
- syncCount(e){this.setData({ count:e.detail})}
子
- this.triggerEvent(('自定义事件名称', { /* 参数对象 */ })
- this.trggerEvent('sync',{ value:this.properties.count })
- 写在子组件的某一事件处理函数中

③获取组件实例

父组件还可以通过 this.selectComponent() 获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法
调用时需要传入一个选择器，例如 this.selectComponent(".son")

<son class="son">

const child = this.selectComponent(".son")
// 调用子组件的 setData
child.setData({ count:child.properties.count + 1})

// 调用子组件的方法
child.addCount()

behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于Vue.js中的“mixins”

behavior可以包含一组属性、数据、生命周期函数和方法（导入时以数组形式呈现）

创建behavior

调用Behavior(Objectobject) 方法即可创建一个共享的behavior实例对象，供所有的组件使用

module.exports = Behavior({
    properties:{},
    data:{},methods:{}...
})

导入并使用 behavior

const myBehavior = require('..url')

behaviors:[myBehavior] 挂载到 behaviors 数组节点中

behavior 中所有可用的节点

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

同名字段的覆盖和组合规则*

使用 npm 包

小程序对 npm 的支持与限制

①不支持依赖于 Node.js 内置库的包

②不支持依赖于浏览器内置对象的包

③不支持依赖于 C++ 插件的包

Vant Weapp

安装 Vant 组件库

全局数据共享

分包

案例 - 自定义 tabBar

杂记

小技巧

与Vscode配合，在Vscode编辑代码，在微信开发者工具创建页面
创建页面的快捷方式，直接在app.json文件的 pages节点写文件位置即可，eg：
- "pages/index2/index2"
在app.json文件的 pages节点中，微信开发者工具会自动编译第一个路径的组件，可以更改默认编译路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-krNupznj-1660728059982)(小程序.assets/1660720744866.png)]

l')`

behaviors:[myBehavior] 挂载到 behaviors 数组节点中

behavior 中所有可用的节点

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

同名字段的覆盖和组合规则*

使用 npm 包

小程序对 npm 的支持与限制

①不支持依赖于 Node.js 内置库的包

②不支持依赖于浏览器内置对象的包

③不支持依赖于 C++ 插件的包

Vant Weapp

安装 Vant 组件库

全局数据共享

分包

案例 - 自定义 tabBar

杂记

小技巧

与Vscode配合，在Vscode编辑代码，在微信开发者工具创建页面
创建页面的快捷方式，直接在app.json文件的 pages节点写文件位置即可，eg：
- "pages/index2/index2"
在app.json文件的 pages节点中，微信开发者工具会自动编译第一个路径的组件，可以更改默认编译路径

[外链图片转存中...(img-krNupznj-1660728059982)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0lsykiKJ-1660728059984)(小程序.assets/1660720758335.png)]

小程序基础知识点---基础入门

小程序

起步

小程序与普通网页开发的区别

代码的构成

WXSS

WXSS 和 CSS 的区别

JS 逻辑交互

宿主环境

小程序宿主环境包含的内容

①通信模型

②运行机制

③组件

④API

模板与配置

WXML模板语法

数据绑定

基本原则：

事件绑定

常用的事件

事件对象的属性列表

target 和 currentTarget 的区别

bindtap

bindinput

条件渲染

wx:if="{{ condition }}"

结合 <block> 使用 wx:if

hidden

wx:if 与 hidden 的对比

列表渲染

wx:for

手动指定索引和当前项的变量名

WXSS 模板样式

注意点：

与 CSS 相比，WXSS 扩展的特性有：

全局样式

局部样式

引入样式

全局配置

全局配置文件

常用配置项

pages

window

tabBar

style

页面配置

网络数据请求

限制：

配置 request 合法域名

发起请求

发起 GET / POST 请求

在页面刚加载时请求数据

跳过 request 合法域名校验

关于跨域和 Ajax 的说明

视图与逻辑

页面导航

小程序实现页面导航的两种方式

① 声明式导航

② 编程式导航

导航传参

页面事件

下拉刷新事件

启用下拉刷新

配置下拉刷新窗口的样式

上拉触底事件

监听页面的上拉触底事件

配置上拉触底距离

对上拉触底进行节流处理

生命周期

生命周期函数

生命周期函数的作用

生命周期函数的分类

WXS 脚本

wxs 和 JavaScript 的关系 *

基础语法

1、内嵌 wxs 脚本

2、定义外联的 wxs 脚本

3、使用外联的 wxs 脚本

WXS 的特点

与 js 不同

`wx:if="{{ condition }}"`

结合 `<block>` 使用 `wx:if`

`hidden`

`wx:for`

`pages`

`window`

`tabBar`

`style`

注意在页面 `.json` 中设置

数据、方法和属性 `.js`

`created`:

`attached`:

`detached`:

`lifetimes`节点：