微信小程序-基础篇

小程序起步

一、小程序起步

1、小程序与Web开发的区别

1. 运行环境不同

   小程序—微信环境

   web—浏览器环境

2. API不同

   微信小程序无法调用DOM和BOM，但是它可以调用微信提供的API，例如地理位置，扫码，支付等

3. 开发模式不同

   web=浏览器+编译器

   微信小程序=微信开发者工具+各种和配置

二、小程序代码的构成

1、项目的基本组成结构

• pages：用于存放所有小程序的页面
• utils：用来存放工具函数模块的
• app.js：小程序项目的入口文件
• app.wxss：小程序项目的全局样式文件
• app.json：小程序的全局配置文件
• project.config.json：项目的配置文件
• sitemap.json：用来配置小程序页面是否允许被微信索引

2、页面的四个基本文件构成

• .js：存放数据以及函数逻辑事件函数等
• .wxss：存放页面的样式表文件
• .wxml：页面的模板结构文件
• .json：当前页面的配置文件，如配置窗口样式外观等

3、重要的构成

（1）app.js

他是小程序的全局配置文件，包括了所有页面的路径，窗口的外观，界面的表现，底部tab的配置等。

其中的几项基本的配置：

• pages：页面存放的路径
• window：全局定义小程序的窗口、背景色、标题样式以及内容等
• style：全局定义小程序的样式版本 v2为新版本 不设置默认为旧版本
• sitemapLocation：用来指明sitemap.json文件的位置

（2）project.config.js

他是小程序的项目的配置文件，用来记录开发者对微信开发者工具做出的个性化配置

• 项目的配置
• projectname：项目的名字
• appid：小程序的账号id

（3）sitemap.json

效果类似于PC网页的SEO，该配置文件用来配置小程序的页面是否允许被微信索引

注意：sitemap.json是默认开启的

如果想要关闭，则需要在project.config.json中设置checkSiteMap为false

（4）页面的.json文件

对本页面的窗口界面、背景色等配置项进行设置

与app.json的区别就是只对当前页面生效并且如果全局与当前的json配置文件冲突，全局的配置会被覆盖

（5）WXML文件

专为小程序设置的标签语言，用来构建小程序的页面结构，类似于网页开发中的HTML

与HTML的不同	例子
标签不同	view、text，image，navigator
属性节点不同	url(导航)
提供类似于Vue的模板语法	数据绑定，列表渲染、条件渲染

（6）WXSS文件

为小程序设计的一套样式语言，用来描述WXML样式，类似与网页开发中的CSS

与CSS的区别
新增了rpx单位	CSS中需要手动换算，而在WXSSS中rpx会被自动换算
提供了全局样式和局部样式	app.wxss和局部页面的.wxss
仅支持部分CSS选择器	.class、#id、element、并集和后代选择器、::after 和::before

(7)js文件

提供页面的交互逻辑，响应用户的操作

一般小程序项目中有三类.js文件

1. app.js 项目的入口文件 通过App()函数来启动整个小程序
2. 页面的.js文件 是页面的入口文件，通过Page()函数来创建并运行这个界面
3. 普通.js文件 一般是用来封装公共函数或属性供页面使用的

三、小程序的宿主环境

宿主环境是程序运行必须的依赖的环境,脱离了宿主环境的软件是没有任何意义的

1、宿主环境

小程序的宿主环境就是微信，小程序借助宿主环境提供的能力，完成许多网页无法完成的功能，例如扫码支付、微信支付，微信登录等

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

• 通信模型
• 运行机制
• 组件
• API

(1)通信模型

通信主体

小程序中的通信主体是渲染层和逻辑层，其中

• WXML和WXSS工作在渲染层
• js脚本工作在逻辑层

通信模型

分为两部分：

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

（2）运行机制

小程序的启动过程

