Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 微信小程序数据操作、自定义事件、微信API、路由组件、变量作用域、网络通讯等知识点详解
Blogger Information
Blog 128
fans 9
comment 5
visits 241249
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微信小程序数据操作、自定义事件、微信API、路由组件、变量作用域、网络通讯等知识点详解
　一纸荒凉* Armani
Original
1764 people have browsed it

微信小程序

十、数据操作

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

1、数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

  1. <!--wxml-->
  2. // 输出内容
  3. <view> {{message}} </view>
  4. // 组件属性
  5. <view id="item-{{id}}"> </view>
  6. // 控制属性
  7. <view wx:if="{{condition}}">显示</view>
  8. // 关键字
  9. <checkbox checked="{{false}}"> </checkbox>
  10. <checkbox checked="{{true}}"> </checkbox>
  11. // 特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
  1. // page.js
  2. Page({
  3.   data: {
  4.     message: 'Hello MINA!',
  5.     id: 5,
  6.     condition: true
  7.   }
  8. })

2、条件渲染

  1. <!--wxml-->
  2. <view hidden="{{flag ? true : false}}"> Hidden </view>
  3. <view wx:if="{{true}}">显示</view>
  4. <view wx:if="{{false}}">不显示</view>
  5. <view wx:if="{{3<5}}">3小于5为真</view>
  7. <view wx:if="{{length > 5}}"> 1 </view>
  8. <view wx:elif="{{length > 2}}"> 2 </view>
  9. <view wx:else> 3 </view>
  1. // page.js
  2. Page({
  3.     data: {
  4.         length: 4
  5.     }
  6. })

3、模板渲染

  1. <!--wxml-->
  2. <template name="staffName">
  3.   <view>
  4.     FirstName: {{firstName}}, LastName: {{lastName}}
  5.   </view>
  6. </template>
  8. <template is="staffName" data="{{...staffA}}"></template>
  9. <template is="staffName" data="{{...staffB}}"></template>
  10. <template is="staffName" data="{{...staffC}}"></template>
  1. // page.js
  2. Page({
  3.   data: {
  4.     staffA: {firstName: 'Hulk', lastName: 'Hu'},
  5.     staffB: {firstName: 'Shang', lastName: 'You'},
  6.     staffC: {firstName: 'Gideon', lastName: 'Lin'}
  7.   }
  8. })

4、列表渲染

  1. <!--wxml-->
  2. <view wx:for="{{array}}" wx:key="index">{{index}}--{{item}} </view>
  3. <view wx:for="{{array}}" wx:key="index" wx:for-item="v" wx:for-index="k">{{k}}--{{v}} </view>
  1. // page.js
  2. Page({
  3.   data: {
  4.     array: ['html', 'css','js', 'es', 'vue','php','tp']
  5.   }
  6. })

5、block包装元素

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

  1. <block wx:if="{{true}}">
  2.   <view> view1 </view>
  3.   <view> view2 </view>
  4. </block>

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

block标签包裹渲染列表，该标签不会渲染出来，只渲染其中的内容。如果不想用标签包裹渲染的列表，可以使用block，他会直接输入其中的内容。

  1. <block wx:for="{{list}}" wx:key="index"> 
  2.     <text>{{item.id}}--{{item.name}}--{{item.age}}</text>
  3. </block>
  1. Page({
  2.     data: {
  3.         list: [
  4.           {id:'001',name:"zhang",age:18},
  5.           {id:'002',name:"peter",age:40},
  6.           {id:'003',name:"ouyangke",age:35},
  7.           {id:'004',name:"miemie",age:23}
  8.         ]
  9.     }
  10. })

数据绑定操作

动态添加删除数据操作

  1. <view class="container">
  2.   <view class="page-body">
  3.     <view class="page-section page-section-spacing">
  4.       <view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
  5.         <text>{{text}}</text>
  6.       </view>
  7.       <button disabled="{{!canAdd}}" bindtap="add">add line</button>
  8.       <button disabled="{{!canRemove}}" bindtap="remove">remove line</button>
  9.     </view>
  10.   </view>
  11. </view>
  1. const texts = [
  2.   '2011年1月，微信1.0发布',
  3.   '同年5月，微信2.0语音对讲发布',
  4.   '10月，微信3.0新增摇一摇功能',
  5.   '2012年3月，微信用户突破1亿',
  6.   '4月份，微信4.0朋友圈发布',
  7.   '同年7月，微信4.2发布公众平台',
  8.   '2013年8月，微信5.0发布微信支付',
  9.   '2014年9月，企业号发布',
  10.   '同月，发布微信卡包',
  11.   '2015年1月，微信第一条朋友圈广告',
  12.   '2016年1月，企业微信发布',
  13.   '2017年1月，小程序发布',
  14.   '......'
  15. ]
  17. Page({
  18.   onShareAppMessage() {
  19.     return {
  20.       title: 'text',
  21.       path: 'page/component/pages/text/text'
  22.     }
  23.   },
  25.   data: {
  26.     text: '',
  27.     canAdd: true,
  28.     canRemove: false
  29.   },
  30.   extraLine: [],
  32.   add() {
  33.     this.extraLine.push(texts[this.extraLine.length % 12])
  34.     this.setData({
  35.       text: this.extraLine.join('\n'),
  36.       canAdd: this.extraLine.length < 12,
  37.       canRemove: this.extraLine.length > 0
  38.     })
  39.     setTimeout(() => {
  40.       this.setData({
  41.         scrollTop: 99999
  42.       })
  43.     }, 0)
  44.   },
  46.   remove() {
  47.     if (this.extraLine.length > 0) {
  48.       this.extraLine.pop()
  49.       this.setData({
  50.         text: this.extraLine.join('\n'),
  51.         canAdd: this.extraLine.length < 12,
  52.         canRemove: this.extraLine.length > 0,
  53.       })
  54.     }
  55.     setTimeout(() => {
  56.       this.setData({
  57.         scrollTop: 99999
  58.       })
  59.     }, 0)
  60.   }
  61. })

十一、事件

1、什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches

首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

事件

注：UI 界面的程序需要和用户互动，例如用户可能会点击你界面上某个按钮，又或者长按某个区域，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户，称为事件

2、自定义事件

  • bindtap 在组件中绑定一个事件处理函数
  • 事件对象可以携带额外信息，data- 自定义传值

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

  1. <view id="tapTest" data-hi="Weixin" bindtap="tapName">{{msg}}</view>
  • 在相应的Page定义中写上相应的事件处理函数，参数是event。
  1. Page({
  2.   data: {
  3.       msg: "Click me! "
  4.   },
  5.   tapName: function(event) {
  6.     this.setData({
  7.         msg: '已被点击'
  8.     });
  9.     console.log(event);
  10.   }
  11. })

img

3、组件自带事件：input

属性 类型 默认值 说明
value string 输入框的初始内容
type string text input 的类型
password boolean false 是否是密码类型
placeholder string 输入框为空时占位符
placeholder-style string 指定 placeholder 的样式
placeholder-class string input-placeholder 指定 placeholder 的样式类
disabled boolean false 是否禁用
maxlength number 140 最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing number 0 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus boolean false (即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus boolean false 获取焦点
confirm-type string done 设置键盘右下角按钮的文字，仅在 type=’text’时生效
confirm-hold boolean false 点击键盘右下角按钮时是否保持键盘不收起
cursor number 指定 focus 时的光标位置
selection-start number -1 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用
selection-end number -1 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用
adjust-position boolean true 键盘弹起时，是否自动上推页面
hold-keyboard boolean false focus 时，点击页面的时候不收起键盘
bindinput eventhandle 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus eventhandle 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur eventhandle 输入框失去焦点时触发，event.detail = {value: value}
bindconfirm eventhandle 点击完成按钮时触发，event.detail = {value: value}
bindkeyboardheightchange eventhandle 键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration} 
  1. <input bindinput="func" style="margin:20rpx;border:1px solid red;" value="输入时触发"></input>
  2. <input bindfocus="func" style="margin:20rpx;border:1px solid red;" value="聚焦时触发"></input>
  3. <input bindconfirm="func" style="margin:20rpx;border:1px solid red;" value="完成时触发"></input>
  1. Page({
  2.     function func(event) {
  3.       console.log('tap Weixin', JSON.stringify(event))
  4.     }
  5. });

