微信小程序复习（1~6）

第一章 微信小程序概述

认识微信小程序

小程序简介：

小程序于2011年1月推出，2017年1月正式上线

小程序的特征：

无需安装、触手可及、用完即走、无需卸载

小程序应用场景的特点：

简单的业务逻辑、低频度的使用场景

 微信小程序开发者工具界面功能介绍

1.工具栏：

在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等

2.模拟区：

在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果

3.目录文件区：

目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作

4.编辑区：

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json 文件的操作，使用组合键能提高代码的编辑效率。

5.调试区：

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json 文件的操作，使用组合键能提高代码的编辑效率。

1.Console面板

Comsole面板是调试小程序的控制而板，当代码执行出现错误时，错误信息将显示Consoke面板中，便于开发者排查错误，如图1-25所示。另外，在小程中，开发者可通过console.loe语句将信息输出到Console面板中。此外，开发者可以在 Console 面板直接轮人代码并调试

2.Sources面板

Sourees面板是源文件调试信息页，用于显示当前项目的脚本文件，如图1-26所示调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮，Sources面板中显示的代码是经过小程序框架编译过的脚本文件，开发者的代码会被包含在defne 函数中。对于Page 代码，在文件尾部通过require 函数主动调用

3.Network面板

Network面板是网络调试信息页，用于观察和显示网络请求request和socket 等网络相关的详细信息

4.Security面板

Security面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题。如果设置安全论证，则会显示“The security of this page is unknown.”

5.Storage面板

Storage 面板是数据存储信息页，开发者可以使用wx.setStorage或者wx.setStorageSyne 将数据存储到本地存储，存储在本地存储中的变量及值可以在Sorage 面板中显示

6.AppData面板

AppDala面板是实时数据信息页，用于显示项目中被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更情况反映到前端界面

7.Wxml面板

Wxml面板是布局信息页，主要用于调试Wxm】组件和相关CSS样式，显示Wxm转化后的界面。Wxml面板调试区的左侧部分是Wxm代码，右侧部分是该选择器的CSS样式

8.Sensor面板

Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现,用于调试重力感应 API

9.Trace面板

Trace面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android)设备的路由信息

10.扩展菜单项

最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息

第二章  微信小程序开发基础

2.1 基本目录结构：

在微信下程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）

在主目录中3个以“app”开头的文件是微信下程序框架的主描述文件，是应用程序级别的文件

project.config.json文件是项目配置文件，包含项目名称、AppID等相关信息

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同的扩展名（.wxml、.wxss、.js、.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件、页面配置文件。按照规定，同一个页面的4个文件必须用来存放具有相同的路径与文件名

2.1.1 主体文件：

app.js：小程序逻辑文件

app.json：小程序公共设置文件

app.wxss：小程序主样式表文件

2.1.2 页面文件：

.js：页面逻辑文件

.wxml：页面结构文件

.wxss：页面样式文件

.json：页面配置文件

2.2 小程序开发框架：

小程序MINA框架将整个系统划分为视图层、逻辑层和（数据层）

2.2.1 视图层：MINA框架的视图层由WXML与WXSS编写，由组件来进行展示

视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构wxss 文件用于描述页面的样式

2.2.2 逻辑层：逻辑层用于处理事务逻辑（采用JavaScript编写）

1.增加app()和Page()方法，进行程序和页面的注册

2.提供丰富的 API,如扫一扫、支付等微信特有的能力

3.每个页面有独立的作用域，并提供模块化能力

2.2.3 数据层：数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用

1.页面临时数据或缓存

在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。setData()函数的参数接收一个对象，以(key,value)的形式表示将 key 在 this.data 中对应的值改变成 value

2.文件存储(本地存储)

使用数据 API接口，如下:
wx.getStorage    获取本地数据缓存
wx. setStorage   设置本地数据缓存
wx.clearStorage 清理本地数据缓存

3.网络存储与调用
上传或下载文件 API接口，如下:
wx.request           发起网络请求
wx.uploadFile      上传文件。
wx.downloadFile 下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo  原窗口打开页面

2.3 创建小程序页面：

在pages目录下新建一个test1目录，并在test1目录下新建test1.js、test1.json、test1.wxml、test1.wxss空文件

2.4 配置文件

小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容

2.4.1 全局配置文件

 小程序的全局配置保存在全局配置文件(appjson)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等

1.配置项

 pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的“路径”+“文件名”。pages 配置项是必填项

设置 pages 配置项时，应注意以下3点:
        （1）数组的第一项用于设定小程序的初始页面

        （2）在小程序中新增或减少页面时，都需要对数组进行修改

        （3）文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、wxml 和wxss 文件进行整合数据绑定

2.window配置项

 window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式

3.tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现

2.5 逻辑层文件

Page({
  data:{
    name:'lzc',
    age:20,
    birthday:[{year:2004},{month:12},{date:20}],
      Object:{hobby:'computer'}//对象
  }

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].day}}日
</view>
<view>爱好:{{object.hobby}}</view>

2.6 页面结构文件 

页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxm文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</vew>)标志，每个组件可以设置不同的属性(如id、class 等)，组件还可以嵌套。
        WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力

2.6.1数据绑定

 小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data 进行动态绑定，在页面中显示 data中的数据。小程序的数据绑定使用Mustache语法(H)将变量或运算规则包起来。

运算：

<view>算术运算{{age}}+{{num}}</view>
<view>逻辑运算{{age==30}}</view>
<view>三元运算{{age==30 ? 'happy':'nohappy'}}</view>

条件数据绑定：

<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">0</view>
<view wx:else>-1</view>

列表数据绑定：

students:[
    {nickname:'Tom',height:180,weight:140},
    {nickname:'Anne',height:160,weight:100}
  ]

<view wx:for="{{students}}">
<text>{{item.nickname}}</text>
<text>{{item.height}}</text>
<text>{{item.weight}}</text>
</view>

模板：

<template name="students">
    <text>{{item.nickname}}</text>
    <text>{{item.height}}</text>
    <text>{{item.weight}}</text>
</template>
<template is="students" data="{{students}}">
</template>

第三章 页面布局

3.1盒子模型

