原生微信小程序详解

最新推荐文章于 2024-05-10 10:37:59 发布

嘿哈zzZ

最新推荐文章于 2024-05-10 10:37:59 发布

阅读量521

点赞数

文章标签：微信小程序小程序笔记学习前端

本文链接：https://blog.csdn.net/weixin_52799068/article/details/134249540

版权

1.代码构成

1.1 WXML模板

标签名称不同
- HTML（div,span,img,a）
- WXML（view,text,image,navigator）
属性节点不同
- <a herf="#">超链接</a>
- <navigator url="/pages/home/homr"></navigator>
提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染

1.2 WXSS样式

新增rpx尺寸单位
提供了全局样式和局部样式
WXSS仅支持部分CSS选择器
- .class 和 #id
- element
- 并集选择器、后代选择器
- ::after 和 ::before等伪类选择器

1.3 JS交互逻辑

app.js
- 整个小程序的项目入口文件，通过调用APP()函数来启动整个小程序
页面的.js文件
- 是页面的入口文件，通过调用Page()函数创建并运行页面
普通的.js文件
- 普通的功能模块文件，用来封装公共的函数或属性供页面使用

2.宿主环境

2.1 小程序

小程序的宿主环境为微信

2.2 宿主环境简介

通信模型
运行机制
组件
API

2.3 通信模型

小程序中通信的主体是渲染层和逻辑层
- WXML模板和WXSS样式工作在渲染层
- JS脚本工作在逻辑层
渲染层和逻辑层之间的通信：由客户端转发
逻辑层和第三方的服务器之间的通信：由微信客户端转发

在这里插入图片描述

2.4 运行机制

小程序启动过程
- 把小程序的代码下载到本地
- 解析app.json全局配置文件
- 执行app.js小程序入口文件，调用APP()创建小程序实例
- 渲染小程序首页
- 小程序启动完成
页面渲染过程
- 加载解析页面的.json配置文件
- 加载页面的.wxml模板和wxss样式
- 执行页面的.js文件，调用Page()创建页面实例
- 页面渲染完成

2.5 组件

组件分类
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map地图组件
- canvas画布组件
- 开放能力
- 无障碍访问

常用视图容器组件

view
- 普通试图区域
- 类似于HTML中的div，是一个块级元素
- 常用来实现页面布局效果
scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
- 属性
  - scroll-x 在X轴上滚动
  - scroll-y在Y轴上滚动
  - 注：横向或纵向滚滚动必须强制宽或高

swiper 和 swiper-item

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

属性

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

常用基础内容组件

text
- 文本组件
- 类似于HTML中的span标签，是一个行内元素
- selectable属性，实现长按选中文本效果
rich-text
- 富文本组件
- 支持把HTML字符串渲染为WXML结构
- nodes属性，把HTML字符串渲染为UI结构
button
- 按钮组件
- 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
- 属性
  - type=”warn“ 修改按钮颜色
  - size=”mini“ 修改按钮大小
  - plain 镂空按钮

image

图片组件
image组件默认宽度约为300px，高度约240px

model属性拉指定裁剪和缩放模式

model值	说明
scaleToFill	（默认值）不保持纵横比缩放，使图片宽高完全拉伸填满image元素
aspectFit	保持纵横比缩放，使图片的长边能完全显示出来
aspectFill	保持纵横比缩放，只保证图片的短边能完全展示出来
widthFix	宽度不变，高度自动变化
heightFix	高度不变，宽度自动变化

navigator
- 页面导航组件
- 类似于HTML中的a链接

2.6 API

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

3.模板与配置

3.1 数据绑定

在.js文件中的data中定义数据
在WXML中使用数据
用Mustache语法绑定数据

Mustache语法主要应用场景如下：
- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算）

3.2 事件绑定

事件类型

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

事件对象的属性列表

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

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