4、currentTarget 和 target 区别

  • target 触发事件的源组件
编号 属性 类型 说明
1 id String 事件源组件的 id
2 dataset Object 事件源组件上由 data-开头的自定义属性组成的集合
  • currentTarget 事件绑定的当前组件
编号 属性 类型 说明
1 id String 事件源组件的 id
2 dataset Object 事件源组件上由 data-开头的自定义属性组成的集合
  • currentTarget 始终是监听事件者，而 target 是事件的真正发出者
  1. <view bindtap="func" id="aaa">点击执行one事件,带id，带传值</view>
  3. <view bindtap="func" id="ccc">点击执行two事件,id是ccc
  4.   <view id="eee">点击执行three事件,id是eee</view>
  5. </view>

简单的说，currentTarget 是事件的绑定着，谁绑定的这个事件，由于事件冒泡或者捕获，触发者可能不是自身，是其他子元素或者父元素，target 是事件的实际触发者。

事件代理机制就是这样实现的，我们将事件只绑定给父元素一个人，通过子元素的事件冒泡机制，依然会触发父元素的事件函数，我们通过判断target 的值，知道是谁触发了该事件，从而执行相应的动作代码。

img

img

5、事件分类

  • 事件分为冒泡事件和非冒泡事件：
    • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
    • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML 的冒泡事件列表

编号 类型 触发条件
1 touchstart 手指触摸动作开始
2 touchmove 手指触摸后移动
3 touchcancel 手指触摸动作被打断，如来电提醒，弹窗
4 touchend 手指触摸动作结束
5 tap 手指触摸后马上离开
6 longpress 手指触摸后，超过 350ms 再离开，如果指定了事件回调函数并触发了这个事件，tap 事件将不被触发
7 longtap 手指触摸后，超过 350ms 再离开（推荐使用 longpress 事件代替）
8 transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
9 animationstart 会在一个 WXSS animation 动画开始时触发
10 animationiteration 会在一个 WXSS animation 一次迭代结束时触发
11 animationend 会在一个 WXSS animation 动画完成时触发
12 touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

6、普通事件绑定

事件绑定的写法类似于组件的属性，如：

  1. <view bindtap="handleTap">
  2.     Click here!
  3. </view>

如果用户点击这个 view ，则页面的 handleTap 会被调用。

事件绑定函数可以是一个数据绑定，如：

  1. <view bindtap="{{ handlerName }}">
  2.     Click here!
  3. </view>

此时，页面的 this.data.handlerName 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。

7、阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

  1. <view id="outer" bindtap="handleTap1">
  2.   outer view
  3.   <view id="middle" catchtap="handleTap2">
  4.     middle view
  5.     <view id="inner" bindtap="handleTap3">
  6.       inner view
  7.     </view>
  8.   </view>
  9. </view>

8、互斥事件绑定

自基础库版本 2.8.2 起，除 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 ，点击 middle view 会调用 handleTap2 和 handleTap1 。

  1. <view id="outer" mut-bind:tap="handleTap1">
  2.   outer view
  3.   <view id="middle" bindtap="handleTap2">
  4.     middle view
  5.     <view id="inner" mut-bind:tap="handleTap3">
  6.       inner view
  7.     </view>
  8.   </view>
  9. </view>

9、事件的捕获阶段

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

  1. <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  2.   outer view
  3.   <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  4.     inner view
  5.   </view>
  6. </view>

如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。

  1. <view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  2.   outer view
  3.   <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  4.     inner view
  5.   </view>
  6. </view>

bind绑定的事件会依次冒泡到最外层，点击three会依次执行到one

  1. Page({
  2.   one() {
  3.     console.log(e);
  4.   },
  5.   two(e) {
  6.     console.log(e);
  7.   },
  8.   three(e) {
  9.     console.log(e);
  10.   },
  11. });
  1. <view id="one" bindtap="one">
  2.   第一级
  3.   <view id="two" bindtap="two">
  4.     第二级
  5.     <view id="three" bindtap="three"> 
  6.         第三级 
  7.     </view>
  8.   </view>
  9. </view>
  • 除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
  1. <view id="one" bindtap="one">
  2.   第一级
  3.   <view id="two" catchtap="two">
  4.     第二级
  5.     <view id="three" bindtap="three"> 
  6.         第三级 
  7.     </view>
  8.   </view>
  9. </view>

10、事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

属性 类型 说明 基础库版本
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
mark Object 事件标记数据 2.7.1

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

属性 类型 说明
detail Object 额外的信息

TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

属性 类型 说明
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组

特殊事件： canvas 中的触摸事件不可冒泡，所以没有 currentTarget

十二、微信 API

1、什么是 API

  • 小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。详细介绍请参考 API 文档
  • 小程序提供的API按照功能主要分为几大类：网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

要获取用户的地理位置时，只需要：

  1. wx.getLocation({
  2.   type: 'wgs84',
  3.   success: (res) => {
  4.     var latitude = res.latitude // 纬度
  5.     var longitude = res.longitude // 经度
  6.   }
  7. })

调用微信扫一扫能力，只需要：

  1. wx.scanCode({
  2.   success: (res) => {
  3.     console.log(res)
  4.   }
  5. })

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

通常，在小程序 API 有以下几种类型：

2、事件监听 API

  • 我们约定，以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等
  • 这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入

wx.onAppShow 监听小程序切前台事件

wx.onAppHide 监听小程序切后台事件

  1. Page({
  2.   onLoad: function (options) {
  3.       // 监听小程序切前台事件 
  4.     wx.onAppShow(function () {
  5.       console.log("切换前台");
  6.     });
  7.       //监听小程序切后台事件
  8.     wx.onAppHide(function () {
  9.       console.log("切换后台");
  10.     });
  11.   },
  12. });

3、同步API

我们约定，以 Sync 结尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，详情参见 API 文档中的说明。

  • 同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。
  1. try {
  2.   wx.setStorageSync('key', 'value')
  3. } catch (e) {
  4.   console.error(e)
  5. }

wx.getSystemInfoSync 获取系统信息

  1. Page({
  2.   onLoad: function (options) {
  3.     console.log(wx.getSystemInfoSync());
  4.     var sync = wx.getSystemInfoSync();
  5.     console.log(sync.model);
  6.   },
  7. });

4、异步API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：

编号 参数名 类型 必填 说明
1 success function 否 接口调用成功的回调函数
2 fail function 否 接口调用失败的回调函数
3 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
4 其他 Any - 接口定义的其他参数
  • 回调函数的参数，success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：
编号 属性 类型 说明
1 errMsg string 错误信息，如果调用成功返回 ${apiName}:ok
2 errCode number 错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。
3 其他 Any 接口返回的其他数据

异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值，可以用来实现更丰富的功能，如 wx.request，wx.connectSocket 等。

  1. wx.login({
  2.   success(res) {
  3.     console.log(res.code)
  4.   }
  5. })

异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

  1. // callback 形式调用
  2. wx.chooseImage({
  3.   success(res) {
  4.     console.log('res:', res)
  5.   }
  6. })
  8. // promise 形式调用
  9. wx.chooseImage().then(res => console.log('res: ', res))
  10. 云开发 API

wx.getSystemInfo 获取系统信息

  1. Page({
  2.   onLoad: function (options) {
  3.     wx.getSystemInfo({
  4.       success(res) {
  5.         console.log(res);
  6.         console.log(res.model);
  7.         console.log("成功执行");
  8.       },
  9.       fail(res) {
  10.         console.log("失败执行");
  11.       },
  12.       complete(res) {
  13.         console.log("不管成功失败都执行");
  14.       },
  15.     });
  16.   },
  17. });