微信小程序的视图层由WXML和WXSS 组成。其中，WXSS(WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS 具有外边距(maCSS的大部分特性

        一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成此外，对 padding、border 和 margin 可以进一步细化为上、下、左、右4个部分，在 CSS所示。中可以分别进行设置

图中各元素的含义如下：
        width和height ：内容的宽度和高度

        padding -top、padding -right、padding -bottom和 padding-left：上内边距、右内边
距、底内边距和左内边距。

        border -top、border -right、border -bottom 和 border -left：上边框、右边框、底边框
和左边框

        margin -top、margin -right、margin-bottom 和margin_left：上外边距、外边距底外边距和左外边距

        因此，一个盒子实际所占有的宽度(高度)应该由“内容”+“内边距”+“边框+“外边距”组成

3.2块级元素与行内元素

元素按显示方式分为块级元素、行内元素和行内块元素，它们的显示方式由display 属性控制

  3.2.1块级元素

块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:

（1）一个块级元素占一行。
（2）块级元素的默认高度由内容决定，除非自定义高度。
（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置。
（5）块级元素可以容纳块级元素和行内元素。

 代码如下：

<view style="border: 1px solid #f00;">块级元素1</view>
<view style="border: 1px solid #0f0; margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;">
<view style="height: 60px;"> 块级元素1</view></view>

  3.2.2 行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的 display属性设置为inline后，该元素即被设置为行内元素。行内元素的特点如下:

（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定

（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素

（3）同一块内，行内元素和其他行内元素显示在同一行

    代码如下：

<view style="border: 1px solid #ccc;">
<view style="height: 60px;"> 块级元素1</view></view>
<view style="padding: 20px;">
<text style="border: 1px solid #f00;">文本1</text>
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px">文本2</text>
<view style="border: 1px solid #00f;display: inline;">块级元素</view>一行显示不全,自动换行
</view>
<view>元素显示的方式
<view style="display:inline-block;border: 1px solid #f00;margin: 10px;width: 200px;">块级元素，行内元素和行内块元素</view>三种类型
</view>

3.2.3行内块元素 

当元素的 display 属性被设置为inline-block 时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:

<view>
  元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">
  块级元素、行内元素和行内块元素
  </view>三种类型
</view>

3.3浮动与定位

元素浮动与清除 代码如下：

<view>box1,box2,box3没浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1 box2左浮动</view>
<view style="border: 1px solid #0f0;padding: 5px;">
  <view style="border: 1px solid #0f0;">box1</view>
  <view style="float: left;  border: 1px solid #0f0;">box2</view>
  <view style="float: right;  border: 1px solid #0f0;">box3</view>
</view>
<view>box1 box2 box3左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
  <view style="float: left; border: 1px solid #0f0;">box1</view>
  <view style="float: left; border: 1px solid #0f0;">box2</view>
  <view style="float: left; border: 1px solid #0f0;">box3</view>
</view>

清除浮动

<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="border: 1px solid #f00;padding: 5px;"class="clearfloat">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float: left;border: 1px solid #0f0;">box2</view>
<view style="float: left;border: 1px solid #0f0;">box3</view>
</view>

 

3.3.2 元素定位

 浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position性可以实现对页面元素的精确定位。基本格式如下:

{position:static|relative|absolute|fixed}
其中 

        static—默认值，该元素按照标准流进行布局

        relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它
        absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响
        fixed——固定定位，相对于浏览器窗口进行定位

对 box1、box2、box3 进行元素静态定位，示例代码如下：

<!--三个元素均为定位-->
<view style="float: left;border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="float: left;border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="float: left;border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

对 box1、box2、box3 进行元素相对定位，示例代码如下：

<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

 

对 box1、box2、box3 进行元素绝对定位，示例代码如下：

<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>

3.4 flex布局

 flex布局是万维网联盟(World WideWebConsortium，W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局flex是flexible box的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局（弹性布局）

         flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container) flex布局的所有直接子元素自动成为容器的成员，称为flex项目(flexitem)

        容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做 cross start，结束位置叫做 

设置 display属性可以将一个元素指定为flex布局，设置flex-direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向

3.4.1 容器属性

1.display

display 用来指定元素是否为flex布局，语法格式为:

.box{display:flex|inline-flex;}

2.flex-direction

flex-direction 用于设置主轴的方向，即项目排列的方向，语法格式为:

.box{flex-direction:row|row-reverse|column|column-reverse;}

3.flex-wrap

用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下：

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

 

4.flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值是row nowrap。语法格式如下:

.box{flex-flow:<flex-direction>||<flex-wrap>;}

演示代码： 

.box{flex-flow:row nowrap;}//水平方向不换行
.box{flex-flow:row-reverse wrap;}//水平方向逆方向换行
.box{flex-flow:column wrap-reverse;}//垂直方向逆方向换行

5.justify-content

justify-contment用于定于项目在主轴上的对齐方式。语法格式如下：

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

6.alig-items

alig-items用于制定项目在交叉轴上的对齐方式，语法格式如下：

.box{align-iems:flex-start|flex-end|centet|baseline|stretch;}

示例代码如下：

<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>

.cont1{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}
.item{
  background-color: #ccc;
  border: 1px solid #f00;
  height: 100px;
  width: 50px;
  margin: 2px;
}
.item2{
  height: 80px;
}
.item3{
  display: flex;
  height: 50px;
  align-items: stretch;
}
.item4{
  height: 120px;
}

7.align-content 

align-content用来定义项目由多个轴线在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下：

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch}

3.4.2项目属性

1.order

order属性定义项目的排序顺序，数值越小，排列越靠前，默认值为0。语法格式如下：

.item{order:<number>;}

示例代码如下：

<!-- wxml文件 -->
<view class="cont1">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
</view>
<view class="cont1">
  <view class="item" style="order: 1;">1</view>
  <view class="item" style="order: 3;">2</view>
  <view class="item" style="order: 2;">3</view>
  <view class="item">4</view>
</view>

2.flex-grow

用来定义项目的放大比例，默认值为0

<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-grow: 1;">2</view>
  <view class="item"style="flex-grow:2;">3</view>
  <view class="item">4</view>
</view>

3.flex-shrink

用来定义项目的缩小比例，如空间不足，该项目将被缩小

<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-shrink: 2">2</view>
  <view class="item"style="flex-shrink:1">3</view>
  <view class="item" style="flex-shrink:4;">4</view>
</view>

 4.flex-basis

用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，他的默认值为auo

<view class="cont1">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
<view class="item">4</view>
</view>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-basis: 100px;">2</view>
  <view class="item"style="flex-basis:200px;">3</view>
  <view class="item">4</view>
</view>

5.flex

其默认值分别为0，1，auto

.item{
  flex: auto;
}
.item{
  flex: 1 1 auto;
}
.item{
  flex: none;
}
.item{
  flex: 0 0 auto;
}

 6.align-self

用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下：

.item{align-selt:auto{flex-start|flex-end|center|baseline|stretch;}

第四章  页面组件

4.1组件的定义及属性

组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布开放能力等8类(30多个)基础组件。
每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下:

<标签名 属性名 ="属性值" >内容...</标签名>

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、elass、style、hidden、data-*、bind */catch *等
■id组件的唯一表示，保持整个页面唯一，不常用。
■class 组件的样式类，对应WXSS 中定义的样式。
■style 组件的内联样式，可以动态设置内联样式，
■hidden 组件是否显示，所有组件默认显示。
■data-* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值。

■bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数。

4.2 容器视图组件

4.2.1 view

view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Interface，UI）组件，通过设置view的CSS属性可以实现各种复杂的布局。view组件的特有属性如表所示：

<!-- 4.2.1 wxml文件-->
<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
  <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
  <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
</view>
<view style="text-align: center;">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
  <view style="border: 1px solid #f00;">1</view>
  <view style="display: flex;">
    <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
    <view style="border: 1px solid #f00;flex-grow: 1;">3</view>
  </view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
  <view style="border: 1px solid #f00;flex-grow: 1;flex-direction: column;">
    <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
    <view style="border: 1px solid #f00;flex-grow: 2;">3</view>
  </view>
</view>

 

 4.2.2 Scroll-View

通过设置seroll-view组件的相关属性可以实现滚动视图的功能，其属性如表所示

代码如下：

<!-- 4.2.2 wxml文件-->
<view class="container" style="padding: 0rpx;">
<!-- 垂直滚动，这里必须设置高度 -->
  <scroll-view scroll-top="{{scrollTop}}"scroll-y="true" style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.pic_url}}"></image>
      <view class="text">
       <text class="title">{{item.name}}</text>
       <text class="description">{{item.short_description}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <losding hidden="{{hidden}}" bindchange="loadingChange">
      加载中……
    </losding>
  </view>
</view>

// 4.2.2 js文件
var url = "http://www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lang_id = 0;
var pos_id = 0;
var unlearn = 0;
//请求数据
var losdMore = function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url: 'url',
    data:{
      page:page,
      page_size:page_size,
      sort:sort,
      is_easy:is_easy,
      lang_id:lang_id,
      pos_id:pos_id,
      unlearn:unlearn
    },
    success:function(res){
      var list = that.data.list;
      for(var i=0;i<res.data.list.length;i++){
        list.push(res.data.list[i]);
      }
      that.setData({
        list:list
      });
      page++;
      that.setData({
        hidden:true
      });
    }
  });
}
Page({
 data:{
   hidden:true,
   list:[],
   scrollTop:0,
   scrollHeigt:0
 },
 onLoad:function(){
   //这里要注意，微信的scroll-view必须设置高度才能监听滚动事件，所以需要在页面的onLoad事件中为scroll-view的高度赋值
   var that = this;
   wx.getSystemInfo({
     success:function(res){
       that.setData({
         scrollHeigt:res.windowHeight
       });
     }
   });
   loadMore(that);
 },
 //页面滑动到底部
 bindDownLoad:function(){
   var that = this;
   loadMore(that);
   console.log("lower");
 },
 scroll:function(event){
   //该方法绑定了页面滚动时的事件，这里记录了当前的position.y的值，为了在请求数据后把页面定位到这里
   this.setData({
     scrollTop:event.detail.scrollTop
   });
 },
 topLoad:function(event){
   //该方法绑定了页面滑动到顶部的时间，然后做页面上拉刷新
   page = 0;
   this.setData({
     list:[],
     scrollTop:0
   });
   loadMore(this);
   console.log("lower");
 }
}) 