target 和 currentTarget 的区别
- target 是触发该事件的源头组件，而currentTarget 则是当前事件所绑定的组件
bindtap语法格式
- 通过bandtap绑定事
```
<button bindtap="btnHandler">点击事件</button>
```
- 在页面的.js文件中定义事件处理哈纳树，事件参数通过形参event来接收
```
 // 自定义事件
  btnHandler(e) {
    console.log(e);
  },
```

给data中的数据赋值

this.setData(dataObject)方法给页面中的data数据重新赋值

data: {
   numberTwo:2
 },
// 修改numberTwo的值       
 addNumber() {
     this.setData({
     	numberTwo:this.data.numberTwo + 1
 	})
 }

事件传参

不能直接在事件函数中传，使用 ata-参数名形式

<button bindtap="changeNumber" data-info="{{2}}">+2</button>

info会被解析为参数名，数值2被解析为参数值
事件处理函数中，通过e.target.dataset.参数名获取具体的参数值

 // 事件传参
  changeNumber(e) {
    this.setData({
      numberTwo:this.data.numberTwo + e.target.dataset.info
    })
  },

bindinput 语法格式

在小程序中，通过input来响应文本输入事件

通过bindinoput绑定输入事件

<input type="text" bindinput="inputChange"/>

在.js文件中定义事件处理函数

 // 输入框文本输入事件
  inputChange(e) {
      // e.detail.value 是变化后的新值
    console.log(e.detail.value);
  },

实现文本框和data之间的数据同步

定义数据
```
data{
	msg:'你好'
}
```

渲染结构

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

美化样式

绑定input事件处理函数

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

3.3 条件渲染

wx:if
wx:elif
wx:else
结合 wx:if
- 实现一次控制多个组件的展示与隐藏
- ```
<block wx:if="{{true}}">
	<view>1</view>
	<view>2</view>
</block>
```
- 并不是一个组件，是一个包裹性容器，不会再页面中渲染
hidden
- 直接使用hidden="{{true}}"也能控制元素的显示与隐藏
wx:if 对比 hidden
- 运行方式不同
  - wx:if 动态创建和移除元素
  - hidden 切换样式（display:none/block）
- 使用建议
  - hidden 频繁切换
  - wx:if 控制条件复杂，搭配wx:elif 、wx:else

3.4 列表渲染

wx:for
```
<view wx:for="{{arr1}}"> 
  索引为：{{index}} 值为：{{item}}
</view>
```
- wx:for-index 指定当前循环项的索引的变量名
- wx:for-item 指定当前项的变量名
wx:key
- 给列表项指定唯一key，提高渲染效率，类似于Vue中的key
- key不用{{}}
- ```
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
```

4.WXSS模板样式

WXSS具有大部分CSS特性，扩展的特性有：
- rpx尺寸单位
- @import样式导入
rpx
- rpx把所有设备屏幕宽度上分为750份，即当前屏幕总宽度为750rpx
样式导入
- @import后跟相对路径，用；表示语句结束
- ```
@import "comon.WXSS";
```
全局样式与局部样式
- 就近原则，全局与局部冲突，局部覆盖全局
- 当局部权重大于等于全局，才会覆盖全局样式

5.全局配置

app.json全局配置文件，常用配置如下：

pages ：页面存放路径

window：全局窗口外观

tabBar：底部tabBar效果

style：是否启用新版组件样式

window

包括navigationBar 和 background

配置项

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

tabBar

分类：顶部tabBar 和底部tabBar
tabBar中只能配置最少2个，最多5个tab’页签
渲染顶部tabBar时，不显示icon，只显示文本
6个组成部分
- backgroundColor：tabBar背景颜色
- selectedlconPath：选中时的图片路径
- borderStyle：tabBar上边框颜色
- iconPath：未选中时图片路径
- selectedColor：tab上的文字选中时的颜色
- color：tab上文字的默认（未选中）颜色

每个tab项的配置选择

属性	类型	必填	描述
pagePath	string	是	页面路径，页面必须在pages中预先定义
text	strign	是	tab上显示的文字
iconPath	string	否	未选中时的图片路径
selectedIconPath	string	否	选中时的图片路径