wx.showToast 显示消息提示框

属性 类型 必填 描述
title string 是 提示的内容
icon string 否 图标
image string 否 自定义图标的本地路径，image 的优先级高于 icon
duration number 否 提示的延迟时间
mask boolean 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

icon 合法值：

属性 描述
success 显示成功图标，此时 title 文本最多显示 7 个汉字长度
loading 显示加载图标，此时 title 文本最多显示 7 个汉字长度
none 不显示图标，此时 title 文本最多可显示两行 
  1. Page({
  2.   onLoad: function (options) {
  3.     wx.showToast({
  4.       title: "成功",
  5.       icon: "success",
  6.       duration: 1000,
  7.       mask: true,
  8.       success() {
  9.         console.log("成功");
  10.       },
  11.       fail() {
  12.         console.log("失败");
  13.       },
  14.       complete() {
  15.         console.log("成功或失败");
  16.       },
  17.     });
  18.   },
  19. });

5、系统API

名称 功能说明
wx.getSystemInfoSync wx.getSystemInfo 的同步版本
wx.getSystemInfoAsync 异步获取系统信息
wx.getSystemInfo 获取系统信息 
  1. Page({
  2.     onLoad(){
  3.         // 同步调用系统信息API
  4.         wx.getSystemInfo({
  5.           success (res) {
  6.             console.log(res.model)
  7.             console.log(res.pixelRatio)
  8.             console.log(res.windowWidth)
  9.             console.log(res.windowHeight)
  10.             console.log(res.language)
  11.             console.log(res.version)
  12.             console.log(res.platform)
  13.           }
  14.         });
  15.          // 异步调用系统信息API
  16.         wx.getSystemInfo({
  17.           success (res) {
  18.             console.log(res.model)
  19.             console.log(res.pixelRatio)
  20.             console.log(res.windowWidth)
  21.             console.log(res.windowHeight)
  22.             console.log(res.language)
  23.             console.log(res.version)
  24.             console.log(res.platform)
  25.           }
  26.         });
  27.     }
  28. });

返回系统信息如下：

属性 说明
brand 设备品牌
model 设备型号。新机型刚推出一段时间会显示unknown，微信会尽快进行适配。
pixelRatio 设备像素比
screenWidth 屏幕宽度，单位px
screenHeight 屏幕高度，单位px
windowWidth 可使用窗口宽度，单位px
windowHeight 可使用窗口高度，单位px
statusBarHeight 状态栏的高度，单位px
language 微信设置的语言
version 微信版本号
system 操作系统及版本
platform 客户端平台
fontSizeSetting 用户字体大小（单位px）。以微信客户端「我-设置-通用-字体大小」中的设置为准
SDKVersion 客户端基础库版本
benchmarkLevel 设备性能等级（仅 Android）。取值为：-2 或 0（该设备无法运行小游戏），-1（性能未知），>=1（设备性能值，该值越高，设备性能越好，目前最高不到50）
albumAuthorized 允许微信使用相册的开关（仅 iOS 有效）
cameraAuthorized 允许微信使用摄像头的开关
locationAuthorized 允许微信使用定位的开关
microphoneAuthorized 允许微信使用麦克风的开关
notificationAuthorized 允许微信通知的开关
notificationAlertAuthorized 允许微信通知带有提醒的开关（仅 iOS 有效）
notificationBadgeAuthorized 允许微信通知带有标记的开关（仅 iOS 有效）
notificationSoundAuthorized 允许微信通知带有声音的开关（仅 iOS 有效）
bluetoothEnabled 蓝牙的系统开关
locationEnabled 地理位置的系统开关
wifiEnabled Wi-Fi 的系统开关
safeArea 在竖屏正方向下的安全区域
locationReducedAccuracy true 表示模糊定位，false 表示精确定位，仅 iOS 支持
theme 系统当前主题，取值为light或dark，全局配置"darkmode":true时才能获取，否则为 undefined （不支持小游戏）
host 当前小程序运行的宿主环境
enableDebug 是否已打开调试。可通过右上角菜单或 wx.setEnableDebug 打开调试。
deviceOrientation 设备方向

6、效果API

  • 交互
名称 功能说明
wx.showActionSheet 显示操作菜单
wx.showModal 显示模态对话框
wx.showLoading 显示加载提示框
wx.hideLoading 隐藏加载提示框
wx.showToast 显示消息提示框
wx.hideToast 隐藏消息提示框

显示操作菜单

属性 类型 说明
alertText string 警示文案
itemList Array.<string> 按钮的文字数组，数组长度最大为 6
itemColor string 按钮的文字颜色
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数（调用成功、失败都会执行） 
  1. Page({
  2.   show(){
  3.       wx.showActionSheet({
  4.         itemList: ['安徽', '安庆', '安阳'],
  5.         itemColor: '#aa33aa',
  6.         success (res) {
  7.             // 用户点击的按钮序号，从上到下的顺序，从0开始
  8.           console.log(res.tapIndex)
  9.         },
  10.         fail (res) {
  11.           console.log(res.errMsg)
  12.         }
  13.       })
  14.   }
  15. });
  1. <button bindtap="show">打开底部菜单</button>

显示模态对话框

属性 类型 默认值 必填 说明
title string 否 提示的标题
content string 否 提示的内容
showCancel boolean true 否 是否显示取消按钮
cancelText string ‘取消’ 否 取消按钮的文字，最多 4 个字符
cancelColor string #000000 否 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText string ‘确定’ 否 确认按钮的文字，最多 4 个字符
confirmColor string #576B95 否 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

属性 类型 说明
content string editable 为 true 时，用户输入的文本
confirm boolean 为 true 时，表示用户点击了确定按钮
cancel boolean 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭） 
  1. Page({
  2.     onLoad(){
  3.         wx.showModal({
  4.           title: '提示',
  5.           content: '这是一个模态弹窗',
  6.           success (res) {
  7.             if (res.confirm) {
  8.               console.log('用户点击确定')
  9.             } else if (res.cancel) {
  10.               console.log('用户点击取消')
  11.             }
  12.           }
  13.         })
  14.     }
  15. });

显示 loading 提示框

属性 类型 必填 说明
title string 是 提示的内容
mask boolean 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
  1. wx.showLoading({
  2.   title: '加载中',
  3.   mask: true,
  4. })
  5. // 需主动调用 wx.hideLoading 才能关闭提示框
  6. setTimeout(function () {
  7.   wx.hideLoading()
  8. }, 2000)

显示消息提示框

属性 类型 默认值 必填 说明
title string 是 提示的内容
icon string ‘success’ 否 图标
image string 否 自定义图标的本地路径，image 的优先级高于 icon
duration number 1500 否 提示的延迟时间
mask boolean false 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.icon 的合法值

值 说明
success 显示成功图标，此时 title 文本最多显示 7 个汉字长度
error 显示失败图标，此时 title 文本最多显示 7 个汉字长度
loading 显示加载图标，此时 title 文本最多显示 7 个汉字长度
none 不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持 
  1. wx.showToast({
  2.   title: '成功',
  3.   icon: 'success',
  4.   mask: true,
  5.   duration: 2000,
  6.   success(e){
  7.       console.log(e);
  8.   }
  9. })

  • 导航条
名称 功能说明
wx.showNavigationBarLoading 在当前页面显示导航条加载动画
wx.setNavigationBarTitle 动态设置当前页面的标题
wx.setNavigationBarColor 设置页面导航条颜色
wx.hideNavigationBarLoading 在当前页面隐藏导航条加载动画
wx.hideHomeButton 隐藏返回首页按钮

设置页面导航条颜色

