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

第1章总结

文章标签： 微信小程序 小程序

版权
微信小程序是一种基于微信平台的应用程序，用户可以在微信中直接使用，无需下载安装。它提供了一种轻量级的应用开发和使用方式，用户可以随时随地在微信中打开和使用小程序。

微信小程序具有以下特点：
1.无需下载安装：用户可以直接在微信中打开小程序，无需下载和安装额外的应用程序。
2.轻量级应用：微信小程序相比于传统应用程序，体积较小，加载速度快，占用手机存储空间少。
3.便捷分享：用户可以通过微信分享小程序给朋友或者在朋友圈中分享，方便快捷。
4.多种应用场景：微信小程序可以涵盖生活服务、电商购物、社交娱乐等多个领域，满足用户的不同需求。
5.接口丰富：微信提供了丰富的接口和工具，方便开发者开发和优化小程序，提供更好的用户体验。
6.商业化变现：微信小程序支持广告、支付、会员等多种商业化手段，为开发者提供了变现的机会。

// logs.js const util = require('../../utils/util.js') Page({ data: { logs: [] }, onLoad() { this.setData({ logs: (wx.getStorageSync('logs') || []).map(log => { return { date: util.formatTime(new Date(log)), timeStamp: log } }) }) } }) 

{ "usingComponents": { } }

<!--logs.wxml--> <scroll-view class="scrollarea" scroll-y type="list"> <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log"> <view class="log-item">{{index + 1}}. {{log.date}}</view> </block> </scroll-view>

page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .log-item { margin-top: 20rpx; text-align: center; } .log-item:last-child { padding-bottom: env(safe-area-inset-bottom); } 

第2章总结

主体文件
微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小
程序的整体配置，它们的名称是固定的。
app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app·js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
app.json小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

app.wxss小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根 app.json 设置的路径找到相对应的资源进行数据绑定。
.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss 中指定的样式规则。该文件在页面中不可缺少。
.json 文件页面配置文件。该文件在页面中不可缺少。

第3章总结

一.盒子模型

1.盒子模型是页面设计中常用的思维模型：由内容（content）、内边距（padding）、边框（border）、和外边距（margin）组成。

2.细化为上、下、左、右四个部分。

二.块级元素与行内块元素

1.块级元素、块元素、行内块元素显示方式由display属性控制。

2.块级元素：块级元素占一行，可自定义长、宽、高，会自动换行，可容纳块级元素和行内块素。

<!--每一个块级元素占一行--> <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:200px">块级元素3</view> <!--块级元素的高度随内容决定，内容为块级元素--> <view style="border: 1px solid #ccc;"> <view style="height: 60px;">块级元素4</view> </view> <!--块级元素的高度随内容决定，内容为文本元素，块级元素的宽度为100px--> <view style="border: 1px solid #f00;width: 100px; background-color: #ccc"></view>

3.行内元素：不能设置宽高并由内容决定，不能放置块级元素，行内元素和其它元素显示在同行。

<!--每一个块级元素占一行--> <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:200px">块级元素3</view> <!--块级元素的高度随内容决定，内容为块级元素--> <view style="border: 1px solid #ccc;"> <view style="height: 60px;">块级元素4</view> </view> <!--块级元素的高度随内容决定，内容为文本元素，块级元素的宽度为100px--> <view style="border: 1px solid #f00;width: 100px; background-color: #ccc"></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 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:200px">块级元素3</view> <!--块级元素的高度随内容决定，内容为块级元素--> <view style="border: 1px solid #ccc;"> <view style="height: 60px;">块级元素4</view> </view> <!--块级元素的高度随内容决定，内容为文本元素，块级元素的宽度为100px--> <view style="border: 1px solid #f00;width: 100px; background-color: #ccc"></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;padding: 10px;width:200px;">块级元素、行内元素、行内块元素</view>三种类型。 </view>

三.浮动与定位

1.元素浮动:通过float属性定义left左浮动、right右浮动、none不浮动。

2.清除浮动通过clear：left清除左浮动；clear：right清除右浮动；clear：both清除左右两边浮动；clear：none不清除浮动；

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

3.元素定位：通过position属性实现对页面元素的精准定位用:{position:static |relative |absolute |fixed}。

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

四.flex布局：
由容器和项目组成，采用flex布局元素为容器。
1.容器属性：a.display：指定元素是否为flex布局，语法为.box{display:flex|inline-flex;}

