微信小程序

十、数据操作

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

1、数据绑定

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

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

<!--wxml-->
// 输出内容
<view> {{message}} </view>
// 组件属性
<view id="item-{{id}}"> </view>
// 控制属性
<view wx:if="{{condition}}">显示</view>
// 关键字
<checkbox checked="{{false}}"> </checkbox>
<checkbox checked="{{true}}"> </checkbox>
// 特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

// page.js
Page({
  data: {
    message: 'Hello MINA!',
    id: 5,
    condition: true
  }
})

2、条件渲染

<!--wxml-->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">不显示</view>
<view wx:if="{{3<5}}">3小于5为真</view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

// page.js
Page({
    data: {
        length: 4
    }
})

3、模板渲染

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

4、列表渲染

<!--wxml-->
<view wx:for="{{array}}" wx:key="index">{{index}}--{{item}} </view>
<view wx:for="{{array}}" wx:key="index" wx:for-item="v" wx:for-index="k">{{k}}--{{v}} </view>

// page.js
Page({
  data: {
    array: ['html', 'css','js', 'es', 'vue','php','tp']
  }
})

5、block包装元素

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

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

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

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

<block wx:for="{{list}}" wx:key="index"> 
    <text>{{item.id}}--{{item.name}}--{{item.age}}</text>
</block>

Page({
    data: {
        list: [
          {id:'001',name:"zhang",age:18},
          {id:'002',name:"peter",age:40},
          {id:'003',name:"ouyangke",age:35},
          {id:'004',name:"miemie",age:23}
        ]
    }
})

数据绑定操作

动态添加删除数据操作

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing">
      <view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
        <text>{{text}}</text>
      </view>
      <button disabled="{{!canAdd}}" bindtap="add">add line</button>
      <button disabled="{{!canRemove}}" bindtap="remove">remove line</button>
    </view>
  </view>
</view>

const texts = [
  '2011年1月，微信1.0发布',
  '同年5月，微信2.0语音对讲发布',
  '10月，微信3.0新增摇一摇功能',
  '2012年3月，微信用户突破1亿',
  '4月份，微信4.0朋友圈发布',
  '同年7月，微信4.2发布公众平台',
  '2013年8月，微信5.0发布微信支付',
  '2014年9月，企业号发布',
  '同月，发布微信卡包',
  '2015年1月，微信第一条朋友圈广告',
  '2016年1月，企业微信发布',
  '2017年1月，小程序发布',
  '......'
]
Page({
  onShareAppMessage() {
    return {
      title: 'text',
      path: 'page/component/pages/text/text'
    }
  },
  data: {
    text: '',
    canAdd: true,
    canRemove: false
  },
  extraLine: [],
  add() {
    this.extraLine.push(texts[this.extraLine.length % 12])
    this.setData({
      text: this.extraLine.join('\n'),
      canAdd: this.extraLine.length < 12,
      canRemove: this.extraLine.length > 0
    })
    setTimeout(() => {
      this.setData({
        scrollTop: 99999
      })
    }, 0)
  },
  remove() {
    if (this.extraLine.length > 0) {
      this.extraLine.pop()
      this.setData({
        text: this.extraLine.join('\n'),
        canAdd: this.extraLine.length < 12,
        canRemove: this.extraLine.length > 0,
      })
    }
    setTimeout(() => {
      this.setData({
        scrollTop: 99999
      })
    }, 0)
  }
})

十一、事件

1、什么是事件

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

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

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

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

2、自定义事件

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

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

<view id="tapTest" data-hi="Weixin" bindtap="tapName">{{msg}}</view>

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

Page({
  data: {
      msg: "Click me! "
  },
  tapName: function(event) {
    this.setData({
        msg: '已被点击'
    });
    console.log(event);
  }
})

input" class="reference-link">3、组件自带事件：input

<input bindinput="func" style="margin:20rpx;border:1px solid red;" value="输入时触发"></input>
<input bindfocus="func" style="margin:20rpx;border:1px solid red;" value="聚焦时触发"></input>
<input bindconfirm="func" style="margin:20rpx;border:1px solid red;" value="完成时触发"></input>

