关于微信小程序开发的一些知识点

下载微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.UI组件、样式、json配置、生命周期

text文本

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选,除了text组件外,其他组件都无法长按选中
space	String	false	显示连续空格,可选值:ensp、emsp、nbsp
decode	Boolean	false	是否解码,可解析:&nbsp、&lt、&gt、&amp、&apos、&ensp、&emsp

view视图容器

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类,当值为none时,没有点击效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的父节点出现点击态
hover-start-time	Number	50	按住后多久出现点击状态,单位毫秒
hover-stay-time	Number	40	手指松开后点击态保留时间,单位毫秒

button按钮

属性名	类型	默认值	说明
size	String	default	按钮大小
type	String	default	按钮的样式类型: primary, warn
plain	Boolean	false	按钮是否镂空,背景透明色
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带loading图标

input输入框

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	‘text’	input的类型:text,number,idcard(身份证),digit(带小数点的数字)
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时的占位符
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度,值为-1时不限制最大长度

image图片

1.scr：支持本地和网络上的图片

2.mode：指定图片裁剪、缩放的模式，image组件默认宽300px、高225px

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用来决定 WXML 的组件应该怎么显示

rpx

rpx（responsive pixel）：是微信小程序独有的、解决屏幕自适应的尺寸单位

1.可以根据屏幕宽度进行自适应。不论大小屏幕，规定屏幕宽为750rpx。

2.通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配

@import 样式导入

使用@import 可以导入外联样式表

语法: @import ‘wxss样式表的相对路径’;

app.json配置文件的作用

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

​ page 数组：配置小程序的页面路径

​ window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景颜色

​ tabBar 对象：配置小程序的tab栏效果,只能配置最少2个,最多5个tab标签,当渲染顶部tabBar时,不显示icon,只显示文本

window节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleTex	String	字符串	导航栏标题文字内容
navigationBarBackgroundColo	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 的组成部分

background：导航条背景色

selectedlconPath：选中时的图片路径

borderStyle：tabBar上边框的颜色

iconPath：未选中时的图片

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

list的配置项如下：

属性	类型	必填	描述
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon

page.json配置列表

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		导航栏标题文字内
backgroundColor	HexColor		窗口的背景色
backgroundTextStyle	String	#ffffff	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否开启当前页面下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置

生命周期

1.应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程

2.页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大

应用生命周期函数

app.js是小程序执行的入口文件，在app.js中必须调用App()函数，且只能调用一次。其中，App()函数是用来注册并执行小程序的。

App(Object)函数接收一个Object参数，可以通过这个Object参数，指定小程序的生命周期函数。

例如：

App({
  // 小程序初始化完成时，执行此函数，可以做一些初始化的工作。
  onLaunch: function(options) {},
  // 小程序显示到屏幕上的时候，执行此函数。
  onShow  : function(options) {},
  // 小程序被最小化的时候，执行此函数。
  onHide  : function() {}
})

页面生命周期函数

每个小程序页面，必须拥有自己的.js文件，且必须调用 Page() 函数，否则报错。其中Page()函数用来注册小程序页面。

Page(Object) 函数接收一个Object参数，可以通过这个Object参数，指定页面的生命周期函数。

例如：

Page({
  onLoad  : function(options) {}, // 监听页面加载
  onShow  : function() {},        // 监听页面显示
  onReady : function() {},        // 监听页面初次渲染完成
  onHide  : function() {},        // 监听页面隐藏
  onUnload: function() {}         // 监听页面卸载
})

2.绑定、脚本、页面操作

数据绑定

小程序中每个页面，由4部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其它业务逻辑；

如果要在.js文件内定义页面的数据，只需把数据定义到 data 节点下即可；

示例代码如下：

Page({
  data: {
    info: 'init data', // 字符串类型的数据
    array: [{msg: '1'}, {msg: '2'}] // 数组类型的数据
  }
})

Mustache语法