b.flex-direction：用于设置项目排列方向：语法为.box{flex-direction:row|row-reverse|column-reverse;};当元素设为flex布局，主轴默认为row；

row-reverse—主轴在右段；

column–主轴为垂直方向，起点在顶端;

column -reverse–主轴为垂直方向，起点在底端。

3. flex-wrap
flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如
.box{flex-wrap:nowrap |wrap lwrap -reverse;}

nowrap–不换行，默认值;
wrap–换行，第一行在上方;

wrap-reverse-换行，第一行在下方。

4. flex-flow
fex-fow是fex-direction 和fex-wrap 的简写形式，默认值为 row nowrap。语法格式如下.box{ flex-flow:<flex-direction>ll<flex-wrap >;}

5. justify -content
justify-content用于定义项目在主轴上的对齐方式。语法格式如下:
.box{ justify-content:flex -start |flex -end lcenter lspace -betweenIspace-around;}

其中，justify-content–与主轴方向有关，默认主轴水平对齐，方向从左到右;
fex-start–左对齐，默认值;
fex-end–右对齐;
center–居中;
space-between–两端对齐，项目之间的间隔都相等;

space-around–每个项目两侧的间隔相等。

6. align -items
align-items用于指定项目在交叉轴上的对齐方式，语法格式如下:
..box{ align -items:flex -start lflex -end lcenter lbaseline lstretch;}
其中，align-items–与交叉轴方向有关，默认交叉由上到下;
fex-start–交叉轴起点对齐;
fex-end–交叉轴终点对齐;
center–交叉轴中线对齐;
baseline–项目根据它们第一行文字的基线对齐;
stretch–如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此
为默认值。

.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; } .itm3{ display: flex; height: 50px; align-items: flex-end; } .item4{ height: 120px; }

7. align -content
align-content 用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下:
.box{ align-content:flex -start |flex -end | center lspace -betweenspace -around lstretch}
其中，space-between–与交叉轴两端对齐，轴线之间的间隔平均分布;space-around–每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍。
其余各属性值的含义与 align-items 属性的含义相同。

五.项目属性

1.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:2">2</view> <view class="item"style="order:3">3</view> <view class="item ">4</view> </view>

2. flex-grow
fex-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">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>

4. flex-basis
fex-basis属性用来定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto(即项目的本来大小)。语法格式如下:
item{flex-basis:<number>lauto;}

5. flex
fex属性是fex-grow、fex-shrink和fex-basis 的简写，其默认值分别为0、1、auto。语法格式如下:
item{flex:<flex-grow>|<flex-shrink>|<flex -basis >;}

6. align -self
align-ser属性用来指定单独的伸缩项目在交叉轴上的对齐方式。该属性会重写默认的对齐方式。语法格式如下:
.item {align -self:auto lflex-start lflex -end lcenter lbaselinestretch;}
在该属性值中，除了auto以外，其余属性值和容器align-items的属性值完全一致auto 表示继承容器 align-items的属性，如果没有父元素，则等于stretch(默认值)。

第4章总结

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

容器视图组件
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper 组件。

view组件的特有属性

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

scroll-view组件属性

通过scroll-view组件可以实现下拉刷新和上拉加载更多：

<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_de-scription}}</text> </view> </view> </scroll-view> <view class="boby-view"> <loading hidden="{{hidden}}"bindchange="loadingChange"> 加载中... </loading> </view> </view>

var url ="http://.imooc.com/course/ajaxlist"; var page =0; var page_size = 5; var short = "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){ //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"); }, srcoll:function(event){ this.setData({ scrollTop:event.detail.scrollTop }); }, topLoad:function(event){ page = 0; this.setData({ list:[], scrollTop:0 }); loadMore(this); consolelog("lower"); } })

.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; }

wiper组件属性

<swiper indicator-dots='true' autoplay='true' interval='5000' duration ='1000'> <swiper-item> <image src="/images/1.jpg" style="width: 100%;"></image> </swiper-item> <swiper-item> <image src="/images/2.jpg" style="width: 100%;"></image> </swiper-item> <swiper-item> <image src="/images/3.jpg" style="width: 100%;"></image> </swiper-item> </swiper>

icon组件属性

icon组件即图标组件，通常用于表示一种状态