Page({
    function func(event) {
      console.log('tap Weixin', JSON.stringify(event))
    }
});

4、currentTarget 和 target 区别

• target 触发事件的源组件

• currentTarget 事件绑定的当前组件

• currentTarget 始终是监听事件者，而 target 是事件的真正发出者

<view bindtap="func" id="aaa">点击执行one事件,带id，带传值</view>
<view bindtap="func" id="ccc">点击执行two事件,id是ccc
  <view id="eee">点击执行three事件,id是eee</view>
</view>

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

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

5、事件分类

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

WXML 的冒泡事件列表

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

6、普通事件绑定

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

<view bindtap="handleTap">
    Click here!
</view>

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

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

<view bindtap="{{ handlerName }}">
    Click here!
</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。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</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 。

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

9、事件的捕获阶段

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

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

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

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

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

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

Page({
  one() {
    console.log(e);
  },
  two(e) {
    console.log(e);
  },
  three(e) {
    console.log(e);
  },
});

<view id="one" bindtap="one">
  第一级
  <view id="two" bindtap="two">
    第二级
    <view id="three" bindtap="three"> 
        第三级 
    </view>
  </view>
</view>

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

<view id="one" bindtap="one">
  第一级
  <view id="two" catchtap="two">
    第二级
    <view id="three" bindtap="three"> 
        第三级 
    </view>
  </view>
</view>

10、事件对象

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

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

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

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

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

十二、微信 API

API" class="reference-link">1、什么是 API

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

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

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

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

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

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

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

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

API" class="reference-link">2、事件监听 API

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

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

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

Page({
  onLoad: function (options) {
      // 监听小程序切前台事件 
    wx.onAppShow(function () {
      console.log("切换前台");
    });
      //监听小程序切后台事件
    wx.onAppHide(function () {
      console.log("切换后台");
    });
  },
});

API" class="reference-link">3、同步API

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

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

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

wx.getSystemInfoSync 获取系统信息

Page({
  onLoad: function (options) {
    console.log(wx.getSystemInfoSync());
    var sync = wx.getSystemInfoSync();
    console.log(sync.model);
  },
});

API" class="reference-link">4、异步API

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

• 回调函数的参数，success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段：

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

wx.login({
  success(res) {
    console.log(res.code)
  }
})

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

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})
// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))
云开发 API

wx.getSystemInfo 获取系统信息

Page({
  onLoad: function (options) {
    wx.getSystemInfo({
      success(res) {
        console.log(res);
        console.log(res.model);
        console.log("成功执行");
      },
      fail(res) {
        console.log("失败执行");
      },
      complete(res) {
        console.log("不管成功失败都执行");
      },
    });
  },
});

wx.showToast 显示消息提示框

icon 合法值：

Page({
  onLoad: function (options) {
    wx.showToast({
      title: "成功",
      icon: "success",
      duration: 1000,
      mask: true,
      success() {
        console.log("成功");
      },
      fail() {
        console.log("失败");
      },
      complete() {
        console.log("成功或失败");
      },
    });
  },
});

API" class="reference-link">5、系统API

Page({
    onLoad(){
        // 同步调用系统信息API
        wx.getSystemInfo({
          success (res) {
            console.log(res.model)
            console.log(res.pixelRatio)
            console.log(res.windowWidth)
            console.log(res.windowHeight)
            console.log(res.language)
            console.log(res.version)
            console.log(res.platform)
          }
        });
         // 异步调用系统信息API
        wx.getSystemInfo({
          success (res) {
            console.log(res.model)
            console.log(res.pixelRatio)
            console.log(res.windowWidth)
            console.log(res.windowHeight)
            console.log(res.language)
            console.log(res.version)
            console.log(res.platform)
          }
        });
    }
});

返回系统信息如下：

API" class="reference-link">6、效果API

• 交互

显示操作菜单

Page({
  show(){
      wx.showActionSheet({
        itemList: ['安徽', '安庆', '安阳'],
        itemColor: '#aa33aa',
        success (res) {
            // 用户点击的按钮序号，从上到下的顺序，从0开始
          console.log(res.tapIndex)
        },
        fail (res) {
          console.log(res.errMsg)
        }
      })
  }
});