// app.json文件中

  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息"
    },
    {
      "pagePath": "pages/concate/concate",
      "text": "联系我们"
    }
  ]
  },

6.页面配置

页面配置与全局配置冲突时，采用页面配置

配置项

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

7.网络数据请求

限制
- 只能请求HTTPS类型接口
- 必须将接口域名添加到信任列表中

发送GET请求

调用wx.request()方法

 getData() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method:'GET',
      data:{
        name:'zs',
        age:22
      },
      // 请求成功的回调函数
      success:(res)=> {
        console.log(res.data);
      }
    })
  },

发送post请求

 // 发送post请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method:'POST',
      data:{
        name:'zs',
        age:22
      },
      // 请求成功的回调函数
      success:(res)=> {
        console.log(res.data);
      }
    })
  },

页面刚加载请求数据
- onLoad事件
关于跨域和Ajax说明
- 小程序不存在跨域问题
- 小程序没有XMLHttprequest对象，所有不能叫Ajax请求，叫网络数据请求

8.视图与逻辑

8.1页面导航

概念：页面之间的相互跳转
两种方式
- 声明式导航
  - 通过<navigator>组件实现页面跳转
- 编程式导航
  - 调用小程序导航API实现页面跳转

导航跳转

声明式导航
- 使用<navigator>，且要配置url 和 open-type
  - url 跳转地址
  - open-type 跳转方式，tabBar页面switchTab，非tabBar页面用navigate
  - 为了简便，导航到非tabBar页面时，open-type属性可以省略
```
<navigator open-type="switchTab" url="pages/message/message"></navigator>
```
- 后退导航
  - open-type 属性必须是 navigateBack
  - delta的值必须是数字，表示后退层级，层级为1时省略
```
<navigator open-type="navigateBack" delta="2"></navigator>
```

编程式导航

跳转到tabBar页面

调用wx.switchTab(object)方法

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

// 页面结构
<button bindtap="goIndex">跳转到index</button>

// 逻辑
goIndex(){
    wx.switchTab({
        url: '/pages/index/index',
    })
},

跳转到非tabBar页面
- 调用wx.navigateTo(object)方法
属性类型必选说明
url string 是页面路径，可带参数
success function 否成功回调
fail function 否失败回调
complete function 否结束回调（成功、失败都执行）

属性	类型	必选	说明
url	string	是	页面路径，可带参数
success	function	否	成功回调
fail	function	否	失败回调
complete	function	否	结束回调（成功、失败都执行）

后退导航

调用wx.navigateBack(object)方法

属性	类型	必选	说明
delta	number	否	回退层级，delta大于现有页面数，返回首页
success	function	否	成功回调
fail	function	否	失败回调
complete	function	否	结束回调（成功、失败都执行）

导航传参

声明式导航传参

路径后携带参数

<navigator url="pages/info/info?name=zs&age=20"></navigator>

编程式导航传参

路径携带参数

goInfo(){
    wx.navigateTo({
        url:"pages/info/info?name=ls&gender=男"
    })
}

在onLoad中接收导航参数

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      query:options
    })
  },

8.2 页面事件

下拉刷新
- 作用：刷新数据
- 启用下拉刷新
  - .json 中 enablePullDownRefresh 设置为 true
- 下拉刷新窗口样式
  - backgroundColor 窗口背景色 16进制颜色
  - backgroundTextStyle 下拉loading样式 dark 或 light
- 监听下拉刷新事件
  - .js文件中，通过 onPullDownRefresh()监听
- 停止下拉刷新
  - 调用wx.stopPullDownRefresh()停止当前页面刷新
上拉触底
- 通过onReachBottom()监听上拉触底事件
- 配置上拉触底距离
  - .json文件中onReachBottomDistance属性配置

8.3生命周期

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

应用生命周期函数

需要在 app.js 中声明

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

页面生命周期函数

页面.js文件中声明

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

8.4 WXS脚本

WXS和JS关系
- WXS有自己的数据类型
  - number、string、boolean、object
  - function、array、date 日期、regexp 正则