把data中的数据绑定到页面中渲染，使用Mustache 语法（双大括号）将变量包起来即可；

语法格式为： <view>{{ 要绑定的数据名称 }}</view>

绑定属性

页面结构： <view id="item-{{id}}"> </view>

页面数据：

Page({
  data: {
    id: 0
  }
})

bindtap绑定触摸事件

1.通过 bindtap，可以为组件绑定触摸事件，语法如下：

<view bindtap=“tapName”> Click me! <view>

2.在相应的Page定义中写上相应的事件处理函数，事件参数是event

Page({
  inputName: function(event) {
    console.log(event)
  }
})

bindinput绑定文本框输入事件

1.通过 bindinput，可以为文本框绑定输入事件，语法如下

<input bindinput=“inputName”><input>

2.在相应的Page定义中写上相应的事件处理函数，事件参数是event

Page({
  inputName: function(event) {
    console.log(event)
  }
})

data与文本框直接数据同步

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

inputName: function (event) {
	this.setData({
	msg: event.detail.value // 为 data 中的 msg 重新赋值
	})
}

事件传参

1.不能在绑定事件的同时传递参数

2.通过 data-*自定义属性传参,如下：

//其中，info 会被当作参数名，数值 123 会被当作参数值。
<button bindtap='btnHandler’ data-info=“{{123}}”>事件传参</button>

3.通过事件参数 event.target.dataset.参数名，能够获取data-*自定义属性传递到事件处理函数中的参数

btnHandler: function(event){
console.log(event.target.dataset.info)
}

wxs脚本

wxs（WeiXin Script）是小程序的一套脚本语言，结合WXML，可以构建出页面的结构

1.没有兼容性：wxs不依赖于运行时的基础库版本，可以在所有版本的小程序中运行

2与 javascript 不同：wxs与javascript是不同的语言，有自己的语法，并不和javascript一致

3.隔离性：wxs的运行环境和其他javascript代码是隔离的，wxs中不能调用其他javascript文件中定义的函数，也不能调用小程序提供的API

4.不能作为事件回调：wxs 函数不能作为组件的事件回调

5.iOS设备上比 javascript 运行快：由于运行环境的差异，在iOS设备上小程序内的wxs会比javascript代码快2~ 20 倍。在android设备上二者运行效率无差异

6.wxml 文件中的每个 <wxs></wxs> 标签，必须提供一个 module 属性，用来指定当前 <wxs></wxs> 标签的模块名。在单个wxml文件内，建议其值唯一

wxs 遵循 CommonJS模块化规范

在wxs中，可以使用CommonJS中规定的如下成员：

1.module 对象：每个wxs都是独立的模块，每个模块均有一个内置的module对象，每个模块都有自己独立的作用域。

2.module.exports：由于 wxs拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，通过module.exports 属性，可以对外共享本模块的私有变量与函数。

3.require函数：在.wxs模块中引用其他 wxs 文件模块，可以使用require函数。

wx:if

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if --block wx:for用法和这个类似

因为 wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block></block> 标签将多个组件包装起来，并在上边使用wx:if控制属性

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意：<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

hidden

在小程序中，直接使用 hidden="{{condition}}" 也能控制元素的显示与隐藏

<view hidden="{{condition}}"> 条件为 true 隐藏，条件为 false 显示 </view>

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

使用 wx:for-item 可以指定数组当前元素的变量名

使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}"  wx:key="index" wx:for-index="idx" wx:for-item="itemName">
   索引是：{{idx}} 当前项是：{{itemName}}
</view>

key 值的注意点

①key 值必须具有唯一性，且不能动态改变

②key 的值必须是数字或字符串

③保留关键字 *this 代表在 for 循环中的 item 本身，它也可以充当 key 值，但是有以下限制：需要 item 本身是一个唯一的字符串或者数字。

④如不提供 wx:key，会报一个warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

下拉刷新