属性 类型 必填 说明
frontColor string 是 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor string 是 背景颜色值，有效值为十六进制颜色
animation Object 否 动画效果
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.animation 的结构

属性 类型 默认值 必填 说明
duration number 0 否 动画变化时间，单位 ms
timingFunc string ‘linear’ 否 动画变化方式

object.animation.timingFunc 的合法值

值 说明
‘linear’ 动画从头到尾的速度是相同的
‘easeIn’ 动画以低速开始
‘easeOut’ 动画以低速结束
‘easeInOut’ 动画以低速开始和结束 

  1. Page({
  2.   show(){
  3.     wx.setNavigationBarColor({
  4.       backgroundColor: '#ff0000',
  5.       frontColor: '#ffffff',
  6.       animation: {
  7.         duration: 400,
  8.         timingFunc: "easeIn"
  9.       },
  10.       success(){
  11.         wx.showToast({
  12.           title: '导航条颜色修改成功',
  13.           icon: 'success',
  14.           mask: true,
  15.           duration: 2000,
  16.           success(e){
  17.               console.log(e);
  18.           }
  19.         });
  20.       }
  21.     });
  22.   }
  23. });
  25. <button bindtap="show">改变导航条颜色</button>

在当前页面显示导航条加载动画

属性 类型 必填 说明
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行

在当前页面隐藏导航条加载动画

属性 类型 默认值 必填 说明
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行 
  1. Page({
  2.   show(){
  3.       // 改变导航条颜色
  4.     wx.setNavigationBarColor({
  5.       backgroundColor: '#ff0000',
  6.       frontColor: '#ffffff',
  7.       animation: {
  8.         duration: 400,
  9.         timingFunc: "linear"
  10.       }
  11.     });
  12.       // 显示导航条加载动画
  13.     wx.showNavigationBarLoading({
  14.       success(e){
  15.         console.log(e);
  16.       }
  17.     });
  18.     // 两秒后隐藏导航条加载动画
  19.     setTimeout(function () {
  20.       wx.hideNavigationBarLoading()
  21.     }, 2000)
  22.   }
  23. });

动态设置当前页面的标题

属性 类型 默认值 必填 说明
title string 是 页面标题
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
  1. wx.setNavigationBarTitle({
  2.   title: '当前注册页面'
  3. });

隐藏返回首页按钮

微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏

  • tabbar设置
名称 功能说明
wx.showTabBarRedDot 显示 tabBar 某一项的右上角的红点
wx.showTabBar 显示 tabBar
wx.setTabBarStyle 动态设置 tabBar 的整体样式
wx.setTabBarItem 动态设置 tabBar 某一项的内容，2.7.0 起图片支持临时文件和网络文件
wx.setTabBarBadge 为 tabBar 某一项的右上角添加文本
wx.removeTabBarBadge 移除 tabBar 某一项右上角的文本
wx.hideTabBarRedDot 隐藏 tabBar 某一项的右上角的红点
wx.hideTabBar 隐藏 tabBar 
  1. <!-- 显示 tabBar 某一项的右上角的红点 -->
  2. <button bindtap="a">添加红点</button>
  4. <!-- 隐藏 tabBar 某一项的右上角的红点 -->
  5. <button bindtap="b">隐藏红点</button>
  7. <!-- 隐藏底部 tabBar -->
  8. <button bindtap="c">隐藏 tabBar</button>
  10. <!-- 显示底部 tabBar -->
  11. <button bindtap="d">显示 tabBar</button>
  13. <!-- 为 tabBar 某一项的右上角添加文本 -->
  14. <button bindtap="e">添加文本</button>
  16. <!-- 移除 tabBar 某一项右上角的文本 -->
  17. <button bindtap="f">移除文本</button>
  19. <!-- 动态设置 tabBar 某一项的内容 -->
  20. <button bindtap="g">设置某一项样式</button>
  22. <!-- 动态设置 tabBar 的整体样式 -->
  23. <button bindtap="h">设置整体样式</button>
  1. Page({
  2.     a(){
  3.     wx.showTabBarRedDot({
  4.       index: 0,
  5.     });
  6.   },
  7.   b(){
  8.     wx.hideTabBarRedDot({
  9.       index: 0,
  10.     });
  11.   },
  12.   c(){
  13.     wx.hideTabBar({
  14.       animation: true,
  15.       success(e){
  16.         console.log(e);
  17.       }
  18.     })
  19.   },
  20.   d(){
  21.     wx.showTabBar({
  22.       animation: true,
  23.       success(e){
  24.         console.log(e);
  25.       }
  26.     })
  27.   },
  28.   e(){
  29.     wx.setTabBarBadge({
  30.       index: 0,
  31.       text: '新',
  32.     })
  33.   },
  34.   f(){
  35.     wx.removeTabBarBadge({
  36.       index: 0,
  37.     })
  38.   },
  39.   g(){
  40.     wx.setTabBarItem({
  41.       index: 0,
  42.       text:'新标签',
  43.       iconPath: 'http://ku.90sjimg.com/element_origin_min_pic/01/30/48/25573b15ce3e7f0.jpg',
  44.       success(){
  45.         wx.showToast({
  46.           title: '设置成功',
  47.           duration: 2000,
  48.           icon: "success"
  49.         })
  50.       }
  51.     })
  52.   },
  53.   h(){
  54.     wx.setTabBarStyle({
  55.       color: '#90CAF9',
  56.       selectedColor: '#8BC34A',
  57.       backgroundColor: '#FF9800',
  58.       borderStyle: 'black',
  59.       success(){
  60.         wx.showToast({
  61.           title: '设置成功',
  62.           duration: 2000,
  63.           icon: "success"
  64.         })
  65.       }
  66.     })
  67.   }
  68. });

  • 滚动API
名称 功能说明
wx.pageScrollTo 将页面滚动到目标位置，支持选择器和滚动距离两种方式定位
属性 类型 说明
scrollTop number 滚动到页面的目标位置，单位 px
duration number 滚动动画的时长，单位 ms
selector string 选择器
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数（调用成功、失败都会执行） 
  1. GoTop(){
  2.     wx.pageScrollTo({
  3.       scrollTop: 0,
  4.       duration: 300,
  5.       success(){
  6.         wx.showToast({
  7.           title: '已返回顶部',
  8.           duration: 1000,
  9.           icon: "success"
  10.         })
  11.       }
  12.     })
  13.   }
  1. <view style="height:500px;background-color: pink">1</view>
  2. <view style="height:500px;background-color: green">2</view>
  3. <view style="height:500px;background-color: yellow">3</view>
  4. <button bindtap="GoTop">滚动到顶部</button>
  • 下拉刷新
名称 功能说明
wx.stopPullDownRefresh 停止当前页面下拉刷新
wx.startPullDownRefresh 开始下拉刷新 
  1. startRefresh(){
  2.     // 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
  3.     wx.startPullDownRefresh({
  4.       success(){
  5.         wx.showLoading({
  6.           title: '正在刷新……',
  7.           mask: false,
  8.           success: (res) => {},
  9.           fail: (res) => {},
  10.           complete: (res) => {},
  11.         });
  12.       }
  13.     })
  14.   },
  15.   stopRefresh(){
  16.       // 停止当前页面下拉刷新
  17.     wx.stopPullDownRefresh({
  18.       success(){
  19.         wx.hideLoading({
  20.           success: (res) => {},
  21.           fail: (res) => {},
  22.           complete: (res) => {},
  23.         });
  24.       }
  25.     })
  26.   },
  1. <button bindtap="startRefresh">开始刷新</button>
  2. <button bindtap="stopRefresh">停止刷新</button>

7、网络API

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）

名称 功能说明
wx.request 发起 HTTPS 网络请求
属性 类型 默认值 说明
url string 开发者服务器接口地址
data string/object/ArrayBuffer 请求的参数
header Object 设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
timeout number 超时时间，单位为毫秒
method string GET HTTP 请求方法
dataType string json 返回的数据格式
responseType string text 响应的数据类型
enableHttp2 boolean false 开启 http2
enableQuic boolean false 开启 quic
enableCache boolean false 开启 cache
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数（调用成功、失败都会执行）