- WXS不支持ES6以上的语法形式
  - 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc
  - 支持：var定义变量、普通function函数等类似于ES5语法
- WXS遵循CommonJS规范
  - module对象
  - require()函数
  - mdule.export 对象

内嵌WXS脚本

必须提供 module 属性，用来指定当前WXS模块名称

<view>{{m1.toUpper(userName)}}</view>

<wxs module="m1">
    // 将文本转换为大写形式
    module.export.toUpper = function(str) {
    	return str.toUpperCase()
	}
</wxs>

外联wxs脚本

定义.wxs后缀名文件

// tools.wxs
function toLower(str) {
    return str.toLowerCase()
}
module.exports = {
    toLower:toLower
}

使用外联wxs脚本

必须添加 module 和 src 属性
module 指定模块名称
src 指定脚本路径，必须是相对路径

// 调用 m2 模块中的方法
<view>{{m2.toLower(country)}}</view>

// 引用外联的 tools.wxs 脚本，并命名为m2
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

WXS 特点
- 与JS不同
- 不能作为组件的事件回调，典型应用场景为“过滤器”
- 隔离性
  - wxs运行环境和其他JS代码是隔离的，体现在：
    - wxs不能调用js中定义的函数
    - wxs不能调用小程序API
- 性能好

9.组件

9.1引用组件

局部引用组件

// 在页面的.json文件中，引入组件
{
  "usingComponents": {
    "my-test":"/components/test/test"
  }
}

// 在页面的.wxml文件中，使用组件
<my-test></my-test>

全局组件

// 在app.json文件中，引入组件
{
  "pages":[],
  "window":{},
  "usingComponents": {
    "my-test":"/components/test/test"
  }
}

//在页面的.wxml文件中，使用组件
<my-test></my-test>

组件和页面的区别
- 组件的.json文件中需要声明"component":true
- 组件的.js文件中调用的是Component()函数，页面调用Page()
- 组件的事件处理函数需要定义到methods节点中

9.2自定义组件

样式
- 组件样式隔离
  - app.wxss中的全局样式对组件无效
  - 只有class选择器有样式隔离，id、属性、标签选择器无样式隔离
  - 注：在组件个引用组件的页面中使用class选择器，不要使用id、属性、标签
- 修改组件样式隔离选项
  - 通过 styleIsolation 属性修改
```
// 在组件的.js文件中新增如下配置
Component({
  // 修改样式隔离
  options:{
    styleIsolation:'isolated'
  }
})
// 或在组件的.json文件中新增如下配置
{
   "styleIsolation":'isolated'
}
```
  - styleIsolation的可选项
    
    可选项默认值描述
    isolated 是启用样式隔离
    apply-shared 否页面wxss样式会影响到组件，组件不会影响页面
    shared 否页面和组件互相影响，关闭样式隔离

可选项	默认值	描述
isolated	是	启用样式隔离
apply-shared	否	页面wxss样式会影响到组件，组件不会影响页面
shared	否	页面和组件互相影响，关闭样式隔离

数据、方法和属性

数据定义在data{}中

Component({
  /**
   * 组件的初始数据
   */
  data: {
    count:0
  },
})

方法定义在methods{}中

自定义方法都以下划线（_showCount）开头

Component({
	methods: {
    // 数字加一
    addCount() {
      this.setData({
        count:this.data.count + 1
      })
      this._showCount()
    },
    // 提示框
    _showCount() {
      wx.showToast({
        title: 'count是' + this.data.count,
      })
    }
  }
})

properties属性

用来接收外界传递到组件中的数据

Component({
   /**
   * 组件的属性列表
   */
  properties: {
    // 1.简写，指定类型，不指定默认值
    max:Number,
    // 2.完整写法，指定类型和默认值
    min:{
      type:Number,
      value:10
    }
  },
})

data 和 properties 区别
- data 和 properties 都是可读可写
- data 倾向于存储组件的私有数据
- properties 倾向于存储外界传递到组件中的数据
- this.data === this.properties

