微信小程序1-6章复习

第一章

小程序的特征：

1.无需安装      2.触手可及

3.用完即走      4.无需卸载

小程序应用场景的特点：

1. 简单业务逻辑     2.低频度的使用场景

1.菜单栏
常用的菜单如下

• 项目：用于新建项目，或打开一个现有的项目。
• 文件：用于新建文件、保存文件或关闭文件。
• 编辑：用于编辑代码，对代码进行格式化。
• 工具：用于访问一些辅助工具，如自动化测试、代码仓库等。
• 界面：用于控制界面中各部分的显示和隐藏。
• 设置：用于对外观、快捷键、编辑器等进行设置。
• 微信开发者工具：可以进行切换账号、更换开发模式、调试等操作。

2.工具栏

• 个人中心：位于工具栏最左侧的第一个按钮，显示当前登录用户的用户名，头像。
• 模拟器、编辑器和调试器：用于控制相应工具的显示和隐藏。
• 云开发：开发者可以使用云开发来开发小程序、小游戏，无须搭建服务器，即可使用云端能力。
• 模式切换下拉菜单：用于在小程序模式，搜索动态页和插件模式之间进行切换。
• 编译下拉菜单：用于切换编译模式，默认为普通模式，可以添加其他编译模式。
• 编译：编写小程序的代码后，需要编译才能运行。默认情况下，直接按Ctrl + S快捷键保存代码文件，微信开发者工具就会自动编译运行。如果要手动编译，则单击 编译 按钮即可
• 预览：单击预览俺就会生成一个二维码，使用手机中的微信扫码二维码，即可在微信中预览小程序的实际运行效果。
• 真机调试：可以实现直接利用开发者工具，通过网络连接对手机上运行的小程序进行调试。
• 切后台：用于模式小程序在手机中切后台的效果。
• 清缓存：用于清除数据缓存，文件缓存等。
• 上传：用于将代码上传到小程序管理后台，可以在开发管理中查看上传的版本，将代码提交审核。注意，如果创建项目时用的AppId是测试号，则不会显示上传按钮。
• 版本管理：用于通过Git对小程序进行版本管理

3.模拟器

• 模拟器用于模拟手机环境，查看不对型号手机的运行效果。

4.编译器

• 编辑器分为左右两栏，左栏用于浏览项目目录结构，右栏用于编写代码。

5.调试器

• 调试器类似于Google Chrome浏览器中的开发者工具。

下面对调试器中各个面板的功能进行简要介绍。

• Console:控制台面板，用于输出调试信息，也可以直接编写代码执行。
• Sources:源代码面板，可以查看或编辑源代码，并支持代码调试。
• Network:网络面板，用于记录网络请求信息，根据它可进行网络性能优化。
• Security:安全面板，用于调试页面的安全和认证等信息，如HTTPS
• AppData:App数据面板，可以查看或编辑当前小程序运行时的数据。
• Audits:审计面板，用于对小程序进行体验评分。
• Sensor:传感器面板，用于模拟地理位置，重力感应。
• Storage:存储面板，用于查看和管理本地数据缓存。
• Trace:跟踪面板，用于真机调试时跟踪调试信息。
• Wxml:Wxml面板，用于查看和调试WXML和WXSS。

第二章

 小程序的开发框架

小程序MINA框架将整个系统划分视图层和逻辑层。

1. 视图层：由框架设计的标签语言WXML（WeiXin MarkKup Language）和用于描述WXML组件样式的WXSS（WeiＸin　Style　Sheets）组成。
2. 逻辑层：是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据，页面交互处理逻辑都在逻辑层中实现。
3. 数据层：数据层在逻辑上包括页面临时数据或缓存，文件储存（本地储存）和网络存储与调用。

条件数据绑定 

条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

1.wx:if条件数据绑定

wx:if条件数据绑定是指使用wx:if这个属性来判断是否绑定当前组件。

<view wx:if ="{{conditon|}">内容</view>	