object.method 的合法值

值 说明
OPTIONS HTTP 请求 OPTIONS
GET HTTP 请求 GET
HEAD HTTP 请求 HEAD
POST HTTP 请求 POST
PUT HTTP 请求 PUT
DELETE HTTP 请求 DELETE
TRACE HTTP 请求 TRACE
CONNECT HTTP 请求 CONNECT

object.dataType 的合法值

值 说明
json 返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
其他 不对返回的内容进行 JSON.parse

object.responseType 的合法值

值 说明
text 响应的数据为文本
arraybuffer 响应的数据为 ArrayBuffer 
  1. wx.request({
  2.   url: 'https://baidu.com', 
  3.   data: {
  4.     code: '百度一下'
  5.   },
  6.   header: {
  7.     'content-type': 'application/json' 
  8.   },
  9.   success (res) {
  10.     console.log(res.data)
  11.   }
  12. });

获取图片信息

wx.getImageInfo(Object object)

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html

属性 类型 必填 说明
src string 是 图片的路径，支持网络路径、本地路径、代码包路径
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

从本地相册选择图片或使用相机拍照

wx.chooseImage(Object object)

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

属性 类型 默认值 说明
count number 9 最多可以选择的图片张数
sizeType Array.<string> [‘original’, ‘compressed’] 所选的图片的尺寸
sourceType Array.<string> [‘album’, ‘camera’] 选择图片的来源
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数（调用成功、失败都会执行）
属性 类型 说明
width number 图片原始宽度，单位px。不考虑旋转。
height number 图片原始高度，单位px。不考虑旋转。
path string 图片的本地路径
orientation string 拍照时设备方向
type string 图片格式 
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     future:[],
  8.     city: null
  9.   },
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.     wx.getImageInfo({
  16.       src: 'https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png',
  17.       success (res) {
  18.         console.log(res.width)
  19.         console.log(res.height)
  20.       }
  21.     })
  22.   },
  23.   getChoose(){
  24.     wx.chooseImage({
  25.        count: 1,
  26.       sizeType: ['original', 'compressed'],
  27.       sourceType: ['album', 'camera'],
  28.       success (res) {
  29.         // tempFilePath可以作为img标签的src属性显示图片
  30.             const tempFilePaths = res.tempFilePaths
  31.         wx.getImageInfo({
  32.           src: res.tempFilePaths[0],
  33.           success (res) {
  34.             console.log(res.width)
  35.             console.log(res.height)
  36.           }
  37.         })
  38.       }
  39.     })
  40.   }
  41. })
  1. <button bindtap="getChoose">从相册获取图片</button>

在新页面中全屏预览图片

wx.previewImage(Object object)

预览的过程中用户可以进行保存图片、发送给朋友等操作

属性 类型 必填 说明
urls Array.<string> 是 需要预览的图片链接列表。2.2.3 起支持云文件ID。
showmenu boolean 否 是否显示长按菜单
current string 否 当前显示图片的链接
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
  1. previewImage(){
  2.     wx.previewImage({
  3.       // 当前显示图片的http链接
  4.       current: 'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg', 
  5.       // 需要预览的图片http链接列表
  6.       urls: [
  7.         'https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg',
  8.         'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg',
  9.         'https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png',
  10.         'https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg'
  11.       ] 
  12.     })
  13.   }
  1. <button bindtap="previewImage">全屏预览图片</button>

压缩图片接口

wx.compressImage(Object object)

属性 类型 必填 说明
src string 是 图片路径，图片的路径，支持本地路径、代码包路径
quality number 否 压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）。

object.success 回调函数

属性 类型 说明
tempFilePath string 压缩后图片的临时文件路径 (本地路径) 
  1. Page({
  2.     data: {
  3.         img : '../../img/1.png'
  4.     },
  5.     compressImage(){
  6.     var that = this;
  7.     wx.compressImage({
  8.       src: '../../img/1.png', // 图片路径
  9.       quality: 20, // 压缩质量
  10.       success(res){
  11.         // 压缩后图片的临时文件路径 (本地路径)
  12.         console.log(res);
  13.         that.setData({
  14.           img: res.tempFilePath
  15.         })
  16.       }
  17.     })
  18.   }
  19. })
  1. <button bindtap="compressImage">压缩图片</button>
  3. <image src="{{img}}"></image>

获取用户账号信息

名称 功能说明
wx.getUserProfile 获取用户信息
wx.getUserInfo 获取用户信息
UserInfo 用户信息
wx.getAccountInfoSync 获取当前帐号信息
  • 用户信息 UserInfo

string nickName

用户昵称

string avatarUrl

用户头像图片的 URL。URL 最后一个数值代表正方形头像大小（有 0、46、64、96、132 数值可选，0 代表 640x640 的正方形头像，46 表示 46x46 的正方形头像，剩余数值以此类推。默认132），用户没有头像时该项为空。若用户更换头像，原有头像 URL 将失效。

number gender
用户性别

gender 的合法值

值 说明 最低版本
0 未知
1 男性
2 女性

string country
用户所在国家

string province
用户所在省份

string city
用户所在城市

string language
显示 country，province，city 所用的语言

language 的合法值

值 说明
en 英文
zh_CN 简体中文

获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo，详见 用户信息接口调整说明。

属性 类型 默认值 必填 说明
lang string en 否 显示用户信息的语言
desc string 是 声明获取用户个人信息后的用途，不超过30个字符 
  1. Page({
  2.   data: {
  3.     userInfo: {},
  4.     hasUserInfo: false
  5.   },
  6.   onLoad() {
  8.     }
  9.   },
  10.   getUserProfile(e) {
  11.     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  12.     wx.getUserProfile({
  13.       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  14.       success: (res) => {
  15.         console.log(res)
  16.         this.setData({
  17.           userInfo: res.userInfo,
  18.           hasUserInfo: true
  19.         })
  20.       }
  21.     })
  22.   },
  23.   getUserInfo(e) {
  24.     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
  25.     console.log(e)
  26.     this.setData({
  27.       userInfo: e.detail.userInfo,
  28.       hasUserInfo: true
  29.     });
  30.     // 必须是在用户已经授权的情况下调用，否则获取的是匿名信息
  31.     wx.getUserInfo({
  32.       success: function(res) {
  33.         var userInfo = res.userInfo
  34.          console.log(userInfo);
  35.         var nickName = userInfo.nickName
  36.         var avatarUrl = userInfo.avatarUrl
  37.         var gender = userInfo.gender //性别 0：未知、1：男、2：女
  38.         var province = userInfo.province
  39.         var city = userInfo.city
  40.         var country = userInfo.country
  41.       }
  42.     });
  43.   }
  44. })
  1. <view class="container">
  2.   <view class="userinfo">
  3.     <block wx:if="{{!hasUserInfo}}">
  4.       <button  bindtap="getUserProfile"> 获取头像昵称 </button>
  5.       <button  open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
  6.     </block>
  7.     <block wx:else>
  8.       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
  9.       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  10.     </block>
  11.   </view>
  12. </view>
  1. .userinfo {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5.   color: #aaa;
  6. }
  8. .userinfo-avatar {
  9.   overflow: hidden;
  10.   width: 128rpx;
  11.   height: 128rpx;
  12.   margin: 20rpx;
  13.   border-radius: 50%;
  14. }



提前向用户发起授权请求

wx.authorize(Object object)

提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功.更多用法详见 用户授权。

小程序插件可以使用 wx.authorizeForMiniProgram

