微信小程序学习笔记1.1

1.5 微信小程序视图层

微信小程序框架的视图层用WXML 和WXSS 编写，由组件来进行展示。将逻辑层的数据在视图层中进行渲染，同时将视图层的事件发送给逻辑层。

WXML（WeiXin Markup Language）用于描述页面的结构，

WXSS（WeiXin Style Sheet）用于描述页面的样式，

组件（Component）是视图的基本组成单元。

1.5.1 绑定数据

通过双大括号（{{}}）将变量包起来，在WXML页面中将数据值显示出来。

WXML页面中的动态数据都是来自．js文件Page下的data。

    index.wxml
    <view> {{ message }} </view>

    index..js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })

1.组件属性绑定

将data中的数据绑定到微信小程序的组件上。

    <view id="item-{{id}}"> </view>
    Page({
      data: {
        id: 0
      }
    })

2.控制属性绑定

用来进行if语句条件判断，如果满足条件，则执行，否则不执行

    <view wx:if="{{condition}}"> </view>
    Page({
      data: {
        condition: true
      }
    })

3.关键字绑定

常用于组件的一些关键字。

像复选框组件，checked关键字如果等于true，则代表复选框选中，false代表不选中复选框

    <checkbox checked="{{false}}"> </checkbox>

不要直接写成checked="false"，否则其计算结果是一个字符串，转成boolean 类型后代表真值。

4.运算

在{{}} 内可以进行简单的运算，主要支持以下几种方式的运算：

        1.三元运算

    <view hidden="{{flag ? true : false}}"> Hidden </view>

         2.数学运算

    <view> {{a + b}} + {{c}} + d </view>
    Page({
      data: {
        a: 1,
        b: 2,
        c: 3
      }
    })

view中的显示内容为3+3+d

        3.逻辑判断

    <view wx:if="{{length > 5}}"> </view>

        4.字符串运算

<view>{{"hello"+name}}</view>
Page({
    data:{
        name:'MINA'
    }
})

        5.数据路径运算

    <view>{{object.key}} {{array[0]}}</view>
    Page({
      data: {
        object: {
          key: 'Hello'
        },
        array: ['MINA']
      }
    })

1.5.2 条件渲染

1.wx:if判断单个组件

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

    <view wx:if="{{condition}}"> True </view>

使用wx:elif 和wx:else 来添加一个else 块

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

2.block wx:if判断多个组件

wx:if 是一个控制属性，需要将它添加到一个标签上。

如果想一次性判断多个组件标签，可以使用<block> </block> 标签将多个组件包起来，并在<block>中使用wx:if 控制属性

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

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

1.5.3列表渲染

1．wx:for 列表渲染单个组件

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

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

    <view wx:for="{{array}}">
      {{index}}: {{item.message}}
    </view>
    Page({
      data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
      }
    })

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

    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
      {{idx}}: {{itemName.message}}
    </view>

2．block wx:for 列表渲染多个组件

渲染一个包含多节点的结构块，wx:for需要应用在<block>标签上

    <block wx:for="{{[1, 2, 3]}}">
      <view> {{index}}: </view>
      <view> {{item}} </view>
    </block>

3．wx:key 指定唯一标识符

如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要使用wx:key 来指定列表中项目的唯一标识符。