/* 4.2.2 wxss文件*/
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  color:#aaa;
}
.usermotto{
  margin-top: 200px;
}
scroll-view{
  width: 100%;
}
.item{
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
}
.item.img{
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
}
.title{
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
}
.description{
  font-size: 26rpx;
  line-height: 15rpx;
}

4.2.3 Swiper

swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper 组件由<swiper/>和<swiper-item/>两个标签组成，它们不能单独使用。<swiper/>中只能放置-个或多个<swiper-item/>，若放置其他组件则会被删除;<swiper-item/>内部可以放置任何组件，默认宽高自动设置为100%。swiper组件的属性如表所示:

代码如下：

<swiper indicator-dots="true" autoplay="true" interval="5000" du-ration ='1000'>
<swiper-item>
<image src="/image/01.jpg" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/image/03.png" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
  <image src="/image/29.jpg" style="width: 100%;"></image>
</swiper-item>
</swiper>

 

 4.3 基础内容组件

基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息。

4.3.1 icon

icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表所示

示例代码如下：

<!-- 4.3.1 wxml文件 -->
<view>icon类型：
  <block wx:for="{{iconType}}">
    <icon type="{{item}}"/>{{item}}
  </block>
</view>
<view>icon大小：
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>{{item}}
  </block>
</view>
<view>icon颜色：
  <block wx:for="{{iconColor}}">
    <icon type="success" size="30" color="{{item}}"/>{{item}}
  </block>
</view>

Page({
 data:{
  iconType:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],
  iconSize:[10,20,30,40],
  iconColor:["#f00","#0f0","#00f"]
 }
})

 

4.3.2 text 

 text 组件用于展示内容，类似HTML中的<span >，text 组件中的内容支持长按选中，支持转义字符“\”，属于行内元素。text组件的属性如表所示。

代码如下

<block wx:for="{{x}}" wx:for-item="x">
  <view class="aa">
    <block wx:for = "{{1-x}}" wx:for-item="x">
      <text decode = "{{true}}" space="{{true}}">
        &nbsp;
      </text>
    </block>
    <block wx:for="{{y}}" wx:for-item="y">
      <block wx:if="{{y<=2*x-1}}">
       <text>*</text>
      </block>
    </block>
  </view>
</block>
<block wx:for="{{x}}" wx:for-item="x">
  <view class="aa">
    <block wx:for="{{-5+x}}" wx:for-item="x">
      <text decode="{{true}}" space="{{true}}">
        &nbsp;
      </text>
    </block>
    <block wx:for="{{y}}" wx:for-item="y">
      <block wx:if="{{y<=11-2*x}}">
       <text>*</text>
      </block>
    </block>
  </view>
</block>

Page({
data:{
  x:[1,2,3,4,5],
  y:[1,2,3,4,5,6,7,8,9]
}})

.aa{
  text-align: center;
}

4.3.3 progress 

  progress 组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等progress 组件属于块级元素，其属性如表所示

代码如下

<view>显示百分比</view>
<progress percent="80" show-info="80"></progress>
<view>改变宽度</view>
<progress percent="50" stroke-width="2"></progress>
<progress percent="80" active></progress>

4.4 表单组件 

 表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在<form/>标签中使用，还可以作为单独组件和其他组件混合使用。

4.4.1 button

button组件用来实现用户和应用之间的交互

代码如下：

<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bindtap='buttonSize' size="{{size}}">改变size</button>
<button type="default" bindtap='buttonPlain' size="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading' size="{{loading}}">改变loading显示</button>
 

Page({
  data:{
    size:'default',
    plain:'false',
    loading:'false'
  },
  buttonSize:function(){
    if(this.data.size == "default")
    this.setData({size:'mini'})
    else
    this.setData({size:'default'})
  },
  buttonPlain:function(){
    this.setData({plain:! this.data.plain})
  },
  buttonLoading:function(){
    this.setData({loading:! this.data.loading})
  }
}
)

4.4.2 radio 

单选框用来从一组选项中选取一个选项

代码如下

Page({
data:{
  radios:[
    {name:'java',value:'JAVA'},
    {name:'python',value:'Python',checked:'true'},
    {name:'php',value:'PHP'},
    {name:'swif',value:'Swif'},
  ],
  city:"",
  lang:""
},
citychange:function(e){
  this.setData({city:e.detail.value});
},
radiochange:function(event){
  this.setData({lang:event.detail.value});
  console.log(event.detail.value)
}
})

<view>请选择你喜欢的城市：</view>
<radio-group binndchange="citychange">
<radio value ="西安">西安</radio>
<radio value ="北京">北京</radio>
<radio value ="上海">上海</radio>
<radio value ="广州">广州</radio>
<radio value ="深圳">深圳</radio>
</radio-group>
<view>您的选择：{{city}}</view>
<view>请选择你喜爱的计算机语言:</view>
<radio-group class="radio-group" bindchange="radiochange">
<label class="radio" wx:for="{{radios}}">
<radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
</label>
</radio-group>
<view>你的选择是：{{lang}}</view>

 4.4.3 checkbox