属性 类型 必填 说明
scope string 是 需要获取权限的 scope，详见 scope 授权列表
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） 
  1. Page({
  2.     data: {
  3.         src: ''
  4.     },
  5.      a(){
  6.     // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
  7.     wx.getSetting({
  8.       success(res) {
  9.         if (!res.authSetting['scope.record']) {
  10.           wx.authorize({
  11.             scope: 'scope.record',
  12.             success (e) {
  13.               // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
  14.               console.log(e);
  15.             }
  16.           })
  17.         }
  18.       }
  19.     })
  20.   },
  21.   b(){
  22.     wx.authorize({
  23.       scope: 'scope.userLocation',
  24.       success:(e)=>{
  25.           // 授权地理位置信息
  26.         console.log(e);
  27.       }
  28.     })
  29.   }, 
  30.   c(){
  31.     wx.authorize({
  32.       scope: 'scope.address',
  33.       success:(e)=>{
  34.           // 授权通讯地址
  35.         console.log(e);
  36.         wx.chooseAddress({
  37.           success: (result) => {
  38.             console.log(result);
  39.           },
  40.         });
  41.       }
  42.     })
  43.   },
  44.   d(){
  45.     wx.authorize({
  46.       scope: 'scope.werun',
  47.       success:(e)=>{
  48.           // 授权微信运动步数
  49.         console.log(e);
  50.         wx.getWeRunData({
  51.           success: (result) => {
  52.             console.log(result);
  53.           },
  54.         });
  55.       }
  56.     })
  57.   },
  58.   e(){
  59.     wx.authorize({
  60.       scope: 'scope.writePhotosAlbum',
  61.       success:(e)=>{
  62.            // 授权保存到相册
  63.         console.log(e);
  64.       }
  65.     })
  66.   },
  67.   f(){
  68.     wx.authorize({
  69.       scope: 'scope.camera',
  70.       success:(e)=>{
  71.            // 授权摄像头
  72.         console.log(e);
  73.       }
  74.     })
  75.   },
  76.     // 开始录音
  77.   startRecord(){
  78.     wx.startRecord({
  79.       success (res) {
  80.         const tempFilePath = res.tempFilePath
  81.         console.log(tempFilePath);
  82.       }
  83.     });
  84.   },
  85.     // 结束录音
  86.   stopRecord(){
  87.     wx.stopRecord() // 结束录音
  88.   },
  89.     // 拍照
  90.   takePhoto() {
  91.     const ctx = wx.createCameraContext()
  92.     ctx.takePhoto({
  93.       quality: 'high',
  94.       success: (res) => {
  95.         this.setData({
  96.           src: res.tempImagePath
  97.         })
  98.       }
  99.     })
  100.   },
  101. })
  1. <button bindtap="a">授权录音</button>
  2. <button bindtap="startRecord">开始录音</button>
  3. <button bindtap="stopRecord">结束录音</button>
  5. <button bindtap="b">授权地理位置</button>
  6. <button bindtap="c">授权通讯地址</button>
  7. <button bindtap="d">授权微信步数</button>
  8. <button bindtap="e">授权保存相册</button>
  10. <button bindtap="f">授权摄像头</button>
  11. <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
  12. <button type="primary" bindtap="takePhoto">拍照</button>
  13. <view>拍照预览</view>
  14. <image mode="widthFix" src="{{src}}"></image>

8、路由API

名称 功能说明
wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch 关闭所有页面，打开到应用内的某个页面
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面
wx.navigateTo 保留当前页面，跳转到应用内的某个页面
wx.navigateBack 关闭当前页面，返回上一页面或多级页面 
  1. // pages/login/reg.js
  2. Page({
  3.     a(){
  4.         // 关闭当前页面，返回上一页面或多级页面
  5.         // 可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
  6.         const page =  getCurrentPages();
  7.         wx.navigateBack({
  8.           delta: 1
  9.         });
  10.     },
  11.     b(){
  12.         // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
  13.         // 使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
  14.         wx.navigateTo({
  15.           url: '.../logs/logs',
  16.         });
  17.     },
  18.     c(){
  19.         // 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  20.         wx.redirectTo({
  21.           url: '.../logs/logs'
  22.         });
  23.     },
  24.     d(){
  25.         // 关闭所有页面，打开到应用内的某个页面
  26.         wx.reLaunch({
  27.           url: '.../index/index'
  28.         });
  29.     },
  30.     e(){
  31.         // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  32.         wx.switchTab({
  33.           url: '.../index/index'
  34.         });  
  35.     }
  36. });
  1. <!--pages/login/reg.wxml-->
  2. <!--返回上一级页面-->
  3. <button bindtap="a">返回上一级页面</button>
  4. <!--保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面-->
  5. <button bindtap="b">跳转至日志页面</button>
  6. <!--关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面-->
  7. <button bindtap="c">跳转至日志页面</button>
  8. <!--关闭所有页面，打开到应用内的某个页面-->
  9. <button bindtap="d">跳转至首页</button>
  10. <!--跳转到 tabBar 页面，并关闭所有非 tabBar 页面-->
  11. <button bindtap="e">跳转至首页</button>
  1. <!--pages/login/login.wxml-->
  2. <navigator url="reg">跳转到注册页面</navigator>

navigateBack 关闭当前页面 返回上一页面或多级页面

navigateTo 保留当前页面 不能跳到 tabbar 页面

redirectTo 关闭当前页面 不能跳到 tabbar 页面

reLaunch 关闭所有页面 可以跳转至任意页面

switchTab 关闭所有非 tabBar 页面 只能跳转到 tabBar 页面

9、定时器

名称 功能说明
clearInterval 取消由 setInterval 设置的定时器
clearTimeout 取消由 setTimeout 设置的定时器
setInterval 设定一个定时器，定时到期以后执行回调函数
setTimeout 设定一个定时器，按照指定周期执行回调函数 
  1. // pages/nav/3.js
  2. Page({
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     num: 1,
  9.     myInter: null
  10.   },
  11.   timeout(){
  12.       // 两秒后执行
  13.     setTimeout(()=>{
  14.       wx.showToast({
  15.         title: '成功',
  16.         icon: "success",
  17.         duration: 2000
  18.       })
  19.     },2000);
  20.   },
  21.   startTime(){
  22.       // 设置定时器每隔一秒执行一次
  23.     this.data.myInter = setInterval(() => {
  24.       this.data.num++;
  25.       console.log(this.data.num);
  26.     }, 1000);
  27.   },
  28.   stopTime(){
  29.       // 清除定时器
  30.     clearInterval(this.data.myInter);
  31.   },
  32.   /**
  33.    * 生命周期函数--监听页面加载
  34.    */
  35.   onLoad: function (options) {
  37.   },
  38. })
  1. <button bindtap="timeout">两秒后提示成功</button>
  3. <button bindtap="startTime">开启定时器,每个一秒执行一次</button>
  4. <button bindtap="stopTime">关闭定时器</button>

十三、路由

1、页面路由

  • 在小程序中所有页面的路由全部由框架进行管理
  • 框架以栈的形式维护了当前的所有页面
路由方式 触发时机
初始化 小程序打开的第一个页面
打开新页面 调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/>
页面重定向 调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/>
页面返回 调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack"> 用户按左上角返回按钮
Tab 切换 调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab
重启动 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/>

2、路由组件

  • navigator 页面链接
编号 属性 类型 默认值 必填 说明
1 target string self 否 在哪个目标上发生跳转，默认当前小程序
1 url string 否 当前小程序内的跳转链接
2 open-type string navigate 否 跳转方式
3 delta number 1 否 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数
4 app-id string 否 当 target=”miniProgram”时有效，要打开的小程序
5 path string 否 当 target=”miniProgram”时有效，打开的页面路径，如果为空则打开首页
6 extra-data object 否 当 target=”miniProgram”时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
7 version string release 否 当 target=”miniProgram”时有效，要打开的小程序版本
8 hover-class string navigator-hover 否 指定点击时的样式类，当 hover-class=”none”时，没有点击态效果
9 hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态
10 hover-start-time number 50 否 按住后多久出现点击态，单位毫秒
11 hover-stay-time number 600 否 手指松开后点击态保留时间，单位毫秒
12 bindsuccess string 否 当 target=”miniProgram”时有效，跳转小程序成功
13 bindfail string 否 当 target=”miniProgram”时有效，跳转小程序失败
14 bindcomplete string 否 当 target=”miniProgram”时有效，跳转小程序完成
  • target 的合法值
