微信小程序的使用

// app.js 文件

App({
  //小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作
  onLaunch:function(options){},

  //小程序启动，或从后台进入前台显示时触发
  onShow:function(options){},

 // 小程序从前台进入后台时触发
  onHide:function(options){}
})

页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行声明，示例代码如下：

页面的.js文件：

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

四、小程序组件使用

1.小程序组件

微信官方文档有小程序的组件，地址：

https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

2.小程序的宿主环境-API

小程序官方把API分为了如下3大类：

（1）事件监听API

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

举例：wx.onWindowResize(function callback)监听窗口尺寸变化的时间

（2）同步API

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

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

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

（3）异步API

特点：类似于JQuery中的$.ajax(options)函数，需要通过success、fail、complete接受调用的结果

举例：wx.request()发起网络数据请求，通过success回调函数接受数据

五、模板与配置

1.数据绑定

参考官网：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

1.数据绑定的基本原则:

（1）在data中定义数据

在页面对应的.js文件中，把数据定义到data对象中即可

Page({
  data:{
    //字符串类型的数据
    info:'init data'，
    //数组类型的数据
    msgList:[{msg:'hello'},{msg:'world'}]
  }
})

（2）在WXML中使用数据

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

<view>{
  {要绑定的数据名称}}</view>

2.事件绑定

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

小程序中常用的事件

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

3.全局配置

1.全局配置文件及常用的配置项

参考官网：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:

（1）pages：记录当前小程序所有页面的存放路径

（2）window：全局设置小程序窗口的外观

（3）tabBar：设置小程序底部的tabBar效果

（4）style：是否启用新版的组件样式

2.全局开启下拉刷新功能

（1）概念:

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

设置步骤：app.json→window→把enablePullDownRefresh的值设置为true

注意：在app.json中启用下拉刷新功能，会作用于每个小程序页面

（2）设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，

设置步骤为:app.json →window→为backgroundColor指定16进制的颜色值。

（3）设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading 样式为白色，如果要更改loading样式的效果，

设置步骤为app.json -> window ->为backgroundTextStyle设定值，仅支持dark/light。

（4）设置上拉触底的距离

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

设置步骤: app.json -> window ->为onReachBottomDistance设置新的数值

注意:默认距离为50px，如果没有特殊需求，建议使用默认值即可。

3.配置tabBar

（1）什么是tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为:

底部 tabBar、顶部 tabBar

注意:tabBar中只能配置最少2个、最多5个tab页签当渲染顶部 tabBar时，不显示icon，只显示文本

（2）tabBar的六个组成部分

backgroundColor: tabBar的背景色

borderStyle: tabBar上边框的颜色

iconPath:未选中时的图片路径

selectediconPath:选中时的图片路径

selectedColor: tab 上的文字选中时的颜色

color: tab 上文字的默认（未选中）颜色

（3）tabBar节点的配置项

属性	类型	必填	默认值	描述
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

（4）每个tab项的配置选项

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