复选框用于从一组选项中选取单独哦个选项

代码如下

Page({
  city:"",
  data: {
    citys:[
      {name:'km',value:'昆明'},
      {name:'sy',value:'三亚'},
      {name:'zh',value:'珠海',checked:'true'},
      {name:'dl',value:'大连'}]
  },
  cityChange:function(e){
    console.log(e.detail.value);
    var city = e.detail.value;
    this.setData({city:city})
  }
})

<view>请选择您想去的城市:</view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}">
{{item.value}}
</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>

4.4.4 switch

switch组件作用类似开关选择器

代码如下

<view>
<switch bindchange="sw1">{{var1}}</switch>
</view>
<view>
<switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
<switch type="checkbox" bindchange="sw3">
{{var3}}</switch>
</view>

Page({
data:{
  var1:'关',
  var2:'开',
  var3:'未选'
},
sw1:function(e){
this.setData({var1:e.detail.value ?'开':'关'})
},
sw2:function(e){
  this.setData({var2:e.detail.value ?'开':'关'})
  },
  sw3:function(e){
    this.setData({var3:e.detail.value ?'已选':'未选'})
    }
  })

 

4.4.5 slider

slider 组件为滑动选择器,，可以通过滑动来设置相应的值，其属性如表所示。

代码如下

<view>默认 min=0 max=100 step=1</view>
<slider></slider>
<view>显示当前值</view>
<slider show-value></slider>
<view>设置min=20 max=200 step=10</view>
<slider min="0" max="200" step="10" show-value></slider>
<view>背景色红色，已选定颜色绿色</view>
<slider color="#f00" selected-color="0f0"></slider>
<view>滑动改变icon的大小</view>
<slider show-value bindchange="sliderchange"></slider>
<icon type="success" size='{{siez}}'></icon>

Page({
  data:{
    size:'20'
  },
  sliderchange:function(e){
    this.setData({size:e.detail.value})
  }
})

 4.4.6 picker

pick组件为滚动选择器

1.普通选择器

代码如下

Page({
data:{
  array:["JAVA","Python","C","C#"],
  objArray:[
    {id:0,name:'JAVA'},
    {id:1,name:'Python'},
    {id:2,name:'C'},
    {id:3,name:'C#'}
  ],
  index1:0,
  index2:0
},
arrayChange:function(e){
  console.log("picker值变为",e.detail.value)
  var index=0;
  this.setData({
    index1:e.detail.value
  })
},
objArrayChange:function(e){
  console.log("picker值变为",e.detail.value)
  this.setData({
    index2:e.detail.value
  })
}
})

<view>---range为数组---</view>
<picker range="{{array}}" value="{{index1}}" bindchange="arrayChange">
  当前选择：{{array[index1]}}
</picker>
<view>---range为数组对象---</view>
<picker bindchange="objArrayChange" value="{{index2}}" range-key="name" range="{{objArray}}">
  当前选择：{{objArray[index2].name}}
</picker>

2.多列选择器 

多列选择器(mode=multiSelector)允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如表所示

代码如下

<view>多列选择器</view>
<picker 
rmode="multiSelector" 
bindchange="bindMultiPickerChange" 
bindcolumnchange="bindMultiPickerColumnChange" 
value="{{multiIndex}}" 
range="{{multiArray}}">
  <view>
    当前选择：{{multiArray[0][multiIndex[0]]}},
             {{multiArray[1][multiIndex[1]]}},
             {{multiArray[2][multiIndex[2]]}}
  </view>
</picker>

Page({
data:{
  multiArray:[["陕西省","广东省"],["西安市","汉中市","延安市"],["雁塔区","长安区"]],
  multiIndex:[0,0,0]
},
//绑定multipicker
bindMultiPickerChange:function(e){
console.log("picker发送选择改变，携带值为",e.detail.value)
this.setData({
  multiIndex:e.detail.value
})
},
//绑定multipickercolumn
bindMultiPickerColumnChange:function(e){
  console.log("修改的列为",e.detail.column,",值为",e.detail.value);
  var data={
    multiArray:this.data.multiArray,
    multiIndex:this.data.multiIndex
  };
  data.multiIndex[e.detail.column]=e.detail.value;
  switch(e.detail.column){
    case 0:
      switch(data.multiIndex[0]){
        case 0:
          data.multiArray[1]=["西安市","汉中市","延安市"];
          data.multiArray[2]=["雁塔区","长安区"];
          break;
        case 1:
          data.multiArray[1]=["深圳市","珠海市"];
          data.multiArray[2]=["南山区","罗湖区"];
          break;
      }
      data.multiIndex[1]=0;
      data.multiIndex[2]=0;
      break;
      case 1:
        switch(data.multiIndex[0]){
          case 0:
        switch(data.multiIndex[1]){
          case 0:
          data.multiArray[2]=["雁塔区","长安区"];
          break;
          case 1:
          data.multiArray[2]=["汉台区","南郑区"];
          break;
          case 2:
          data.multiArray[2]=["宝塔区","长子县","延川县"];
          break;
        }
        break;
        case 1:
        switch(data.multiIndex[1]){
          case 0:
          data.multiArray[2]=["南山区","罗湖区"];
          break;
          case 1:
          data.multiArray[2]=["香洲区","斗门区"];
          break;
        }
        break;
        }
        data.multiIndex[2]=0;
        console.log(data.multiIndex);
        break;
  }
  this.setData(data);
  },
})

3.时间选择器，日期选择器 

时间选择器可以用于提供时间选项中的相应时间

日期选择器可以用于从提供的日期选择项中相应的日期

代码如下：

<view>
<picker 
mode="date"
start="{{startdate}}"
end="{{enddate}}"
value="{{date}}"
bindchange="changedate">
选择的日期：{{date}}
</picker>
</view>
<view>
<picker 
mode="time"
start="{{starttime}}"
end="{{endtime}}"
bindchange="changetime">
选择的时间{{time}}
</picker>
</view>

Page({
data:{
  startdate:2000,
  enddate:2050,
  date:'2018',
  starttime:'00:00',
  endtime:'12:59',
  time:'8:00'
},
changedate:function(e){
  this.setData({data:e.detail.value});
  console.log(e.detail.value)
},
changetime:function(e){
  this.setData({time:e.detail.value})
  console.log(e.detail.value)
}
})

 

4.省市选择器 

省市选择器是小程序的新版提供的选择快速地区的组件

代码如下

<picker 
mode="region"
value="{{region}}"
custom-item="{{custom-item}}"
bindchange="changeregion">
选择省市区{{region[0]}},{{region[1]}},{{region[2]}}
</picker>

Page({
data:{
  region:['陕西省','西安市','长安区'],
  customitme:'全部'
},
changeregion:function(e){
  console.log(e.detail.value)
  this.setData({
    region:e.detail.value
  })
},})

4.4.7 picker-view