下拉刷新是移动端更新列表数据的交互行为，用户通过手指在屏幕上自上而下的滑动，可以触发页面的下拉刷新，更新列表数据

启用下拉刷新两种方式：

①需要在 app.json 的window 选项中或页面配置中开启enablePullDownRefresh。但是，一般情况下，推荐在页面配置中为需要的页面单独开启下拉刷新行为。

②可以通过 wx.startPullDownRefresh() 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。当处理完下拉刷新后，下拉刷新的 loading效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的loading效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。

下拉刷新窗口的样式配置

需要在 app.json 的 window 选项中或页面配置中修改backgroundColor 和 backgroundTextStyle 选项。

lbackgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制颜色值

lbackgroundTextStyle用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

上拉加载更多

在移动端，随着手指不断向上滑动，当内容将要到达屏幕底部的时候，页面会随之不断的加载后续内容，直到没有新内容为止，我们称之为上拉加载更多。上拉加载更多的本质就是数据的分页加载

onPageScroll(obj) 监听用户滑动页面事件

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离,单位px

onShareAppMessage(obj)

监听用户点击页面内转发按钮（组件open-type=“share”）或右上角菜单“转发”按钮的行为,并自定义转发内容。其中Object参数说明如下：

参数	类型	说明
from	String	转发事件来源;button：页面内转发按钮;menu：右上角转发菜单
target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
webViewUrl	String	页面中包含<web-view>组件时，返回当前<web-view>的url

同时，此转发事件需要 return 一个 Object，用于自定义转发内容，返回内容如下

参数	说明	默认值
title	转发标题	当前小程序的名称
path	转发路径	当前页面path,必须是以/开头的完整路径
imageUrl	自定义图片路径,支持PNG和JPG	使用默认截图

onTabItemTap(Object)

点击 tab 时触发，其中 Object参数说明如下：

参数	类型	说明
index	String	被点击tabItem的序号,从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

3.页面导航、网络数据请求、组件

页面导航

页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：

① 声明式导航：通过点击navigator 组件实现页面跳转的方式；

② 编程式导航：通过调用小程序的API接口实现跳转的方式；

声明式导航

1.导航到非 tabBar 页面：非 tabBar页面指的是没有被当作 tabBar进行切换的页面。

<navigator url='/pages/info/info'>去info页面</navigator>

上述代码使用 url 属性指定要跳转到的页面路径；其中，页面路径应该以 / 开头，且路径必须提前在app.json的 pages节点下声明，才能实现正常的跳转。

2.导航到 tabBar 页面：如果 navigator 组件单纯使用 url 属性，无法导航到 tabBar 页面，需要结合 open-type 属性进行导航

<navigator url='/pages/home/home' open-type='switchTab'>
    导航到home页面
</navigator>

3.后退导航：需要把 open-type 设置为 navigateBack，同时使用 delta属性指定后退的层数

<navigator open-type='navigateBack' delta='1'>
    返回上一页
</navigator>

编程式导航

1.导航到非 tabBar 页面：通过 wx.navigateTo(Object object) 方法，可以跳转到应用内的某个页面。但是不能跳到 tabbar页面

属性	类型	是否必填	说明
url	String	是	需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ?分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

2.导航到 tabBar 页面：通过 wx.switchTab(Object object) 方法，可以跳转到 tabBar页面，并关闭其他所有非 tabBar页面

属性	类型	是否必填	说明
url	String	是	需要跳转的 tabBar 页面的路径(需在app.json的tabBar字段定义的页面),路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

3.后退导航：通过 wx.navigateBack(Object object) 方法，关闭当前页面，返回上一页面或多级页面

属性	类型	是否必填	说明
delta	number	是	返回的页面数,如果delta大于现有页面,则返回到首页
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

导航传参

1.声明式导航传参：navigator 组件的 url属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ?分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

<navigator url='/pages/logs/logs?name=zs&age=20'>去logs页面</navigator>