1. 把小程序的代码包下载到本地
2. 解析app.json文件
3. 执行app.js小程序入口文件，调用App()函数创建小程序实例
4. 渲染小程序首页
5. 小程序启动完成

页面渲染过程

1. 加载解析页面的.json文件
2. 加载页面的WXML模板和WXSS文件样式
3. 执行页面的.js，调用Page()函数创建页面实例
4. 页面渲染完成

（3）组件

小程序中的组件是由宿主环境提供的，开发者可以利用其组件快速开发出美观的页面

官方把组件分类9大类：

类别	代码
视图容器	view、scroll-view、swiper、swiper-item
基础内容	text、rich-text(node属性)、image
表单组件
导航组件	navigator
媒体组件
map地图组件
canvas画布组件
开放能力
无障碍访问

（4）API

小程序中的API是由宿主环境提供的

1. 事件监听API

   特点：以on开头,用来监听某些事件的触发

   举例：wx.onWindowResize 监听窗口发生变化

2. 同步API

   特点1：以Sync结尾的API都是同步API

   特点2：同步的API结果，可以直接通过函数获取，如果执行错误会抛出异常

   举例：wx.setStorage(‘key’,‘value’)向本地存储中写入内容

3. 异步API

   特点:类似于Jquery中的$.ajax,需要通过success，fail，complete接收调用结果

   举例：wx.request

第一部分学习目标

• 能够知道如何创建小程序项目
• 能够清除小程序项目的基本组成结构
• 能够知道小程序的页面由几部分构成
• 能够知道小程序中常见的组件如何使用
• 能够知道小程序如何进行协同开发和发布

小程序的模板与配置

一、WXML的模板语法

1、数据绑定

• 在data中(页面的.js文件)定义数据

  page({
  data:{
  num:1,
  num2:2,
  str:'demo',
  imgSrc:'http://www.demo.com/1.png'    
  }
  })
  

• 在WXML中使用数据(MustAche语法)

<view>{{num1}}</view>
<iamge src= "{{imgSrc}}" />
<view>{{num2>3?num2:num2+3}}</view>

MustAche的主要应用场景:

• 绑定内容
• 属性绑定
• 运算（三元、算术运算）

2、事件绑定

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

（1）常用的事件

类型	绑定方式	事件描述
tap	bindtap、bind:tap	类似于click
input	bindinput、bind:input	文本框输入事件
change	bindchange、bind:change	状态改变时触发

(2)事件对象的属性列表

当事件回调触发的时候，会接收到一个Event对象，他的详细属性如下：

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

重要区别：

• e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件
• e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件

（4）在事件函数中为data赋值

addCount(step){
    
this.setData({
count:this.data.count+step
})
    
}

（5）事件传参

错误的传参方式

<button type="primary" bindtap="add(1)">+1</button>

事件函数无法接收到参数

正确的传参方式

<button type="primary" bindtap="add" data-step="{{1}}">+1</button>

//js
add(e){
//dataset 是一个对象 包含了所有通过data-*传递过来的参数
console.log(e.target.dataset) //1
}

需要注意的时表单事件

<input bindinput='inputHandler' />

inputHandler(e){
   e.detail.value //是变换后的值
}

3、条件渲染

通过wx:if判断该元素是否显示

<image src="./1.png" wx:if="{{flag}}" />

多条件组合 wx:elif 、wx:else

<image src="./1.png" wx:if="{{flag===1}}" />
<image src="./1.png" wx:elif="{{flag===2}}" />
<image src="./1.png" wx:else />

结合block使用wx:if

block可以一次控制多个元素的隐藏和显示、他不是一个组件，而是一个包裹用途的容器，类似于template，不会在页面上做任何渲染

<block wx:if="{{flag}}">
    <view>1</view>
    <view>2</view>
    <view>3</view>
</block>

hidden控制元素的显示和隐藏

<view hidden="{{flag}}">2</view>

wx:if于hidden相比较

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

使用建议：

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