picker-view组件为嵌入页面的滚动选择器

代码如下

const date = new Date()
const years =[]
const months =[]
const days =[]
for(let i=1990;i<= 2050;i++){
years.push(i)
}
for(let i=1;i<=12;i++){
  months.push(i)
}
for(let i=1;i<312;i++){
  days.push(i)
}
Page({
  data:{
    years:years,
    months:months,
    days:days,
    year:date.getFullYear(),
    month:date.getMonth()+1,
    day:date.getDate(),
    value:[118,0,0],
  },
  bindChange:function(e){
    const val=e.detail.value
    console.log(val);
    this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[val[2]]
    })
  }
})
 

<view>当前日期:{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style ="height:50px" style="width: 100%; height: 300px;"value="{{value}}"bindchange="bindchange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px;">
{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px;">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px;">{{item}}日</view>
</picker-view-column>
</picker-view>
 

 

4.4.8 input 

组件为输入框，用户可以输入相应信息

代码如下：

<input placeholder="这是一个可以自动聚焦的inpu" auto-focus/>
<input placeholder="这是一个只有再按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class="section_title">你输入的是:{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view"/>
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2"/>
<input password type="number"/>
<input password type="text"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>

Page({
  data:{
    focus:false,
    inputValue:""
  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  bindReplaceInput:function(e){
    var value =e.detail.value
    var pos =e.detail.cursor
    if(pos!=-1){
      var left=e.detail.value.slice(0,pos)
      pos =left.replace(/11/g,'2').length
    }
return{
  value:value.replace(/11/g,'2'),
  cursor:pos
}
  }
})

4.4.9 textarea（文本域）

组件为多行输入框组件，可以实现多行内容的输入

代码如下

Page({
  data:({
    height:10,
    focus:false
  }),
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindTextAreaBlur:function(e){
    console.log(e.detail.value)
  },
  bindFormSumbit:function(e){
    console.log(e.detail.value.textarea)
  }
})

<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高"/>
<textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"/>
<textarea placeholder="这是一个可以自动聚焦的" auto-focus/>
<textarea placeholder="这个只有在" focus="{{focus}}"/>
<button bindtap="bindButtonTap">获取聚焦</button>
<form bindsubmit="bindFormSumbit">
<textarea placeholder="form中" name="textarea"/>
<button form-type="submit">提交</button>
</form>

4.4.10 label 

组件为标签组件，用于提升表单组件的可用性

代码如下

<view><checkbox></checkbox>中国</view>
<view><label><checkbox></checkbox>中国</label></view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>

Page({
  city:"",
  data:{
    citys:[
      {name:'km',value:'昆明'},
      {name:'sy',value:'三亚'},
      {name:'zh',value:'珠海',checked:'true'},
      {name:'dl',value:'大连'}] 
  },
  cityChange:function(e){
    console.log(e.detail.value);
    var city =e.detail.value;
    this.setData({city:city})
  }
})

 

4.4.11 form 

组件为表单组件，用来实现将组建内的用户输入信息进行提交

代码如下

<form bindsubmit="formSumbit" bindreset="formReset">
<view>姓名:
<input type="text" name="xm"/>
</view>
<view>性别:
<radio-group name="xb">
<label>
<radio value="男" checked/>男</label>
<label>
<radio value="女" checked/>女</label>
</radio-group>
</view>
<view>爱好:
<checkbox-group name="hobby">
<label wx:for="{{hobbies}}">
<checkbox value ="{{item.value}}"
checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
</view>
<button formType='sumbit'>提交</button>
<button formType='reset'>重置</button>
</form>

Page({
  hobby:"",
  data:{
  hobbies:[
    {name:'jsj',value:'计算机',checked:'true'},
    {name:'music',value:"听音乐"},
    {name:'game',value:'电竞'},
    {name:'swim',value:'游泳',checked:'true'}
  ]
},
formSumbit:function(e){
  console.log('form发上了submit事件，携带数据为:',e.detail.value)
},
formReset:function(){
  console.log('form发生了reset事件')
}
})

4.5 多媒体组件

多媒体组件包括image (图像)、audio (音频)、video(视频)、camera (相机) 组件,使用这些组件, 可以让页面更具有吸引力

4.5.1 image 

组件为图像组件

代码如下

<block wx:for="{{modes}}">
<view>当前图片的模式是:{{item}}</view>
<image mode="{{item}}" src="/pages/image/1.jpg" style="width: 100%,height 100%"/>
</block>

Page({
  data:{
    modes:['scaleToFill','aspectFill','widthFix']
  }
})

<block wx:for="{{modes}}">
<view>当前图片的模式是:{{item}}</view>
<image mode="{{item}}" src="/pages/image/1.jpg" style="width: 100%,height 100%"/>
</block>

Page({
  data:{
    modes:['top','center','bottom','left','right',
  'top_left','top_right','bottom_left','bottom_right']
  }
})

 

4.5.2 audio 

组件用来实现音乐播放，暂停等

代码如下

Page({
  data:{
  poster:'http://y.gtimg.cn/music/photo_new/T1002R300x300M00KF44GyaSk.jpg? max_age=2592000',
  name:'此时此刻',
  author:'许巍',
  src:'http://ws.stream.qqmusic.qq.com M500001VfvsJ21xFqb.f f f f f f f f 82 def4 af4 b12b3 ca9337 d5e7 &uin =346897220&vkey =6292E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36DFEAF74C0A5CCFADD6471160CAF3 E6A&fromtag = 46',
},
  play:function(){
  this.setData({
  action:{
  method:'play'
  }
})
},
  pause:function(){
  this.setData({
  action:{
  method:'pause'
  }
})
  },
  playRate:function()
  {
this.setData({
action:{
method:'setPlaybackRate',
data:10 //速率
}
})
console.log('当前速率:'+this.data.action.data)
  },
currentTime:function(e){
this.setData({
action:{
method:'setCurrentTime',
data:120
}
})
}
})

<audio src="{{src}}" action="{{action}}" poster="{{poster}}" name="{{name}}" author="{{author}}" loop controls></audio>
<button type="primary" bindtap='play'>播放</button>
<button type="primary" bindtap='pause'>暂停</button>
<button type="primary" bindtap='playRate'>设置速率</button>
<button type="primary" bindtap='currentTime'>设置当前时间</button>

4.5.3 video 

用来实现视频的播放，暂停等

代码如下

Page({
data:{
  src:'',
},
bindButtonTap:function(){
  var that=this
  wx.chooseVideo({
    sourceType:['album','camera'],
    maxDuration:60,
    camera:['front','back'],
    success:function(res){
      that.setData({
        src:res.tempFilePath
      })
    }
  })
}
})

<video src="{{src}}"controls></video>
<view class="btn-area">
<button bind:tap="bindButtonTap">获取视频</button>
</view>

 4.5.4 camera

组件为系统相机组件，可以实现拍照或录像功能

代码如下

Page({
takePhoto(){
  const ctx=wx.createCameraContext()
  ctx.takePhoto({
    quality:'high',
    success:(res)=>{
      this.setData({
        src:res.tempImagePath
      })
    }
  })
},
error(e){
  console.log(e.detail)
}})

<video src="{{src}}"controls></video>
<view class="btn-area">
<button bind:tap="bindButtonTap">获取视频</button>
</view>

 4.6 其他组件

在小程序中，除了前面介绍的组件以外，map组件和canvas组件比较常用

4.6.1 map

用于再页面中显示地图或路径

代码如下

<map id="map"
longitude="108.9200"
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindcontroltap="controlstap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location style="width: 100%;height: 300px;"></map>

Page({
data:{
  markers:[{
    iconPath:"/pages/image/1.jpg",
    id:0,
    longitude:"108.9290",
    latitude:"34.1480",
    width:50,
    height:50
  }],
  polyline:[{
    points:[
      {
        longitude:"108.9200",
        latitude:"34.1400",
      },
      {
        longitude:"108.9200",
        latitude:"34.1500"
      },
      {
        longitude:"108.9200",
        latitude:"34.1700"
      }
    ],
    color:"#00ff00",
    width:2,
    dottedLine:true
  }],
  controls:[{
    id:1,
    iconPath:'/pages/xi.jpg',
    position:{
      left:0,
      top:300,
      width:30,
      height:30
    },
    clickable:true
  }]
},
regionchange(e){
  console.log(e.type)
},
markertap(e){
  console.log(e.markerId)
},
controltap(e){
  console.log(e.controlId)
}})

4.6.2 canvas 

用来绘制图形

实现绘图需要３步:
（1）创建一个canvas 绘图上下文

var context =wx.createCanvasContext('myCanvas') 

（2）使用canvas绘图上下文进行绘图描述 

context .setFillStyle('green')
context .fillRect(10,10,200,100)

 （3）画图

context.draw() 

代码如下

<canvas canvas-id="myCanvas"style="border:1px solid red"></canvas>

Page({
  onLoad:function(options){
    var ctx=wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('green')
    ctx.fillRect(10,10,200,100)
    ctx.draw()
  }})

 

第五章  即速应用

5.1.1 即速应用的优势

即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发。据不完全统计，在微信小程序正式发布的1年内，在即速应用上打包代码并成功上线的微信小程序已经超过5万个。

 即速应用的功能特点主要体现在以下几个方面:

1.开发流程简单，零门槛制作

使用即速应用来开发微信小程序的过程非常简单，无须储备相关代码知识，没有开发经验的人也可以轻松上手。

（1）登录即速应用的官方网站(www.jisuapp.cn)，进人制作界面，从众多行业模板中选择一个合适的模板

（2）在模板的基础上进行简单编辑和个性化制作

（3）制作完成后，将代码一键打包并下载

（4）将代码上传至微信开发者工具

（5）上传成功后，等待审核通过即可

2.行业模板多样，种类齐全

即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业

        这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率

3.丰富的功能组件和强大的管理后台

即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算;社区体系可以实现评论留言和话题管理;多商家系统可以实现分店统一管理、多门店统一运营;营销工具可以实现会员卡、优惠券的设置等营销方式……

        目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。即速应用的应用范围主要包括以下类型:

（1）资讯类：

新闻、媒体

（2）电商类：

网购(服装、电器、读书、母婴………)

（3）外卖类：

餐饮及零售

（4）餐饮类：

餐饮及酒吧

（5）预约类

酒店、KTV、家教、家政，其他服务行业

5.1.2 即速应用界面介绍

登录即速应用官网、单击“注册”按钮，在如图所示的页面填写相应信息，即可完成注册。完成注册后，即可登录账号，使用即速应用

即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板，如图所示

1.菜单栏 

 菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史’选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置

2.工具栏

工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件

3.编辑区

编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板,“元素”选项可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块

4.属性面板

 属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡“组件”选项卡用来设置组件内容及点击事件:“组件样式”选项卡用来设置组件的样式不同组件有不同的样式需要设置

5.1.2 即速应用组件

  即速应用提供了大量的组件供用户快速布局页面，包括7个布局组件、9个基本组件18个高级组件和2个其他组件

5.2.1 布局组件

        布局组件用于设计页面布局，主要包括双栏、面板自由面板、顶部导航、底部导航、分割线和动态分类如图所示

1.双栏组件

        双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时国则不会出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏里面可以添加基本的组件，从而达到整体的布局效果。双栏还可以嵌套双栏，即可以在其中的一个栏里嵌入一个双栏，从面将整体分成3部分(若需要将整体分成4部分，就再嵌套一个双栏，依次类推)。双栏组件的属性面板如图所示

2.分割线组件

  分割线组件被放置于任意组件之间，用于实现分割分割线组件的属性面板如图所示

3.弹窗组件 

4.面板组件 

面板组件相当于一个大画板，用户可以将很多基本(甚至高级)的组件(如文本组件图片组件、按钮组件，标题组件、分类组件、音组件、双栏组件、计数组件等)放进面板组件里一起管理。面板组件的属性面板如图所示

5.自由面板组件 

 自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向自由面板内拖入部分组件(包括文本组件、图片组件和按钮组件)，也可以拖入任意相关容器组件，用于不规则布局。自由面板组件的属性面板如图所示

6.滑动面板 

 

7.动态分类组件 

动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板如图所示

8.分类导航

9。侧边栏 

10.悬浮窗 

11.分类横滑 

5.2.2 基本组件 

基本组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频，如图所示

1.文本组件 

文本组件用于展示文字、设置点击事件，是小程序页面中最常用的组件。文本组件的属性面板如示

2.图片组件

3.按钮组件 

4.标题组件 

5.商品列表 

6.视频组件 

7.轮播组件 

8.公告 

9.添加组合 

5.3 即速应用后台管理 

 即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即时更新，开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具多商家管理等功能

1.数据管理 

数据管理包括数据总览、访客分析和传播数据功能

        数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图，如图所示

 访客分析是以图例的形式来展示用户从微信的哪个模块来访问及访问的次数、比例、用户来源地区、用户访问时间及使用设备等，便于管理者更好地做好营销工作，如图所示 

2.分享设置 

分享设置主要提供可以分享应用的方式

3.用户管理

用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能，如图所示

4.应用数据 

应用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据

5.轮播管理 

轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容

6.分类管理

分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商

7.商品管理 

商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能，如图

8.经营管理 

 经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营

9.营销工具

营销工具是小程序营销推广的有力工具，主要有会员卡、优惠券、积分、储值、推广秒杀、集集乐、拼团活动、大转盘、砸金蛋、刮刮乐等。这些营销工具都需要事前在后台合理设置后，才能在活动中发挥更大的作用

10.多商家管理 

多商家管理是即速应用为有众多商家的商城(如“华东商城”“义乌商城”等)开设的管理功能，方便管理者统计每家店铺的订单及进行收益分析

第六章  API应用

6.1网络API

微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生AP接口或第三方APL提供了各类接口实现前后端交互

        网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口

（1）wx.request(0bject)接口 用于发起HTTPS 请求。

（2）wx.uploadFile(Object)接口 用于将本地资源上传到后台服务器。

（3）wx.downloadFile(Object)接口用于下载文件资源到本地。

（4）wx.connectSocket(0bject)接口用于创建一个WehSocket 连接。

（5）wx.sendSocketMessage(0bject)接口 用于实现通过 WehSocket连接发送数据

（6）wx.closeSocket(0bject)接口用于关闭WebSocket 连接。

（7）wx.onSocketOpen(CallBack)接口用于监听WebSocket 连接打开事件。

（8）wx.onSocketEror(CallBack)接口用于监听WebSocket 错误。

（9）wx.onSocketMessage(CallBack)接口 用于实现监听WebSocket 接收到服务器的消息
事件。

（10）wx.onSocketClose(CallBack)接口用于实现监听WebSocket 关闭。

6.1.1发起网络请求

wx.request(0bject)实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求

代码如下：

<!-- 发起网络请求 wxml文件 -->
<button type="primary" bind:tap="getbaidutap">获取HTML数据</button>
<textarea value="{{html}}" auto-height="" maxlength="0"></textarea>

// 发起网络请求 js文件
Page({
  data:{
    html:''
  },
  getbaidutap:function(){
    var that=this;
    wx.request({
      url: 'https://www.baidu.com',//百度网址
      data:{},//发送数据为空
      header:{"Content-Type":"application/json"},
      success:function(res){
        console.log(res);
        that.setData({
          html:res.data
        })
      }
    })
  }
})

/* 发起网络请求 wxss文件*/
button{
  margin-top: 100px;
}

通过wx.request(Object)的GET放大获取邮政编码对应的地址信息

//postcode.wxml文件
<view>邮政编码：</view>
<input type="text"bindinput="input"placeholder='6位邮政编码'/>
<button type="primary"bindtap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>

Page({
  data:{
    postcode:"",
    address:[],
    errMsg:"",
    error_code:-1
  },
  input:function(e){
    this.setData({
      postcpde:e.detail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){
    var postcode=this.data.postcode;
    if(postcode!=null&&postcode!=""){
      var self=this;
      wx.showTost({
        title:'正在查询,请稍后....',
        icon:'loading',
        duration:10000
      });
      wx.request({
        url: 'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'0ff9bfccdf147476e067de994eb5496e'},
          header:{
            'Content-Type':'application/json',
          },
          method:'GET',
          success:function(res){
            wx.hideToast();
            if(res.data.rror_code==0){
              console.log(res);
              self.setData({
                errMsg:"",
              error_code:res.data.error_code,
              address:res.data.result.list  
              })
            }
            else{
              self.setData({
                errMsg:res.data.reasp||res.data.reason,
      error_code:res.data.error_code  
              })
            }
          }
      })
    }
  }
})

通过wx.request(Object)的POST放大获取邮政编码对应的地址信息

//postcode.wxml文件
<view>邮政编码：</view>
<input type="text"bindinput="input"placeholder='6位邮政编码'/>
<button type="primary"bindtap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>

Page({
  data:{
    postcode:"",
    address:[],
    errMsg:"",
    error_code:-1
  },
  input:function(e){
    this.setData({
      postcpde:e.detail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){
    var postcode=this.data.postcode;
    if(postcode!=null&&postcode!=""){
      var self=this;
      wx.showTost({
        title:'正在查询,请稍后....',
        icon:'loading',
        duration:10000
      });
      wx.request({
        url: 'https://v.juhe.cn/postcode/query',
        data:{
          'postcode':postcode,
          'key':'0ff9bfccdf147476e067de994eb5496e'},
          header:{
            'Content-Type':'application/x-www-form-urlencoded'
          },
          method:'POST',
          success:function(res){
            wx.hideToast();
            if(res.data.rror_code==0){
              console.log(res);
              self.setData({
                errMsg:"",
              error_code:res.data.error_code,
              address:res.data.result.list  
              })
            }
            else{
              self.setData({
                errMsg:res.data.reasp||res.data.reason,
      error_code:res.data.error_code  
              })
            }
          }
      })
    }
  }
})

6.1.2 上传文件

  wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其相关参数如表所示

通过 wx.uploadFile(Objeet)，可以将图片上传到服务器并显示，示例代码如下：

<!-- 上传文件 wxml文件 -->
<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"></image>

// 上传文件 js文件
Page({
data:{
  img:null,
},
uploadumage:function(){
  var that=this;
  //选择图片
  wx.chooseImage({
    success:function(res){
      var tempFilePaths=res.tempFilePaths
      upload(that.tempFilePaths);
    }
  })
  //显示toast提示消息
function upload(page,path){
  wx.showToast({
    icon:'loading',
    title: '正在上传'
  }),
  wx.uploadFile({
    filePath: path[0],
    name: 'file',
    url: 'http://localhost/',
    success:function(res){
      console.log(res);
      if(res.statusCode!=200){
        wx.showModal({
          title:"提示",
          content:"上传失败",
          showCancel:false
        })
        return;
      }
      var data=res.data
      //上传成功修改显示头像
      page.setData({
          img:path[0]
      })
    },
    fail:function(e){
      console.log(e);
      wx.showModal({
        title:"提示",
        content:"上传失败",
        showCancel:false
      })
    },
    //隐藏Toast
    complete:function(){
      wx.hideToast();
    }
  })
  }
}
})

/* 上传文件 wxss文件*/
button{
  margin-top: 100px;
}

6.1.3 下载文件

       wx.downloadFile(Objeet)接口用于实现从开发者服务器下载文件资源到本地，在客户端
直接发起一个HITPGET请求，返回文件的本地临时路径。其相关参数如表所示

   例如，通过wx.downloadFile(Object)实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建，示例代码如下：

<!-- 下载图像 wxml文件 -->
<button type="primary" bind:tap="downloadimage">下载图像</button>
<image src="{{img}}" mode="widthFix" style="width: 90%;height: 500px;"></image>

// 下载图像 js文件
Page({
  datd:{
    img:null
  },
  downloadimage:function(){
    var that=this;
    wx.downloadFile({
      //通过WAMP软件实现
      url: 'http://localhost/1.jpg',
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }
})

/* 下载图像 wxss文件 */
button{
  margin-top: 100px;
}

6.2 多媒体API 

  多媒体API主要包括图片API、录音API、音频播放控制AP1、音乐播放控制API等，其目的是丰富小程序的页面功能

6.2.1 图片API

（1）wx.chooselmage(Object)接口 用于从本地相册选择图片或使用相机拍照

（2）wx.previewlmage(Object)接口用于预览图片

（3）wx.getlmagelnfo(0bject)接口 用于获取图片信息。

（4）wx.saveImageToPhotosAlbum(0bject)接口 用于保存图片到系统相册

1.选择图片或者拍照

   wx.chooselmage(Object)接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wsaveFile保存图片到本地。其相关参数如表所示

  若调用成功，则返回tempFilePaths和tempFiles,tempFilePaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size，示例代码如下：

Js文件
Page({
  wx.chooseImage({
    //默认值为9
    count:2,
    //可以指定是原图还是压缩图，默认二者都有
    sizeType:['original','compressed'],
    //可以指定来源是相册还是相机，默认二者都有
    sourceType:['album','camera'],
    success:function(res){
    //返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的sec属性来显示图片
    var tempFilePaths=res.tempFilePaths
    var tempFiles=res.tempFiles
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
  })
})

2.预览图片

 wx.previewlmage(0bject)接口主要用于预览图片，其相关参数如表所示

示例代码如下；

page({
wx.previewImage({
    current:"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
    urls: ["http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
           "http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
           "http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
  ],
  })
})

 3.获取图片信息

wx.getlmagelnfo(Object)接口用于获取图片信息，其相关参数如表所示

示例代码如下：

  wx.chooseImage({
    success:function(res){
      wx.getImageInfo({
        src: res.tempFilePaths[0],
        success:function(e){
          console.log(e.width)
          console.log(e.height)
        }
      })
    },
  })

4.保存图片到系统相册 

wx.savelmageToPhotosAlbum(Objee)接日用于保存图片到系统相册，需要得到用户授权scope.wriePhotesAlbum。其相关参数如表所示

示例代码如下：

  wx.chooseImage({
    success:function(res){
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePaths[0],
        success:function(e){
          console.log(e)
        }
      })
    },
  })

 6.2.2 录音API

录音API提供了语音录制的功能，主要包括以下两个API接口:

（1）wx.stariRecord(Object)接口 用于实现开始录音。

（2）wx.stopRecord(Objeet)接日 用于实现主动调用停止录音

1.开始录音

wx. startRecord(0bject)接口用于实现开始录音。当主动调用wx.stopRecord(Object)接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用 wx.saveFile()接口。其相关参数如表所示

2.停止录音 

     ws.slopReeord(Objeet)接口用于实现主动调用停止录音

示例代码如下：

  wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
    },
    fail:function(res){
      //录音失败
    }
  }),
  setTimeout(function() {
    //结束录音
    wx.stopRecord()
  },10000)

6.2.3  音频控制API

音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API;

（1）wx,playVoice(Object)接口 用于实现开始播放语音

（2）wx.pauseVoice(Object)接日 用于实现暂停正在播放的语音

（3）wx, slopVoice(Objec)接日 用于结束播放语音

1.播放语音

  wx.playVoice(Object)接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。其相关参数如表所示

示例代码如下：

  wx.startRecord({
    success:function(res) {
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath,
        complete:function() {
          
        }
      })
    }
  })

 2.暂停播放

  wx.pauseVoice(0bject)用于暂停正在播放的语音。再次调用wx.playVoice(Objeet)播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用wx.stopVoice(Object)，示例代码如下：

  //暂停播放
  wx.startRecord({
    success:function(res) {
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath,
      })
      setTimeout(function() {
        //暂停播放
        wx.pauseVoice()
      },5000)
    }
  })

3.结束播放

  wx.stopVoice(Object)用于结束播放语音，示例代码如下：

  // 结束播放
  wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath,
      })
      setTimeout(function(){
        wx.stopVoice()
      },5000)
    }
  })