在以上代码中，当condition变量的值为true时，view组件将数据绑定输出相关内容;当 condition 变量的值为false时，view组件将不数据绑定。当需要添加多个分支块时，可以使用wx:elif、wx:else 属性。当控制表达式为true时，数据绑定一个分支;当控制表达式为false时，数据绑定另一个分支 。

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

列表数据绑定

列表数据绑定用于将列表中各项数据进行重复数据绑定。

1.wx:for

在组件上，可以使用wx.for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件上，

students:[
      {nickname:"tom",height:180,weight:150},
      {nickname:"anan",height:150,weight:100}

    ]

2.block wx:for

与block wx:if类似，在wxml中也可以使用<block >包装多个组件进行列表数据绑定。例如，上面的代码可以被修改为以下形式，效果不变:

<block wx:for ="{{student}}">
<view >
<text > {{index}} </text >
<text >{{item.name} } < /text >
<text >{{item.age}| </text >
<text >{{item.hobby}| </text >
</view >
</block >

  

1.定义模板

模板代码由wxml组成，因此其定义也是在wxml文件中，定义模板的格式为：

<template name="模板名>
</template>

  2.模板调用

<template is="stu" data="{{students}}"></template>

  第三章

 flex布局 

     flex布局是万维网联盟(World Wide Web Consortium,W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。flex 是 flexible box的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
      flex 布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container), flex 布局的所有直接子元素自动成为容器的成员，称为flex 项目( flex item)。

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

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size。flex布局模型如图所示。

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

容器属性

flex容器支持的属性有7种，如表所示。

1.display

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

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

1.  flex ---块级flex布局，该元素变为弹性盒子；
2. inline-flex   行内flex布局，行内容器布局符合行内元素的特征，同时在容器内又符合flex布局规范。设置flex布局后，子元素的float、clear和vertical-align属性将失效。

2.flex-direction

flex-direction用于实战主轴的方向，即项目排列的方向，语法格式为：

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

1. row 主轴为水平方向，起点在左端，当元素设置为flex布局时，主轴默认为row;
2. row-reverse 主轴为水平方向，起点在右端；
3. column 主轴为垂直方向，起点在顶端；
4. Colum-reverse 主轴为垂直方向，起点在底端

显示效果如下：

3.flex-wrap

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

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

1.  nowrap 不换行，默认值；
2.  wrap 换行，第一行在上方；
3.  wrap-reverse 换行，第一行在下方；

显示效果如下：

4.flex-flow

flex-flow是flex-dicection和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-content用于定义项目在主轴上的对齐方式。语法格式如下：

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

1. justify-content 与主轴方向有关，默认主轴水平对齐，方向从左到右；
2. flex-start 左对齐，默认值
3. flex-end 右对齐 ；
4. center 居中；
5. space-between 两端对齐，项目之间的间隔都相等；
6. space-around 每个项目两侧的间隔相deng;

显示效果如下：

 6.align-items

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

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

1. align-items 与交叉轴方向有关，默认由上到下；
2. flex-start 交叉轴起点对齐；
3. flex-end 交叉轴终点对齐；
4. center 交叉轴中点对齐；
5. baseline 项目根据他们第一行文字的基线对齐；
6. stretch 如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值。

示例代码如下：

//.wxml
<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>
//.wxss
.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:flex-end
}
.item4{
  height: 120px;
}

7.align-content

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

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

1.  space-between 与交叉轴两端对齐，轴线之间的间隔平均分布；
2.  space-around 每根轴线两侧的间隔都相等’，轴线之间的间隔比轴线与边框间隔大一倍

其余属性值的含义与align-items属性的含义相同。 

项目属性 

容器内的项目支持6个属性，其名称和功能如下：

1.order

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

.item{order:<number>;}

 示例代码：

<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

flex-grow定义项目的放大比例，默认值为0，即不放大。语法格式如下：

.item{flex-grow:<number>;}

 示例代码如下：

<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>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

flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将缩小。语法格式如下：

.item{flex-shrink:<number>;}

示例代码如下:

<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

flex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。语法格式如下：

.item{flex-basis:<number>|auto;}

 示例代码如下：

<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

flex属性是flex-grow、flex-shrink、flex-basis的简写，其默认值为0、1、auto。语法格式如下：

.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

示例代码如下：

.item{flex:auto}//等价于 .item{flex:1 1 auto;}
.item{flex:auto}//等价于 .item{flex:0 0 auto;}

6.align-self

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

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

 在该属性值中，除了auto以为，其余；属性值和容器align-self的属性值完全一致。

auto表示继承容器align-item的属性，如果没有父元素，则等于stretch(默认值）。

第四章

组件的定义及属性
组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。

每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下

<标签名 属性名=“属性值”>内容...</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-∗、bind∗/catch∗等。

 id组件的唯一表示，保持整个页面唯一，不常用。
 class组件的样式类，对应WXSS中定义的样式。
 style组件的内联样式，可以动态设置内联样式。
 hidden组件是否显示，所有组件默认显示。
 data-∗ 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。
 bind∗/catch∗ 组件的事件，绑定逻辑层相关事件处理函数。
容器视图组件 
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。

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

通过<view>组件实现页面布局示例代码如下：

//index.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: 2;">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="display: flex;flex-direction: column; flex-grow: 1;">
  <view style="border: 1px solid #f00;flex-grow: 1;">2</view>
  <view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view> 

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

【注意】

在使用竖向滚动时，如果需要给scroll -view组件设置一个固定高度，可以通过WXSS设置height来完成。
请勿在scroll-view组件中使用textarea、map、canvas、video组件。
scroll-into-view属性的优先级高于scroll-top。
由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。
如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。 
通过scroll-view组件可以实现下拉刷新和上拉加载更多，代码如下：

//index.wxml
<view class="container" style="padding: 0rpx;">
<!--垂直滚动，这里必须设置高度-->
<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">
    <loading hidden="{{hidden}}"bindchange="loadingChange">
    加载中...
    </loading>
  </view>
</view>
 
//index.js
var url="http://www.imooc.com/course/ajaxlist";
var page=0;
var page_size=5;
var sort="last";
var is_easy=0;
var lange_id=0;
var pos_id=0;
var unlearn=0;
//请求数据
var loadMore=function(that){
  that.setDate({
    hidden:false
  });
  wx.request({
    url: 'url',
    data:{
      page:page,
      page_size:page_size,
      sort:sort,
      is_easy:is_easy,
      lange_id:lange_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,
    scrollHeight:0
  },
  onLoad:function(){
//这里要注意，微信的scroll-view必须设置高度才能监听滚动事件，所以需要在页面的onLoad事件中为scroll-view的高度赋值
    var that=this;
    wx.getSystemInfo({
      success:function(res){
        that.setData({
          scrollHeight: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");
  }
})
//index.wxss
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  colro:#aaa;
}
.usermotto{
  margin-top: 200px;
}
scroll-view{
  width: 100%;
}
.item{
  width: 90%;
  height: 300rpx;
  margin: 20rpxauto;
  background: brown;
  overflow: hidden;
}
.item.img{
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
}
.title{
  font-size: 30rpx;
  display: block;
  margin: 30rpxauto;
}
.description{
  font-size: 26rpx;
  line-height: 15rpx;
}

第五章

即速应用的优势 

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

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

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

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

1. 登入即速应用的官方网站（www.jisuapp.cn）,进入制作页面，从众多行业模板中选择一个适合自己的模板。
2. 在模板的基础上进行简单编辑和个性化制作。
3. 制作完成后，代码一键打包并下载。
4. 将代码上传至微信开发工具。
5. 上传成功后，等待审核通过即可。

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

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

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

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

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

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

即速应用的应用范围主要包括以下类型：

1. 资讯类：新闻，媒体。
2. 电商类：网购（服装，电器，读书，母婴.....）
3. 外卖类：餐饮及零售
4. 到店类：餐饮及酒吧
5. 预约类：酒店，KTV ，家教，家政，其他服务行业。

即速应用界面介绍 

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

• 1.菜单栏
•         菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史’选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置
• 2.工具栏
•         工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件
• 3.编辑区
•         编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板,“元素”选项可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块
• 4.属性面板
•         属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡“组件”选项卡用来设置组件内容及点击事件:“组件样式”选项卡用来设置组件的样式不同组件有不同的样式需要设置

第六章

 网络API

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

•  wx.request（Object）接口 用于发起HTTPS请求。
•  wx.uploadFile（Object）接口用于将本地资源上传到后台服务器。
•  wx.downloadFile（Object）接口用于下载文件资源到本地。
•  wx.connectSocket（Object）接口 用于创建一个WebSocket连接。
•  wx.sendSocketMessage（Object）接口 用于实现通过WebSocket连接发送数据。
•  wx.closeSocket（Object）接口用于关闭WebSocket连接。
•  wx.onSocketOpen（CallBack）接口 用于监听WebSocket连接打开事件。
•  wx.onSocketError（CallBack）接口 用于监听WebSocket错误。
•  wx.onSocketMessage（CallBack）接口 用于实现监听WebSocket接收到服务器的消息事件。
•  wx.onSocketClose（CallBack）接口 用于实现监听WebSocket关闭。

发起网络请求

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

wx.request(Object)获取百度(http://www.baidu,com)首页的数据。 

示例代码如下：

<!--pages/baidu/baidu.wxml-->
<button type="primary" bindtap ="getbaidutap">获取html数据</button>
<textarea value='{{html}}' auto-heightmaxlength='0'></textarea>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    html:""

  },
  getbaidutap:function(){
    var that =this;
    wx.request({
      url: 'https://www.baidu.com',
      data:{},
      header:{'Content-Type':'applicion/json'},
      success:function(res){
        console.log(res);
        this.data({
          html:res.data
        })
      }
    })
  },

 效果图：

例如，通过wx.request(Object)的CET方法获取邮政编码对应的地址信息。

示例代码如下：

<!--pages/postcode/postcode.wxml-->
<view>邮政编码：</view>
<input type="text"bindinput="input"placeholder="6位邮政编码"/>
<button type="primary"bindtap="find">查询</button>
<block wx:for="{{adress}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    postcode:"",
    adresss:[],
    errMsg:"",
    error_code:-1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  input:function(e){
    this.setData({
      postcode:e.detail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){
    var postcode =this.data.postcode;
    if(postcode != null&&postcode != ""){
      var self =this;
      wx.showToast({
        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.error_code==0){
            console.log(res);
            self.setData({
              errMsg:"",
              error_code:res.data.error_code,
              adress:res.data.result.list
            })
          }
          else{
            self.setData({
              errMsg:res.data.reason || res.data.reason,
              error_code:res.data.error_code
            })
          }
        
        }
      })
    }

  },

 效果图：

6.1.2 上传文件

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

通过wx.uploadFile(Object),可以将图片上传到服务器并显示。 

示例代码如下：

<!--pages/upload/upload.wxml-->
<button type="primary" bindtap ="uploadimage">上传文件</button>
<image src="{{img}}" mode="widthFix"/>
/ pages/upload/upload.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    img:null,

  },
uploadimage:function(){
  var that = this;
  wx.chooseImage({
    success:function(res){
      var tempFilePaths = res.tempFilePaths
      upload(that,tempFilePaths);
    }
  })
  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
        })
      },
      complete:function(){
        wx.hideToast();
      }
    })
  }
},

 效果图：