4、列表渲染

（1）wx:for

使用wx:for指定数组进行渲染

默认情况下index为循环的索引,item为当前的循环项

（2）更改索引和修改当前项名称

• wx:for-index
• wx:for-item

（3）wx:key的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，

从而提高渲染的效率

二、WXSS模板样式

1、与CSS的关系

wxss具有css的大部分特性，并且做出了一些扩充，以适应小程序的开发

wxss扩展的特性：

• rpx单位
• @import样式导入

2、全局wxss与局部wxss

（1）全局WXSS

定义在app.wxss中的样式，作用于每个页面

（2）局部WXSS样式

作用于当前页面

注意：

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

三、全局配置

1、全局配置文件app.json

• pages

• window

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

• tabBar

• style

四、页面配置.json

类似于全局配置app.json

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

五、网络数据请求

1、小程序中的网络请求限制

出于安全性的考虑，小程序对数据的接口做了如下两个限制

• 只能请求HTTPS类型的接口
• 需要将目标域名设置到域名信任列表当中

2、发起请求

（1）GET请求

wx.request({
    url:'http://www.demo.cn/api/get',//请求的地址 也就是API接口
    method:'GET', //请求的方式
    data:{ name:'zs' }, //发送到服务器的数据
    success:(res)=>{}, //请求成功后的回调函数
    fail:(error)=>{}, //请求失败的回调函数
    complete:()=>{}
})

（2）POST请求

wx.request({
    url:'http://www.demo.cn/api/get',//请求的地址 也就是API接口
    method:'POST', //请求的方式
    data:{ name:'zs' }, //发送到服务器的数据
    success:(res)=>{}, //请求成功后的回调函数
    fail:(error)=>{}, //请求失败的回调函数
    complete:()=>{}
})

第二部分学习目标

• 能够使用 WXML 模板语法渲染页面结构
• 能够使用 WXSS 样式美化页面结构
• 能够使用 app.json 对小程序进行全局性配置
• 能够使用 page.json 对小程序页面进行个性化配置
• 能够知道如何发起网络数据请求

小程序的视图与逻辑

一、页面导航

页面导航是指页面之间跳转

在微信中实现页面导航的两种方式

1. 声明式导航

   利用标签，通过点击进行页面的跳转

2. 编程式导航

   调用微信小程序的导航API，进行页面的跳转

1、声明式导航

（1）导航到tabBar页面

使用navigator标签

• url：设置导航的路径 需要以 / 开头
• open-type：设置跳转的方式 跳转到tabBar页面必须为：switchTab

<navigator url="/pages/contact/contact" open-type="switchTab">联系</navigator>

（2）导航到非tabBar页面

使用navigator标签

• url：设置导航的路径 需要以 / 开头
• open-type：设置跳转的方式 跳转到tabBar页面必须为：navigate 这一项通常是可以忽略的

<navigator url="/pages/contact/contact" open-type="navigate">联系</navigator>

（3）后退导航

使用navigator标签

• delta：必须为数字，表示需要后退的层级 默认为1
• open-type：设置跳转的方式 跳转到tabBar页面必须为：navigateBack

<navigator url="/pages/contact/contact" open-type="navigate">联系</navigator>

2、编程式导航

（1）后退导航

wx.navigateBack()方法 参数：

• delta：返回页面数，如果不设置，则默认为1
• success：成功的回调函数
• fail：失败的回调函数
• complete：结束的回调函数

wx.switchTab({
	delta:1
    success:()=>{},
    fail:()=>{},
    complete:()=>{}
})

（2）导航tabBar页

wx.switchTab()方法 参数：

• url：路径，后面不能带参数
• success：成功的回调函数
• fail：失败的回调函数
• complete：结束的回调函数

wx.switchTab({
	url:'/pages/messages/messages',
    success:()=>{},
    fail:()=>{},
    complete:()=>{}
})

（3）导航到非tabBar页