2.编程式导航传参：wx.navigateTo(Object object) 方法的 object 参数中，url 属性用来指定需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

wx.navigateTo({
  url: '/pages/logs/logs?name=zs&age=20',
})

3.接收传参：最终导航到的页面可以在 onLoad 生命周期函数中接收传递过来的参数

//生命周期函数--监听页面加载
onLoad: function(options) {
   console.log(options) // options 就是导航传递过来的参数
}

4.自定义编译模式快速传参

小程序每次修改代码并编译后，会默认从首页进入，但是在开发阶段，我们经常会针对特定的页面进行开发，为了方便编译后直接进入对应的页面，可以配置自定义编译模式，步骤如下：

①单击工具栏上的“普通编译”下拉菜单；

②单击下拉菜单中的“添加编译模式”选项；

③在弹出的“自定义编译条件窗口”，按需添加模式名称、启用页面、启动参数、进入场景等。

网络数据请求

配置服务器域名

每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信。

服务器域名请在 「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：

1.域名只支持 https(request、uploadFile、downloadFile)和wss(connectSocket) 协议

2.域名不能使用 IP地址或localhost

3.域名必须经过 ICP备案

4.服务器域名一个月内可申请5次修改

发起 get请求

调用 wx.request(Object object) 方法发起 get请求

wx.request({// 请求的URL地址，必须基于 HTTPS 协议
url: 'https://www.liulongbin.top:8082/api/get',
// 发送到服务器的数据
data: { name: 'zs', age: 20 },
// 成功之后的回调函数
success: function(result) {
	console.log(result)
}
})

发起post请求

调用 wx.request(Object object) 方法发起 post请求

wx.request({
url: 'https://www.liulongbin.top:8082/api/post',
method: 'POST', // 设置请求类型，如果不设置，默认发起 GET 请求
data: { name: 'ls', gender: '男' }, // 发送到服务器的数据
success: function(result) {
	console.log(result)
}
})

引用组件

①在需要引用组件的页面中，找到页面的.json 配置文件，新增 usingComponents节点

②在 usingComponents中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的相对引用路径

③在页面的 .wxml 文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上

使用样式美化组件

组件对应 wxss 文件的样式，只对组件 wxml内的节点生效。编写组件样式时，需要注意以下几点：

①组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

②组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

③子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

④继承样式，如 font 、 color ，会从组件外继承到组件内。

⑤除继承样式外， app.wxss 中的样式、组件所在页面的样式对自定义组件无效。

为组件传递properties的值

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
  </component-tag-name>
</view>

组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData来改变绑定的数据字段

注意：在定义 properties时，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时，则对应使用连字符写法（property-name=“alue”），应用于数据绑定时，采用驼峰写法（attr="{{propertyName}}"

数据监听

数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。作用类似于vue 中的 watch。数据监听器从小程序基础库版本2.6.1 开始支持。

Component({
  observers: {
    '字段A, 字段B': function(字段A的新值，字段B的新值) {
      // do something
    }
  }
})

监听子数据字段的变化

Component({
  observers: {
    'some.subfield': function (subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
    },
    'arr[12]': function (arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
    }
  }
})

组件的主要生命周期

1.组件实例刚刚被创建好时， created生命周期被触发。此时还不能调用 setData 。通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

2.在组件完全初始化完毕、进入页面节点树后， attached生命周期被触发。此时， this.data 已被初始化完毕。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

3.在组件离开页面节点树后， detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached 会被触发。