编号 值 说明
1 self 当前小程序
2 miniProgram 其它小程序
  • open-type 的合法值
编号 值 说明
1 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2 reLaunch 关闭所有页面，打开到应用内的某个页面
3 redirect 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
4 navigate 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
5 navigateBack 关闭当前页面，返回上一页面或多级页面
6 exit 退出小程序，target=”miniProgram”时生效

先配置页面和按钮

  1. "pages":[
  2.     "pages/nav/1",
  3.     "pages/nav/2",
  4.     "pages/nav/3",
  5.     "pages/nav/4",
  6.     "pages/nav/5",
  7.     "pages/nav/6",
  8.     "pages/nav/7"
  9. ],
  10. "tabBar":{
  11.     "color":"#000000",
  12.     "selectedColor":"#aa33aa",
  13.     "backgroundColor":"#ffffff",
  14.     "borderStyle":"black",
  15.     "list":[
  16.         {
  17.             "pagePath":"pages/nav/1",
  18.             "text":"1号页面"
  19.         },
  20.         {
  21.             "pagePath":"pages/nav/2",
  22.             "text":"2号页面"
  23.         },
  24.         {
  25.             "pagePath":"pages/nav/3",
  26.             "text":"3号页面"
  27.         }
  28.     ]
  29. },
  1. <!-- pages/nav/1.wxml -->
  2. <view>这是1页面</view>
  3. <navigator url="2" open-type="switchTab">跳转2页面，tabBar页面，关闭其他页面，除tabBar</navigator>
  5. <!-- pages/nav/2.wxml -->
  6. <navigator url="3" open-type="reLaunch">跳转3页面，tabBar页面，关闭所有页面</navigator>
  8. <!-- pages/nav/3.wxml -->
  9. <navigator url="4" open-type="redirect">跳转4页面，不能跳到tabBar页面</navigator>
  11. <!-- pages/nav/4.wxml -->
  12. <navigator url="5" open-type="navigate">跳转5页面，不能跳到tabBar页面</navigator>
  14. <!-- pages/nav/7.wxml -->
  15. <view>这是7页面</view>
  16. <!--注意：navigateBack只能返回navigate跳转的页面，其他跳转都关闭了当前页面，返回不回去了-->
  17. <navigator delta="10" open-type="navigateBack">返回之前页面，最多返回10层</navigator>
  • 路由传值
  1. <!-- pages/nav/5.wxml -->
  2. <navigator url="6?name=zhang" open-type="navigate">跳转6页面</navigator>
  4. Page({
  5.     onLoad(e){
  6.         console.log(e);
  7.     }
  8. });

3、路由 API

编号 属性 说明
1 wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
2 wx.reLaunch 关闭所有页面，打开到应用内的某个页面，可以跳转任意页面
3 wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
4 wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
5 wx.navigateBack 关闭当前页面，返回上一页面或多级页面
  • wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
编号 属性 类型 必填 说明
1 url string 是 需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
2 success function 否 接口调用成功的回调函数
3 fail function 否 接口调用失败的回调函数
4 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行 
  1. <view>这是1页面</view>
  2. <view bindtap="switchTab">跳转2页面，tabBar按钮，关闭其他页面，除tabBar</view>
  1. Page({
  2.   switchTab() {
  3.     wx.switchTab({
  4.       url: "2",
  5.       success() {
  6.         console.log("跳转成功");
  7.       },
  8.       fail() {
  9.         console.log("跳转失败");
  10.       },
  11.       complete() {
  12.         console.log("跳转成功和成功");
  13.       },
  14.     });
  15.   },
  16. });
  • wx.reLaunch 关闭所有页面，打开到应用内的某个页面
编号 属性 类型 必填 说明
1 url string 是 需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
2 success function 否 接口调用成功的回调函数
3 fail function 否 接口调用失败的回调函数
4 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行 
  1. <view>这是1页面</view>
  2. <view bindtap="reLaunch">跳转3页面，tabBar按钮，关闭所有页面</view>
  1. Page({
  2.   reLaunch() {
  3.     wx.reLaunch({
  4.       url: "3",
  5.       success() {
  6.         console.log("跳转成功");
  7.       },
  8.       fail() {
  9.         console.log("跳转失败");
  10.       },
  11.       complete() {
  12.         console.log("跳转成功和成功");
  13.       },
  14.     });
  15.   },
  16. });
  • wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
编号 属性 类型 必填 说明
1 url string 是 需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
2 success function 否 接口调用成功的回调函数
3 fail function 否 接口调用失败的回调函数
4 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行 
  1. <view>这是1页面</view>
  2. <view bindtap="redirectTo">跳转4页面</view>
  4. Page({
  5.   redirectTo() {
  6.     wx.redirectTo({
  7.       url: "4",
  8.       success() {
  9.         console.log("跳转成功");
  10.       },
  11.       fail() {
  12.         console.log("跳转失败");
  13.       },
  14.       complete() {
  15.         console.log("跳转成功和成功");
  16.       },
  17.     });
  18.   },
  19. });
  • wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
编号 属性 类型 必填 说明
1 url string 是 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
2 events Object 否 页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
3 success function 否 接口调用成功的回调函数
4 fail function 否 接口调用失败的回调函数
5 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行 
  1. <view>这是1页面</view>
  2. <view bindtap="navigateTo">跳转5页面</view>
  3. <view bindtap="navigateToTwo" data-name="zhang">跳转6页面</view>
  5. Page({
  6.   navigateTo() {
  7.     wx.navigateTo({
  8.       url: "5",
  9.       success() {
  10.         console.log("跳转成功");
  11.       },
  12.       fail() {
  13.         console.log("跳转失败");
  14.       },
  15.       complete() {
  16.         console.log("跳转成功和成功");
  17.       },
  18.     });
  19.   },
  20.   navigateToTwo(e) {
  21.     console.log(e);
  22.     wx.navigateTo({
  23.       url: "6?name=" + e.target.dataset.name,
  24.       success() {
  25.         console.log("跳转成功");
  26.       },
  27.       fail() {
  28.         console.log("跳转失败");
  29.       },
  30.       complete() {
  31.         console.log("跳转成功和成功");
  32.       },
  33.     });
  34.   },
  35. });

十四、变量作用域

1、全局变量

  • app.js 中的参数
  1. App({
  2.   data: "全局变量",
  3.   globalData: {
  4.     userInfo: "zhangshuai"
  5.   },
  6. });
  • 页面获取全局变量
  1. // 获取到小程序全局唯一的 App 实例
  2. const app = getApp();
  3. console.log(app.data);
  4. console.log(app.globalData.userInfo);
  • 改变全局变量，其他页面调用改变后的数据
  1. const app = getApp();
  2. app.data = "改变全局变量";

2、局部变量

  • 创建变量 var 和 let，在当前文件的任何位置都可以使用、更改
  1. var name = "灭绝师太";
  2. let gender = "女";
  4. Page({
  5.   onLoad() {
  6.     console.log(name);
  7.     console.log(gender);
  8.     name = "zhangshuai";
  9.     gender = "男";
  10.   },
  11.   onShow() {
  12.      // 注意：不能在下面重新定义，只能修改值，如果重新声明，前面的都会获取不到这个变量
  13.     // var name = 'zhang'
  14.     console.log(name);
  15.     console.log(gender);
  16.   },
  17. });