6.2.4 音乐播放控制API

音乐播放控制API主要用于实现对背景音乐的控制，音乐文件只能是网络流媒体，不能是本地音乐文件。音乐播放控制API主要包括以下8个API:

（1）wx.playBackgroundAudio(Object)接 用于播放音乐。

（2）wx. getBackgroundAudioPlayerState(Object)接口 用于获取音乐播放状态,

（3）wx.seekBackgroundAudio(0bject)接口 用于定位音乐播放进度。

（4）wx.pauseBackgroundAudio()接口 用于实现暂停播放音乐。

（5）wx.stopBackgroundAudio()接口 用于实现停止播放音乐。

（6）wx.onBackgroundAudioPlay(CallBack)接日 用于实现监听音乐播放

（7）wx.onBaekgroundAudioPause(CalBack)接口 用于实现监听音乐暂停

（8）wx.onBackgroundAudioStop(CallBack)接口 用于实现监听音乐停止。

1.播放音乐

wx.playBackgroundudio(Object)用于播放音乐，同一时间只能有一首音乐处于播放状态，其相关参数如表所示

2.获取音乐播放状态 

wx. getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态，其相关参数如表所示

接口调用成功后返回的参数如表所示

3.控制音乐播放进度 

wx,seekBackgroundAudio(0bject)接口用于控制音乐播放进度，其相关参数如表所示