wx.navigateTo()方法 参数：

• url：路径，后面可以带参数
• success：成功的回调函数
• fail：失败的回调函数
• complete：结束的回调函数

wx.navigateTo({
	url:'/pages/messages/messages',
    success:()=>{},
    fail:()=>{},
    complete:()=>{}
})

3、导航传参

（1）声明式导航传参

类似于web的url传参

<navigator url="/pages/info/info?a=10&b=20"></navigator>

（2）编程式导航传参

在navigateTo中的url，可以携带参数

wx.navigateTo({
    url:'/pages/info/info?a=10&b=20'
})

4、接收导航的参数

通过声明式导航和编程式导航传递参数，可以直接在onLoad事件中直接获取到

//生命周期函数
onLoad:function(options){
    console.log(options) //options 就是传递过来的参数对象
}

二、页面事件

1、下拉刷新

定义：指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

（1）开启下拉刷新

• 全局开启：app.json的window节点中，设置enablePullDownRefresh为true，不推荐
• 局部开启，页面的.json的window节点中，设置enablePullDownRefresh为true，推荐

（2）下拉窗口的样式设置

• backgroundColor：配置下拉窗口的背景色（.json中的window节点中设置）
• backgroundTextStyle：配置下拉刷新的Loading样式 （.json中的window节点中设置）

（3）监听下拉刷新事件

js文件中的onPullDownRefresh()函数即可监听

onPullDownRefresh:function(){
//业务逻辑
}

（4）停止下拉刷新效果

当下拉刷新后，加载效果会一直显示，需要手动关闭 wx.stopPullDownRefresh()

getList(spdr){
    //拉取数据
    //停止刷新动画
    spdr&&spdr()
}


onPullDownRefresh:function(){
//业务逻辑
    this.getList(wx.stopPullDownRefresh())
}

2、上拉触底事件

通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

（1）监听上拉触底事件

onReachBottom()

onReachBottom:function(){
    console.log('上拉触底')
}

（2）配置上拉触底距离

可以在全局或页面的.json文件中配置 onReachBottomDistance:50 默认是50

三、生命周期

分类：

• 应用生命周期 特指小程序从启动 -> 运行 -> 销毁的过程
• 页面生命周期 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

（1）生命周期函数的定义

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

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

  onLoad 生命周期函数中初始化页面的数据。

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

（2）应用的生命周期函数

App({
    //小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化工作
    onLaunch:function(options){},
    //小程序启动，或者从后台进入前台显示时触发
    onShow:function(options){},
    //小程序从前台进入后台时触发
    onHide:function(){}
})

（3）页面的生命周期函数

Page({
    //页面加载，一个页面只调用一次
    onLoad:function(optins){},
    //监听页面显示
    onShow:function(){},
    //监听页面初次渲染完成 一个页面只调用一次
    onReady:function(){},
    //监听页面隐藏
    onHide:function(){},
    //监听页面卸载，一个页面只调用一次
    onUnload:function(){}
})

三、WXS脚本

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中

wxs 的典型应用场景就是“过滤器”。类似与javascript 但又有区别

1、wxs与js的关系

• wxs有自己的数据类型

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

  function 函数类型、array 数组类型、 date 日期类型、

  regexp 正则

• wxs不支持es6及以上的语法形式

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

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

• wxs遵循这个commJS规范

  module 对象

  require() 函数

  module.exports 对象

2、基础语法

（1）内嵌wxs脚本

<view>{{m1.add()}}</view>

<wxs module='m1'> 
module.exports.add=function(){
    return 1
    }
</wxs>

（2）外联式的wxs脚本

书写外联的wxs index.wxs：

function add(){
    return 1
}

module.exports={
    add:add
}

在页面导入 index.wxml:

<view>{{m2.add()}}</view>

<wxs module='m2' src="../../utils/index.wxs"></wxs>

3、WXS的特点