3、私有变量

  1. Page({
  2.   onLoad() {
  3.     // 变量只能在onLoad方法中使用
  4.     var name = "天蓬老师";
  5.     let gender = "男";
  6.   },
  7.   onShow() {
  8.       // 函数具有私有作用域，在这个方法体中获取不到onLoad方法中变量
  9.     // 这里会报错，找不到变量
  10.     console.log(name);
  11.     console.log(gender);
  12.   },
  13. });

4、API 作用域

  • 每个 API 有独立的作用域
  1. Page({
  2.   data: {
  3.     name: "zhangshuai",
  4.   },
  5.   onLoad() {
  6.    // 在当前方法里，this代表本页面，是可以调用data数据或者方法的
  7.     wx.getSystemInfo({
  8.       success(res) {
  9.         // 在api里使用 文件this就会报错
  10.         // 在异步API里面，this就不代表本页面了，代表异步API自身
  11.         console.log(this.data.name);
  12.       },
  13.     });
  14.   },
  15.   onShow() {
  16.     // 先把文件this存到新变量中
  17.     var that = this;
  18.     wx.getSystemInfo({
  19.       success(res) {
  20.           // 异步API中也有自己的this，他会优先访问自身的this变量指向
  21.         console.log(that.data.name);
  22.         that.getInfo();
  23.       },
  24.     });
  25.   },
  26.   getInfo() {
  27.     console.log("hhhhhhh");
  28.   },
  29. });

十五、模块化

  • 将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块
  • 模块只有通过 module.exports 或者 exports 才能对外暴露接口

1、模块 utils/common.js

  1. function fun1() {
  2.   console.log("方法1");
  3. }
  4. function fun2(num) {
  5.   console.log("方法" + num);
  6. }
  7. function fun3() {
  8.   wx.getSystemInfo({
  9.     success(res) {
  10.       console.log(res);
  11.     },
  12.   });
  13. }
  15. // 格式化时间
  16. const formatTime = date => {
  17.   const year = date.getFullYear()
  18.   const month = date.getMonth() + 1
  19.   const day = date.getDate()
  20.   const hour = date.getHours()
  21.   const minute = date.getMinutes()
  22.   const second = date.getSeconds()
  24.   return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
  25. }
  27. const formatNumber = n => {
  28.   n = n.toString()
  29.   return n[1] ? n : `0${n}`
  30. }
  32. // module.exports 后面的名称 是给外部调用时 使用的名称
  33. // =号后面的名称是本文件 创建的方法名称
  34. module.exports.fun1 = fun1;
  35. exports.fun2 = fun2;
  36. // 可以一次性导出多个
  37. module.exports = {
  38.   formatTime,
  39.   fun3
  40. }

exports 是 module.exports 的一个引用

2、require 引入模块

  1. // ES5
  2. var common = require("../../utils/common.js");
  3. // ES6
  4. import common from "../../utils/common.js";
  5. // 也可以只导入部分
  6. import {formatTime} from "../../utils/common.js";
  7. Page({
  8.   onLoad: function () {
  9.     common.fun1();
  10.     common.fun2(3);
  11.     common.fun3();
  12.     console.log(formatTime(new Date));
  13.   },
  14. });

十六、网络通讯

1、服务器域名配置

  • 每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信
  • 服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置

小程序管理后台1 小程序管理后台2

当然我们在测试开发的时候不必这么麻烦，我们可以通过开发工具设置不校验域名

2、API wx.request

  • 发起 HTTPS 网络请求
编号 属性 类型 默认值 必填 说明
1 url string 是 开发者服务器接口地址
2 data string/object/ArrayBuffer 否 请求的参数
3 header Object 否 设置请求的 header，header 中不能设置 Referer。content-type 默认为 application/json
4 timeout number 否 超时时间，单位为毫秒
5 method string GET 否 HTTP 请求方法
6 dataType string json 否 返回的数据格式
7 responseType string text 否 响应的数据类型
8 success function 否 接口调用成功的回调函数
9 fail function 否 接口调用失败的回调函数
10 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
  • 返回值：回包
编号 属性 类型 说明
1 data string/Object/Arraybuffer 开发者服务器返回的数据
2 statusCode number 开发者服务器返回的 HTTP 状态码
3 header Object 开发者服务器返回的 HTTP Response Header
4 cookies Array. 开发者服务器返回的 cookies，格式为字符串数组 
  1. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     future:[],
  8.     city: null
  9.   },
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.     var that = this;
  16.     wx.request({
  17.       url: "http://apis.juhe.cn/simpleWeather/query",
  18.       data: {
  19.         city: "合肥",
  20.         key: "abc4b64ae7656b460723402175a5650b",
  21.       },
  22.       success(res) {
  23.         console.log(res);
  24.         that.setData({
  25.           city: res.data.result.city,
  26.           future: res.data.result.future
  27.         });
  28.       },
  29.     });
  30.   }
  31. })
  1. <view>{{city}}</view>
  2. <view wx:for="{{future}}" wx:key="index">
  3.   <text>日期：{{item.date}}</text>
  4.   <text>温度：{{item.temperature}}</text>
  5.   <text>天气：{{item.weather}}</text>
  6.   <text>风向：{{item.direct}}</text>
  7. </view>
  • request参数

method 的合法值

编号 值 说明
1 GET HTTP 请求 GET
2 POST HTTP 请求 POST
3 HEAD HTTP 请求 HEAD
4 PUT HTTP 请求 PUT
5 DELETE HTTP 请求 DELETE
6 TRACE HTTP 请求 TRACE
7 CONNECT HTTP 请求 CONNECT
8 OPTIONS HTTP 请求 OPTIONS

dataType 的合法值

编号 值 说明
1 json 返回的数据为 JSON，返回后会对返回的数据进行一次 JSON.parse
2 其他 不对返回的内容进行 JSON.parse

responseType 的合法值

编号 值 说明
1 text 响应的数据为文本
2 arraybuffer 响应的数据为 ArrayBuffer 
  1. Page({
  2.   onShow() {
  3.     wx.request({
  4.       url: "http://apis.juhe.cn/simpleWeather/query",
  5.       data: {
  6.         city: "合肥",
  7.         key: "abc4b64ae7656b460723402175a5650b",
  8.       },
  9.       header: {
  10.         "content-type": "application/x-www-form-urlencoded",
  11.       },
  12.       method: "POST",
  13.       dataType: "json",
  14.       responseType: "text",
  15.       success(res) {
  16.         console.log(res);
  17.       },
  18.     });
  19.   },
  20. });

十七、理论知识

1、前台/后台

  • 小程序启动后，界面被展示给用户，此时小程序处于前台状态
  • 当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态
  • 当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台
  • 但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行

2、小程序启动

  • 小程序启动可以分为两种情况，一种是冷启动，一种是热启动
    • 冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动
    • 热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动

3、小程序销毁时机

  • 当小程序进入后台，可以维持一小段时间的运行状态，如果这段时间内都未进入前台，小程序会被销毁
  • 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收

4、基础库

  • 每次小程序升级后，都会发布一个新版本，新版本包含 bug 修复，新增功能
  • 为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带 上一个稳定版 的基础库发布的
  • 小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端

5、程序与页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

  1. {
  2.   "pages":[
  3.     "pages/index/index",
  4.     "pages/logs/logs"
  5.   ]
  6. }

这个配置说明在 QuickStart 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

  1. App({
  2.   onLaunch: function () {
  3.     // 小程序启动之后 触发
  4.   }
  5. })

整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 注册程序 App 。

接下来我们简单看看小程序的一个页面是怎么写的。

你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

  1. Page({
  2.   data: { // 参与页面渲染的数据
  3.     logs: []
  4.   },
  5.   onLoad: function () {
  6.     // 页面渲染后 执行
  7.   }
  8. })

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

有关于 Page 构造器更多详细的文档参考 注册页面 Page 。

Correcting teacher：欧阳克欧阳克

Correction status：qualified

Teacher's comments：不错，示例写的很好。继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post