6.1.3 下载文件 

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

 

例如，通过wx. downloadFile（Object）实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建。 

示例代码如下：

<!--pages/downloadFile/downloadFile.wxml-->
<button type="primary" bindtap="downloadimage">下载图片</button>
<image src="{{img}}" mode ="widthFix "style='width:90%; height:500px'></image>
// pages/downloadFile/downloadFile.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    data:null

  },

  /**
   * 生命周期函数--监听页面加载
   */
  downloadimage:function(){
    var that =this
    ;
    wx.downloadFile({
      url: 'https://localhost/1.jpg',
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })

      }
    })
  },

效果图：

6.2 多媒体 API 

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

 6.2.1 图片API

图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：

•  wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
•  wx.previewImage（Object）接口 用于预览图片。
•  wx.getImageInfo（Object）接口用于获取图片信息。
•  wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。

1.选择图片或拍照

wx. chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx. saveFile保存图片到本地。其属性值如下表所示。

 

回tempFilePaths和tempFiles,tempFilePaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size。

示例代码如下：

//index.js
wx.chooseImage({
  count:2,//默认值为9
  sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认两者都有
  sourceType:['album','camera'],//可以指定来源是相册还是相机，默认两者都有
  success:function(res){
    var tempFilePaths =res.tempFilePaths
    var tempFiles=res.tempFiles
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

 2.预览图片

wx. previewImage（Object）接口主要用于预览图片，其相关属性如下表所示

示例代码如下：

//index.js
wx.previewImage({
  //定义显示第二张
  current:"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
  urls:["http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
  "http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
  "http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
]
})

 3.获取图片信息

wx. getImageInfo（Object）接口用于获取图片信息，其相关属性值如下表所示。

示例代码如下：

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

4.保存图片到系统相册 

wx. saveImageToPhotosAlbum（Object）接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum。其相关属性如下表所示

 示例代码如下：

  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)接口用于控制音乐播放进度，其相关参数如表所示

4.暂停播放音乐
wx.pauseBackgroundAudio()接口用于暂停播放音乐

5.停止播放音乐
wx.stopBackgroundAudio()接口用于停止播放音乐

6.监听音乐播放
        wx. onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放，通常被 wx. playBackgroundAudio(Object)方法触发，在CallBack中可改变播放图标

7.监听音乐暂停
        wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被wx.pauseBackgroundAudio()方法触发。在CallBack中可以改变播放图标

8.监听音乐停止
        wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停止或wx.seekBackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标

9.案例展示

        在此，以小程序music为案例来展示音乐API的使用。该小将司程序的4个页面文件分别为music.wxml、music.wxss、music.json图6-5 音乐播放示例和music.cojs。

music.wxml的代码如下：

<!--music.wxml-->
<view class="container">
  <image class="bgaudio" src="{{changedImg? music.coverImg:'/image/background.png'}}"/>
  <view class="control-view">
    <!-- 使用data-how定义一个0表示快退10秒 -->
    <image src="/image/pre.png" bind:tap="onPositionTap" data-how="0"></image>
    <image src="/image/{{isPlaying? 'pause':'play'}}.png" bind:tap="onAudioTap"></image>
    <image src="/image/stop.png" bind:tap="onStopTap"></image>
    <!-- 使用data-how定义一个1表示快进10秒 -->
    <image src="/image/next.png" bind:tap="onPositionTap" data-how="1"></image>
  </view>
</view>

music.wxss的代码如下

/*music.wxss */
.bgaudio{
  height: 350rpx;
  width: 350rpx;
  margin-bottom: 100rpx;
}
.conrtol-view image{
  height: 64rpx;
  width: 64rpx;
  margin: 30rpx;
}

music.json的代码如下

{}

 music.js的代码如下：

//music.js
Page({
  data:{
    //记录播放状态
    isPlaying:false,
    //记录coverImg，仅当音乐初始时和播放停止时，使用默认的图片。播放中和暂停时，都使用当前音乐的图片
    coverImg
    changedImg:false,
    //音乐内容
    music:{
      "url":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
      "title":"盛晓玫 -有一天",
      "coverImg":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg"
    },
  },
  onLoad:function() {
    //页面加载时，注册监听事件
    this.onAudioState();
  },
  //点击播放或者暂停按钮时触发
  onAudioTap:function(event) {
    if(this.data.isPlaying){
      //如果在正常播放状态，就暂停，并修改播放的状态
      let music=this.data.music;
      wx.playBackgroundAudio({
        dataUrl: music.url,
        title:music.title,
        coverImgUrl:music.coverImg
      })
    }
  },
  //点击即可停止播放音乐
  onStopTap:function() {
    let that=this;
    wx.stopBackgroundAudio({
      success:function(){
        //改变coverImg和播放状态
        that.setData({
          isPlaying:false,
          changedImg:false
        });
      }
    })
  },
//点击"快进10秒"或者"快退10秒"时，触发
onPositionTap:function(event){
  let how=event.target.dataset.how;
  //获取音乐的播放状态
  wx.getBackgroundAudioPlayerState({
    success:function(res){
    //仅在音乐播放中，快进和快退才生效
    //音乐的播放状态，1表示播放中
    let status=res.status;
      if(status===1){
        //音乐的总时长
        let duration=res.duration;
        //音乐播放的当前位置
        let currentPosition=res.currentPosition;
        if(how==="0"){
          //注意：快退时，当前播放位置快退10秒小于0时，直接设置position为1，否则，直接减去10秒
          //快退到达的位置
          let position=currentPosition-10;
          if(position<0){
            position=1;
          }
          //执行快退
          wx.seekBackgroundAudio({
             position: position
          });
          //给出一个友情提示，在实际应用中，请删除！！！
          wx.showToast({
            title: '快退10s',
            duration:500
          });
        }
        if(how==="1"){
          //注意：快进时，当前播放位置快进10秒后大于总时长时，直接设置position为总时长减1
          //快进到达的位置
          let position=currentPosition +10;
          if(position>duration){
            position=duration -1;
          }
          //执行快进
          wx.seekBackgroundAudio({
            position: position
          });
          //给出一个友情提示，在实际应用中，请删除!!!
          wx.showToast({title:"快进10s",duration:500});
        }
      }else{
        //给出一个友情提示，在实际应用中，请删除!!!
        wx.showToast({title:"音乐未播放",duration:800});
        }
      }
    })
  },
//音乐播放状态
onAudioState:function(){
  let that=this;
  wx.onBackgroundAudioPlay(function(){
    //当wx.playBackgroundAudio()执行时触发
    //改变coverImg 和播放状态
    that.setData({isPlaying:true,changedImg:true});
    console.log( "on play");
  });
  wx.onBackgroundAudioPause(function(){
    //wx.pauseBackgroundAudio()执行时触发
    //仅改变播放状态
    that.setData({isPlaying:false});
    console.log("on pause");
  });
  wx.onBackgroundAudioStop(function(){
    //当音乐自行播放结束时触发
    //改变 coverImg 和播放状态 都有二者
    that.setData({lisPlaying:false,changedImg:false});
      console.log("on stop");
  });
}
})

6.3 文件API

 从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件AP提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个AP接口:

（1）wx.saveFile(Object)接口 用于保存文件到本地。

（2）wx.geiSavedFileList(0bject)接口 用于获取本地已保存的文件列表

（3）wx.getSaveFilelnfo(Object)接口 用于获取本地文件的文件信息。

（4）wx.removeSaveFile(Object)接口 用于删除本地存储的文件。

（5）wx.openDocument(0bject)接口用于新开页面打开文档，支持格式:doc、xlsppt、pdf、docx 、xlsx 、ppts.

1. 保存文件
wz.saveFile(0bject)用于保存文件到本地，其相关参数如表所示

 部分示例代码如下：

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

 2.获取本地文件列表

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

示例代码如下：

//获取本地文件列表 js文件
wx.getSavedFileList({
  success:function(res){
    that.setData({
      fileList:res.fileList
    })
  }
})

 3.获取本地文件信息

        wx getsaveFilelnto(0bjeet)接口用于获取本地文件的文件信息，此接口只能用于获取R保存到本地的文件，若需要获取临时文件信息，则使用wx.getFilelnfo(Object)接口。其相关参数如表所示。

 示例代码如下：
 

    //获取本地文件的文件信息 js文件
    wx.chooseImage({
      count:1,//默认值为9
      //可以指定是原图还是压缩图，默认二者都有
      sizeType:["original","compressed"],
      //可以指定来源是相册还是相机，默认二者都有
      sourceType:["album","camera"],
      success:function(res){
        var tempFilePath=res.tempFilePath[0]
        wx.saveFile({
          tempFilePath:tempFilePaths,
          success:function(res){
            var saveFilePath=res.saveFilePath;
            wx.getSavedFileInfo({
              filePath:saveFilePath,
              success:function(res){
                console.log(res.size)
              }
            })
          }
        })
      }
    })

4.删除本地文件

wx.removeSavefile(0bjecl)接口用于删除本地存储的文件，其相关参数如表所示

从文件列表中删除第一个文件，示例代码如下：
 

    //删除本地文件 js文件
    wx.getSavedFileList({
      success:function(res){
        if(res.fileList.length>0){
          wx.removeSavedFile({
            filePath:res.fileList[0].filePath,
            complete:function(res){
              console.log(res)
            }
          })
        }
      }
    })

5.打开文档

wx. openDocument(Object)接口用于新开页面打开文档，支持格式有 doe、xs、ppt、pdf、docx、xlsx、pptx，其相关参数如表所示

示例代码如下：

    //打开文档 js文件
    wx.downloadFile({
      //在本地通过wxamp搭建服务器
      url: 'http://localhost/fm2.pdf',
      success:function(res){
        var tempFilePath=res.tempFilePath;
        wx.openDocument({
          filePath: tempFilePath,
          success:function(res){
            console.log("打开成功")
          }
        })
      }
    })

6.4 本地数据及缓存API

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10 MB，其目的是提高加载速度。数据缓存的接口主要有4个：

•  wx.setStorage（Object）或wx.setStorageSync（key, data）接口 用于设置缓存数据。
•  wx.getStorage（Object）或wx.getStorageSync（key）接口 用于获取缓存数据。
•  wx.removeStorage（Object）或wx.removeStorageSync（key）接口 用于删除指定缓存数据。
•  wx.clearStorage（）或wx.clearStorageSync（）接口 用于清除缓存数据。其中，带Sync后缀的为同步接口，不带Sync后缀的为异步接口。

 6.4.1 保存数据

1.wx.setStorage(Object)

wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容。其参数如下表所示

示例代码如下：

wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

 效果图：

2.wx.setStorageSync(key,data)

wx.setStorageSync(key,data)是同步接口，其参数只有key和data。

示例代码如下：

wx.setStorageSync('age','25')

6.4.2 获取数据

1.wx.getStorage(Object)

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。其相关参赛如下表所示。

示例代码：

wx.getStorage({
  key:'name',
  success:function(res){
    console.log(res.data)
  },
})

2.wx.getStorageSync(key) 

wx.getStorageSync(key) 从本地缓存中同步获取指定key对应的内容。 其参数只有key。

示例代码如下：

try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
  console.log("获取失败")
}

6.4.3 删除数据

1.wx.removeStorage(Object)

wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。其相关参数如下表所示。

 

示例代码如下：

wx.removeStorage({
  key:'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

2.wx.removeStorageSync(key)

wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容。 其参数只有key。

示例代码如下：

try{
  wx.removeStorageSync('name')
}catch(e){
  //Do something when catch error
}

6.4.4 清空数据

1.wx.clearStorage()

wx.clearStorage()接口用于异步清理本地数据缓存, 没有参数。

示例代码如下：

wx.getStorage({
  key:'name',
  success:function(res){
    wx.clearStorage()    //清理本地数据缓存
  }
})

2.wx.clearStorageSync()

wx.clearStorageSync()接口用于同步清理本地数据缓存。

示例代码如下：

try{
  wx.clearStorageSync()
}catch(e){
 }

6.5 位置信息API

小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系。默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口：

•  wx.getLocation（Object）接口用于获取位置信息。
•  wx.chooseLocation（Object）接口 用于选择位置信息。
•  wx.openLocation（Object）接口用于通过地图显示位置。

6.5.1 获取位置信息 

 wx.getLocation(Object)接口用于获取当前用户的地理位置、速度, 需要用户开启定位功能, 当用户离开小程序后, 无法获取当前的地理位置及速度, 当用户点击“显示在聊天顶部” 时, 可以获取到定位信息,其相关参数如下表所示。

 wx.getLocation(Object)调用成功后，返回的参数如下表所示。

 示例代码：

wx.getLocation({
  type:'wgs84',
  success:function(res){
    console.log("经度:"+res.longitude);
    console.log("纬度"+res.latitude);
    console.log("速度"+res.longitude);
    console.log("位置的精确度" +res.accuracy);
    console.log("水平精确度"+res.horizontalAccuracy);
    console.log("垂直精确度"+res.verticalAccuracy);
  },
})

6.5.2 选择位置信息

wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如下表所示。

 wx.chooseLocation(Object)调用成功后，返回的参数如下表所示.

示例代码：

wx.chooseLocation({
  success:function(res){
    console.log("位置的名称"+res.name)
    console.log("位置的地址"+res.address)
    console.log("位置的经度"+res.longitude)
    console.log("位置的纬度"+res.latitude)
  }
})

6.5.3 显示位置信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息,其相关参数如下表所示。

 

示例代码：

wx.getLocation({
  type:'gcj02',//返回可以用于wx.openLocation的经纬度
  success:function(res){
    var latitude=res.latitude
    var longitude=res.longitude
    wx.openLocation({
      latitude:latitude,
      longitude:longitude,
      scale:10,
      name:'智慧国际酒店',
      address:'西安市长安区西长安区300号'
    })
  }
})

 6.6 设备相关API

设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API：

1.  wx.getSystemInfo（Object）接口、wx.getSystemInfoSync（）接口 用于获取系统信息。
2.  wx.getNetworkType（Object）接口 用于获取网络类型。
3.  wx.onNetworkStatusChange（CallBack）接口 用于监测网络状态改变。
4.  wx.makePhoneCall（Object）接口 用于拨打电话。
5. wx.scanCode（Object）接口 用于扫描二维码

6.6.1 获取系统信息

wx. getSystemInfo（Object）接口、wx. getSystemInfoSync（）接口分别用于异步和同步获取系统信息。其相关参数如下表所示。

 wx. getSystemInfo（）接口或wx.getSystemInfoSync（）接口调用成功后，返回系统相关信息， 如下表所示。

示例代码：

wx.getSystemInfo({
  success:function(res){
    console.log("手机型号"+res.model)
    console.log("设备像素比"+res.pixelRatio)
    console.log("窗口的宽度"+res.windowWidth)
    console.log("窗口的高度"+res.windowHeight)
    console.log("微信的版本号"+res.version)
    console.log("操作系统版本"+res.system)
    console.log("客户端平台"+res.platform)
  },
})

 6.6.2 网络状态

1.获取网络状态

wx. getNetworkType（Object）用于获取网络类型，其相关参数如下表所示。

如果wx. getNetworkType（）接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）。 

示例代码如下：

wx.getNetworkType({
  success:function(res){
    console.log(res.networkType)
  },
})

2.监听网络状态变化

wx. onNetworkStatusChange（CallBack）接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络连接。

示例代码如下：

wx.onNetworkStatusChange(function(res){
  console.log("网络是否连接:"+res.isConnected)
  console.log("变化后的网络类型:"+res.networkType)
})

6.6.3 拨打电话

 wx. makePhoneCall（Object）接口用于实现调用手机拨打电话，其相关参数如下表所示。

示例代码：

wx.makePhoneCall({
  phoneNumber:'18092585093'  //需要拨打的号码
})

6.6.4 扫描二维码 

wx. scanCode（Object）接口用于调起客户端扫码界面，扫码成功后返回相应的内容，其相关参数如下表所示。

 示例代码：

//允许从相机和相册扫码
wx.scanCode({
  success:(res)=>{
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})
 
//只允许从相机扫码
wx.scanCode({
  onlyFromCamera:true,
  success:(res)=>{
    console.log(res)
  }
})