• 与JS不相同，为了降低学习成本，大量借鉴了js，但是本质上是不同的
• 不能作为事件回调
• 具有隔离性 ，wxs 不能调用 js 中定义的函数、wxs 不能调用小程序提供的 API
• 性能好，在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍

第三部分学习目标

• 能够知道如何实现页面之间的导航跳转
• 能够知道如何实现下拉刷新效果
• 能够知道如何实现上拉加载更多效果
• 能够知道小程序中常用的生命周期函数

小程序-基础加强

一、自定义组件

1、自定义组件的创建与调用

（1）组件的创建

• 根目录创建components文件夹
• 在components文件见创建test文件夹，该文件夹用于组件的生成
• 在test文件上右键，选择新建component，则会自动生成对应的四个基础文件

（2）组件的调用

• 全局应引用：在小小程序的每个页面都可以使用

  在app.json文件中的usingComponents下配置组件的导入（key：value）

• 局部引用：只能在引入的页面使用

  在页面的.json文件中的usingComponents下配置组件的导入（key：value）

全局引用与局部引用

需要根据组件的使用频率和范围分析：

• 如果某组件在多个页面经常使用到，则建议“全局引用”
• 如果仅在特定的页面被用到，则建议“局部引用”

（3）组件与页面的区别

表面上都是由wxml、json、wxss、json构成的，但是页面的.js和.json文件有明显的不同

• 组件的.json文件中需要声明component:true属性
• 组件的.js文件中调用的式Component()函数
• 组件的事件处理函数需要在methods中声明

2、组件的样式隔离

（1）组件的样式隔离

默认情况下，自定义组件的样式只对当前的组件生效

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DCWgbdkE-1660228899378)(C:\Users\13658\AppData\Roaming\Typora\typora-user-images\image-20220811101013616.png)]

• 组件 A 的样式不会影响组件 C 的样式
• 组件 A 的样式不会影响小程序页面的样式
• 小程序页面的样式不会影响组件 A 和 C 的样式

好处：

• 防止外界的样式影响组件的样式
• 防止组件的样式破坏外界的样式

（2）组件样式隔离的注意点

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

（3）修改样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项。

Component({
    options:{
        styleIsolation:'isolated'
        //三个可选值
        //isolated：默认值 启用样式隔离 
        //apply-shared:页面的WXSS会受到组件的影响
        //shared：组件的WXSS会受到页面的影响，自定义组件的WXSS也会影响页面或者设置了apply-shared或shared的组件  ****
    }
})

3、组件的数据、方法和属性

• data：用于组件渲染的私有数据，定义在data下
• methods：事件的处理函数和自定义方法
• properties：接收父传子的数据

data和properties的区别：

• data更倾向于存储组件的私有数据
• properties更倾向于存储外界传递到组件内的数据

4、数据监听

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

Component({
    observers:{
        '字段A,字段B':function(A,B){
            //do
        }
    }
})

Component({
    observers:{
        '对象.属性A,对象.属性B':function(A,B){
            //do
        }
    }
})

5、组件的生命周期

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

其中最重要的生命周期韩式有三个：created、attached、detached

• created：

  无法调用this.setData

  通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

• attached：

  this.setData初始化完毕

  这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

• detached：

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

此外，定义 生命周期函数现在推荐在lifetimes中声明，且优先级最高

6、组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

Component({
    pageLifetimes:{
        show:function(){},
        hide:function(){},
        resize:function(){}
    }
})

6、插槽

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

（1）使用单个插槽

//组件使用者
<test>
    <view>我是插槽位置的数据</view>
</test>

/组件封装者
<view>
    <slot></slot>
</view>

（2）使用多个插槽

首先需要在js文件中的options中定义multipleSlots为true

//组件使用者
<test>
    <view slot="s1">我是插槽位置的数据111</view>
    <view slot="s2">我是插槽位置的数据222</view>
    <view slot="s3">我是插槽位置的数据333</view>