数据监听

类似于Vue中的 watch

监听数值变化：组件.js中 observers 属性

Components({
	observers:{
    '字段A,字符B':function(字段A的新值,字段B的新值) {
    	// 操作数据
    }
  }
})

监听单个或多个对象属性变化

Components({
	observers:{
    '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值) {
    	// 触发此监听器有三种情况：
    	// 为A属性赋值
    	// 为B属性赋值
    	// 直接为整个对象赋值
    }
  }
})

监听对象所有属性的变化

使用通配符 ** 来监听对象中所有属性的变化

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

纯数据字段

指不用于界面渲染，也不会传递给其他组件的data字段
设置纯数据字段的好处：提升页面性能

使用规则

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

Component({
  // 配置对象
  options:{
    // 指定所有 _ 开头的数据字段为纯数据字段
    pureDataPattern:/^_/
  },
  data: {
    _rgb:{
      r:0,
      g:0,
      b:0
    },
    fullColor:'0,0,0'
  },
})

组件的生命周期

组件全部生命周期函数

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

created
- 组建刚被创建好时调用
- 此时不能调用setData
- 只能给组件的 this 添加一些自定义属性字段
attached
- 组件完全初始化完毕进入页面节点树后调用
- 此时，this.data已被初始化完毕
- 大多数初始化工作在此时进行（例如：发请求获取初始数据）
detached
- 组件离开页面节点树后调用
- 退出页面时触发
- 此时，适合做清理性质工作

liftimes 节点

生命周期可以定义在lifetimes字段中

Component({
  // 推荐用法
  lifetimes:{
    attached(){}, // 组件完全初始化完毕进入页面节点树后调用
    detached(){}, // 组件离开页面节点树后调用
  },
    
  // 旧方法
  attached(){}, // 组件完全初始化完毕进入页面节点树后调用
  detached(){}, // 组件离开页面节点树后调用
})

组件所在页面的生命周期
- 有时自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期
  
  生命周期参数描述
  show 无组件所在的页面被展示时执行
  hide 无组件所在的页面被隐藏时执行
  resize Object Szie 组件所在的页面尺寸变化时执行
```
Component({
  // 组件所在页面的生命周期
  pageLifetimes:{
    show:function(){}, // 页面被展示
    hide:function(){}, // 页面被隐藏
    resize:function(){} // 页面尺寸变化
  }
})
```

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

9.3 插槽

单个插槽

slot

// 组件内
<view>组件内容</view>
<slot></slot>
// 页面内
<my-test2>
  <view>页面内容</view>
</my-test2>

启用多个插槽

Component({
  // 默认不能使用多个插槽，需要开启
  options:{
    // 启用多个 slot
    multipleSlots:true
  },
})

使用多个插槽

// 组件内 定义name属性
<slot name="before"></slot>
<slot name="after"></slot>
// 页面内 使用slot属性
 <view slot="before">页面内容1</view>
 <view slot="after">页面内容2</view>

9.4 组件通信

父子组件通信
- 属性绑定
  - 父传子，仅能设置JSON兼容的数据
- 事件绑定
  - 子传父，可以传递任意数据
- 获取组件实例
  - 父组件通过this.selectComponent() 获取子组件实例对象
  - 可以直接访问子组件的任意数据和方法

属性绑定

// 父组件属性传参
<my-test3 count="{{count}}"></my-test3>
// 子组件的 properties 属性接收
properties: {
    count:Number
},

事件绑定

// 1.父组件定义事件
syncCount(e){
    // console.log('syncCount');
    // 子组件传递过来的值在 e.detail.value中
    this.setData({
    count:e.detail.value
    })
}

// 2.子组件标签绑定事件
<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>

// 3. 子组件触发事件  triggerEvent 方法
// 触发父组件的自定义事件,将数值同步给父组件
this.triggerEvent('sync',{value:this.properties.count})

获取组件实例

父组件调用this.selectComponent(“id或class选择器”)获取组件实例