<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","warn","waiting","cancel", "download","search","clear"], iconSize:[10,20,30,40], iconColor:['#f00','#0f0','#00f'] } })

progress组件属性

progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等

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

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

button
button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。

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

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

radio-group及radio组件属性

checkbox

<view>选择你想要去的城市：</view> <checkbox-group bindchange="cityChange"> <label wx:for="{{citys}}"> <checkbox value="{{item.value}}" checked="{{item.checkd}}"> {{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}) } })

slider 组件属性

<view>默认 min=0 max=100 step=1</view> <slider></slider> <view>显示当前值</view> <slider show-value=""></slider> <view>设置 min="0" max="200" step="10" show-value</view> <view>滑动改变icon的大小</view> <slider show-value bindchange="sliderchange"></slider> <icon type="success" size="{{size}}"></icon>

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

picker

普通选择器

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>

多列选择器

<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] }, 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); }, })

时间选择器，日期选择器

<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, data:'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) } })

省市选择器

<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 }) }, })

picker-view

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

wx.pageScrollTo({ duration: 0, offsetTop: 0, scrollTop: 0, selector: 'selector', success: (res) => {}, fail: (res) => {}, complete: (res) => {}, }) 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(i) } for(let i=1;i<=31;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]] }) } })

input

<input placeholder="这是一个可以自动聚焦的input" auto-focus/> <input placeholder="这个是只有在按钮点击的时候才聚焦" focus="{{focus}}"/> <button bind:tap="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" placeholder="输入数字密码"/> <input password type="text" placeholder="输入字符密码"/> <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 } } })

textarea(文本域）

<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高"></textarea> <textarea placeholder="placeholder颜色是红色的"placeholder-style="color:red;"></textarea> <textarea placeholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"></textarea> <button bind:tap="bindButtonTap">使得输入框获取焦点</button> <form bindsubmit="bindFormSubmit"> <textarea placeholder="form中的textarea"name="textarea"></textarea> <button form-type="submit">提交</button> </form>

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

label

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({ 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}) } })

form

<form bindsubmit="formSubmit" bindreset="formReset"> <view>姓名： <input type="text" name="xm"/> </view> <view>性别： <radio-group name="xb"> <label> <radio value="男" checked/>男</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 form-type="submit">提交</button> <button form-type="reset">重置</button> </form>

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

多媒体组件

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

image

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

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

裁剪

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

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

audio

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

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 =6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8 DFEAF74 C0A5CCFADD6471160CAF3E6A&from tag=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 } }) } })

video

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

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

camera

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

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

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/we.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) } })

canvas

<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章总结

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

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

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

1.点击上方制作

2.随便选择一个模版

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.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.标题组件

标题组件用于在页面中设置标题，其属性面板如图所示

7.轮播组件

面板如图所示

单击“添加轮播分组”按钮进人管理后台，然后单击“轮播管理”一“新建分组”选项可以创建轮播分组如图所示

8.公告

9.添加组合

第6章总结

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 关闭。
在本节，我们将介绍常用的3个网络API

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

例如，通过 wx.requesl(0bject)获取百度(https:// www,baidu.com)首页的数据。(需要在微信公众平台小程序服务器配置中的request合法域名中添加“htps:// www.baidu.com”。)

示例代码如下：

<!-- 发起网络请求 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 }) } }) } })

运行效果：