<button bindtap="show">打开底部菜单</button>

显示模态对话框

object.success 回调函数

Page({
    onLoad(){
        wx.showModal({
          title: '提示',
          content: '这是一个模态弹窗',
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
    }
});

显示 loading 提示框

wx.showLoading({
  title: '加载中',
  mask: true,
})
// 需主动调用 wx.hideLoading 才能关闭提示框
setTimeout(function () {
  wx.hideLoading()
}, 2000)

显示消息提示框

object.icon 的合法值

wx.showToast({
  title: '成功',
  icon: 'success',
  mask: true,
  duration: 2000,
  success(e){
      console.log(e);
  }
})

• wx.showLoading 和 wx.showToast 同时只能显示一个
• wx.showToast 应与 wx.hideToast 配对使用

• 导航条

设置页面导航条颜色

object.animation 的结构

object.animation.timingFunc 的合法值

Page({
  show(){
    wx.setNavigationBarColor({
      backgroundColor: '#ff0000',
      frontColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: "easeIn"
      },
      success(){
        wx.showToast({
          title: '导航条颜色修改成功',
          icon: 'success',
          mask: true,
          duration: 2000,
          success(e){
              console.log(e);
          }
        });
      }
    });
  }
});
<button bindtap="show">改变导航条颜色</button>

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

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

Page({
  show(){
      // 改变导航条颜色
    wx.setNavigationBarColor({
      backgroundColor: '#ff0000',
      frontColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: "linear"
      }
    });
      // 显示导航条加载动画
    wx.showNavigationBarLoading({
      success(e){
        console.log(e);
      }
    });
    // 两秒后隐藏导航条加载动画
    setTimeout(function () {
      wx.hideNavigationBarLoading()
    }, 2000)
  }
});

动态设置当前页面的标题

wx.setNavigationBarTitle({
  title: '当前注册页面'
});

隐藏返回首页按钮

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

• tabbar设置

<!-- 显示 tabBar 某一项的右上角的红点 -->
<button bindtap="a">添加红点</button>
<!-- 隐藏 tabBar 某一项的右上角的红点 -->
<button bindtap="b">隐藏红点</button>
<!-- 隐藏底部 tabBar -->
<button bindtap="c">隐藏 tabBar</button>
<!-- 显示底部 tabBar -->
<button bindtap="d">显示 tabBar</button>
<!-- 为 tabBar 某一项的右上角添加文本 -->
<button bindtap="e">添加文本</button>
<!-- 移除 tabBar 某一项右上角的文本 -->
<button bindtap="f">移除文本</button>
<!-- 动态设置 tabBar 某一项的内容 -->
<button bindtap="g">设置某一项样式</button>
<!-- 动态设置 tabBar 的整体样式 -->
<button bindtap="h">设置整体样式</button>

Page({
    a(){
    wx.showTabBarRedDot({
      index: 0,
    });
  },
  b(){
    wx.hideTabBarRedDot({
      index: 0,
    });
  },
  c(){
    wx.hideTabBar({
      animation: true,
      success(e){
        console.log(e);
      }
    })
  },
  d(){
    wx.showTabBar({
      animation: true,
      success(e){
        console.log(e);
      }
    })
  },
  e(){
    wx.setTabBarBadge({
      index: 0,
      text: '新',
    })
  },
  f(){
    wx.removeTabBarBadge({
      index: 0,
    })
  },
  g(){
    wx.setTabBarItem({
      index: 0,
      text:'新标签',
      iconPath: 'http://ku.90sjimg.com/element_origin_min_pic/01/30/48/25573b15ce3e7f0.jpg',
      success(){
        wx.showToast({
          title: '设置成功',
          duration: 2000,
          icon: "success"
        })
      }
    })
  },
  h(){
    wx.setTabBarStyle({
      color: '#90CAF9',
      selectedColor: '#8BC34A',
      backgroundColor: '#FF9800',
      borderStyle: 'black',
      success(){
        wx.showToast({
          title: '设置成功',
          duration: 2000,
          icon: "success"
        })
      }
    })
  }
});