6.3 文件API

从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件
API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口：
（1）wx.saveFile(Object)接口 用于保存文件到本地。
1. 保存文件（3）wx.getSaveFileInfo(Object)接口 用于获取本地文件的文件信息。
（4）wx.removeSaveFile(Object)接口 用于删除本地存储的文件。
（5）wx.openDocument(Object)接口 用于新开页面打开文档，支持格式：doc、xls、 2. 获取ppt、pdf、docx、xlsx、ppts。

1. 保存文件

wx.saveFile(Object)用于保存文件到本地，其相关参数如表6-14所示。

示例代码如下

saveImg:function(){
wx.chooseImage({
count:1,//默认值为9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album', 'camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath: tempFilePaths, 
success:function(res){
var saveFilePath = res. savedFilePath;
console. log(saveFilePath)
}
})
}
})
}

2.获取本地文件列表 

wx.getSavedFileList(Object)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳(从1970/01/0108：00：00到当前时间的秒数)文件列表。其相关参数如表6-15所示。

 示例代码如下：

wx.getSavedFileList({
success:function(res){
that. setData({
fileList:res.fileList
}）
}
})

3.获取本地文件的文件信息 

wx.getSaveFileInfo(Object)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用 wx.getFileInfo(Object)接口。其相关参数如表6-16所示。

 

wx.chooseImage({
count:1，//默认值为9 
sizeType:['original''compressed']，//可以指定是原图还是压缩图，默让 if(res.fileList.
二者都有 
sourceType:['album'.'camera']，//可以指定来源是相册还是相机，默认二者都有
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath: tempFilePaths, 
success:function(res){
var saveFilePath = res. savedFilePath;
wx.getSavedFileInfo({
filePath: saveFilePath，
success:function(res){
console.log(res.size
}
})
}
})
}
})

6.6 设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及主
码等。主要包括以下5个接口API：
wx. getSystemInfo(Object)接口、wx.getSystemInfoSyne()接口 用于获取系统信息
wx. getNetworkType(Object)接口 用于获取网络类型。
wx.onNetworkStatusChange(CallBack)接口 用于监测网络状态改变。
wx.makePhoneCall(Object)接口 用于拨打电话。
wx.scanCode(Object)接口 用于扫描二维码。

6.6.1 获取系统信息

wx. getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系 运行结果如图6-9所示统信息。其相关参数如表6-27所示。

wx. getSystemInfo（）接口，wx. getSystemInfoSync()接口调用成功后，返回系统相关信息，如表6-28所示。

 示例代码如下：

wx.getSystemInfo(l
success:function(res)
console.log(“手机型号："+res.model)
console.log("设备像素比:"+res.pixelRatio)
及扫 console.1og(“窗口的宽度：” + res.windowwidth)
息。 console.1og(“窗口的高度：” res.windowHeight)
console.log("微信的版本号：”+res. version)
console.log(“操作系统版本："+res.system)
console.log(“客户端平台："+res.platform)