</test>

/组件封装者
<view>
    <slot name="s1"></slot>
    <slot name="s2"></slot>
    <slot name="s3"></slot>
</view>

7、父子组件之间的通信

三种方式

• 属性绑定

  用于父组件向子组件传输数据，仅能设置JSON兼容的数据

• 事件绑定

  用于子组件向父组件传递书数据，支持任意数据

• 获取组件实例

  通过this.selectComponent() 获取子组件实例对象，这样可以获取子组件的任意数据和方法

（1）属性绑定

//父组件
data:{
count:0
}

<view>
    <test count="{{count}}"></test>
</view>


//子组件
properties:{
count:{
	type:Number,
	default:1
}
}

<view>{{count}}</view>

（2）事件绑定

基本步骤：

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

   syncCount(e){
       console.log('syncCount')
   }
   

2. 在父组件的wxml中，通过自定义函数的形式，将1中的函数传递给子组件

   <view>
       <test bind:sync="syncCount"></test>
   </view>
   

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

   methods:{
       addCount(){
           this.setData({
               count:this.properties.count+1
           })
           this.triggerEvent('sync',{value:this.properties.count})
       }
   }
   

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

syncCount(e){
    this.setData({
        count:e.detail.value
    })
}

（3）获取组件实例

在父子间调用this.(‘id或class选择器’)

<my-test class="com" />

getChild(){
const child = this.selectComponent('.com')
//调用setData方法
child.setData({
count:child.properties.count+1
})
//调用子组件的方法
child.addCount()
}

8、behaviors

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

工作方式：

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被

合并到组件中

（1）创建behavior

创建js文件：

module.exports=Behavior({
    //属性节点
    peoperties:{},
    //私有数据
    data:{},
    //事件处理函数和自定义事件
    methods:{}
    //其他节点...
})

（2）导入并使用behavior

在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法

const comBehavior = require('../../my-behaviors')

Component({
    behaviors:[comBehavior]
})

（3）同名的覆盖规则

组件和它引用的 behavior 中可以包含同名的字段，此时可以参考如下 3 种同名时的处理规则

1. 同名的数据字段 (data)
   1. 若同名的数据字段都是对象类型，会进行对象合并；
   2. 其余情况会进行数据覆盖，覆盖规则为： 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
2. 同名的属性 (properties) 或方法 (methods)
   1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
   2. 若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
   3. 在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法
3. 同名的生命周期函数
   1. 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
   2. 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。
   3. 对于同种生命周期函数和同字段 observers ，遵循如下规则：
      • behavior 优先于组件执行；
      • 被引用的 behavior 优先于 引用者 behavior 执行；
      • 靠前的 behavior 优先于 靠后的 behavior 执行；

补充遗漏：纯数据字段

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

纯数据字段有助于提升页面更新的性能

使用方法：

Components({
    options:{
        pureDataPattern:/^_/
    },
    data:{
        _count:0 //纯数据字段 使用正则进行匹配
    }
})

二、使用npm包

小程序已经支持使用npm安装第三方包，从而提高开发效率

但是在小程序中使用npm包有如下限制：

• 不支持依赖于 Node.js 内置库的包
• 不支持依赖于浏览器内置对象的包
• 不支持依赖于 C++ 插件的包

1、安装与使用npm包

npm init -y 或者 yarn init //初始化生成packcage.json

npm install xxx 或者 yarn add xxx  //下载包

在小程序开发工具中构建npm包

2、一些好用的npm包

（1） miniprogram-api-promise 使API promise化

由于小程序官方提供的异步函数都是基于回调函数的，容易出现回调地狱问题，比如网络请求wx.request，并且可维护性、和可读性差

具体代码: (前提是下载安装好npm包)

import {promisifyAll} from 'miniprogram-api-promise'

const wxp = wx.p = {}

promisifyAll(wx,wxp)