wx:key 的值可以两种形式表示：

        1.字符串：代表在for循环的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变。

        2.保留关键字：*this 代表在for循环中的item本身，这种表示需要item本身是唯一的字符串或数字。当数据改变触发渲染层重新渲染的时候，会校正带有关键字的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

    <switch wx:for="{{objectArray}}" wx:key="unique" style="display: block; "> {{item.id}} </switch>
    Page({
      data: {
        objectArray: [
          {id: 5, unique: 'unique_5'},
          {id: 4, unique: 'unique_4'},
          {id: 3, unique: 'unique_3'},
          {id: 2, unique: 'unique_2'},
          {id: 1, unique: 'unique_1'},
          {id: 0, unique: 'unique_0'},
        ]
      }
    }

注意：若不提供wx:key，会提示警告。如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

1.5.4 定义模板

WXML提供模板（template）功能，允许将一些共用的、复用的代码在模板中定义成代码片段，然后在不同的地方调用，以达到一次编写，多次直接使用的效果。 

1.定义模板

在<template/>内定义代码片段，使用name属性指定模板的名称

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>

2.使用模板

在WXML文件中，使用is属性声明需要使用的模板，然后将模板所需要的data传入

    <template is="msgItem" data="{{item}}"/>
    Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

is属性可以使用三元运算语法来动态决定具体需要渲染哪个模板

    <template name="odd">
      <view> odd </view>
    </template>
    <template name="even">
      <view> even </view>
    </template>

    <block wx:for="{{[1, 2, 3, 4, 5]}}">
        <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
    </block>

1.5.5 引用功能

WXML提供import引用和include引用两种文件引用方式。两者的区别在于：import引用模板文件，include引用整个文件（除了<template/>）

1．import引用

import可以在当前文件中引用目标文件定义的模板。

#假如在item.wxml 中定义一个叫item的模板
    <! -- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>


#在index.wxml 中引用item.wxml，就可以使用item模板
    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>

2．include引用

include可以将目标文件（除了<template/>）的整个代码引入，相当于是复制到include位置

    <! -- index.wxml -->
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    <! -- header.wxml -->
    <view> header </view>
    <! -- footer.wxml -->
    <view> footer </view>

1.6 微信小程序组件介绍

1.6.1 视图容器组件

视图容器组件提供了3种容器组件：view视图容器组件、scroll-view可滚动视图区域组件和swiper滑块视图容器组件。

1．view视图容器组件

view视图容器组件是WXML界面布局的基础组件，它的功能和HTML中的div功能类似，用来进行界面的布局

    <view class="section">
      <view class="section__title">flex-direction: row</view>
      <view class="flex-wrp" style="display:flex; flex-direction:row; ">
        <view class="flex-item bc_green" style="width:100px; height:100px; background-color:
    green; color:#ffffff; text-align:center; line-height:100px; ">1</view>
        <view class="flex-item bc_red" style="width:100px; height:100px; background-color:red;
    color:#ffffff; text-align:center; line-height:100px; ">2</view>
        <view class="flex-item bc_blue" style="width:100px; height:100px; background-color:blue;
    color:#ffffff; text-align:center; line-height:100px; ">3</view>
      </view>
    </view>

2．scroll-view可滚动视图区域组件

scroll-view可滚动视图区域组件允许视图区域内容横向滚动或者纵向滚动，类似于浏览器的横向滚动条和垂直滚动条

    <view class="section">
      <view class="section__title">scroll-view</view>
      <scroll-view scroll-y="true" style="height: 200px; " bindscrolltoupper="upper"
    bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top=
    "{{scrollTop}}">
        <view id="green" style="width:100%; height:100px; background-color:green; "></view>
        <view id="red"   style="width:100%; height:100px; background-color:red; "></view>
        <view id="yellow" style="width:100%; height:100px; background-color:yellow; "></view>
        <view id="blue" style="width:100%; height:100px; background-color:blue; "></view>
      </scroll-view>
    </view>

注意：请勿在scroll-view 中使用textarea、map、canvas、video 组件，scroll-into-view 的优先级高于scroll-top，在滚动视图区域时会阻止页面回弹，所以在可滚动视图区域中滚动，是无法触发onPullDownRefresh的。若要使用下拉刷新，需使用页面的滚动功能，而不是scroll-view ，这样也能通过点击顶部状态栏返回到页面顶部。

3．swiper滑块视图容器组件

swiper滑块视图容器组件用来在指定区域内切换内容的显示，常用来制作海报轮播效果和页签内容切换效果 

    <view class="haibao">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"
    duration="{{duration}}">
          <block wx:for="{{imgUrls}}">
            <swiper-item>
              <image src="{{item}}" class="silde-image" style="width:100%"></image>
            </swiper-item>
          </block>
        </swiper>
      </view>
    Page({
      data:{
        indicatorDots:true,
        autoplay:true,
        interval:5000,
        duration:1000,
        imgUrls:[
        "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg", "http://img06.
    tooopen.com/images/20160818/tooopen_sy_175833047715.jpg", "http://img02.tooopen.com/images/
    20150928/tooopen_sy_143912755726.jpg"
        ]
      }
    })

上述代码中，设置autoplay等于true时就可以自动进行海报轮播，设置indicatorDots等于true时代表面板显示指示点，同时可以设置interval（自动切换时长）和duration（滑动动画时长）。

1.6.2 基础内容组件

基础内容组件包括icon（图标）组件、text（文本）组件和progress（进度条）组件。

1．icon组件

微信小程序提供了丰富的图标组件，应用于不同的场景，主要有成功、警告、提示、取消、下载等代表不同含义的图标 

2．text组件

text组件支持转义符"\"，例如换行\n、空格\t。

text组件内只支持<text> <text/>嵌套，除了文本节点以外的其他节点都无法长按选中

    <view class="btn-area">
      <view class="body-view">
        <text>我爱北京\t我爱中国</text>
        <text>我爱北京\n我爱中国</text>
      </view>
    </view>

3． progress组件

一种提高用户体验度的组件。

就像视频播放一样，可以通过进度条看到完整视频的长度、当前播放的进度，这样能让用户合理地安排自己的时间，提高用户的体验度。 

    <progress percent="20" show-info />
    <progress percent="40" stroke-width="12" />
    <progress percent="60" color="pink" />
    <progress percent="80" active />

 

1.6.3 表单组件

微信小程序提供了丰富的表单组件，包括button（按钮）组件、checkbox（多项选择器）组件、radio（单项选择器）组件、form（表单）组件、input（单行输入框）组件、textarea（多行输入框）组件、label（改进表单可用性）组件、picker（滚动选择器）组件、slider（滑动选择器）组件和switch（开关选择器）组件等。 

1．button组件

button组件提供3种类型按钮：基本类型按钮、默认类型按钮和警告类型按钮，同时提供默认和迷你两种大小按钮

 2．checkbox组件

用来进行多项选择。

checkbox-group是用来容纳多个checkbox的容器，它有一个绑定事件bindchange。

<checkbox-group/>中选中项发生改变是触发change事件，detail = {value:[选中checkbox的value值]}。

    <checkbox-group bindchange="checkboxChange">
        <checkbox value="USA"/>美国
        <checkbox value="CHN" checked="true"/>中国
        <checkbox value="BRA"/>巴西
        <checkbox value="JPN"/>日本
        <checkbox value="ENG" disabled/>英国
    </checkbox-group>

3．radio组件

与checkbox对立的一个组件，它每次只能选中一个，选项间是一种互斥关系。

radio-group是用来容纳多个radio的容器，它有一个绑定事件bindchange。

<radio-group/> 中选中项发生变化时触发bindchange事件，event.detail = {value：选中项radio的value值}。 

    <radio-group class="radio-group" bindchange="radioChange">
        <radio value="USA" />美国
        <radio value="CHN" checked/>中国
        <radio value="BRA" disabled/>巴西
        <radio value="JPN" />日本
        <radio value="ENG" />英国
    </radio-group>

4．input组件

input用来控制输入单行文本内容。

可以设置input（输入）框的类型为text、number、idcard和digit；

可以设置输入框是否为密码类型，如果是密码类型，则会用点号代替具体值显示；

通过placeholder来给输入框添加友好的提示信息，类似于“请输入手机号/用户名/邮箱”这样友好的提示；

可以设置输入框禁用和最大长度、获取焦点；

该输入框有3个常用的事件：输入时事件（bindinput）、光标聚焦时事件（bindfocus）和光标离开时事件（bindblur）

    <view class="section">
      <input placeholder="这是一个可以自动聚焦的input" auto-focus/>
    </view>
    </view>
    <view class="section">
      <input  maxlength="10" placeholder="最大输入长度10" />
    </view>
    <view class="section">
      <input password type="number" />
    </view>
    <view class="section">
      <input password type="text" />
    </view>
    <view class="section">
      <input type="digit" placeholder="带小数点的数字键盘"/>
    </view>
    <view class="section">
      <input type="idcard" placeholder="身份证输入键盘" />
    </view>
    <view class="section">
      <input placeholder-style="color:red" placeholder="占位符字体是红色的" />
    </view>

5．textarea组件

与input对立的一个组件，用来控制输入多行文本内容。

通过placeholder来给输入框添加友好的提示信息，类似于“请输入手机号/用户名/邮箱”这样友好的提示；

可以设置输入框禁用和最大长度、获取焦点、自动调整行高；

该输入框有4个常用的事件：输入时事件（bindinput）、光标聚焦时事件（bindfocus）、光标离开时事件（bindblur）和行数变化时事件（bindlinechange）。

    <view class="section">
      <textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
    </view>
    <view class="section">
      <textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red; "  />
    </view>

6．label组件

用来改进表单可用性。

目前可以用来改进的组件有button、checkbox、radio和switch。

它只有一个for属性，是用来绑定控件的id。

它的使用有两种方式：一种是没有定义for属性，一种是定义for属性。 

        1.label组件没有定义for属性

        label组件没有定义for属性时，在label内包含<button/>、<checkbox/>、<radio/> 和<switch/>这些组件。当单击label组件时，会触发label内包含的第一个组件，假如<button/>在第一个位置，就会触发<button/>对应的事件；假如<radio/>在第一个位置，就会触发<radio/>对应的事件。

        2.label组件定义for属性

        label组件定义for属性后，就会根据for属性的值找到组件id等于for属性值，然后触发相应事件。

7．picker组件

Picker组件支持3种滚动选择器：普通选择器、时间选择器和日期选择器，默认是普通选择器

 

这3种选择器是通过mode来区分的。例如，普通选择器mode = selector，时间选择器mode =time，日期选择器mode = date。

除了普通选择器、时间选择器和日期选择器3种滚动选择器外，还有一种嵌入页面的滚动选择器（picker-view）。

8．slider组件

常用来控制声音的大小、屏幕的亮度等，

它可以设置滑动步长、显示当前值及设置最小值/最大值

9．switch组件

应用十分普遍，它有两个状态：“开”或“关”。

在很多场景下会用到开关这个功能，例如微信中的新消息提醒界面，它通过开关来设置是否接收消息、是否显示消息、是否有声音、是否震动等功能

 

10．form组件

用于将表单中组件的值提交给．js进行处理，它可以提交<switch/>、<input/>、<checkbox/> 、<slider/>、 <radio/>和<picker/>这些组件的值。

提交表单的时候，会借助于button组件的formType为submit的属性，将表单组件中的value 值进行提交，并需要在表单组件中加上name 来作为关键字。

单击Reset按钮，可以重置表单；单击Submit按钮，可以把表单数据提交到．js中进行处理。 

1.6.4 导航组件 

微信小程序导航组件可以在页面中设置导航，可以使用navigator页面链接组件进行页面跳转

    <view class="btn-area">
      <navigator url="../navigator/navigator? title=navigator" open-type="navigate" hover-class=
    "navigator-hover">wx.navigateTo保留当前页跳转</navigator>
      <navigator url="../redirect/redirect? title=redirect" open-type="redirect" hover-class=
    "other-navigator-hover">wx.redirectTo关闭当前页跳转</navigator>
      <navigator url="../redirect/redirect" open-type="switchTab" hover-class="other-navigator-
    hover">wx.switchTab跳转到tabBar页面</navigator>
    </view>

1.6.5 媒体组件

媒体组件包括audio（音频）组件、image（图片）组件和video（视频）组件。

audio组件用来播放音乐，image组件用来显示图片，video组件用来播放视频。

1．audio组件

 需要有唯一的id，根据id使用wx.createAudioContext('myAudio')创建音频播放的环境；

src属性值为音频播放的资源路径；

poster属性值为音频的播放图片；

name属性值为音频名称。

    <! -- audio..wxml -->
    <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio"
    controls loop></audio>

    <button type="primary" bindtap="audioPlay">播放</button>
    <button type="primary" bindtap="audioPause">暂停</button>
    <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
    <button type="primary" bindtap="audioStart">回到开头</button>

2．image组件

image组件有两类展现模式：

一类是缩放模式，在缩放模式中包括4种方式；

另一类是裁剪模式，在裁剪模式中包括9种方式。

    <view class="page">
      <view class="page__hd">
        <text class="page__title">image</text>
        <text class="page__desc">图片</text>
      </view>
      <view class="page__bd">
        <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
          <view class="section__title">{{item.text}}</view>
          <view class="section__ctn">
          <image style="width: 200px; height: 200px; background-color: #eeeeee; " mode="{{item.mode}}"
    src="{{src}}"></image>
          </view>
        </view>
      </view>
    </view>
    Page({
      data: {
        array: [{
          mode: 'scaleToFill',
          text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应’
        }, {
          mode: 'aspectFit',
          text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来’
        }, {
          mode: 'aspectFill',
          text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来’
        }, {
          mode: 'top',
          text: 'top：不缩放图片，只显示图片的顶部区域’
        }, {
          mode: 'bottom',
          text: 'bottom：不缩放图片，只显示图片的底部区域’
        }, {
          mode: 'center',
          text: 'center：不缩放图片，只显示图片的中间区域’
        }, {
          mode: 'left',
          text: 'left：不缩放图片，只显示图片的左边区域’
        }, {
          mode: 'right',
          text: 'right：不缩放图片，只显示图片的右边区域’
        }, {
          mode: 'top left',
          text: 'top left：不缩放图片，只显示图片的左上边区域’
        }, {
          mode: 'top right',
          text: 'top right：不缩放图片，只显示图片的右上边区域’
        }, {
          mode: 'bottom left',
          text: 'bottom left：不缩放图片，只显示图片的左下边区域’
        }, {
          mode: 'bottom right',
          text: 'bottom right：不缩放图片，只显示图片的右下边区域’
        }],
        src: '../../resources/cat.jpg'
      },
      imageError: function(e) {
        console.log('image3发生error事件，携带值为’, e.detail.errMsg)
      }
    })

3．video组件

用来播放视频的组件，这个组件可以控制是否显示默认播放控件（播放/暂停按钮、播放进度、时间）及发送弹幕信息等功能；

video组件默认宽度为300px、高度为225px，设置宽高需要通过wxss修改width值和height值 

    <view class="section tc">
      <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload? filekey=
    30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&
    bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f
    02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls>
    </video>
      <view class="btn-area">
        <button bindtap="bindButtonTap">获取视频</button>
        <input bindblur="bindInputBlur"/>
        <button bindtap="bindSendDanmu">发送弹幕</button>
      </view>
    </view>
    function getRandomColor () {
      let rgb = []
      for (let i = 0 ; i < 3; ++i){
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length == 1 ? '0' + color : color
        rgb.push(color)
      }
      return '#' + rgb.join('')
    }
    Page({
      onReady: function (res) {
        this.videoContext = wx.createVideoContext('myVideo')
      },
      inputValue: '',
        data: {
            src: '',
        danmuList: [
          {
            text: ’第 1s 出现的弹幕’,
            color: '#ff0000',
            time: 1
          },
          {
            text: ’第 3s 出现的弹幕’,
            color: '#ff00ff',
            time: 3
        }]
        },
      bindInputBlur: function(e) {
        this.inputValue = e.detail.value
      },
      bindButtonTap: function() {
        var that = this
        wx.chooseVideo({
          sourceType: ['album', 'camera'],
          maxDuration: 60,
          camera: ['front', 'back'],
          success: function(res) {
            that.setData({
              src: res.tempFilePath
            })
          }
        })
      },
      bindSendDanmu: function () {
        this.videoContext.sendDanmu({
          text: this.inputValue,
          color: getRandomColor()
        })
      }
    })

 1.6.6 地图组件

用来开发与地图有关的应用程序。

在地图上可以标记覆盖物及指定一系列的坐标位置、仓库和客户的收货地址

    <! -- map..wxml -->
    <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}"
    bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="
    {{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height:
    300px; "></map>
    // map..js
    Page({
      data: {
        markers: [{
          iconPath: "/resources/others.png",
          id: 0,
          latitude: 23.099994,
          longitude: 113.324520,
          width: 50,
          height: 50
        }],
        polyline: [{
          points: [{
            longitude: 113.3245211,
            latitude: 23.10229
          }, {
            longitude: 113.324520,
            latitude: 23.21229
          }],
          color:"#FF0000DD",
          width: 2,
          dottedLine: true
        }],
        controls: [{
          id: 1,
          iconPath: '/resources/location.png',
          position: {
            left: 0,
            top: 300 - 50,
            width: 50,
            height: 50
          },
          clickable: true
        }]
      },
      regionchange(e) {
        console.log(e.type)
      },
      markertap(e) {
        console.log(e.markerId)
      },
      controltap(e) {
        console.log(e.controlId)
      }
    })

1.6.7 画布（canvas）组件

用来绘制正方形、圆形或其他的形状

    <! -- canvas..wxml -->
    <canvas style="width: 300px; height: 200px; " canvas-id="firstCanvas"></canvas>
    <! -- 当使用绝对定位时，文档流后边的 canvas 的显示层级高于前边的 canvas -->
    <canvas style="width: 400px; height: 500px; " canvas-id="secondCanvas"></canvas>
    <! -- 因为 canvas-id 与前一个 canvas 重复，该 canvas 不会显示，并会发送一个错误事件到 AppService -->
    <canvas style="width: 400px; height: 500px; " canvas-id="secondCanvas" binderror="canva
    sIdErrorCallback"></canvas>
    // canvas..js
    Page({
      canvasIdErrorCallback: function (e) {
        console.error(e.detail.errMsg)
      },
      onReady: function (e) {
        // 使用 wx.createContext 获取绘图上下文 context
        var context = wx.createContext()
        context.setStrokeStyle("#00ff00")
        context.setLineWidth(5)
        context.rect(0, 0, 200, 200)
        context.stroke()
        context.setStrokeStyle("#ff0000")
        context.setLineWidth(2)
        context.moveTo(160, 100)
        context.arc(100, 100, 60, 0, 2 * Math.PI, true)
        context.moveTo(140, 100)
        context.arc(100, 100, 40, 0, Math.PI, false)
        context.moveTo(85, 80)
        context.arc(80, 80, 5, 0, 2 * Math.PI, true)
        context.moveTo(125, 80)
        context.arc(120, 80, 5, 0, 2 * Math.PI, true)
        context.stroke()

        // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
        wx.drawCanvas({
          canvasId: 'firstCanvas',
          actions: context.getActions() // 获取绘图动作数组
        })
      }
    })

1.6.8 客服会话按钮组件

用于在页面上显示一个客服会话按钮，用户单击该按钮后会进入客服会话模式。

    <contact-button
      type="default-light"
      size="20"
      session-from="weapp"
    >
    </contact-button>

1.7 微信小程序API说明

1.7.1 请求服务器数据API

wx.request是用来请求服务器数据的API，它发起的是HTTPS请求，同时它需要在微信公众平台配置HTTPS服务器域名，一个月内可申请3次修改，否则在由AppID创建的项目中无法使用wx.request请求服务器数据这个API,WebSocket会话、文件上传下载服务器域名都是如此。

    Page({
      onLoad:function(){
        wx.request({
          url: 'http://m.maoyan.com/movie/list...json',
          data: {
            type:'hot',
            offset:0,
            limit:1000
          },
          method: 'GET',
          success: function(res){
            console.log(res);
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
      }
    })

若项目没有填写AppID，是可以访问HTTP请求及公众开发平台以外的一些服务器请求，但在手机上是无法预览和使用的，所以学习过程中可以不填写AppID来学习这些API的使用。

1.7.2 文件上传与下载

API文件上传与下载API是经常会用到的API，可以用来与服务器进行文件的上传与下载

    Page({
      onLoad:function(){
        wx.chooseImage({
          count: 9, // 最多可以选择的图片张数，默认9
          sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
          sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
          success: function(res){
              var tempFilePaths = res.tempFilePaths;
            wx.uploadFile({
              url: 'http://localhost:8555/wxapp/WxUploadFileServlet',
              filePath:tempFilePaths[0],
              name:'name',
              header: {
                  'content-type': 'application/..json'
                },
              formData: {
                  imgName:’我是图片名称’,
                  imgSize:'122kb'
              },
              success: function(res){
                console.log(res);
              }
            })
          }
        })
      }
    })
    Page({
      data:{
        src:''
      },
      onLoad:function(){
        var page = this;
        wx.downloadFile({
          url: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_
    31bdc765.png",
          type: 'image', // 下载资源的类型，用于客户端识别处理，有效值：image、audio和video
          success: function(res){
            console.log(res);
            var tempPath = res.tempFilePath;
            page.setData({src:tempPath});
          }
        })
      }
    })

wx.downloadFile 文件下载最大并发限制量是10个，默认超时和最大超时都是60s，网络请求的referer 是不可设置的，格式固定为https://servicewechat.com/{appid}/{version}/page-frame.html，其中{appid}为小程序的AppID;{version} 为小程序的版本号，版本号0代表开发版。

1.7.3 WebSocket会话API

用来创建一个会话连接，创建会话连接后可以相互通信，例如利用微信聊天和QQ聊天工具进行通信。它会用到以下7个API。

•  wx.connectSocket(OBJECT)创建一个会话连接。
•  wx.onSocketOpen(CALLBACK)监听WebSocket连接打开事件。
•  wx.onSocketError(CALLBACK)监听WebSocket错误。
• wx.sendSocketMessage(OBJECT)发送数据。
• wx.onSocketMessage(CALLBACK)监听WebSocket接收到服务器的消息事件。
•  wx.closeSocket()关闭WebSocket连接。
• wx.onSocketClose(CALLBACK)监听WebSocket关闭。

    Page({
      data:{
        msg:'',
        sendMsg:[],
        socketOpen:false,
        resData:[]
      },
      createConn:function(){
        var page = this;
          wx.connectSocket({
            url: 'ws://localhost:8555/wxapp/getServer',
            data:{
              x: '',
              y: ''
            },
            header:{
              'content-type': 'application/json'
            },
            method:"GET"
          });
          wx.onSocketOpen(function(res) {
              console.log(res);
              page.setData({socketOpen:true});
              console.log('WebSocket连接已打开！')
          });
          wx.onSocketError(function(res){
              console.log('WebSocket连接打开失败，请检查！')
          })
      },
      send:function(e){
          if (this.data.socketOpen) {
              console.log(this.data.socketOpen);
              wx.sendSocketMessage({
                data:this.data.msg
              });
              var sendMsg = this.data.sendMsg;
              sendMsg.push(this.data.msg);
              this.setData({sendMsg:sendMsg});
              var page = this;
              wx.onSocketMessage(function(res) {
                var resData = page.data.resData;
                resData.push(res.data);
                page.setData({resData:resData});
                console.log(resData);
                console.log(’收到服务器内容：' + res.data)
              })
            } else {
              console.log('WebSocket连接打开失败，请检查！');
            }
      },
      closeConn:function(e){
        wx.closeSocket();
        wx.onSocketClose(function(res) {
            console.log('WebSocket 已关闭！')
        });
      },
      getMsg:function(e){
        var page = this;
        page.setData({msg:e.detail.value});
      }
    })

 1.7.4 图片处理API

微信小程序针对图片处理提供3个API:

• wx.chooseImage(OBJECT)选择图片API：可从本地相册选择图片或使用相机拍照来选择图片，通过count属性可以设置每次最多选择的图片数量，通过sizeType属性来设置显示原图或者压缩图，通过sourceType属性设置相册选图、使用相机选图或者两者都可以。
• wx.previewImage(OBJECT)预览图片API：可用来预览多张图片及设置默认显示的图片
• wx.getImageInfo(OBJECT)获得图片信息API：可用来获得图片信息，包括图片的宽度、图片的高度及图片返回的路径

1.7.5 文件操作API

微信小程序针对文件操作提供5个API:

• wx.saveFile将文件保存到本地：将文件可以保存到本地，下次启动微信小程序的时候，仍然可以获取到该文件；如果是临时路径，下次启动微信小程序的时候，就无法获取到该文件。本地文件存储大小限制为10MB
• wx.getSavedFileList获取本地已保存的文件列表：通过wx.getSavedFileList来获取本地文件列表，可以获取到wx.saveFile保存的文件
• wx.getSavedFileInfo获取本地文件信息：wx.getSavedFileInfo获取本地指定路径的文件信息，包括文件的创建时间、文件大小及接口调用结果等
• wx.removeSavedFile删除本地文件：wx.saveFile用来将文件保存到本地，而wx.removeSavedFile用来删除本地文件
• wx.openDocument打开文档：wx.openDocument可以打开．doc、.xls、.ppt、.pdf、.docx、.xlsx、.pptx多种格式的文档

1.7.6 数据缓存API

数据缓存API用来处理数据缓存信息，可以将数据缓存到本地、获取本地缓存数据、移除缓存数据及清理缓存数据，常用的数据缓存API有以下几种。

• wx.setStorage(OBJECT)异步方式将数据存储在本地缓存指定的key 中。
• wx.setStorageSync(KEY,DATA)同步方式将数据存储在本地缓存指定的key 中。
• wx.getStorage(OBJECT)异步方式从本地缓存中异步获取指定key 对应的内容，
• wx.getStorageSync(KEY)同步方式从本地缓存中同步获取指定key 对应的内容。
• wx.getStorageInfo(OBJECT)异步方式获取当前storage的相关信息。
• wx.getStorageInfoSync( )同步方式获取当前storage的相关信息。
• wx.removeStorage(OBJECT)异步方式从本地缓存中移除指定key。
• wx.removeStorageSync(KEY)同步方式从本地缓存中移除指定key。
• wx.clearStorage()异步方式清理本地缓存数据。 

1．数据缓存到本地

微信小程序提供了两种将数据缓存到本地的方式：

• wx.setStorage(OBJECT)异步方式：将数据存储在本地缓存指定的key中，会覆盖原来该key对应的内容
• wx.setStorageSync(KEY,DATA)同步方式：本地缓存最大为10MB。 将数据存储到本地缓存指定的key中，也会覆盖原来该key 对应的内容。相比于异步缓存数据，该方式更简练一些

2．获取本地缓存数据

获取本地缓存数据提供了4个API：

• wx.getStorage(OBJECT)：使用异步方式从本地缓存中获取指定key对应的内容
• wx.getStorageSync(KEY)：一个同步的接口，从本地缓存中同步获取指定key对应的内容
• wx.getStorageInfo(OBJECT)：wx.getStorage和wx.getStorageSync这两个接口都是从本地的指定key值来获取数据， wx.getStorageInfo(OBJECT)是使用异步方式获取当前storage的相关信息，是获取所有key的值
• wx.getStorageInfoSync()：使用同步的方式来获取当前storage的相关信息。和wx.getStorageInfo()异步获取storage返回的数据一样，都是返回所有的key值，然后根据key值再查找完整的数据。

前两个API是通过指定key值来获取缓存数据，而后两个是获取当前storage的相关信息。

 3．移除和清理本地缓存数据

wx.removeStorage(OBJECT)和wx.removeStorageSync(KEY)用来从本地缓存中移除指定key;

wx.clearStorage()和wx.clearStorageSync()用来清理本地缓存数据。

• wx.removeStorage(OBJECT)：用来异步从本地缓存中移除指定的key
• wx.removeStorageSync (KEY)：用来同步从本地缓存中移除指定的key，它的效果和wx. removeStorage(OBJECT)效果一样
• wx.clearStorage ()：异步清理本地缓存数据
• wx.clearStorageSync ()：同步清理本地缓存数据

1.7.7 位置信息API

微信小程序针对位置提供4个API:

• wx.getLocation(OBJECT)：可以获得当前位置信息，包括当前位置的地理坐标、速度，用户离开小程序后，此接口无法调用；当用户单击“显示在聊天顶部”时，此接口可继续调用。
• wx.chooseLocation(OBJECT)：打开地图来选择位置
• wx.openLocation(OBJECT) ：可以借助微信内置地图查看位置
• wx.createMapContext(mapId)：wx.createMapContext(mapId)地图组件控制是用来创建并返回map上下文mapContext 对象。它有两个方法：一个是getCenterLocation获取当前地图中心的经纬度，返回的是GCJ-02坐标系，可以用于wx.openLocation；另一个是moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用

1.7.8 设备应用API

微信小程序针对设备应用提供六类API：

• 获取系统信息：

wx.getSystemInfo(OBJECT)：用来异步获取设备的系统信息

wx.getSystemInfoSync()：用于同步获取系统信息，它是没有参数的

• 获取网络类型：

 使用wx.getNetworkType(OBJECT)来获取网络类型，网络类型分为：2G、3G、4G和WiFi

• 重力感应：

使用wx.onAccelerometerChange(CALLBACK)来进行重力感应，监听重力感应数据，频率为5次/秒

• 罗盘：

使用wx.onCompassChange(CALLBACK)来监听罗盘数据，频率为5次/秒

• 拨打电话和扫码：

使用wx.makePhoneCall(OBJECT)来拨打电话

使用wx.scanCode(OBJECT)来调出客户端扫码界面，扫码成功后返回对应的结果

1.7.9 交互反馈API

微信小程序提供4种交互反馈API:

• wx.showToast(OBJECT) 显示消息提示框：经常用来提示提交“成功”或者“加载中”，是一种友好提示方式
• wx.hideToast()隐藏消息提示框：手动隐藏消息提示框
• wx.showModal(OBJECT) 显示模态弹窗：可以设置提示的标题、提示的内容、“取消”按钮和样式、“确定”按钮和样式及一些绑定的事件。模态弹窗是对整个界面进行覆盖，防止用户操作界面中的其他内容
• wx.showActionSheet(OBJECT) 显示操作菜单：从底部弹出很多选项供选择，也可以取消选择，显示操作菜单接口

1.7.10 登录API

微信小程序的登录是必不可少的环节，可以简单理解为这样几个步骤。

① 使用wx.login获取code值。

② 获取code值后再加上AppID、secret（公众开发平台AppID下面）、grant_type（授权类型）去请求https://api.weixin.qq.com/sns/.jscode2session这个路径，来获取session_key。

③ 获取session_key后可以生成自己的3rd_session存储在storage中。

④ 后续用户进入微信小程序，先从storage中获得3rd_session，再根据它去查找合法的session_key。

1.wx.login(OBJECT)获取登录凭证

微信小程序使用wx.login(OBJECT)接口来获取登录凭证（code），进而换取用户登录状态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）。用户数据的加解密通信需要依赖会话密钥完成。

2.code 换取session_key

https://api.weixin.qq.com/sns/.jscode2session：这是一个HTTPS 接口，开发者服务器使用登录凭证（code）获取session_key 和openid。

其中session_key 是对用户数据进行加密签名的密钥。

为了应用安全，session_key 不应该在网络上传输。接口地址为：https://api.weixin.qq.com/sns/.jscode2session?appid=APPID&secret=SECRET&.js_code=.JSCODE&grant_type=authorization_code。

3.wx.checkSession(OBJECT) 检查登录状态是否过期

微信小程序可以使用wx.checkSession(OBJECT) 检查登录状态是否过期，如果过期就重新登录

4.wx.getUserInfo(OBJECT) 获取用户信息

微信小程序使用wx.getUserInfo(OBJECT)来获取用户信息。在获取用户信息前，需要调用wx.login接口，只有用户在登录状态，才能获取到用户的相关信息

1.7.11 微信支付API

微信支付主要经过5个步骤：

小程序内调用登录接口、

商户系统调用支付统一下单、

商户系统调用再次签名、

商户系统接收支付通知、

商户系统查询支付结果。

1.7.12 分享API

在Page 中定义onShareAppMessage 函数，用来设置该页面的分享信息。只有定义此事件处理函数，右上角菜单才会显示“分享”按钮，用户单击“分享”按钮时会调用。此事件需要返回一个Object，用于自定义分享内容