// wxml
// 给子组件标签绑定类名
<my-test3 count="{{count}}" bind:sync="syncCount" class="customA"></my-test3>
<button bindtap="getChild">获取子组件实例</button>

// 获取子组件实例
getChild() {
    // 获取子组件
    const child = this.selectComponent('.customA')
    // console.log(child);
    // 调用子组件 setData 方法
    child.setData({
        count:child.properties.count +1
    })
     // 调用子组件 addCount 方法
    child.addCount()
},

9.5 behaviors

概念
- 用于实现组件间代码共享的特性，类似Vue中的“mixins”
工作方式
- 可以包含属性、数据、生命周期函数、方法
- 组件引用它时，它的属性、数据等会被合并到组件中
- 每个子组件可以引用多个 behavior，behavior也可以引用其他 behavior

创建 behavior

// 调用 Behavior() 方法,创建实例对象，并向外暴露
module.exports = Behavior({
  data:{
    username:'zs'
  },
  properties:{},
  methods:{}
})

导入并使用 behavior

// 1.使用 require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behaviors/my-behavior')
Component({
  // 2.将导入的 behavior 实例对象，挂载发哦 behaviors 数组节点中
  behaviors:[myBehavior],
})
// 3.页面直接使用
<view>behavior里的值为：{{username}}</view>

behavior 可用的节点

节点	类型	描述
properties	Object Map	属性
data	Object	数据
methods	Object	方法
behavior	String Array	引入的其他behavior
created	Function	生命周期函数
attached	Function	生命周期函数
ready	Function	生命周期函数
moved	Function	生命周期函数
detached	Function	生命周期函数

10.使用npm包

10.1 限制

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

10.2 Vant Weapp

官网
介绍 - Vant Weapp (youzan.github.io)

10.3 API Promise化

安装依赖
```
npm i --save miniprogram-api-promise
```

实现API Promise化

// 在app.js中，调用 romisifyAll() 方法
// 即可实现异步API 的 Promsie 化
import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)

11.全局数据共享

11.1 依赖

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

11.2 创建store实例

// store/store.js文件
// 导入创建store的依赖
import {observable,action} from 'mobx-miniprogram'

// 创建并暴露一个store
export const store = observable({
  // 数据字段
  num1:1,
  num2:2,
  // 计算属性
  get sum() {
    return this.num1 + this.num2
  },
  // actions函数，用来修改 store 中的数据
  updateNum1:action(function(step){
    this.num1 = step
  }),
  updateNum2:action(function(step){
    this.num2 = step
  })
})

11.3 将 sotre 中的成员引入页面

// 页面的js文件
// 1.导入依赖和store
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
// 2.页面初始化时将数据存储到 this
onLoad(options) {
    this.storeBindings = createStoreBindings(this,{
        store,
        fields:['num1','num2','sum'],
        actions:['updateNum1','updateNum2']
    })
},
// 3.页面卸载，清理store
onUnload() {
   this.storeBindings.destoryStoreBindings()
},

11.4 在页面上使用sotre