发起请求具体代码：

async getList(){
   const res = await wx.p.request({
    url:'xxxxxxx'
    method:'GET',
       data:{
       name:'as'
   }
   })
}

（2）全局数据共享

类似于vue中的vuex

全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等

• mobx-miniprogram 用来创建 Store 实例对象
• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

创建Store实例

import {observable,action} from 'mobx-miniprogram'

export const store = observable({
    //数据字段
    num:1,
    sum:2,
    //计算属性
    get sum(){
        return this.num + this.sum
    },
    //action方法用于修改store中的数据
    updateNum:action(function(step){
        this.num+=step
    })
})

将store绑定到页面或组件中

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store.js'

//页面中
Page({
    onLoad:function(){
        this.storeBindings = createStoreBindings(this,{
            fields:['num','sum'],
            actions:['updataSum']
        })
    }
    onUnload:functon(){
    this.storeBindings.destoryStoreBindings()
}
})

//组件中
Component({
   behaviors:[createStoreBindings],
    storeBindings:{
        store,
        fields:{
            num:'num',
            sum:'sum'
        }
        actions:{
        updateNum:'updateNum'
    }
    }
})

在页面或组件中使用

<view>
    <text>{{num}}</text>
    <button bindtap='handler'></button>
</view>

//js
handler(){
this.updateNum(1)
}

三、分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

优点：

• 可以优化小程序首次启动的下载时间
• 在多团队共同开发时可以更好的解耦协作

1、分包前

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的

下载时间

2、分包后

包后，小程序项目由 1 个主包 + 多个分包组成：

• 主包

  一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源

• 分包

  只包含和当前分包有关的页面和私有资源

3、分包的加载规则

• 在小程序启动时，默认会下载主包并启动主包内页面，tabBar 页面需要放到主包中

• 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

  非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

4、分包的体积限制

• 整个小程序所有分包大小不超过 16M（主包 + 所有分包）
• 单个分包/主包大小不能超过 2M

5、配置方法

• app.json的subpackages节点中声明分包结构

  "subpackages":[
      {
          "root":'packageA', //分包的根目录
          "name":'p1', //分包的别名
          "pages":[
              "pages/cat", //当前分包下，所有页面对应的根目录
              "pages/dog"
          ]
      }
  ]
  

6、打包的原则

• 小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中
• 主包也可以有自己的 pages（即最外层的 pages 字段）
• tabBar 页面必须在主包内
• 分包之间不能互相嵌套

7、引用的原则

• 主包无法引用分包内的私有资源
• 分包之间不能相互引用私有资源
• 分包可以引用主包内的公共资源

8、独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

和其他普通包最主要的区别：是否依赖于主包才能运行

独立分包的应用场景

开发者可以按需，将某些具有一定功能独立性的页面配置到独立分包中。原因如下：

• 当小程序从普通的分包页面启动时，需要首先下载主包
• 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

如何使用？

添加independent属性为true即可

引用原则

• 独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！
• 主包无法引用独立分包内的私有资源
• 独立分包之间，不能相互引用私有资源
• 独立分包和普通分包之间，不能相互引用私有资源

*特别注意：独立分包中不能引用主包内的公共资源

9、分包预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

如何使用：

app.json中配置

"preloadRule":{
    "pages/contact/contact":{ //触发分包预下载的路径
        "network":"all", //network 在指定的网络状态下 下载 all 和 wifi
            "package":['p1'] //指定下载哪些包 可以是root 也可以是name别名
    }
}

注意：分包预下载的限制，同一个分包中的页面享有共同的预下载大小限额 2M

第四部分学习目标

• 能够知道如何自定义小程序组件
• 能够知道小程序组件中 behaviors 的作用
• 能够知道如何安装和配置 vant-weapp 组件库
• 能够知道如何使用 MobX 实现全局数据共享
• 能够知道如何对小程序的 API 进行 Promise 化