通过wx.request(Object)的GET方法获取邮政编码对应的地址信息。示例代码如下:

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

 Page({ // postcode js文件 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', }, //方法为GET method:'GET', success:function(res){ //隐藏toast wx.hideToast(); if(res,this.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(0bject)的POST方法获取邮政编码对应的地址信息示例代码如下:

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

 Page({ // postcode js文件 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', }, //方法为GET method:'POST', success:function(res){ //隐藏toast wx.hideToast(); if(res,this.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请求，其相关参数如表所示

通过 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)接口 用于保存图片到系统相册。

以下代码都属于JS文件内的

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

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--> <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 */ .bgaudio{ height: 350rpx; width: 350rpx; margin-bottom: 100rpx; } .conrtol-view image{ height: 64rpx; width: 64rpx; margin: 30rpx; }

//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)用于保存文件到本地，其相关参数如表所示

部分示例代码如下：

// demo6.js文件 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
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10MB，其目的是提高加载速度。数据缓存的接口主要有4个:

wx.setStorage(0bject)或wx.setStorageSync(key,data)接口 用于设置缓存数据

wx.getStorage(0bject)或wx.getStorageSync(key)接口 用于获取缓存数据。

wx.removeStorage(Object)或wx.removeStorageSync(key)接口用于删除指定缓存数据。

wx.clearStorage()或wx.clearStorageSync()接口用于清除缓存数据。

其中，带 Symc 后缀的为同步接口，不带Sync后缀的为异步接口

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

示例代码如下：

// 保存数据 异步 js文件 wx.setStorage({ key:'name', data:'sdy', success:function(res){ console.log(res) } })

2. wx. setStorageSync ( key , data )

wx. setStorageSync(key,data)是同步接口，其参数只有 key 和 data。示例代码如下:

// 保存数据 同步 js文件 wx.setStorageSync('age', '25')

6.4.2 获取数据

1. wx. getStorage( Object )

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

示例代码如下：

//获取数据 异步 js文件 wx.getStorage({ key:'name', success:function(res){ console.log(res.data) }, })

2.wx. getStorageSync( key)

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

示例代码如下:

//获取数据 同步 js文件 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。其相关参数如表所示

//删除数据 异步 js文件 wx.removeStorage({ key: 'name', success:function(res){ console.log("删除成功") }, fail:function(){ console.log("删除失败") } })

2.wx.removeSlorageSyne( key )

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

示例代码如下:

//删除数据 同步 js文件 try{ wx.removeStorageSync('name') }catch(e){ //Do something when catch error },

6.4.4 清空数据

1.wx.clearStorage( )

wx.clearStorage()接口用于异步清理本地数据缓存，没有参数。示例代码如下:

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

2.wx.clearStroageSyne( )

wx.clearStroageSyne()接口用于同步清理本地数据缓存。示例代码如下:

//清空数据 同步 js文件 try{ wx.clearStorageSync() }catch(e){}

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

wx.getLocation(0bject)接口用于获取位置信息

wx.chooseLocation(0bject)接口用于选择位置信息

wx.openLocation(Object)接口用于通过地图显示位置

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

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

示例代码如下：

// 获取位置信息 wx.getLocation({ type:'wgs84', 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)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表所示

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', 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.gelSyslemlnfo(0bjeet)接口、wx.getSystemlnfoSync()接口 用于获取系统信息

（2）wx.getNetworkType(0bject)接口 用于获取网络类型。

（3）wx.onNetworkSiatusChange(CalBack)接口用于监测网络状态改变。

（4）wx.makePhoneCall(0bject)接口用于拨打电话。

（5）wx.seanCode(0bject)接口 用于扫描二维码。

6.6.1 获取系统信息
wx. getSystemlnfo(0bject)接口、wx.getSystemInfoSyne()接口分别用于异步和同步获取系统信息。其相关参数如表所示

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.res.syatem) console.log("客户端平台："+res.platform) }, })

6.6.2 网络状态

1.获取网络状态

wx.getNetworkType(0bject)用于获取网络类型，其相关参数如表所示

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

示例代码如下：

// 网络状态1获取网络状态 wx.getNetworkType({ success:function(res){ console.log(res.networkType) }, })

2.监听网络状态变化

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

示例代码如下：

// 网络状态2监听网络状态变化 wx.onNetworkStatusChange(function(res){ console.log("网络是否连接："+res.isConnected) console.log("变化后的网络类型："+res.networkType) })

6.6.3 拨打电话

wx.makePhoneCall(0bject)接口用于实现调用手机拨打电话，其相关参数如表所示

示例代码如下：

// 拨打电话 wx.makePhoneCall({ phoneNumber: '18092585093' }),

6.6.4 扫描二维码

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

扫码成功后，返回的数据如表所示。

示例代码如下：

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

6.7 本章小结

本章主要介绍了小程序的各类核心API，包括网络API、多媒体API、文件API、本地数据缓存API、位置信息API以及设备相关API等。通过对本章的学习，大家应深刻的理解各类API是开发各类小程序的核心

原文链接：https://blog.csdn.net/m0_70947504/article/details/138242183?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836858016800178548521%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836858016800178548521&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-27-138242183-null-null.nonecase&utm_term=%E8%A5%BF%E5%AE%89%E6%9C%8D%E5%8A%A1%E5%99%A8