Component({
  lifetimes: {
    attached() {}, // 在组件实例进入页面节点树时执行
    detached() {}, // 在组件实例被从页面节点树移除时执行
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached() {}, // 在组件实例进入页面节点树时执行
  detached() {}, // 在组件实例被从页面节点树移除时执行
  // ...
})

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

Component({
  pageLifetimes: {
    show() { // 页面被展示
    },
    hide() { // 页面被隐藏
    },
    resize(size) { // 页面尺寸变化
    }
  }
})

4.插槽、WePY框架

默认插槽

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

启用多个插槽

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

可以在组件的 wxml 中使用多个 slot 标签，以不同的 name 来区分不同的插槽,使用时，用 slot 属性来将节点插入到不同的 slot 中

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

组件之间的基本通信方式

①WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。

②事件：用于子组件向父组件传递数据，可以传递任意数据。

如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法

通过事件监听实现子向父传值

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

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

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

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

WePY框架

WePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于Vue.js，使用 WePY 框架能够提高小程序的开发效率。

注意：WePY 只是小程序的快速开发框架之一，市面上还有如 mpvue 之类的小程序开发框架也比较流行

安装WePY框架

npm install wepy-cli -g

初始化WePY项目

wepy init standard myproject

其中，”wepy init” 是固定写法，代表要初始化 wepy 项目；”standard” 代表模板类型为标准模板，可以运行”wepy list” 命令查看所有可用的项目模板； ”myproject” 为自定义的项目名称。

注意：创建项目的时候，要勾选 ESLint 选项！

使用 wepy init 命令初始化项目后，只是得到了一个模板项目，如果想开启实时编译，得到小程序项目，步骤如下：

①运行 cd myproject 切换至 WePY 项目根目录

②运行 npm install 安装 WePY 项目依赖项

③运行 wepy build --watch 开启实时编译

注意：wepy build --watch 命令，会循环监听 WePY 项目中源代码的变化，自动编译生成小程序项目，生成的小程序项目默认被存放于dist 目录中。

创建 .wpy 页面注意事项

①每个页面的 script 标签中，必须导入 wepy 模块，并创建继承自 wepy.page 的页面类；否则会报错。

②每个页面的路径，必须记录到 app.wpy 的 config ->pages 数组中。

页面路径记录完毕之后，必须再回到页面文件中，摁下 Ctrl + S 快捷键重新编译生成页面，否则会报错

事件传参优化写法

如果 @ 符号绑定的事件处理函数需要传参，可以采用优化的写法，示例如下：

原 bindtap="clickHandler"data-index={{index}} 替换为@tap="click({{index}})"

使用wxs脚本

①将 wxs 脚本定义为外联文件，并且后缀名为.wxs

②在 <script></script>标签内，通过 import 导入相对路径的 wxs 模块

import testWXS from '../wxs/test.wxs'

③在当前页面的 class 类中，通过 wxs = { } 注册刚才导入的 wxs 模块

wxs = {
    test: testWXS
  }

注意：被注册的 wxs 模块，只能在当前页面的 template 中使用，不能在script中使用

配置 promisify 启用 async 和 await

需要手动开启，在src -> app.wpy ，找到constructor() 构造函数,添加this.use('promisify')

constructor() {
  super()
  this.use('requestfix')
  this.use('promisify') // 添加此行代码，即可启用 async 和 await
}

使用 WePY 发起get请求

//通过 wepy.request() 发起get请求
methods = {
  async getInfo() {
    const res = await wepy.request('https://www.liulongbin.top:8082/api/get')
    console.log(res)
  }
}

使用 WePY 发起post请求

methods = {
  async postInfo() {
    const res = await wepy.request({
      url: 'https://www.liulongbin.top:8082/api/post',
      method: 'post',
      data: { name: 'zs', age: 20 }
    })
    console.log(res)
  }
}

异步更新数据

在异步函数中更新数据的时候，页面检测不到数据的变化，必须手动调用 this.$apply 方法, 强制页面重新渲染

methods = {
  async getInfo() { // 被 async 修饰的函数叫做异步函数
    const res = await wepy.request('https://www.liulongbin.top:8081/api/get’)
    this.getMsg = res.data
    //需要重新渲染页面数据才能更新
    this.$apply()
  }
}