• 滚动API

GoTop(){
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300,
      success(){
        wx.showToast({
          title: '已返回顶部',
          duration: 1000,
          icon: "success"
        })
      }
    })
  }

<view style="height:500px;background-color: pink">1</view>
<view style="height:500px;background-color: green">2</view>
<view style="height:500px;background-color: yellow">3</view>
<button bindtap="GoTop">滚动到顶部</button>

• 下拉刷新

startRefresh(){
    // 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
    wx.startPullDownRefresh({
      success(){
        wx.showLoading({
          title: '正在刷新……',
          mask: false,
          success: (res) => {},
          fail: (res) => {},
          complete: (res) => {},
        });
      }
    })
  },
  stopRefresh(){
      // 停止当前页面下拉刷新
    wx.stopPullDownRefresh({
      success(){
        wx.hideLoading({
          success: (res) => {},
          fail: (res) => {},
          complete: (res) => {},
        });
      }
    })
  },

<button bindtap="startRefresh">开始刷新</button>
<button bindtap="stopRefresh">停止刷新</button>

API" class="reference-link">7、网络API

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

object.method 的合法值

object.dataType 的合法值

object.responseType 的合法值

wx.request({
  url: 'https://baidu.com', 
  data: {
    code: '百度一下'
  },
  header: {
    'content-type': 'application/json' 
  },
  success (res) {
    console.log(res.data)
  }
});

获取图片信息

wx.getImageInfo(Object object)

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

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

wx.chooseImage(Object object)

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

Page({
  /**
   * 页面的初始数据
   */
  data: {
    future:[],
    city: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getImageInfo({
      src: 'https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png',
      success (res) {
        console.log(res.width)
        console.log(res.height)
      }
    })
  },
  getChoose(){
    wx.chooseImage({
       count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
            const tempFilePaths = res.tempFilePaths
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success (res) {
            console.log(res.width)
            console.log(res.height)
          }
        })
      }
    })
  }
})

<button bindtap="getChoose">从相册获取图片</button>

在新页面中全屏预览图片

wx.previewImage(Object object)

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

previewImage(){
    wx.previewImage({
      // 当前显示图片的http链接
      current: 'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg', 
      // 需要预览的图片http链接列表
      urls: [
        'https://img.php.cn/upload/article/000/000/003/6093abebf1766794.jpg',
        'https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg',
        'https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png',
        'https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg'
      ] 
    })
  }

<button bindtap="previewImage">全屏预览图片</button>

压缩图片接口

wx.compressImage(Object object)

object.success 回调函数

Page({
    data: {
        img : '../../img/1.png'
    },
    compressImage(){
    var that = this;
    wx.compressImage({
      src: '../../img/1.png', // 图片路径
      quality: 20, // 压缩质量
      success(res){
        // 压缩后图片的临时文件路径 (本地路径)
        console.log(res);
        that.setData({
          img: res.tempFilePath
        })
      }
    })
  }
})

<button bindtap="compressImage">压缩图片</button>
<image src="{{img}}"></image>

获取用户账号信息

• 用户信息 UserInfo

string nickName

用户昵称

string avatarUrl

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

number gender
用户性别

gender 的合法值

string country
用户所在国家

string province
用户所在省份

string city
用户所在城市

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

language 的合法值

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

Page({
  data: {
    userInfo: {},
    hasUserInfo: false
  },
  onLoad() {
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    });
    // 必须是在用户已经授权的情况下调用，否则获取的是匿名信息
    wx.getUserInfo({
      success: function(res) {
        var userInfo = res.userInfo
         console.log(userInfo);
        var nickName = userInfo.nickName
        var avatarUrl = userInfo.avatarUrl
        var gender = userInfo.gender //性别 0：未知、1：男、2：女
        var province = userInfo.province
        var city = userInfo.city
        var country = userInfo.country
      }
    });
  }
})

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button  bindtap="getUserProfile"> 获取头像昵称 </button>
      <button  open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

提前向用户发起授权请求

