第四章 页面组件
4.1组件的定义及属性
组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布开放能力等8类(30多个)基础组件。
每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下:
<标签名 属性名=“属性值”>内容</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data-*、bind */catch*等。
- id 组件的唯一表示，保持整个页面唯一，不常用。
- class 组件的样式类，对应WXSS中定义的样式。
- style 组件的内联样式，可以动态设置内联样式。
- hidden 组件是否显示，所有组件默认显示。
- data-* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传人参数对象的 currentTarget. dataset 方式来获取自定义属性的值。
- bind*/catach* 组件的事件，绑定逻辑层相关事件处理函数。
4.2 容器视图组件
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper 组件。
4.2.1 view
view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的 div，是布局中最基本的用户界面(User Interface，UI)组件，通过设置 view 的 CSS 属性可以实现各种复杂的布局。view组件的特有属性如表4-1所示。
通过<view>组件实现页面布局示例代码如下：
<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: 2;">2</view>
<view style="border: 1px solid #f00;flex-grow: 3;">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>运行效果如图：
4.2.2 scroll-view
通过设置scroll-view组件的相关属性可以实现滚动视图的功能，其属性如表4-2所示。
表4-2scroll-view组件属性
【注意】
(1)在使用竖向滚动时，如果需要给 scroll-view 组件设置一个固定高度，可以通过WXSS设置 height 来完成。
(2)请勿在 scroll-view 组件中使用 textarea、map、canvas、video 组件。
(3)scroll-into-view属性的优先级高于 scroll -top。
(4)由于在使用 scroll-view 组件时会阻止页面回弹，所以在 scroll-view 组件滚动时无法触发 onPullDownRefresh。
(5)如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。
通过 scroll-view 组件可以实现下拉刷新和上拉加载更多，代码如下:
//sc.wxml
<view class="container" style="padding:0rpx">
<!-- 垂直滚动，这里必须设置高度 -->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height: {{scrollHeight}}px;" class="list" bindscrolltolower="bindDownLoad"
bindscrolltoupper="topLoad"bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img"src="{{}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="desription">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">加载中...</loading>
</view>
</view>
//sc.js
var url ="http://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.setData({
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){
//console.info(that.data.list);
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(){
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){
this.setData({
scrollTop:event.detail.scrollTop
});
},
topLoad:function(event){
page=0;
this.setData({
list:[],
scrollTop:0
});
loadMore(this);
console.log("lower");
}
})
//sc.wxss
.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组件的属性如表4-3所示。
<swiper-item/>组件为滑块项组件，仅可以被放置在<swiper/>组件中，宽高尺寸默认按100%显示。
设置swiper组件，可以实现轮播图效果，代码如下：
<swiper indicator-dots='true' autoplay='true' interval='5000' duration='1000'>
<swiper-item>
<image src="../image/c.jpg" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../image/d.jpg" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../image/pcy.jpg" style="width: 100%;"></image>
</swiper-item>
</swiper>运行结果如下：
4.3 基础内容组件
基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息。
4.3.1 icon
icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性表如图。
示例代码如下：
//ic.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>
//ic.js
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组件的属性如表所示。
4.3.3 progress
progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素，其属性如表4-6所示。
表4-6 progress组件属性
4.4 表单组件
表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在<form/>标签中使用，还可以作为单独组件和其他组件混合使用。
4.4.1 button
button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说在一个程序中一个按钮至少有3种状态:默认点击(default)、建议点击(primary)、谨慎点击(warn)。在构建项目时，应在合适的场景使用合适的按钮，当<button>被<form/>包裹时，可以通过设置 form-type 属性来触发表单对应的事件。button组件的属性如表4-7所示。
示例代码如下：
//index.wxml
<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' plain="{{plain}}">改变plain</button>
<button type="default" bindtap='buttonLoading' loading="{{loading}}">改变loading显示</button>
//index.js
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})
},
//是否显示loading
buttonLoading:function(){
this.setData({loading:!this.data.loading})
}
})4.4.2 radio
单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/>(单项选择器)和<radio/>(单选项目)两个组件组合而成，一个包含多个<radio/>的<radio-group/>表示一组单选项，在同一组单选项中<radio/>是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。它们的属性如表4-8所示。
示例代码如下：
<!--logs.wxml-->
<view>选择您喜爱的城市：</view>
<radio-group bindchange="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>
// logs.js
Page({
data:{
radios:[
{name:'java',value:'JAVA'},
{name:'python',value:'Python',checked:'true'},
{name:'php',value:'Swif'},
],
city:'',
lang:''
},
citychang:function(){
this.setData({city:e.detail.value});
},
radiochange:function(event){
this.setData({lang:event.detail.value});
console.log(event.detail.value)
}
})4.4.3 checkbox
复选框用于从一组选项中选取多个项，小程序中复选框由<checkbox-group/>（多项选择器）和<checkbox/>（多选项目）两个组件组合而成。一个<checkbox-group/>表示一祖选项，可以在一个选项中选中多个选项。它们的属性表如表4-9所示。
示例代码如下：
<!-- ch.wxml -->
<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>
//ch.ja
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.4 switch
switch组件的作用类似于开关选择器，其属性如表4-10所示。
示例代码如下：
<!-- sw.wxml -->
<view>
<switch bindchange="sw1">{{var1}}</switch>
</view>
<view>
<switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
<switch type="checkbox" bindchange="sw3">{{var3}}</switch>
</view>
// sw.js
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组件为滑动选择器，可以通过滑动来设置相应的值，其属性表如表4-11所示。
示例代码如下：
<!-- sl.wxml -->
<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='{{size}}'></icon>
// sl.js
Page({
data:{
size:'20'
},
sliderchange:function(e){
this.setData({size:e.detail.value})
}
})4.4.6 picker
picker 组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是:selector(普(多列选择通选择器)、multiSelector器)、time(时间选择器)、date(日期选择器)、region(省市选择器)。
1.普通选择器
普通选择器(mode=selector)的属性如表4-12所示。
示例代码如下：
<!-- pi.wxml -->
<view>---range为数组---</view>
<picker range="{{array}}" value="{{index1}}">当前选择：{{array[index1]}}</picker>
<view>---range为数组对象---</view>
<picker bindchange="objArrayChanger" value="{{index2}}" range-key="name" range="{{objArray}}">当前选择：{{objArray[index2].name}}</picker>
//pi.js
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
})
}
})2.多项选择器
多列选择器(mode=multiSelector)允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如表4-13所示。
例如，简写代码实现如图4-13所示的省、市、县三级联动选择功能。
示例代码如下：
<!-- pic.wxml -->
<view>多项选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view>
当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
// pic.js
Page({
data:{
multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
multiIndex:[0,0,0]
},
// 绑定Multipicker
bindMultiPickerChange:function(e){
console.log('picker 发送选择器改变，携带值为',e.detail.value)
this.data({
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.multiArray[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.时间选择器、日期选择器
时间选择器（mode=time）可以用于从提供时间选项中选择相应的时间，其属性如表4-14所示。
日期选择器（mode=time）可以用于从提供日期选项中选择相应的日期，其属性如表4-15所示。
示例代码如下：
<!-- pi.js -->
<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>
// pi.js
Page({
data:{
startdate:2000,
enddate:2050,
date:'2018',
startime:'00:00',
endtime:'12:59',
time:'8:00'
},
changetime:function(e){
this.setData({date:e.detail.value});
console.log(e.detail.value)
}
})4.省市选择器
省市选择器(mode=region)是小程序的新版本提供的选择快速地区的组件，其属性如表4-16 所示。
示例代码如下：
<!--index.wxml-->
<picker mode="region" value="{{region}}" custom-item="{{customitem}}" bindchange="changeregion">选择省市区：{{region[0]}},{{region[1]}},{{region[2]}}
</picker>
// index.js
Page({
data:{
region:['陕西省','西安市','长安区'],
customitem:'全部'
},
changeregion:function(e){
console.log(e.detail.value)
this.setData({
region:e.detail.value
})
}
}) 4.4.7 picker-view
picker-view组件为嵌人页面的滚动选择器。相对于 picker 组件，picker-view 组件的列的个数和列的内容由用户通过<picker-viewcolumn/>自定义设置。picker-view组件的属性如表4-17所示。
示例代码如下：
<!--dz.wxml-->
<view>当前日期：{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height:50px;"style="width:100%; height:500px;" 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>
// dz.js
Page({
data:{
years:years,
months:months,
days:days,
year:2004,
month:11,
day:16,
value:[118,0,0],//定位到2018年1月1日
},
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]]
})
}
})
const date=new Date()
const years=[]
const months=[]
const days=[]
// 定义年份
for(let i=1900; i<=2050; i++){
years.push(i)
}
// 定义月份
for(let i=1;i<=12;i++){
months.push(1)
}
// 定义日期
for(let i=1;i<=31;i++){
days.push(i)
}
运行代码如下：
4.4.8 input
input组件为输入框，用户可以输入相应的信息，其属性如下表4-18所示。
示例代码如下：
<!-- ip.wxml -->
<input placeholder="这是一个自动聚焦的input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取聚焦点</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class="section_title">你输入的是：{{inputValue}}</view>
<input bindinput="bindReplacIput" 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="占位字符体是红色的"/>
//ip.js
Page({
hobby:'',
data:{
hobbies:[
{name:'jsj',value:'计算机',checked:'true'},
{name:'music',value:'听音乐'},
{name:'game',value:'玩电竞'},
{name:'swin',value:'游泳',checked:'true'}
]
},
formSubmit:function(e){
console.log('form发生了submit事件，携带数据为：',e.detail.value)
},
formReset:function(){
console.log('form发生了reset事件')
}
})4.4.9 textarea
textarea组件为多行输入框组件，可以实现多行内容的输入。textarea组件的属性如表4-19所示。
示例代码如下：
<!-- tx.wxml -->
<textarea bindblur="bindTextAreablur" auto-height placeholder="自动变高"/>
<textarea placeholder="placeholder 颜色是红色的" placeholder-style="color:red;"/>
<textarea placeholder="这是一个可以自动聚焦的 textarea" auto-focus/>
<textarea placeholder="这个只有在按钮点击的时侯才聚焦" focus="{{focus}}" />
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form中的textarea" name="textarea" />
<button form-type="submit">提交</button>
</form>
// tx.js
Page({
data:{
height:10,
focus:false
},
bindButtonTap:function(){
this.setData({
focus:true
})
},
bindTextAreaBlur:function(e){
console.log(e.detail.value)
},
bindFormSubmit:function(e){
console.log(e.detail.value.textarea)
}
})4.4.10 label
label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id或者将控件放在该标签下，当点击Iabel组件时，就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前，label组件可以绑定的控件有<button/>、<checkbox/>、<radio/>、<switch/ >。
示例代码如下：
<!-- la.wxml -->
<!-- 单击“中国”不能选择/取消复选框 -->
<view><checkbox></checkbox>中国</view>
<!-- 单击“中国”可以选择/取消复选框 -->
<view><label><checkbox></checkbox>中国</label></view>
<!-- 使用for找到对应的id -->
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您选择的是：{{city}}</view>
// la.js
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组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<form/>表单中formType为submit 的<button/>组件时，会将表单组件中的 value 值进行提交。form 组件的属性好表4-20所示。
示例代码如下：
<!-- fo.wxml -->
<form bindsubmit="formSubmit" bindreset="bindReset">
<view>姓名：
<input type="text" name="xm" />
</view>
<view>性别：
<radio-group name="xb">
<label>
<radio value="男" chaecked/>男
</label>
<label>
<radio value="女" />女
</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="submit">提交</button>
<button formType="reset">重置</button>
</form>
// fo.js
Page({
hobby:'',
data:{
hobbies:[
{name:'jsj',value:'计算机',checked:'true'},
{name:'music',value:'听音乐'},
{name:'game',value:'玩电竞'},
{name:'swin',value:'游泳',checked:'true'}
]
},
formSubmit: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
image组件为图像组件，与HTML中的 <img/ >类似，系统默认image组件的宽度为300 px、高度为2250 px。
image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。
1.缩放模式
1） scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
2）aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以将图片完整地3.显示出来。
3）aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向将会发生截取。
4）widthFix宽度不变，高度自动变化，保持原图宽高比不变。
示例代码如下：
<!-- i.wxml -->
<block wx:for="{{modes}}">
<view>当前图片模式是：{{item}}</view>
<image mode="{{item}}" src="../images/xq.jpg" style="width: 100%,height=100%"/>
</block>
// i.js
Page({
data:{
modes:['scaleToFill','aspectFit','aspectFill','widthFix']
}
})
运行结果如下：
2.裁剪模式
top 不缩放图片，只显示图片的顶部区域。
bottom 不缩放图片，只显示图片的底部区域。
center 不缩放图片，只显示图片的中间区域。
left 不缩放图片，只显示图片的左边区域。
right 不缩放图片，只显示图片的右边区域。
top_left 不缩放图片，只显示图片的左上边区域。
top_right 不缩放图片，只显示图片的右上边区域。
bottom_left 不缩放图片，只显示图片的左下边区域。
bottom_right 不缩放图片，只显示图片的右下边区域。
示例代码如下：
<!-- cj.wxml -->
<block wx:for="{{modes}}">
<view>当前图片模式是：{{item}}</view>
<image mode="{{item}}" src="../images/xq.jpg" style="width: 100%,height=100%"/>
</block>
// cj.js
Page({
data:{
modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
}
})4.5.2 audio
audio组件用来实现音乐播放、暂停等。其属性如表4-22所示。
示例代码如下：
<!-- au.wxml -->
<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>
// au.js
Page({
data:{
poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg? max_age=2592000',
name:'此时此刻',
author:'许巍',
src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3? guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&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
}
})
}
})4.5.3 video
video组件用来实现视频的播放、暂停等。视频的默认宽度为300飘向，高度为225px。video组件的属性如表4-23所示。
示例代码如下：
<!-- vi.wxml -->
<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
// vi.js
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
})
}
})
}
})4.5.4 camera
camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera 组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像;在手机中运行时，使用手机前后摄像头实现拍照或录像。camera组件的属性如表4-24所示。
示例代码如下：
<!-- ca.wxml -->
<camera device-position="back" flash="off"binderror="error"
style="width: 100%;height: 350px;"> </camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>浏览</view>
<image mode="widthFix" src="{{src}}"></image>
// ca.js
Page({
takePhoto(){
const ctx =wx.createCameraContext() // 创建并返回camera上下文对象
ctx.takePhoto({
quality:'high',
success:(res)=>{
this.setData({
src:res.tempImagePath
})
}
})
},
error(e){
console.log(e.detaail)
}
})4.6 其他组件
在小程序中,除了前面介绍的组件以来，map组件和canvas组件比较常用。
4.6.1 map
map组件用于在页面中显示地图或路径，常用于LBS(基于位置服务)或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在croll-view、swiper、picker-view、movable-view组件中使用。map组件的属性表如4-25所示。
map组件的markers属性用于在地图上显示标记的位置，其相关属性如下表所示。
map组件的 polyline属性用来 指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等，其相关属性如下表所示。
第五章 即速应用概述
5.1.1 即速应用的优势
即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发据不完全统计，在微信小程序正式发布的1年内，在即速应用上打包代码并成功上线的微信小程序已经超过5万个。
即速应用的功能特点主要体现在以下几个方面:
1.开发流程简单，零门槛制作
使用即速应用来开发微信小程序的过程非常简单，无须储备相关代码知识，没有开发经验的人也可以轻松上手。
(1)登录即速应用的官方网站(www.jisuapp.cn)，进人制作界面，从众多行业模板中选择一个合适的模板。
(2)在模板的基础上进行简单编辑和个性化制作。
(3)制作完成后，将代码一键打包并下载。
(4)将代码上传至微信开发者工具。
(5)上传成功后，等待审核通过即可。
2.行业模板多样，种类齐全
即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率。
3.丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算;社区体系可以实现评论留言和
话题管理;多商家系统可以实现分店统一管理、多门店统一运营;营销工具可以实现会员卡、优惠券的设置等营销方式…
目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。即速应用的应用范围主要包括以下类型:
(1)资讯类:新闻、媒体。
(2)电商类:网购(服装、电器、读书、母要……)。
(3)外卖类:餐伙及零售(5)预约类;酒店、KTV、家教、家政，其他服务行业。
(4)到店类:餐伙及酒吧。
5.1.2即速应用界面介绍
登录即速应用官网，单击“注册”按钮，在如图5-1所示的页面填写相应信息，即完成注册。完成注册后，即可登录账号，使用即速应用。
即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板。
1、菜单栏
2、工具栏
3、编辑区
4、属性面板
5.2 即速应用组件
即速应用提供了大量的组件供用户快速布局页面，包括7个布局组件、9个基本组件18个高级组件和2个其他组件。
5.2.1 布局组件
布局组件用于设计页面布局，主要包括双栏、面板自由面板、顶部导航、底部导航、分割线和动态分类如图5-3 所示。
1.双栏组件
双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不会出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏里面可以添加基本的组件，从而达到整体的布局效果。双栏还可以嵌套双栏，即可以在其中的一个栏里嵌入一个双栏，从而将整体分成3部分(若需要将整体分成4部分，就再嵌套一个双栏，依次类推)。双栏组件的属性面板如图5-4所示。
2.面板组件
面板组件相当于一个大面板，用户可以将很多基本(甚至高级)的组件(如文本组件图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等)放进面板组件里一起管理。面板组件的属性面板如图5-5所示。
3.自由面板组件
自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向
自由面板内拖人部分组件(包括文本组件、图片组件和按钮组件)，也可以拖入任意相关容器组件，用于不规则布局。自由面板组件的属性面板如图5-6所示。
4.顶部导航组件
顶部导航组件固定于页面顶部，用于编辑顶部的导航。常用的手机应用在顶部有一条导航，上面写有手机应用App的名称或log0，以及返回键等。顶部导航组件的属性面板设置如图5-7 所示。
5.底部导航组件
底部导航组件固定于页面底部，用于编辑底部的导航。底部导航组件的属性面板设置如图5-8所示。
通过底部导航组件可以添加标签、删除标签，同时可以分别设置每个标签的名称、原图片、点击图片及链接至某一页面;通过组件面板可以进行组件背景色、图片及文字的务置。底部导航组件的制作效果如图5-9所示。
6.分割线组件
分割线组件被放置于任意组件之间，用于实现分割。分割线组件的属性面板如图5-106.分割线组件
所示。
7.动态分类组件
动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板如图5-11所示。
5.2.2 基本组件
基本组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频，如图5-12 所示。
1.文本组件
文本组件用于展示文字、设置点击事件、是小程序页面中最常用的组件。文本组件的属性面板。
2.图片组件
图片组件用于在页面中展示图片，其属性面板如图5-14 所示。
3.按钮组件
按钮组件用于在页面中设置按钮，其属性面板如图5-15 所示。
4. 标题组件
标题组件用于在页面中设置标题，其属性面板如图5-16 所示。
5.轮播组件
轮播组件用于实现图片的轮播展示，其属性面板如图5-17所示
单击“添加轮播分组”按钮进人管理后台，然后单击“轮播管理”→“新建分组”选项可以创建轮播分组，如图5-18所示。
分别填写“分组名称”和“分组描述”，单击“确定”按钮进入图5-19所示的轮播管理界面。
单击“轮播项”按钮，进入图5-20所示的页面。
6.分类组件
分类组件可以设置不同内容展示在不同类别中，还可以添加、删除分类的个数及进行相应的设置。分类组件的属性面板如图5-24所示。
7.图片列表组件
图片列表组件可以将图片以列表的形式展示，还可以设置图片的名称、标题和点击事件。图片列表组件的属性面板如图5-25所示。
例如，添加“女装”分组，在此分组内添加“全部”“羽绒服”“毛衣”“半身裙”4个页面，并在每个页面内添加分类和图片列表组件。添加页面如图5-26所示。
通过以上操作，最终效果如图5-27所示。
8.图文集组件
图文集组件用于展示图片、标题和简介，其属性面板如图5-28所示。
视频组件提供网页应用、小程序和云服务3种视频来源。网页应用使用视频通用代码*确定视频来源。例如，打开优酷网站，找到需要的视频，进人“分享给朋友”页面，通用代码就显示出来，如图5-30所示。
单击“复制通用代码”按钮，把复制好的通用代码粘贴到图5-31所示的文本框中，保存后即可在小程序项目中添加该视频。
5.2.3 高级组件
高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改，如图5-32所示。下面介绍其中的几种常用组件。
1.动态列表组件
动态列表组件是容纳基础组件来展示后台数据的容器，通过添加基础组件来展示对应的后台数据，其属性面板如图5-33 所示。
2.个人中心组件
个人中心组件显示个人相关信息的组件，包括图像、昵称、我的订单、收货地址、购物车等，如图5-44所示。
3.动态表单组件
动态表单组件相当于HTML中的<fom>标签,是一个容器组件，可以添加子表单组件和基本组件，用来收集用户提交的相关信息给后台数据对象。动态表单组件的属性面板如图5 -46 所示。
4.评论组件
评论组件提供信息发布或回复信息的组件，评论组件的属性面板如下图所示。
【注意】
在关联页面后，如果该页面是动态页，则评论属于该动态页对应的数据;如果该页面不美动态页，则评论属于该页面。如果不关联页面，则评论属于该小程序。如果开启了点赞、影用户可以给每项评论点赞。
5.计数组件
计数组件可以用于点赞、统计浏览量等类似的计数功能。计数组件的属性面板如下图所示。
【注意】
在设置为自动计数后，当用户浏览该页面时，浏览量自动增加1。在关联页面后，该页面是动态页，相关计数则属于该动态页对应的项;如果该页面不是动态页，相关计属于该页面。如果不关联页面，则相关计数属于该小程序。
6.地图组件
地图组件用于显示指定地址的地图，常用于实现定位及导航功能，地图组件的属性面
如图5-52 所示。
7.城市定位组件
城市定位组件通常与列表类组件搭配使用，常见搭配有动态列表和商品列表。例如，城市定位组件与商品列表搭配，可以实现通过城市定位来搜索出某具体位置信息下的商品列表。
8.悬浮窗组件
悬浮窗组件的固定搭配有:客服、我的订单、购物车、回到顶部。悬浮窗组件通常出现在个人中心或商品列表页面，其属性面板如图5-54所示。
5.2.4 其他组件
其他组件包括音频组件和动态容器组件
1.音频组件
音频组件用于播放音乐(每个页面有一个音频组件即可)，手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐，也可以上传本地音频进行更换，音频组件的性面板如图5-55 所
示。
2.动态容器组件
动态容器组件用于动态页面，即所在页面绑定了数据对象。动态容器组件中可以添加多种组件--文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件计数组件。其中，文本组件和图片组件可以绑定相应的数据对象字段(填充相应动态数据)，若有计数组件，则会自动与动态容器关联。动态容器组件的属性面板如图5-56所示。
5.3 即速应用后台管理
即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即时更新，开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具多商家管理等功能
1.数据管理
数据管理包括数据总览、访客分析和传播数据功能数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图，如图5-57 所示。
访客分析
访客分析是以图例的形式来展示用户从微信的哪个模块来访问及访问的次数、比例、用户来源地区、用户访问时间及使用设备等，便于管理者更好地做好营销工作，传播数据主要是用于提供新老访客的比例，以及访客使用哪些主要平台打开应用的次数所示及占比。
2.分享设置
分享设置主要提供可以分享应用的方式。
3.用户管理
用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能，如图5-60所示。
4.应用数据
应用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据
5.轮播管理
轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容。
6.分类管理
分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商。
7.商品管理
商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能。
8.经营管理
经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理着管理小程序的运营。
9.营销工具
营销工具是小程序营销推广的有力工具，主要有会员卡、优惠券、积分、值、推广秒杀、集集乐、拼团活动、大转盘、砸金蛋、刮刮乐等。这些营销工具都需要事前在后台合理设置后，才能在活动中发挥更大的作用。
10.多商家管理
多商家管理是即速应用为有众多商家的商城(如“华东商城”“义乌商城”等)开设的管理功能，方便管理者统计每家店铺的订单及进行收益分析。
5.4 打包上传
即速应用可以将小程序的代码打包，该代码包可以通过微信开发者工具来对接微信小程序。
5.4.1 打包
进人即速应用后台管理，选择左边选项“分享设置”按钮，单击“微信小程序。选项，进入如图5-61所示的页面。
选择“代码包下载”选项，单击“确定”按钮，进入如图5-62 所示的页面。
通过“微信公众平台一小程序一设置一开发设置”获取 AppD 和 Amseee,在“最务器配置”中填写相关信息，选择相应分类，单击“打包”按钮，即可成功打包。
单击“下载”按钮，即可下载该小程序代码包。
5.4.2 上传
打开微信Web开发者工具，新建项目，并填写相关内容。其中，项目目录为下载包解压后的目录。
单击“确定”按钮，打开小程序代码，编译无误后，填写该项目的版本号，单击“上传”按钮即可实现该小程序代码上传。
上传成功后，打开微信公众平台的“开发管理”界面，就可以看到该小程序的版本信息。
待审核通过后，即可在“微信”一“发现”一“小程序”中搜索到该小程序。
第六章 API应用
6.1 网络API
微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生API接口或第三方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关闭。
在本节，我们将介绍常用的3个网络API。
6.1.1 发起网络请求
wx. request（Object）实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表6-1所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求。
例如，通过wx. request（Object）获取百度（https://www.baidu.com）首页的数据。（需要在微信公众平台小程序服务器配置中的request合法域名中添加“https://www.baidu.com”。）
示例代码如下：
<!-- bd.wxml -->
<button type="primary" bindtap="getbaidutap">获取HTML数据</button>
<textarea value='{{html}}' auto-heightmaxlength='0'></textarea>
// baidu.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
})
}
})
}
}) 例如，通过wx. request（Object）的GET方法获取邮政编码对应的地址信息。
示例代码如下：
<!-- po.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>
// po.js
Page({
data:{
postcode:'', //查询的邮政编码
address:[], //邮政编码对应的地址
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;
// 显示toast提示消息
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' ,//方法为GET
success:function(res){
wx.hideToast(); //隐藏toast
if(res.data.error_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.reason || res.data.reason, //错误原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})例如，通过wx. request（Object）的POST方法获取邮政编码对应的地址信息。
示例代码如下：
<!-- pos.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>
// pos.js
Page({
data:{
postcode:'', //查询的邮政编码
address:[], //邮政编码对应的地址
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;
// 显示toast提示消息
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/x-www-form-urlencoded',
},
method:'POST' ,//方法为POST
success:function(res){
wx.hideToast(); //隐藏toast
if(res.data.error_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.reason || res.data.reason, //错误原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})
6.1.2 上传文件
wx. uploadFile（Object）接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其相关参数如表6-2所示。
通过wx. uploadFile（Object），可以将图片上传到服务器并显示。
示例代码如下：
<!-- up.wxml -->
<button type="primary" bindtap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix" />
// up.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){
// 显示toast提示消息
wx.showToast({
icon:"loading",
title: "正在上传"
}),
wx.uploadFile({
filePath: 'path[0]',
name: 'file',
url: 'http://localhos/',
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(){
// 隐藏Toast
wx.hideToast();
}
})
}
}
})
6.1.3 下载文件
wx. downloadFile（Object）接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTPGET请求，返回文件的本地临时路径。其相关参数如表6-3所示。
例如，通过wx. downloadFile（Object）实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建。
示例代码如下：
<!-- do.wxml -->
<button type="primary" bindtap="downloadimage">下载图片</button>
<image src="{{img}}" mode="widthFix" style="width: 90%; height: 500px"></image>
// do.js
Page({
data:{
img:null
},
downloadimage:function(){
var that = this;
wx.downloadFile({
url: 'http://localhost/1.jpg', //通过WAMP软件实现
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保存图片到本地。其相关参数如表6-4所示。
若调用成功，则返回tempFilePaths和tempFiles,tempFilePaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size。
示例代码如下：
wx.chooseImage({
count:2,//默认值为9
sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认
者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性来显示图片
var tempFilePaths =res.tempFilePaths
var tempFiles =res.tempFiles;
console.log(tempFilePaths)
console.log(tempFiles)
}
})
2．预览图片
wx. previewImage（Object）接口主要用于预览图片，其相关参数如表6-5所示。
示例代码如下：
Page({
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）接口用于获取图片信息，其相关参数如表6-6所示。
示例代码如下：
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。其相关参数如表6-7所示。
示例代码如下：
Page({
wx.chooseImage({
success:function(res){
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success:function(e){
console.log(e)
}
})
},
})
})
6.2.2 录音API
录音API提供了语音录制的功能，主要包括以下两个API接口：
■ wx.startRecord（Object）接口 用于实现开始录音。
■ wx.stopRecord（Object）接口 用于实现主动调用停止录音。
1．开始录音
wx. startRecord（Object）接口用于实现开始录音。当主动调用wx.stopRecord（Object）接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx. saveFile（）接口。其相关参数如表6-8所示。
2．停止录音
wx. stopRecord（Object）接口用于实现主动调用停止录音。
示例代码如下：
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：
■ wx.playVoice（Object）接口 用于实现开始播放语音。
■ wx.pauseVoice（Object）接口用于实现暂停正在播放的语音。
■ wx.stopVoice（Object）接口 用于结束播放语音。
1．播放语音
wx. playVoice（Object）接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。其相关参数如表6-9所示。
示例代码如下：
wx.startRecord({
success: function(res){
var tempFilePath= res.tempFilePath wx.playVoice({//录音完后立即播放
filePath:tempFilePath, complete:function(){
}
})
}
})2．暂停播放
wx. pauseVoice（Object）用于暂停正在播放的语音。再次调用wx.playVoice（Object）播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用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：
■ wx.playBackgroundAudio（Object）接口 用于播放音乐。
■ wx.getBackgroundAudioPlayerState（Object）接口 用于获取音乐播放状态。
■ wx.seekBackgroundAudio（Object）接口 用于定位音乐播放进度。
■ wx.pauseBackgroundAudio（）接口 用于实现暂停播放音乐。
■ wx.stopBackgroundAudio（）接口 用于实现停止播放音乐。
■ wx.onBackgroundAudioPlay（CallBack）接口 用于实现监听音乐播放。
■ wx.onBackgroundAudioPause（CallBack）接口 用于实现监听音乐暂停。
■ wx.onBackgroundAudioStop（CallBack）接口 用于实现监听音乐停止。
1．播放音乐
wx. playBackgroundAudio（Object）用于播放音乐，同一时间只能有一首音乐处于播放状态，其相关参数如表6-10所示。
2．获取音乐播放状态
wx.getBackgroundAudioPlayerState（Object）接口用于获取音乐播放状态，其相关参数如表6-11所示。
接口调用成功后返回的参数如表6-12所示。
3．控制音乐播放进度
wx. seekBackgroundAudio（Object）接口用于控制音乐播放进度，其相关参数如表6-13所示。
4．暂停播放音乐
wx. pauseBackgroundAudio（）接口用于暂停播放音乐。
5．停止播放音乐
wx. stopBackgroundAudio（）接口用于停止播放音乐。
6．监听音乐播放
wx. onBackgroundAudioPlay（CallBack）接口用于实现监听音乐播放，通常被wx. playBack-groundAudio（Object）方法触发，在CallBack中可改变播放图标。
7．监听音乐暂停
wx. onBackgroundAudioPause（CallBack）接口用于实现监听音乐暂停，通常被wx. pause-BackgroundAudio（）方法触发。在CallBack中可以改变播放图标。
8．监听音乐停止
wx. onBackgroundAudioStop（CallBack）接口用于实现监听音乐停止，通常被音乐自然播放停止或wx.seekBackgroundAudio（Object）方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标。
9．案例展示
在此，以小程序music为案例来展示音乐API的使用。该小程序的4个页面文件分别为music. wxml、music.wxss、music. json和music. cojs。实际效果如图6-5所示。
示例代码如下：
mu.wxml代码：
<!-- mu.wxml -->
<view class="container">
<image class="bgaudio"src = "{{changedImg? music.coverImg:'../images/llll.png'}}"/>
<view class ="control-view">
<!--使用data-how定义一个0表示快退10秒-->
<image src ="../images/llll.png"bindtap="onPositionTap"data-how= "0 "/>
<image src = "../images/{{isPlaying?'pause':'play'}}.png " bindtap = "onAudioTap"/>
<image src ="../images/play.png"bindtap = "onStopTap"/><!--使用data-how定义一个1表示快进10秒-->
<image src ="../images/llll.png "bindtap ="onPositionTap"data-how = "1"/>
</view >
</view >
mu.wxss代码如下：
.bgaudio{
height:350rpx; width:350rpx;
margin-bottom:100rpx;
}
.control-view image{
height:64rpx;
width:64rpx;
margin:30rpx;
}
mu.json代码如下：
{ }
mu.js代码如下：
Page({
data:{
//记录播放状态
isPlaying:false,
//记录coverImg,仅当音乐初始时和播放停止时,使用默认的图片。播放中和暂停时，都使用当前音乐的图片
coverImgchangedImg:false,
//音乐内容
music:{
"url":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4alb405195b18061299e2de89597.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){
//如果在正常播放状态,就暂停,并修改播放的状态
wx.pauseBackgroundAudio();
}else{
//如果在暂停状态,就开始播放,并修改播放的状态28
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表示播放中54
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()执行时触发101 //改变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({isPlaying:false,changedImg:false});
console.log("on stop");
});
}
})6.3 文件API
从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口：
■ wx.saveFile（Object）接口 用于保存文件到本地。
■ wx.getSavedFileList（Object）接口 用于获取本地已保存的文件列表。
■ wx.getSaveFileInfo（Object）接口 用于获取本地文件的文件信息。
■ wx.removeSaveFile（Object）接口 用于删除本地存储的文件。
■ wx.openDocument（Object）接口 用于新开页面打开文档，支持格式：doc、xls、ppt、pdf、docx、xlsx、ppts。
1．保存文件
wx. saveFile（Object）用于保存文件到本地，其相关参数如表6-14所示。
2．获取本地文件列表
wx. getSavedFileList（Object）接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/01 08: 00: 00到当前时间的秒数）文件列表。其相关参数如表6-15所示。
3．获取本地文件的文件信息
wx. getSaveFileInfo（Object）接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx. getFileInfo（Object）接口。其相关参数如表6-16所示。
4．删除本地文件
wx. removeSaveFile（Object）接口用于删除本地存储的文件，其相关参数如表6-17所示。
5. 打开文档
wx.openDocument(Object)接口用于新开页面打开文档、支持格式有 doc、xls、ppt、pdm、xlsx、pptx，其相关参数如表6-18所示。
6.4 本地数据及缓存API
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10MB，其目的是提高加载速度。数据缓存的接口主要有4个:
■ wx.setStorage(Object)或wx.setStorageSync(key,data)接口 用于设置缓存数据。
■ wx.getStorage(Object)或wx.getStorageSync(key)接口 用于获取缓存数据。
■ wx.removeStorage(Object)或wx.removeStorageSync(key)接口用于删除指定缓存
数据。
■ wx.removeSaveFile（Object）接口 用于删除本地存储的文件。
■wx.clearStorage()或wx.clearStorageSync()接口 用于清除缓存数据。
其中，带Sync后缀的为同步接口，不带Sync后级的为异步接口。
6.4.1 保存数据
1. wx. setStorage( Object )
wx,setStorage(0bject)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容。其参数如表6-19所示。
示例代码如下：
wx.setStorage({
Key:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})2. wx.setStorangeSync(key,data)
wx. setStorageSync（key, data）是同步接口，其参数只有key和data。
示例代码如下：
wx. setStorageSync（'age', '25'）6.4.2 获取数据
1. wx. getStorage( Object)
wx.getStorage(Object)接口是从本地缓存中异步获取指定 key 对应的内容。其相关参数如表6-20 所示。
示例代码如下：
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(0bject)接口用于从本地缓存中异步移除指定 key。其相关参数如表6 -21所示。
示例代码如下：
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.removeStorage({
key: 'name',
success:function (res) {
wx.clearStorage() //清理本地数据缓存
},
})2. wxclearStroageSync( )
wxclearStroageSync( )接口用于同步清理本地数据缓存。
示例代码如下：
try{
wx.clearStorageSync()
}catch(e){
}6.5 位置信息API
小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和CCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系;CCi02标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系默认为WGS84标准，若要查看位置需要使用GCi02标准。主要包括以下3个API接口:
■ wx.getLocation(0bject)接口用于获取位置信息。
■ wx.chooseLocation(0bject)接口用于选择位置信息。
■ wx.openocation(0bject)接口用于通过地图显示位置
6.5.1 获取位置信息
wx.getLocation(0bject)接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息，其相关参数如表6-22所示。
wx.getLocation(Object）调试成功后，返回的参数如表6-23所示。
示例代码如下：
wx.getLocation({
type:'wg84',
success:function(res){
console.log("经度:" +res.longitude);
console.log("纬度:" +res.longitude);
console.log("速度:" +res.longitude);
console.log("位置的精确度:" +res.accuracy);
console.log("水平精确度:" +res.horizontalAccuracy);
console.log("垂直精确度:" +res.verticalAccuracy);
}
})6.5.2 选择位置信息
wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表6-24所示。
wx.chooseLocation(Object)调用成功后，返回的参数如表6-25 所示。
示例代码如下：
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)进口用于在微信内置地图中显示位置信息，其相关参数如表6-26所示。
示例代码如下：
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：
■ wx.getSystemInfo（Object）接口、wx.getSystemInfoSync（）接口 用于获取系统信息。
■ wx.getNetworkType（Object）接口 用于获取网络类型。
■ wx.onNetworkStatusChange（CallBack）接口 用于监测网络状态改变。
■ wx.makePhoneCall（Object）接口 用于拨打电话。
■ wx.scanCode（Object）接口用于扫描二维码
6.6.1 获取信息
wx. getSystemInfo（Object）接口、wx. getSystemInfoSync（）接口分别用于异步和同步获取系统信息。其相关参数如表6-27所示。
wx.getSystemInfo( )接口或wx.getSystemInfoSync( )接口调用成功后，返回系统相关信息，如表6-28所示。
示例代码如下：
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）用于获取网络类型，其相关参数如表6-29所示。
如果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）接口用于实现调用手机拨打电话，其相关参数如表6-30所示。
示例代码如下：
wx.makePhoneCall({
phoneNumber:'18070410828'//需要拨打的电话号码
})6.6.4 扫描二维码
wx. scanCode（Object）接口用于调起客户端扫码界面，扫码成功后返回相应的内容，其相关参数如表6-31所示。
扫描成功后，返回的数据如表6-32所示。
示例代码如下：
//允许从相机和相册扫码
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)
}
})
9300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