// 页面 wxml
<view>{{num1}} + {{num2}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">num1+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">num1-1</van-button>
// 页面 .js
btnHandler1(e) {
   console.log(e);
   this.updateNum1(e.target.dataset.step)
},

11.5 在组建中引入 store

// 1.导入依赖
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
// 2.配置项
Component({
  // 通过 storeBindingsBehavior 来实现自动绑定
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store, // 指定需要绑定的 store（数据源）
    fields:{
      num1:'num1',
      num2:'num2'
    },
    actions:{
      updateNum2:'updateNum2'
    }
})

11.6 在组建中使用 store

// 页面 wxml
<view>{{num1}} + {{num2}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">num2+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">num2-1</van-button>
// 页面 .js
methods: {
    btnHandler2(e){
        this.updateNum2(e.target.dataset.step)
    }
}

12.分包

12.1 分包项目构成

组成：一个主包+多个分包
- 主包：启动页面+TabBar页面，及公共资源
- 分包：分包页面和私有资源
加载规则
- 小程序启动 => 下载主包并启动主包内页面
- 用户进入分包页面 => 下载对应分包，进行展示
分包体积限制
- 整个程序不超过 16M （主包+分包）
- 单个分包/主包不超过 2M

12.2 使用配置

配置方法
打包原则
- 小程序会按 subpackges 的配置进行分包，subpackges之外的目录打包到主包
- 主包也可以有自己的pages（即最外层的pages字段）
- tabBar页面必须在主包内
- 分包之间不能互相嵌套
引用原则
- 主包无法引用分包内的私有资源
- 分包之间不能互相引用资源
- 分包可以引用主包内的公共资源

12.3 独立分包

概念
- 可以独立于主包和其他分包而单独运行的分包
区别
- 不同分包必须依赖主包才能运行
- 独立分包可以在不下载主包的情况下独立运行
独立分包配置
引用原则
- 独立分包和普通分包及主包之间，是相互隔绝的，不能互相引用彼此资源
- 注：独立分包也不能引用主包内公共资源

12.4 分包预下载

由框架自动预下载需要加载的页面分包，提高分包页面启动速度

预下载行为，在进入指定页面时触发，在app.json 的 preoladRule 节点配置

// app.json
"preloadRule": {
    // 触发预下载的页面路径
    "pages/concate/concate":{
        // 预下载的分包
        "packages": ["p1"],
         // 可以预下载的网络模式
         "network": "all"
    }
},

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

{{1}}">num2+1
num2-1
// 页面 .js
methods: {
btnHandler2(e){
this.updateNum2(e.target.dataset.step)
}
}




### 12.分包

####  12.1 分包项目构成

- 组成：一个主包+多个分包

- 主包：启动页面+TabBar页面，及公共资源
- 分包：分包页面和私有资源

[外链图片转存中...(img-tjy7ki2J-1699259633533)]

- 加载规则
- 小程序启动 => 下载主包并启动主包内页面
- 用户进入分包页面 => 下载对应分包，进行展示
- 分包体积限制
- 整个程序不超过 16M （主包+分包）
- 单个分包/主包不超过 2M

#### 12.2 使用配置

- 配置方法

[外链图片转存中...(img-tHM8E3ME-1699259633533)]

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

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

#### 12.3 独立分包

- 概念

- 可以独立于主包和其他分包而单独运行的分包

  [外链图片转存中...(img-mNitFqpA-1699259633534)]

- 区别

- 不同分包必须依赖主包才能运行
- 独立分包可以在不下载主包的情况下独立运行

- 独立分包配置

[外链图片转存中...(img-2TKBrqpC-1699259633535)]

- 引用原则
- 独立分包和普通分包及主包之间，是相互隔绝的，不能互相引用彼此资源
- 注：独立分包也不能引用主包内公共资源

#### 12.4 分包预下载

- 由框架自动预下载需要加载的 页面分包，提高分包页面启动速度

- 预下载行为，在进入指定页面时触发，在app.json 的 preoladRule 节点配置

```js
// app.json
"preloadRule": {
    // 触发预下载的页面路径
    "pages/concate/concate":{
        // 预下载的分包
        "packages": ["p1"],
         // 可以预下载的网络模式
         "network": "all"
    }
},

分包预下载限制
- 同一个分包中的页面享有共同的预下载大小限额 2M
[外链图片转存中…(img-rXEVFbSh-1699259633536)]

嘿哈zzZ

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生微信小程序详解

通信模型运行机制组件API样式组件样式隔离app.wxss中的全局样式对组件无效只有class选择器有样式隔离，id、属性、标签选择器无样式隔离注：在组件个引用组件的页面中使用class选择器，不要使用id、属性、标签修改组件样式隔离选项通过 styleIsolation 属性修改// 在组件的.js文件中新增如下配置// 修改样式隔离options:{})// 或在组件的.json文件中新增如下配置styleIsolation的可选项可选项默认值描述。
复制链接

扫一扫