wx.authorize(Object object)

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

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

Page({
    data: {
        src: ''
    },
     a(){
    // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.record']) {
          wx.authorize({
            scope: 'scope.record',
            success (e) {
              // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
              console.log(e);
            }
          })
        }
      }
    })
  },
  b(){
    wx.authorize({
      scope: 'scope.userLocation',
      success:(e)=>{
          // 授权地理位置信息
        console.log(e);
      }
    })
  }, 
  c(){
    wx.authorize({
      scope: 'scope.address',
      success:(e)=>{
          // 授权通讯地址
        console.log(e);
        wx.chooseAddress({
          success: (result) => {
            console.log(result);
          },
        });
      }
    })
  },
  d(){
    wx.authorize({
      scope: 'scope.werun',
      success:(e)=>{
          // 授权微信运动步数
        console.log(e);
        wx.getWeRunData({
          success: (result) => {
            console.log(result);
          },
        });
      }
    })
  },
  e(){
    wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success:(e)=>{
           // 授权保存到相册
        console.log(e);
      }
    })
  },
  f(){
    wx.authorize({
      scope: 'scope.camera',
      success:(e)=>{
           // 授权摄像头
        console.log(e);
      }
    })
  },
    // 开始录音
  startRecord(){
    wx.startRecord({
      success (res) {
        const tempFilePath = res.tempFilePath
        console.log(tempFilePath);
      }
    });
  },
    // 结束录音
  stopRecord(){
    wx.stopRecord() // 结束录音
  },
    // 拍照
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
})

<button bindtap="a">授权录音</button>
<button bindtap="startRecord">开始录音</button>
<button bindtap="stopRecord">结束录音</button>
<button bindtap="b">授权地理位置</button>
<button bindtap="c">授权通讯地址</button>
<button bindtap="d">授权微信步数</button>
<button bindtap="e">授权保存相册</button>
<button bindtap="f">授权摄像头</button>
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>拍照预览</view>
<image mode="widthFix" src="{{src}}"></image>

API" class="reference-link">8、路由API

// pages/login/reg.js
Page({
    a(){
        // 关闭当前页面，返回上一页面或多级页面
        // 可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
        const page =  getCurrentPages();
        wx.navigateBack({
          delta: 1
        });
    },
    b(){
        // 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
        // 使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
        wx.navigateTo({
          url: '.../logs/logs',
        });
    },
    c(){
        // 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
        wx.redirectTo({
          url: '.../logs/logs'
        });
    },
    d(){
        // 关闭所有页面，打开到应用内的某个页面
        wx.reLaunch({
          url: '.../index/index'
        });
    },
    e(){
        // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
        wx.switchTab({
          url: '.../index/index'
        });  
    }
});

<!--pages/login/reg.wxml-->
<!--返回上一级页面-->
<button bindtap="a">返回上一级页面</button>
<!--保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面-->
<button bindtap="b">跳转至日志页面</button>
<!--关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面-->
<button bindtap="c">跳转至日志页面</button>
<!--关闭所有页面，打开到应用内的某个页面-->
<button bindtap="d">跳转至首页</button>
<!--跳转到 tabBar 页面，并关闭所有非 tabBar 页面-->
<button bindtap="e">跳转至首页</button>

<!--pages/login/login.wxml-->
<navigator url="reg">跳转到注册页面</navigator>

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

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

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

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

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

9、定时器

// pages/nav/3.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 1,
    myInter: null
  },
  timeout(){
      // 两秒后执行
    setTimeout(()=>{
      wx.showToast({
        title: '成功',
        icon: "success",
        duration: 2000
      })
    },2000);
  },
  startTime(){
      // 设置定时器每隔一秒执行一次
    this.data.myInter = setInterval(() => {
      this.data.num++;
      console.log(this.data.num);
    }, 1000);
  },
  stopTime(){
      // 清除定时器
    clearInterval(this.data.myInter);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
})

<button bindtap="timeout">两秒后提示成功</button>
<button bindtap="startTime">开启定时器,每个一秒执行一次</button>
<button bindtap="stopTime">关闭定时器</button>