第一章：微信小程序概述
小程序简介：
- 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫（二维码）或者搜一下（关键字）即可打开应用。
小程序的特征：
- 无需安装
- 触手可及
- 用完即走
- 无需卸载
小程序的使用场景：
- 简单的业务逻辑
- 低频度的使用场景
微信开发者工具界面功能介绍：
第一个微信小程序：
- index.json
{ "usingComponents": { } } - index.ts
// index.ts // 获取应用实例 const app = getApp<IAppOption>() const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' Component({ data: { motto: 'Hello World', userInfo: { avatarUrl: defaultAvatarUrl, nickName: '', }, hasUserInfo: false, canIUseGetUserProfile: wx.canIUse('getUserProfile'), canIUseNicknameComp: wx.canIUse('input.type.nickname'), }, methods: { // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs', }) }, onChooseAvatar(e: any) { const { avatarUrl } = e.detail const { nickName } = this.data.userInfo this.setData({ "userInfo.avatarUrl": avatarUrl, hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl, }) }, onInputChange(e: any) { const nickName = e.detail.value const { avatarUrl } = this.data.userInfo this.setData({ "userInfo.nickName": nickName, hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl, }) }, getUserProfile() { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, }, }) - index.wxml
<!--index.wxml--> <scroll-view class="scrollarea" scroll-y type="list"> <view class="container"> <view class="userinfo"> <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}"> <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> <image class="avatar" src="{{userInfo.avatarUrl}}"></image> </button> <view class="nickname-wrapper"> <text class="nickname-label">昵称</text> <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" /> </view> </block> <block wx:elif="{{!hasUserInfo}}"> <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button> <view wx:else> 请使用2.10.4及以上版本基础库 </view> </block> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> </scroll-view> - index.wxss
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; width: 80%; } .userinfo-avatar { overflow: hidden; width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .usermotto { margin-top: 200px; } .avatar-wrapper { padding: 0; width: 56px !important; border-radius: 8px; margin-top: 40px; margin-bottom: 40px; } .avatar { display: block; width: 56px; height: 56px; } .nickname-wrapper { display: flex; width: 100%; padding: 16px; box-sizing: border-box; border-top: .5px solid rgba(0, 0, 0, 0.1); border-bottom: .5px solid rgba(0, 0, 0, 0.1); color: black; } .nickname-label { width: 105px; } .nickname-input { flex: 1; }项目运行结果：
第二章：微信小程序开发
小程序的基本目录结构：
主题文件：
微信小程序的主体文件部分由3个文件组成，这三个文件必须放在项目的主目录中，负责小程序的主体配置，它们的名称是固定的：
- app.js 小程序的逻辑文件，主要用于注册小程序的全局实例。
- app.json 小程序的公共设置文件，配置小程序的全局设置。
- app.wxss 小程序主样式表文件，类似HTML的css文件。
页面文件：
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径和文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到对应的资源进行数据绑定。
- .js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。
- .wxml文件 页面结构文件，用于设置页面的布局、数据绑定等，类似于HTML页面中的html文件。
- .wxss文件 页面样式表文件，用于定义本页面中用到的各类样式表。
- .json 页面配置文件。
小程序的开发框架：
微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScript API，让开发者能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。
视图层：
MINA框架的视图层有WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式。
逻辑层：
逻辑层用于处理事务逻辑，对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。
小程序系统默认提供的app.js文件内容如下：
// app.ts
App<IAppOption>({
globalData: {},
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
console.log(res.code)
// 发送 res.code 到后台换取 openId, sessionKey, unionId
},
})
},
})数据层：
数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。
- 页面临时数据或缓存
- 文件存储(本地存储)
- 网络存储与调用
创建小程序页面
在小程序下的pages目录下新建demo文件夹，在demo文件夹下新建4个文件：demo.js，demo.json，demo.wxml，demo.wxss。
完善每个页面的内容：
//demo.js
Page({
})//demo.json
{
}//demo.wxml
欢迎大家学习微信小程序开发//demo.wxss
在 app.json文件中，添加我们页面文件
{
"pages":[
//添加页面文件
"pages/demo/demo",
"pages/logs/logs"
],
"window":{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序window功能演示",
"backgroundColor": "#ccc",
"backgroundTextStyle": "light"
},
"tabBar":{
"color": "#666666",
"selectedColor": "#ff0000",
"borderStyle":"black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/logs/logs",
"iconPath": "images/avatar_02.jpg",
"selectedIconPath": "images/avatar_09.jpg",
"text": "测试Demo1"
},
{
"pagePath": "pages/demo/demo",
"iconPath": "images/avatar_03.jpg",
"selectedIconPath": "images/avatar_04.jpg",
"text": "测试Demo2"
}
]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": false
}运行小程序，执行结果：
配置文件：
全局配置文件：
小程序的全局配置保存在全局配置文件app.json中，使用全局配置文件来配置页面文件pages的路径，设置窗口window的表现，设定网络请求API的超时时间值networkTimeout以及配置多个切换页等。
全局配置项的相关描述：
全局配置文件内容的整体结构：
{
//设置页面路径
"pages":[],
//设置默认页面的窗口表现
"window":{},
//设置底部tab的表现
"tabBar":{},
//设置网络请求API的超时时间值
"networkTimeout":{},
//设置是否开启debug模式
"debug":false
}- pages配置项：pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的"路径"+"文件名"。pages配置项是必填项。
{ "pages":[ "pages/demo/demo", "pages/index/index" ] } - window配置项：window配置项负责设置小程序状态栏，导航条，标题，窗口背景色等系统样式。
- tabBar配置项：当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。
其中，list(列表)接受数组值，数组中的每一项也都是一个对象。
- networkTimeout配置项：小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中进行单独设置。
- debug配置项：debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。
app.json全局配置文件代码：
{
"pages":[
"pages/demo/demo",
"pages/logs/logs"
],
"window":{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序window功能演示",
"backgroundColor": "#ccc",
"backgroundTextStyle": "light"
},
"tabBar":{
"color": "#666666",
"selectedColor": "#ff0000",
"borderStyle":"black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/logs/logs",
"iconPath": "images/avatar_02.jpg",
"selectedIconPath": "images/avatar_09.jpg",
"text": "测试Demo1"
},
{
"pagePath": "pages/demo/demo",
"iconPath": "images/avatar_03.jpg",
"selectedIconPath": "images/avatar_04.jpg",
"text": "测试Demo2"
}
]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": false
}小程序运行效果图：
页面配置文件：
页面配置文件*.json只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件app.json中的配置值。
页面中的window配置只需书写配置项，不必书写window：
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "页面window配置演示",
"backgroundColor": "#eee",
"backgroundTextStyle": "light"
}逻辑层文件：
项目逻辑文件：
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数，全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。
- onLaunch()：当小程序初始化完成时，自动化出发onLaunch，且只触发一次。
- onShow()：当小程序启动(或从后台进入前台显示)时，自动触发onShow。
- onHide()：当小程序从前台进入后台时，自动触发onHide。
- 其他：开发者自定义的属性或方法，用this可以访问。
App({ //小程序初始化时执行 onLaunch(){ console.log("小程序初始化"); }, //小程序启动时执行 onShow(){ console.log("小程序启动"); }, //小程序隐藏时执行 onHide(){ console.log("小程序隐藏") } })
小程序编译运行结果：
页面逻辑文件：
页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等，每个页面文件都有一个对应的逻辑文件，逻辑文件时运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过DOM操作改变页面，只能采用数据绑定和事件响应来实现。
- 设置初始数据：设置初始数据是对页面的第一次数据绑定。
Page({ // 定义当前页面的初始数据 data:{ name:"陈逸飞", age:22, num:10, birthday:[{year:2002},{month:1},{day:4}], object:{hobby:"computer"}, students:[ {nickname:'tom',height:172,weight:120}, {nickname:'kary',height:166,weight:100} ] } })我们可以在wxml文件中取出在js文件中定义的初始数据。
<view>欢迎大家学习微信小程序开发</view> <view>这是我在demo.js中定义的数据:</view> <!--我们可以在wxml页面中绑定在js页面中定义的数据--> <view>姓名：{{name}}</view> <view>年龄：{{age}}</view> <view>出生日期：{{birthday[0].year}}年 {{birthday[1].month}}月 {{birthday[2].day}}日 </view> <view>爱好：{{object.hobby}}</view>编译运行小程序运行结果：
- 定义当前页面的生命周期函数：在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad：页面加载函数。当页面加载完成后调用该函数。
onSHow：页面显示函数。当页面显示时调用该函数。
onReady：页面数据绑定函数。当页面初次数据绑定完成时调用该函数。
onHide：页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时调用该函数。
onUnload：页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。
- 定义事件处理函数：开发者在Page()中自定义的函数成为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page()中定义的事件处理函数。
- 使用setData更新数据：小程序在Page对象中封装了一个名为setData()的函数，用来更新data中的数据。
页面结构文件：
页面结构文件wxml是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。
数据绑定：
小程序在进行页面数据绑定时，框架会将wxml文件与逻辑文件中的data进行动态绑定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。
- 简单绑定
- 数据运算
//在页面逻辑文件demo.js中定义数据 Page({ // 定义当前页面的初始数据 data:{ name:"陈逸飞", age:22, num:10, birthday:[{year:2002},{month:1},{day:4}], object:{hobby:"computer"}, students:[ {nickname:'tom',height:172,weight:120}, {nickname:'kary',height:166,weight:100} ] } })//在页面结构文件demo.wxml中完成简单数据绑定与运算 <view>欢迎大家学习微信小程序开发</view> <view>这是我在demo.js中定义的数据:</view> <!--我们可以在wxml页面中绑定在js页面中定义的数据--> <view>姓名：{{name}}</view> <view>年龄：{{age}}</view> <view>出生日期：{{birthday[0].year}}年 {{birthday[1].month}}月 {{birthday[2].day}}日 </view> <view>爱好：{{object.hobby}}</view> <!--也可以对js中定义的数据进行运算--> <view>算数运算：{{num + age}}</view> <view>逻辑运算：{{num == 10}}</view> <view>逻辑运算：{{num == 20}}</view> <view>三元运算：{{num == 20 ? "m1kasaaa" : "lum1ngfei"}}</view>编译运行小程序：
条件数据绑定：
条件数据绑定就是根据绑定白哦大师的逻辑值来判断是否数据绑定当前组件。
- wx:if条件数据绑定
- block wx:if条件数据绑定
<!--对js中定义的数据进行if-elseif-else条件判断--> <view wx:if="{{age>22}}">gt</view> <view wx:elif="{{age<22}}">lt</view> <view wx:else>eq</view>
列表数据绑定：
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
- wx:for
- block wx:for
<!--对js中定义的数据进行for循环遍历--> <block wx:for="{{students}}"> <view> <text>姓名：{{item.nickname}}、</text> <text>身高：{{item.height}}、</text> <text>体重：{{item.weight}}</text> </view> </block>
模板：
在小程序中，如果要经常使用几个组件的组合(如”登录“选项)，通常把这几个组件结合定义为一个模板，以后再u需要的文件中直接使用这个模板。
<!--定义模板并指定模板名称-->
<template name="stus">
<!--对js中定义的数据进行for循环遍历-->
<block wx:for="{{students}}">
<view>
<text>姓名：{{item.nickname}}、</text>
<text>身高：{{item.height}}、</text>
<text>体重：{{item.weight}}</text>
</view>
</block>
</template>
<!--使用我们定义的模板-->
<template is="stus" data="{{students}}"></template>
页面引用方式：
在wxml文件中，不仅可以引用模板文件，还可以引用普通的页面文件。
- import方式
- include方式
页面事件：
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
冒泡事件：
页面样式文件：
页面样式文件(wxss)是基于css扩展的样式语言，用于描述wxml的组成样式，静定wxml的组件如何显示。
wxss常用属性：
小结：
本章首先讲解了小程序的目录结构，然后通过目录结构介绍了小程序的开发框架，最后主要介绍了小程序文件的类型及其配置。
第三章：页面布局：
微信小程序的视图层由wxml和wxss组成。其中，wxss(WeiXin Style Sheets)是基于css拓展的样式语言，用于描述wxml的组成样式，决定wxml的组件如何显示。wxss具有css的大部分特性。
盒子模型：
盒子模型就是我们在页面设计中经常用到的一种思维模型。在css中，一个独立的盒子模型由内容(Content)、内边距(padding)、边框(border)和外边距(margin)4个部分组成。
此外对padding、border、margin可以进一步细化为上、下、左、右4个部分，在css中可以进行分别设置。
图中个元素的含义如下：
- width和height：内容的宽度和高度。
- padding-top、padding-right、padding-bottom、padding-left：上内边距、右内边距、下内边距、左内边距。
- border-top、border-right、border-bottom、border-left：上边框、右边框、下边框、左边框。
- margin-top、margin-right、margin-bottom、margin-left：上外边距、右外边距、下外边距、左外边距。
<!--pages/demo2/demo2.wxml--> <view class="box">pages/demo2/demo2.wxml</view>/* pages/demo2/demo2.wxss */ .box{ width: auto; padding: 5px; margin: 10px; background-color: yellowgreen; }// pages/demo2/demo2.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })//demo2.json { "usingComponents": {} }运行结果图：
块级元素与行内元素：
元素按显示方式分为块级元素、行内元素和行内块元素，他们的显示方式有display属性控制。
块级元素：
块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。
块级元素的特点如下：
- 一个块级元素占一行。
- 块级元素的默认高度由内容决定，除非自定义高度。
- 块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
- 块级元素的宽度、高度、外边距以及内边距都可以自定义设置。
- 块级元素可以容纳块级元素和行内元素。
<view></view>组件默认为块级元素，使用<view></view>组件演示盒子模型以及块级元素示例代码如下：
<!--pages/demo2/demo2.wxml-->
<view class="box">pages/demo2/demo2.wxml</view>
<!--使用<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: 80px;">块级元素3</view>
<!--块级元素的高度随内容决定，内容为块级元素-->
<view style="border: 1px solid rgb(162, 0, 255);">
<view style="height: 60px;">块级元素4</view>
</view>
<!--块级元素的高度随内容决定，内容元素为文本元素，块级元素的宽度为100px-->
<view style="border: 1px solid #f00;width: 100px;background-color: #ccc;">父级元素的高度随内容决定，内容为文本</view>项目运行结果图：
行内元素：
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，他们不占有独立的区域，仅靠自身内容支撑结构，一般可以不设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为inline后，该元素就被设置为行内元素。
行内元素的特点如下：
- 行内元素不能被设置高度和宽度，其宽度和高度由内容决定。
- 行内元素内不能放置块级元素，只能容纳文本和其他行内元素。
- 同一块内，行内元素和其他行内元素放置在同一行。
<text></text>组件默认为行内元素，使用<view></view>以及<text></text>组件演示盒子模型和行内元素的示例代码如下：
<!--使用<view></view>和<text></text>组件演示盒子模型以及行内元素-->
<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>项目运行结果图：
行内块元素：
当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置宽度、高度、内边距和外边距。
示例代码如下：
<!--演示行内块元素-->
<view>
元素显示方式的<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">块级元素、行内元素、行内块元素</view>三种类型
</view>项目运行结果图：
浮动与定位：
元素的浮动与清除：
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在css中，通过float属性来定义浮动，其基本格式如下：
- {float:none|left|right}
其中，none——默认值，表示元素不浮动。
left——元素向左浮动。
right——元素向右浮动。
<!--元素的浮动演示-->
<view>box1、box2、box3 没浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<viwe>box1左浮动</viwe>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="border: 1px solid #0f0;">box2</view>
<view style="border: 1px solid #0f0;">box3</view>
</view>
<view>box1、box2左浮动</view>
<view style="border: 1px solid #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="border: 1px solid #0f0;">box3</view>
</view>
<view>box1、box2、box3左浮动</view>
<view style="border: 1px solid #f00;padding: 5px;">
<view style="float: left;border: 1px solid #0f0;">box1</view>
<view style="float:left;border: 1px solid #0f0;">box2</view>
<view style="float: left;border: 1px solid #0f0;">box3</view>
</view> 项目运行结果图：
此时我们发现，当box3左浮动后，父元素的边框未能包裹box3的元素。此时就需要通过清除浮动来解决。
由于浮动元素不再占用原文档流的位置，因此他会对页面中其他元素的排列产生影响。在css中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下：
- {clear:left|right|both|none}
其中，left——清除左边浮动的影响，也就是不允许左侧有浮动元素。
right——清除右边浮动的影响，也就是不允许右侧有浮动元素。
both——同时清除左右两侧浮动的影响。
none——不清除浮动。
<!--clear属性清除浮动-->
<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>项目运行结果图：
另外，我们还可以在父元素外添加一个空元素，实现父元素包裹浮动元素：
//demo2.wxml
<!--通过在父元素外添加一个空元素，实现父元素包裹浮动元素-->
<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>//demo2.wxss
.clear_float::after{
display: block;
clear: both;
height: 0;
content: "";
}项目运行结果图：
元素定位：
浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在css中，通过position属性可以实现对页面元素的精确定位。基本格式如下：
- {position:static|relative|absolute|fixed}
其中，static——默认值，该元素按照标准流进行布局。
relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍然以标准流的方式对待他。
absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，他对其后的兄弟盒子的定位没有影响。
fixed——固定定位，相对于浏览器窗口进行定位
<!--对box1、box2、box3进行元素静态定位，三个元素均为static定位-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>项目运行结果图：
<!--box2元素相对定位:relative top:30px left:30px-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: relative;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
项目运行结果图：
<!--box2元素绝对定位:absolute top:30px left:30px-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>项目运行结果图：
<!--box2元素固定定位:fixed top:30px left:30px-->
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>项目运行结果图：
<!--对box1、box2、box3的父元素采用相对定位，将box2采用绝对定位-->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>项目运行结果图：
<!--对box1、box2、box3的父元素采用相对定位，将box2采用固定定位-->
<view style="position: relative;top: 50px;left: 50px;border: 1px solid #00f;">
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
</view>项目运行结果图：
flex布局：
flex布局可以简单快速的完成各种可以伸缩的设计，以便更好的支持响应式布局。flex布局主要由容器和项目组成，采用flex布局的元素成为flex容器，flex布局的所有直接子元素自动成为容器的成员，策划归纳为flex项目。
容器属性：
- display：用于指定元素是否为flex布局，语法格式为：.box{display:flex|inline-flex;}
- flex-direction：用于设置主轴的方向，即项目排列的方向，语法格式为：.box{flex-direction:row|row-reverse|column|column-reverse;}
- flex-wrap：用来指定当前项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下：.box{flex-wrap:nowrap|wrap|wrap-reverse;}
- flex-flow：是flex-direction和flex-wrap的简写形式，默认值为row，nowrap，语法格式如下：.box{flex-flow:<flex-direcion>||<flex-wrap>;}
- justify-content：用于定义项目在主轴上的对齐方式，语法格式如下：.box{justify-content:flex-start|flex-end|center|space-between|space-around;}
- align-items：用于指定项目在交叉轴上的对齐方式，语法格式如下：.box{align-items:flex-start|flex-end|center|baseline|strectch;}
<!--wxml文件--> <view class="cont1"> <view class="item">1</view> <view class="item item2">2</view> <view class="item item3">3</view> <view class="item item4">4</view> </view>// wxss文件 .cont1{ display: flex; flex-direction: row; align-items: baseline; } .item{ background-color: #ccc; border:1px solid #f00; height: 100px; width: 50px; margin: 2px; } .item2{ height: 80px; } .item3{ display: flex; height:50px; align-items: flex-end; } .item4{ height: 120px; }
-
align-content：用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式，如果只有一根轴线，该属性不起作用。语法格式如下：.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}
项目属性：
- order：定义项目的排列顺序，数值越小，排列越靠前，默认值为0.语法格式如下：.item{order:<number>;}
<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item" style="order: 1;">1</view> <view class="item" style="order: 3;">2</view> <view class="item" style="order: 2;">3</view> <view class="item">4</view> </view>
- flex-grow：定义项目的放大比例，默认值为0，即不放大。语法格式如下：.item{flex-grow:<number>;}
<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item">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>
- flex-shrink：定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小，语法格式如下：.item{flex-shrink:<number>;}
<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item">1</view> <view class="item" style="flex-shrink: 2;">2</view> <view class="item" style="flex-shrink: 1;">3</view> <view class="item" style="flex-shrink: 4;">4</view> </view>
- flex-basis：定义伸缩项目的基准值，剩余的空间将按比例进行缩放，他的默认值是auto(即项目的原本大小)。语法格式如下：.item{}flex-basis:<number>|auto;}
<view class="cont1"> <view class="item">1</view> <view class="item">2</view> <view class="item">3</view> <view class="item">4</view> </view> <view class="cont1"> <view class="item">1</view> <view class="item" style="flex-basis: 100px;">2</view> <view class="item" style="flex-basis: 200px;">3</view> <view class="item">4</view> </view>
- flex：是flex-grow、flex-shrink和flex-basis的简写，其默认值分别为0、1、auto。语法格式如下：.item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}
- align-self：用来指定单独的伸缩项目在交叉轴上的对齐方式，该属性会重写默认的对齐方式。语法格式如下：.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}
本章小结：
本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性。
第四章：页面组件
组件的定义及属性：
组件是页面视图层(WXML)的基本组成单位，组件组合可以构成功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。
每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：<标签名 属性名="属性值">内容</标签名>
组件通过属性来进一步细化。不同的组件可以有不同的属性，但他们也有一些共用属性，如id、class、style、hidden、data-*、bind*/catch*等
- id：组件的唯一标识，保持整个页面唯一，不常用
- class：组件的样式类，对应wxss中定义的样式
- style：组件的内联样式，可以动态设置内联样式
- hidden：组件是否显示，所有组件默认显示
- data-*：自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值
- bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数
容器组件视图：
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper组件。
view：
view组件是块级组件，没有特殊功能，主要用于布局展示，相当于html中的div，是布局中最基本的用户界面(User Interface UI)组件，通过设置view的css属性可以实现各种复杂的布局。view组件的特有属性如表所示：
通过<view></view>组件实现页面布局示例代码如下：
<!--pages/chapter04/viewDemo/viewDemo.wxml-->
<view style="text-align: center;">默认flex布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00; flex-grow: 1;">1</view>
<view style="border: 1px solid #f00; flex-grow: 1;">2</view>
<view style="border: 1px solid #f00; flex-grow: 1;">3</view>
</view>
<view style="text-align: center;">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
<view style="border: 1px solid #f00;">1</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">1</view>
<view style="display: flex;flex-direction: column;flex-grow: 1;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
小程序运行结果图：
scroll-view：
通过设置scroll-view组件的相关属性可以实现滚动视图的功能，其属性如表所示：
通过scroll-view组件可以实现下拉刷新和上拉加载等更多，代码如下：
<!--pages/chapter04/scrollViewDemo/scrollViewDemo.wxml-->
<view class="container" style="padding: 0rpx;">
<!--垂直滚动，这里必须设置高度-->
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">加载中</loading>
</view>
</view>
// pages/chapter04/scrollViewDemo/scrollViewDemo.js
var url = "http://www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
// 请求数据
var loadMore = function(that){
that.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(){
// 这里要注意，微信的scroll-view必须设置高度才能监听滚动事件，所以需要在页面的onLoad事件中为scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success: (res) => {
that.setData({
scrollHeight:res.windowHeight
});
},
});
loadMore(that);
},
// 页面滑动到底部
bindDownLoad:function(){
var that = this;
loadMore(that);
console.log("lower");
},
scroll:function(event){
// 该方法绑定了页面滚动时的事件，这里记录了当时的position.y的值，为了在请求数据后将页面定位到这里
this.setData({
scrollTop:event.detail.scrollTop
});
},
topLoad:function(event){
// 该方法绑定了页面滑动到顶部的事件，然后做页面上拉刷新
page = 0;
this.setData({
list:[],
scrollTop:0
});
loadMore(this);
console.log("lower")
}
})/* pages/chapter04/scrollViewDemo/scrollViewDemo.wxss */
.userinfo{
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar{
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname{
color:#aaa;
}
.usermotto{
margin-top: 200px;
}
scroll-view{
width: 100%;
}
.item{
width: 90%;
height: 300rpx;
margin: 200rpx 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;
} 小程序运行结果图：(网址失效)
swiper：
swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完成的swiper组件由<swiper/>和<swiper-item/>两个标签组成，它们不能单独使用。<swiper/>中只能放置一个或多个<swiper-item/>，若放置其他组件则会被删除；<swiper-item/>内部可以放置任何组件，默认宽高自动设置为100%。swiper组件的属性如表所示：
<swiper-item/>组件为滑块项组件，尽可以被放置在<swiper/>组件中，宽高尺寸默认按100%显示。
设置swiper组件，可以实现轮播图效果，代码如下：
<!--pages/chapter04/swiperDemo/swiperDemo.wxml-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<swiper-item>
<image src="../../../images/avatar_01.jpg" style="width:100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../../images/avatar_02.jpg" style="width:100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../../images/avatar_03.jpg" style="width:100%;"></image>
</swiper-item>
</swiper>
小程序运行结果图：
基础内容组件：
基础内容组包括icon、text和progress，主要用于在视图页面中展示图标，文本和进度条等信息。
icon：
icon组件即图表组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表所示：
示例代码如下：
// pages/chapter04/iconDemo/iconDemo.js
Page({
data:{
iconType:["success","success_no_circle","info","warn","waiting","cancel","download","search","clear"],
iconSize:[10,20,30,40],
iconColor:["#f00","#0f0","#00f"]
}
})<!--pages/chapter04/iconDemo/iconDemo.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>
小程序运行结果图：
text：
text组件用于展示内容，类似html中的<span>，text组件中的内容支持长按选中，支持转义字符"\"，属于行内元素。text组件的属性如表所示：
示例代码如下：
<!--pages/chapter04/textDemo/textDemo.wxml-->
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{25-x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}"> </text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y <= 2*x-1}}">
<text>*</text>
</block>
</block>
</view>
</block>
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{19+x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}"> </text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y <= 11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>
// pages/chapter04/textDemo/textDemo.js
Page({
data:{
x:[1,2,3,4,5],
y:[1,2,3,4,5,6,7,8,9]
}
})小程序运行结果图：
progress:
progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。progress组件属于块级元素，其属性如表所示：
示例代码如下：
<!--pages/chapter04/progressDemo/progressDemo.wxml-->
<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组件用来实现用户和应用之间的监护，同时按钮的颜色起引导作用。一般来说，在一个程序总一个按钮至少有3种形态：默认点击(default)，建议点击(primary)，谨慎点击(warn)。在构建项目时，应在合适的场景使用合适的按钮，当<button>被<form>包裹时，可以通过设置form-type属性来触发表单对应的事件。button组件的属性如表所示：
示例代码如下：
<!--pages/chapter04/buttonDemo/buttonDemo.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>
// pages/chapter04/buttonDemo/buttonDemo.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})
}
})小程序运行结果图：
radio:
单选框是用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/>(单项选择器)和<radio/>(单选项目)两个组件组合而成，一个包含多个<radio/>的<radio-group/>表示一组单选项，在同一组的单选项中 <radio/>是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。他们的属性如表所示：
示例代码如下：
<!--pages/chapter04/radioDemo/radioDemo.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>// pages/chapter04/radioDemo/radioDemo.js
Page({
data:{
radios:[{name:'java',value:'JAVA'},
{name:'python',value:'Python',checked:'true'},
{name:'php',value:'PHP'},
{name:'swif',value:'Swif'}],
city:'',
lang:''
},
cityChange: function(e){
this.setData({city:e.detail.value})
},
radioChange: function(event){
this.setData({lang:event.detail.value});
console.log(event.detail.value);
}
})小程序运行结果图：
checkbox:
复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox-group/>(多项选择器)和<checkbox/>(多选项目)两个组件组合而成。一个<checkbox-group/>表示一组选项，可以在一组选项中选中多个选项。他们的属性如表所示：
示例代码如下：
<!--pages/chapter04/checkboxDemo/checkboxDemo.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>
// pages/chapter04/checkboxDemo/checkboxDemo.js
Page({
data:{
citys:[{name:'km',value:'昆明'},
{name:'sy',value:'三亚'},
{name:'zh',value:'珠海',checked:'true'},
{name:'dl',value:'大连'}],
city:""
},
cityChange: function(e){
console.log(e.detail.value);
var city = e.detail.value;
this.setData({city:city});
}
})小程序运行结果图：
switch：
switch组件的作用类似开关选择器，其属性如表所示：
示例代码如下：
<!--pages/chapter04/switchDemo/switchDemo.wxml-->
<view>
<switch bindchange="sw1">{{var1}}</switch>
</view>
<view>
<switch bindchange="sw2" checked>{{var2}}</switch>
</view>
<view>
<switch bindchange="sw3" type="checkbox">{{var3}}</switch>
</view>
// pages/chapter04/switchDemo/switchDemo.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?'已选':'未选'});
}
}) 小程序运行结果图：
slider：
slider组件为滑动选择器，可以通过滑动来设置相应的值，其属性如表所示：
示例代码如下：
<!--pages/chapter04/sliderDemo/sliderDemo.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>
// pages/chapter04/sliderDemo/sliderDemo.js
Page({
data:{
size:'20'
},
sliderChange: function(e){
this.setData({size:e.detail.value})
}
})小程序运行结果图：
picker:
picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：seletor(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市选择器)。
普通选择器：
示例代码如下：
<!--pages/chapter04/pickerDemo/pickerDemo01/pickerDemo01.wxml-->
<view>-----range为数组-----</view>
<picker range="{{array}}" value="index1" bindchange="arrayChange">
当前选择：{{array[index1]}}
</picker>
<view>-----range为数组对象-----</view>
<picker range="{{objArray}}" value="{{index2}}" range-key="name" bindchange="objArrayChange">
当前选择：{{objArray[index2].name}}
</picker>
// pages/chapter04/pickerDemo/pickerDemo01/pickerDemo01.js
Page({
/**
* 页面的初始数据
*/
data: {
array:["java","python","c","c#"],
objArray:[{id:1,name:"java"},{id:2,name:"python"},{id:3,name:"c"},{id:4,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
})
}
})小程序运行结果图：
多列选择器：
多列选择器(mode=multiSelector)允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如表所示：
简单实现省、市、县三级联动示例代码如下：
<!--pages/chapter04/pickerDemo/pickerDemo02/pickerDemo02.wxml-->
<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view>
当前选择：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
// pages/chapter04/pickerDemo/pickerDemo02/pickerDemo02.js
Page({
/**
* 页面的初始数据
*/
data: {
multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
multiIndex:[0,0,0]
},
// 绑定MultiPicker
bindMultiPickerChange: function(e){
console.log('picker发送选择改变，携带值为：',e.detail.value);
this.setData({
multiIndex:e.detail.value
})
},
// 绑定MultiPickerColumn
bindMultiPickerColumnChange: function(e){
console.log('修改的列为：',e.detail.column,'，值为：',e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch(e.detail.column){
case 0:
switch(data.multiIndex[0]){
case 0:
data.multiArray[1] = ['西安市','汉中市','延安市'];
data.multiArray[2] = ['雁塔区','长安区'];
break;
case 1:
data.multiArray[1] = ['深圳市','珠海市'];
data.multiArray[2] = ['南山区','罗湖区'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch(data.multiIndex[0]){
case 0:
switch(data.multiIndex[1]){
case 0:
data.multiArray[2] = ['雁塔区','长安区'];
break;
case 1:
data.multiArray[2] = ['汉台区','南郑区'];
break;
case 2:
data.multiArray[2] = ['宝塔区','子长县','延川县'];
break
}
break;
case 1:
switch(data.multiIndex[1]){
case 0:
data.multiArray[2] = ['南山区','罗湖区'];
break;
case 1:
data.multiArray[2] = ['香洲区','斗门区'];
break;
}
break;
}
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
}
})小程序运行结果图：
时间选择器、日期选择器：
时间选择器(mode=time)可以用于从提供的时间选项中选择相应的时间。其属性如表所示：
日期选择器(mode=date)可以用于从提供的日期选项中选择相应的日期，其属性如表所示：
示例代码如下：
<!--pages/chapter04/pickerDemo/pickerDemo03/pickerDemo03.wxml-->
<view>
<picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">
选择的日期：{{date}}
</picker>
</view>
<view>
<picker mode="time" start="{{starttime}}" end="{{endtime}}" value="{{time}}" bindchange="changetime">
选择的时间：{{time}}
</picker>
</view>
// pages/chapter04/pickerDemo/pickerDemo03/pickerDemo03.js
Page({
/**
* 页面的初始数据
*/
data: {
startdate:2000,
enddate:2050,
date:'2018',
starttime:'00:00',
endtime:'12:59',
time:'8:00'
},
changedate: function(e){
this.setData({date:e.detail.value});
console.log(e.detail.value);
},
changetime: function(e){
this.setData({time:e.detail.value});
console.log(e.detail.value);
}
})小程序运行结果图：
省市选择器：
省市选择器(mode=region)是小程序的新版本提供的选择快速地区的组件，其属性如表所示：
示例代码如下：
<!--pages/chapter04/pickerDemo/pickerDemo04/pickerDemo04.wxml-->
<picker mode="region" value="{{region}}" custom-item="{{customitem}}" bindchange="changeregion">
选择省市区：{{region[0]}},{{region[1]}},{{region[2]}}
</picker>
// pages/chapter04/pickerDemo/pickerDemo04/pickerDemo04.js
Page({
/**
* 页面的初始数据
*/
data: {
region:['陕西省','西安市','长安区'],
cuntomitem:'全部'
},
changeregion: function(e){
console.log(e.detail.value);
this.setData({
region:e.detail.value
})
}
})小程序运行结果图：
picker-view:
picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过<picker-view-column/>自定义设置。picker-view组件的属性如表所示：
示例代码如下：
// pages/chapter04/pickViewDemo/pickViewDemo.js
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] // 定位到2018年1月1日
},
bindChange: function(e){
const val = e.detail.value;
this.setData({
year:this.data.years[val[0]],
month:this.data.months[val[1]],
day:this.data.days[val[2]]
})
}
})<!--pages/chapter04/pickViewDemo/pickViewDemo.wxml-->
<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>
小程序运行结果图：
input:
input组件为输入框，用户可以输入相应的信息，其属性如表所示：
示例代码如下：
// pages/chapter04/inputDemo/inputDemo.js
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
}
// 或者直接返回字符串，光标再最后边
// return value.replace(/11/g,'2')
}
})<!--pages/chapter04/inputDemo/inputDemo.wxml-->
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这是个只有在按钮点击的时候才聚焦的input" focus="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<input placeholder="此input最大输入长度为10" maxlength="10"/>
<view class="section_title">你输入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="此input输入同步到view中"/>
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2"/>
<input password type="number"/>
<input password type="text"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>
小程序运行结果图：
textarea:
textarea组件为多行输入框组件，可以实现多行内容的输入。textarea组件的属性如表所示：
示例代码如下：
// pages/chapter04/textareaDemo/textareaDemo.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);
}
})<!--pages/chapter04/textareaDemo/textareaDemo.wxml-->
<textarea bindblur="bindTextAreaBlur" auto-height="true" placeholder="自动变高"/>
<textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"/>
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus="true"/>
<textarea placeholder="这个只有在点击按钮时才会聚焦" focus="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form中的textarea" name="textarea"/>
<button form-type="submit">提交</button>
</form>
小程序运行结果图：
label:
label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id，或者将空间放在该标签下，当点击label组件时，就会触发对应的控件。for属性的优先级高于内部控件。
目前，label组件可以绑定的控件有<button/>、<checkbox/>、<radio/>、<switch/>。示例代码如下：
// pages/chapter04/labelDemo/labelDemo.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
});
}
})<!--pages/chapter04/labelDemo/labelDemo.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>
小程序运行结果图：
form：
form组件为表单组件，用来将组件内的用户输入信息进行提交。当<form/>表单中的formType为submit的<button/>组件时，会将表单组件中的value值进行提交。form组件的属性如表所示：
示例代码如下：
// pages/chapter04/formDemo/formDemo.js
Page({
hobby:'',
/**
* 页面的初始数据
*/
data: {
hobbies:[
{name:'jsj',value:'计算机',checked:'true'},
{name:'music',value:'听音乐'},
{name:'game',value:'玩电竞'},
{name:'swim',value:'游泳'}
]
},
formSubmit: function(e){
console.log('form发生了submit事件，携带数据为：',e.detail.value);
},
formReset: function(e){
console.log('form发生了reset事件');
}
})<!--pages/chapter04/formDemo/formDemo.wxml-->
<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>
<veiw>
爱好：
<checkbox-group name="hobby">
<label wx:for="{{hobbies}}">
<checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.value}}</checkbox>
</label>
</checkbox-group>
</veiw>
<button form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>
小程序运行结果图：
多媒体组件：
多媒体组件包括image(图像)、audio(音频)、video(视频)、camera(相机)组件，使用这些组件，可以让页面更具有吸引力。
image：
image组件为图像组件，与HTML中的<img/>类似，系统默认image组件的宽度为300px，高度为250px，image组件的属性如表所示：
image组件中的mode属性有13中模式，其中缩放模式有4种，裁剪模式有9种。
缩放模式：
- scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。
- aspectFit：保持纵横比缩放图片，使图片的长边能完全显现出来。也就是说，可以将图片完整地显示出来。
- aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向使完整的，在另一个方向将会发生截取。
- widthFix：宽度不变，高度自动变化，保持原图宽高比不变
示例代码如下：
// pages/chapter04/imageDemo/imageDemo01/imageDemo01.js
Page({
/**
* 页面的初始数据
*/
data: {
modes:['scaleToFill','aspectFit','aspectFill','widthFix']
}
})<!--pages/chapter04/imageDemo/imageDemo01/imageDemo01.wxml-->
<block wx:for="{{modes}}">
<view>当前图片的模式是：{{item}}</view>
<image mode="{{item}}" src="../../../../images/avatar_17.jpg"/>
</block>
小程序运行结果图：
裁剪模式：
- top：不缩放图片，只显示图片的顶部区域。
- bottom：不缩放图片，只显示图片的底部区域。
- center：不缩放图片，只显示图片的中间区域。
- left：不缩放图片，只显示图片的左边区域。
- right：不缩放图片，只显示图片的右边区域。
- top_left：不缩放图片，只显示图片的左上边区域。
- top_right：不缩放图片，只显示图片的右上边区域。
- bottom_left：不缩放图片，只显示图片的左下边区域。
- bottom_right：不缩放图片，只显示图片的右下边区域。
示例代码如下：
// pages/chapter04/imageDemo/iamgeDemo02/imageDemo02.js
Page({
/**
* 页面的初始数据
*/
data: {
modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
}
})<!--pages/chapter04/imageDemo/iamgeDemo02/imageDemo02.wxml-->
<block wx:for="{{modes}}">
<view>当前图片的模式是：{{item}}</view>
<image mode="{{item}}" src="/images/avatar_17.jpg" />
</block>
小程序运行结果图：
audio:
audio组件用来实现音乐播放、暂停等，其属性如表所示：
示例代码如下：
// pages/chapter04/audioDemo/audioDemo.js
Page({
/**
* 页面的初始数据
*/
data: {
poster:'/images/avatar_17.jpg',
name:'whoa',
author:'XXXTENTACION',
src:'./audio/whoa.m4a'
},
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
}
})
}
})<!--pages/chapter04/audioDemo/audioDemo.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>
小程序运行结果图：
video：
video组件用来实现视频的播放、暂停等。视频的默认宽度为300px，高度为225px，video组件的属性如表所示：
示例代码如下：
// pages/chapter04/videoDemo/videoDemo.js
Page({
/**
* 页面的初始数据
*/
data: {
src:''
},
bindButtonTap: function(){
var that = this
wx.chooseMedia({
sourceType:['album','camera'],
maxDuration:60,
camera:['front','back'],
success: function(res){
that.setData({
src: res.tempFilePath
})
}
})
}
})<!--pages/chapter04/videoDemo/videoDemo.wxml-->
<video src="{{src}}" controls></video>
<view class="btn_area">
<button bindtap="bindButtonTap">获取视频</button>
</view>
小程序运行结果图：
camera：
camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。camera属性如表所示：
示例代码如下：
// pages/chapter04/cameraDemo/cameraDemo.js
Page({
takePhoto(){
const ctx = wx.createCameraContext(); //创建并返回camera上下文对象
ctx.takePhoto({//拍照，成功则返回图片
quality:'high',
success:(res) => {
this.setData({
src:res.tempImagePath
})
}
})
},
error(e){
console.log(e.detail)
}
})<!--pages/chapter04/cameraDemo/cameraDemo.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>
小程序运行结果图：
其他组件：
在小程序中，除了前面介绍的组件以外，map组件和canvas组件比较常用。
map：
map组件用于在页面中显示地图或路径，常用于LBS(基于位置服务)或路径指引，功能相对百度地图、高德地图较简单，目前具备绘制图标、路线、半径等能力，不能在scroll-view、swiper、picker-view、movable-view组件中使用。map组件的属性如表所示：
map组件的markers属性用于在地图上显示标记的位置，其相关属性如表所示：
map组件的polyline属性用来指定一系列的坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等，其相关属性如表所示：
示例代码如下：
// pages/chapter04/mapDemo/mapDemo.js
Page({
/**
* 页面的初始数据
*/
data: {
markers:[{
iconPath:'/images/avatar_17.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.1700"},
{longitude:"108.9200",latitude:"34.1700"}],
color:"#00ff00",
width:2,
dottedLine:true
}],
controls:[{
id:1,
iconPath:'/images/avatar_1.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.ocntrolId)
}
})<!--pages/chapter04/mapDemo/mapDemo.wxml-->
<map id="map" longitude="108.9200" latitude="34.1550" scale="14" controls="{{controls}}" bindcontroltap="controltap"
markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location
style="width: 100%; height: 300px;"></map>
小程序运行结果图：
canvas：
canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为300px，高度为225px，同一页面中的canvas-id不能重复，否则会出错。canvas组件的属性如表所示：
示例代码如下：
// pages/chapter04/canvasDemo/canvasDemo.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var ctx = wx.createCanvasContext('myCanvas');
ctx.setFillStyle('green');
ctx.fillRect(10,10,200,100);
ctx.draw();
}
})<!--pages/chapter04/canvasDemo/canvasDemo.wxml-->
<canvas canvas-id="myCanvas" style="border: 1px solid red;"/>
小程序运行结果图：
本章小结：
本章介绍了小程序的常用组件，包括容器组件(view、scroll-view、swiper)、基础内容组件(icon、text、progress、rich-text)、表单组件(form、input、button、radio、checkbox、label、picker、picker-view、slider、switch、textarea)、多媒体组件(audio、image、video、camera)、其他组件(map、canvas等)。
第五章：即速应用
即速应用概述：
即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发。
激素应该用的功能特点主要体现在以下几个方面：
- 开发流程简单，零门槛制作。
- 行业模板多样，种类齐全。
- 丰富的功能组件和强大的管理后台。
即速应用界面介绍：
登录即速应用官网，单击“注册”按钮，填写相应信息完成注册，完成注册后，即可登录账号，使用即速应用。
即速应用的主界面主要分为4个区域，分别为：菜单栏、工具栏、编辑区和属性面板。
即速应用组件：
即速应用提供了大量组件供用户快速布局页面，包括7个布局组件、9个基本组件、18个高级组件和2个其他组件。
布局组件：
布局组件用于设计页面布局，主要包括双栏、面板、自由面板、顶部导航、底部导航、分割线和动态分类，如图所示：
双栏组件：
双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不会出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏组件属性面板如图所示：
面板组件：
面板组件相当于一个大画板，用户可以将很多基本(甚至高级)的组件(如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等)放进面板组件里一起管理，面板组件属性面板如图所示：
自由面板组件：
自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户即可以向自由面板内拖入部分组件(包括文本组件、图片组件和按钮组件)，也可以拖入任意相关容器组件，用于不规则布局。自由面板组件的属性面板如图所示：
顶部导航组件：
顶部导航组件固定于页面顶部，用于编辑顶部的导航。常用的手机应用在顶部有一条导航，上面写有手机应用app的名称或logo，以及返回键等。顶部导航组件的属性面板设置如图所示：
底部导航组件：
底部导航组件固定于页面底部，用于编辑底部的导航。底部导航组件的属性面板设置如图所示：
分割线组件：
分割线组件被放置于任意组件之间，用于实现分割。分割线组件的属性面板如图所示：
动态分类组件：
动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式，可以实现顶部分类、侧边栏分来来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。动态分类组件的属性面板如图所示：
基本组件：
基本组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频，如图所示：
文本组件：
文本组件用于展示文字、设置点击事件，是小程序页面中最常用的组件。文本组件的属性面板如图所示：
图片组件：
图片组件用于在页面中展示图片，其属性面板如图所示：
按钮组件：
按钮组件用于在页面中设置按钮，其属性面板如图所示：
标题组件：
标题组件用于在页面中设置标题，其属性面板如图所示：
轮播组件：
轮播组件用于实现图片的轮播展示，其属性面板如图所示：
分类组件：
分类组件可以设置不同内容展示在不同类别中，还可以添加、删除分类的个数及进行相应的设置。分类组件的属性面板如图所示：
图片列表组件：
图片列表组件可以将图片以列表的形式展示，还可以设置图片的名称、标题和点击事件。图片列表组件的属性面板如图所示：
图文集组件：
图文集组件用于展示图片、标题和简介，其属性面板如图所示：
视频组件：
视频组件用于展示视频，其属性面板如图所示： 
高级组件：
高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改，如图所示：
动态列表组件：
动态列表组件时容纳基础组件来展示后台数据的容器，通过添加基础组件来展示对应的后台数据，其属性面板如图所示：
个人中心组件：
个人中心组件显示个人相关信息的组件，包括图像、昵称、我的订单、收货地址、购物车等，如图所示：
个人中心组件的属性面板如图所示：
动态表单组件：
动态表单组件相当于HTML中的<form/>标签，是一个容器组件，可以添加子表单组件和基本组件，用来收集用户提交的相关信息给后台数据对象。动态表单组件的属性面板如图所示：
评论组件：
评论组件提供信息发布或回复信息的组件，评论组件的属性面板如图所示： 
计数组件：
计数组件可以用于点赞、统计浏览量等类似的计数功能。计数组件的属性面板如图所示：
地图组件：
地图组件用于显示指定地址的地图，常用于实现定位及导航功能，地图组件的属性面板如图所示：
城市定位组件：
城市定位组件通常与列表类组件搭配使用，常见搭配有动态列表和商品列表。城市定位组件的属性面板如图所示：
悬浮窗组件：
悬浮窗组件的固定搭配有： 客服、我的订单、购物车、回到顶部。悬浮窗组件通常出现在个人中心或商品列表页面，其属性面板如图所示：
其他组件：
其他组件包括音频组件和动态容器组件。
音频组件：
音频组件用于播放音乐(每个页面有一个音频组件即可)，手动点击播放按钮后即可实现播放。音频文件可以选择音频库中的音乐，也可以上传本地音频进行更换，音频组件的属性面板如图所示：
动态容器组件：
动态容器组件用于动态页面，即所在页面绑定了数据对象。动态容器组件中可以添加多种组件——文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件。其中，文本组件和图片组件可以绑定相应的数据对象字段(填充相应动态数据)，若有计数组件，则会自动与动态容器关联。动态容器组件的属性面板如图所示：
即速应用后台管理：
即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即时更新，开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具、多商家管理等功能。
- 数据管理：数据管理包括数据总览，访客分析和传播数据功能
- 分享设置：分享设置主要提供可以分享应用的方式
- 用户管理：用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能
- 应用数据：应用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据
- 轮播管理：轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容
- 分类管理：分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商
- 商品管理：商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理
- 经营管理：经营管理主要包括子账号管理，手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营
- 营销工具：营销工具是小程序营销推广的有力工具，主要有会员卡、优惠卡、积分、储值、推广、秒杀等
- 多商家管理：多商家管理是即速应用为众多商家的商城开设的管理功能，方便管理者统计每家店铺的订单及进行收益分析
打包上传：
即速应用可以将小程序的代码打包，该代码包可以通过微信开发者工具来对接微信小程序。
打包：
进入即速应用后台管理，选择左边选项“分享设置”按钮，单击“微信小程序”选项，进入如图界面：
选择“代码包下载”选项，单击“确定”按钮，进入如图界面：
通过“微信公众平台—>小程序-->设置-->开发设置“获取appId和appSecret，在”服务器配置“中填写相关信息，选择相应分类，单击”打包“按钮，即可成功打包，如图所示：
单击”下载“按钮，即可下载该小程序代码包。
上传：
打开微信web开发者工具，新建项目，并填写相关内容。其中，项目目录为下载包解压后的目录，如图所示：
单击“确定”按钮，打开小程序代码，编译无误后，填写该项目的版本号，单击“上传” 按钮即可实现该小程序代码上传，如图所示：
上传成功后，打开微信公众平台的“开发管理”界面，就可以看到该小程序的版本信息，如图所示：
本章小结：
本章主要讲解微信小程序的第三方工具——即速应用，首先介绍了即速应用的优势及特点，然后介绍了即速应用的布局组件、基础组件、高级组件和其他组件、最后介绍了即速应用的后台管理及打包、上传功能。
第六章：API应用
网络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关闭。
发起网络请求：
wx.request(object)实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表所示，一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求。
通过网络请求获取百度首页的数据，示例代码如下：
<!--pages/chapter06/request/baidu/baidu.wxml-->
<button type="primary" bindtap="getbaidutap">获取HTML数据</button>
<textarea value="{{html}}" auto-height="true" maxlength="0"></textarea>
// pages/chapter06/request/baidu/baidu.js
Page({
/**
* 页面的初始数据
*/
data: {
html:''
},
getbaidutap:function(){
var that = this;
wx.request({
url: 'https:wwww.baidu.com',
data: {},
header:{'Content-Type':'application/json'},
success:function(res){
console.log(res);
that.setData({
html:res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})小程序运行结果图：
通过网络请求的get方法获取邮政编码对应的地址信息，示例代码如下：
<!--pages/chapter06/request/postcode/postcode.wxml-->
<view>邮政编码：</view>
<input type="text" bindinput="input" placeholder="6位邮政编码"/>
<button type="primary" bindtap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>
// pages/chapter06/request/postcode/postcode.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;
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'
},
methos:'post',
success:function(res){
wx.hideToast();
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.reson,
error_code:res.data.error_code
})
}
}
})
}
}
}) 小程序运行结果图：
上传文件：
wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求，其相关参数如表所示： 
通过wx.uploadFile(Object)，可以将图片上传到服务器并显示，示例代码如下：
// pages/chapter06/uploadFile/uploadFile.js
Page({
/**
* 页面的初始数据
*/
data: {
img:null
},
uploadImage:function(){
var that = this;
wx.chooseImage({
success:function(res){
var tempFilePaths = res.tempFilePaths;
upload(that,tempFilePaths);
}
})
function upload(page,path){
wx.showToast({
title: '正在上传......',
icon:'loading'
}),
wx.uploadFile({
url: 'http://localhost/',
filePath: path[0],
name: 'file',
success:function(res){
console.log(res);
if(res.statusCode != 200){
wx.showModal({
title:'提示',
content:'上传失败',
showCancel:false
})
return;
}
var data = res.data;
page.setDada({
img:path[0]
})
},
fail:function(e){
console.log(e);
wx.showModal({
title:'提示',
content:'上传失败',
showCancel:false
})
},
complete:function(){
wx.hideToast();
}
})
}
}
})<!--pages/chapter06/uploadFile/uploadFile.wxml-->
<button type="primary" bindtap="uploadImage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>
小程序运行结果图：
下载文件：
wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTP GET请求，返回文件的本地临时路径，其相关参数如表所示：
通过wx.downloadFile(Object)实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建，示例代码如下：
<!--pages/chapter06/downloadFile/downloadFile.wxml-->
<button type="primary" bindtap="downloadFile">下载图像</button>
<image src="{{img}}" mode="widthFix" style="width: 90%; height: 500px;"></image>// pages/chapter06/downloadFile/downloadFile.js
Page({
/**
* 页面的初始数据
*/
data: {
img:null
},
downloadFile:function(){
var that = this;
wx.downloadFile({
url: 'http://localhost/1.jpg',
success:function(res){
console.log(res);
that.setData({
img:res.tempFilePath
})
}
})
}
})小程序运行结果图：
多媒体API：
多媒体API主要包括图片API，录音API，音频播放控制API，音乐播放控制API等，其目的是丰富小程序的页面功能。
图片API：
图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：
- wx.chooseImage(Object)接口：用于从本地相册选择图片或使用相机拍照
- wx.previewImage(Object)接口：用于预览图片
- wx.getImageInfo(Object)接口：用于获取图片信息
- wx.saveImageToPhotosAlbum(Object)接口：用于保存图片到系统相册
选择图片或拍照：
wx.chooseImage(Object)接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx.saveFile保存图片到本地。其相关参数如表所示：
若调用成功，则返回tempFilePaths和tempFiles，tempFilesPaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size。示例代码如下：
// pages/chapter06/imageAPI/imageAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
chooseImage: function(){
wx.chooseImage({
count: 2,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths;
var tempFiles = res.tempFiles;
console.log(tempFilePaths);
console.log(tempFiles);
}
})
}
})预览图片：
wx.previewImage(Object)接口主要用于预览图片，其相关参数如表所示：
示例代码如下：
// pages/chapter06/imageAPI/imageAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
previewImage:function(){
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",
"ht``tp://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"],
})
}
})获取图片信息：
wx.getImageInfo(Object)接口用于获取图片信息，其相关参数如表所示：
示例代码如下：
// pages/chapter06/imageAPI/imageAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
getImageInfo:function(){
wx.chooseImage({
success:function(res){
wx.getImageInfo({
src: res.tempFilePaths[0],
success:function(e){
console.log(e.width);
console.log(e.height);
}
})
}
})
}
})保存图片到本地相册：
wx.saveImageToPhotosAlbum(Object)接口用于保存图片到本地相册，需要得到用户授权scope.writePhotosAlbum。其相关参数如表所示：
示例代码如下：
// pages/chapter06/imageAPI/imageAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
saveImage:function(){
wx.chooseImage({
success:function(res){
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success:function(e){
console.log(e);
}
})
}
})
}
})录音API：
录音api提供了语音录制的功能，主要包括以下两个API接口：
- wx.startRecord(Object)接口：用于实现开始录音
- wx.stopRecord(Object)接口：用于实现主动调用停止录音
开始录音：
wx.startRecord(Object)接口用于实现开始录音。当主动调用wx.stopRecord(Object)接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx.saveFile()接口。其相关参数如表所示：
停止录音：
wx.stopRecord(Object) 接口用于实现主动调用停止录音。示例代码如下：
// pages/chapter06/recordAPI/recordAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
record:function(){
wx.startRecord({
success: function(res){
var tempFilePath = res.tempFilePath
},
fail:function(res){
// 录音失败
}
})
setTimeout(function(){
// 结束录音
wx.stopRecord()
},10000)
}
})音频播放控制API：
音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API：
- wx.playVoice(Object)接口：用于实现开始播放语音
- wx.pauseVoice(Object)接口：用于实现暂停正在播放的语音
- wx.stopVoice(Object)接口：用于结束播放语音
播放语音：
wx.playVoice(Object)接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。其相关参数如表所示：
示例代码如下：
// pages/chapter06/voiceAPI/voiceAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
voiceAPI:function(){
wx.startRecord({
success:function(res){
var tempFilePath = res.tempFilePath;
wx.playVoice({
filePath: tempFilePath,
complete: function(){}
})
}
})
}
})暂停播放：
wx.pauseVoiece(Object)用于暂停正在播放的语音。再次调用wx.playVoice(Object)播放同一个文件时，会从暂停处开始播放。如果想从头播放，则需要先调用wx.stopVoice(Object)，示例代码如下：
// pages/chapter06/voiceAPI/voiceAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
voiceAPI:function(){
wx.startRecord({
success:function(res){
var tempFilePath = res.tempFilePath;
wx.playVoice({
filePath: tempFilePath,
complete: function(){}
})
setTimeout(function(){
wx.pauseVoice()
},5000)
}
})
}
})结束播放：
wx.stopVoice(Object)用于结束播放语音。示例代码如下：
// pages/chapter06/voiceAPI/voiceAPI.js
Page({
/**
* 页面的初始数据
*/
data: {
},
voiceAPI:function(){
wx.startRecord({
success:function(res){
var tempFilePath = res.tempFilePath;
wx.playVoice({
filePath: tempFilePath,
complete: function(){}
})
setTimeout(function(){
// wx.pauseVoice()
wx.stopVoice()
},5000)
}
})
}
})音乐播放控制API：
音乐播放控制API主要用于实现对背景音乐的控制，音乐文件只能时网络流媒体，不能是本地音乐文件。音乐播放控制API主要包括以下8个API：
- wx.playBackgroundAudio(Object)接口：用于播放音乐
- wx.getBackgroundAudioPlayerState(Object)接口：用于获取音乐播放状态
- wx.seekBackgroundAudio(Objecct)接口：用于定位音乐播放进度
- wx.pauseBackgroundAudio()接口：用于实现暂停播放音乐
- wx.stoopBackgroundAudio()接口：用于实现停止播放音乐
- wx.onBackgroundAudioPlay(CallBack)接口：用于实现监听音乐播放
- wx.onBackgroundAudioPause(CallBack)接口：用于实现监听音乐暂停
- wx.onBackgroundAudioStop(CallBack)接口：用于实现监听音乐停止
播放音乐：
wx.playBackgroundudio(Object)用于播放音乐，同一时间只能有一首音乐处于播放状态，其相关参数如表所示：
获取音乐播放状态：
wx. getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态，其相关参数如表所示： 
接口调用成功后返回的参数如表所示：
控制音乐播放进度：
wx.seekBackgroundAudio(0bject)接口用于控制音乐播放进度，其相关参数如表所示：
暂停播放音乐：
wx.pauseBackgroundAudio()接口用于暂停播放音乐
停止播放音乐：
wx.stopBackgroundAudio()接口用于停止播放音乐
监听播放音乐：
wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停，通常被wx.pauseBackgroundAudio()方法触发。在CallBack中可以改变播放图标
监听音乐停止：
wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止，通常被音乐自然播放停止或wx.seekBackgroundAudio(Object)方法导致播放位置等于音乐总时长时触发。在CallBack中可以改变播放图标
案例展示：
以小程序music为案例来展示音乐API的使用，示例代码如下：
<!--pages/chapter06/musicAPI/music.wxml-->
<view class="container">
<image class="bgaudio" src="{{changedImg ? music.coverImg : '../../../images/avatar_01.jpg'}}"/>
<view class="control-view">
<!--使用data-how定义一个0表示快退10秒 -->
<image src="/image/pre.png"bindtap="onPositionTap"data -how="0"/>
<image src="/image/{{isPlaying?'pause':'play'}}.png" bindtap="onAudioTap"/>
<image src="/image/stop.png"binatap="onStopTap"/>
<!--使用 data-how 定义一个1 表示快进10 秒 -->
<image src="/image/next.png"bindtap="onPositionTap"datahow="1"/>
</view>
</view>
// pages/chapter06/musicAPI/music.js
Page({
/**
* 页面的初始数据
*/
data: {
isPlaying: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){
wx.pauseBackgroundAudio();
} else {
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(){
that.setData({
isPlaying:false,
changedImg: false
})
}
})
},
onPositionTap:function(event){
let how = event.target.dataset.how;
wx.getBackgroundAudioPlayerState({
success: function(res){
let status = res.status;
if(status == 1){
let duration = res.duration;
let currentPosition = res.currentPosition;
if(how == "0"){
let position = currentPosition - 10;
if(position < 0){
position = 1;
}
wx.seekBackgroundAudio({
position: position,
});
wx.showToast({
title: '快退10s',
duration: 500
});
}
if(how == "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(){
that.setData({
isPlaying:true,
changedImg:true
});
console.log("on play")
});
wx.onBackgroundAudioPause(function(){
that.setData({
isPlaying:false
});
console.log("on pause")
});
wx.onBackgroundAudioStop(function(){
that.setData({
isPlaying: false,
changedImg: false
});
console.log("on stop")
})
}
})/* pages/chapter06/musicAPI/music.wxss */
.bgaudio{
height:350rpx;
width:350rpx;
margin-bottom:100rpx;
}
.control -view image{
height:64rpx;
width:64rpx;
margin:30rpx;
}{
"usingComponents": {}
} 小程序运行结果图：
文件API：
从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口：
- wx.saveFile(Object)接口：用于保存文件到本地，主要包括以下5个API接口
- wx.getSavedFileList(Object)接口：用于获取本地已保存的文件列表
- wx.getSaveFileInfo(Object)接口：用于获取本地文件的文件信息
- wx.removeSaveFile(Object)接口：用于删除本地存储的文件
- wx.openDocument(Object)接口：用于新开页面打开文档，支持格式：doc、xls、 2. 获取ppt、pdf、docx、xlsx、ppts
保存文件：
wx.saveFile(Object)用于保存文件到本地，其相关参数如表所示：
部分示例代码如下：
// pages/chapter06/fileAPI/saveFile/saveFIle.js
Page({
saveImg:function(){
wx.chooseImage({
count: 1,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath: tempFilePaths,
success:function(res){
var saveFilePath = res.savedFilePath;
console.log(saveFilePath)
}
})
}
})
}
})获取本地文件列表：
wx.getSavedFileList(Object)接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳文件列表，其相关参数如表所示：
示例代码如下：
// pages/chapter06/fileAPI/getSavedFilePath/getSavedFilePath.js
Page({
getSavedFileList:function(){
wx.getSavedFileList({
success:function(res){
that.setData({
fileList:res.fileList
})
}
})
}
})获取本地文件的文件信息：
wx.getSaveFileInfo(Object)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx.getFileInfo(Object)接口，其相关参数如表所示：
示例代码如下：
// pages/chapter06/fileAPI/getSaveFileInfo/getSaveFileInfo.js
Page({
getSaveFileInfo:function(){
wx.chooseImage({
count: 1,
sizeType:['compressed','original'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath: tempFilePaths,
success:function(res){
var saveFilePath = res.savedFilePath;
wx.getSavedFileInfo({
filePath: saveFilePath,
success:function(res){
console.log(res.size);
}
})
}
})
}
})
}
})删除本地文件：
wx.removeSaveFile(Object)接口用于删除本地存储的文件，其相关参数如表所示：
从文件列表中删除第一个文件，示例代码如下：
// pages/chapter06/fileAPI/removeFile/removeFile.js
Page({
removeFile:function(){
wx.getSavedFileList({
success:function(res){
if(res.fileList.length > 0){
wx.removeSavedFile({
filePath: res.fileList[0].filePath,
complete:function(res){
console.log(res)
}
})
}
}
})
}
})打开文档：
wx.openDocument(Object)接口用于新开页面打开文档，支持格式有doc、xls、ppt、pdf、docx、xlsx、pptx，其相关参数如表所示：
示例代码如下：
// pages/chapter06/fileAPI/openDocument/openDocument.js
Page({
openDocument:function(){
wx.downloadFile({
url: "http://localhost/fm2.pdf",
success:function(res){
var tempFilePath = res.tempFilePath;
wx.openDocument({
filePath: tempFilePath,
success:function(res){
console.log("打开成功")
}
})
}
})
}
})本地数据及缓存API：
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10MB，其目的是提高加载速度。数据缓存的接口主要有4个：
- wx.setStorage(Object)或wx.setStorageSync(key,data)接口 ：用于设置缓存数据。
- wx.getStorage(Object)或wx.getStorageSync(key)接口 ：用于获取缓存数据。
- wx.removeStorage(Object)或wx.removeStorageSync(key)接口：用于删除指定缓存数据。
- wx.clearStorage()或wx.clearStorageSync()接口：用于清除缓存数据。
其中，带Sync后缀的未同步接口，不带Sync的为异步接口。
保存数据：
wx.setStorage(Object):
wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容，其参数如表所示：
示例代码如下：
wx.getStorage({
key:'name',
data:'sdy',
success:function(res){
console.log(res);
}
})wx.setStorageSync(key,data):
wx.getStorage(key,data)接口时同步接口，其参数只有key和data。
示例代码如下：
wx.setStorageSync('age','25')获取数据：
wx.getStorage(Object):
wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。其相关参数如表所示：
示例代码如下：
wx.getStorage({
key:'name',
success:function(res){
console.log(res.data);
}
})wx.getStorageSync(key):
wx.getStorageSync(key)从本地缓存中同步获取指定key对应的内容，其参数只有key。
示例代码如下：
try{
var value = wx.getStorageSync('age');
if(value){
console.log("获取成功" + age);
}
} catch(e){
console.log("获取失败");
}删除数据：
wx.removeStorage(Object):
wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key，其相关参数如表所示：
示例代码如下：
wx.removeStorage({
key:'name',
success:function(res){
console.log("删除成功")
}，
fail:function(){
console.log("删除失败")
}
})wx.removeStorageSync(key):
wx.removeStorageSync(key)接口用于从本地缓存中同步删除指定key对应的内容，其参数只有key。
示例代码如下：
try{
wx.removeStorageSync('name')
} catch(e){
console.log("删除失败")
}清空数据：
wx.clearStorage():
wx.clearStorage()接口用于异步清理本地数据缓存，没有参数。
示例代码如下：
wx.getStorage({
key:'name',
success:function(res){
wx.clearStorage();
}
})wx.clearStorageSync():
wx.clearStorageSync()接口用于同步清理本地数据缓存。
示例代码如下：
try{
wx.clearStorageSync();
} catch(e){
console.log("清理数据失败")
}位置信息API：
小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj022标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系加密后的坐标系，又称为火星坐标系。默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口：
- wx.getLocation(Object)接口：用于获取位置信息。
- wx.chooseLocation(Object)接口：用于选择位置信息。
- wx.openLocation(Object)接口：用于通过地图显示位置。
获取位置信息：
wx.getLocation(Object)接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击”显示在聊天顶部“时，可以获取到定位信息，其相关参数如表所示：
wx.getLocation(Object)调用成功后，返回的参数如表所示：
示例代码如下：
<!--pages/chapter06/locationAPI/getLocation/getLocation.wxml-->
<button type="primary" bindtap="getLocationTap">获取位置信息</button>
// pages/chapter06/locationAPI/getLocation/getLocation.js
Page({
getLocationTap:function(){
wx.getLocation({
type:'wgs84',
success:function(res){
console.log("经度" + res.longitude);
console.log("纬度" + res.latitude);
console.log("速度" + res.speed);
console.log("位置的精确度" + res.accuracy);
console.log("水平精确度" + res.horizontalAccuracy);
console.log("垂直精确度" + res.verticalAccuracy);
}
})
}
})小程序运行结果图：
选择位置信息：
wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用于选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表所示：
wx.chooseLocation(Object)调用成功后，返回的参数如表所示：
示例代码如下：
<!--pages/chapter06/locationAPI/chooseLocation/chooseLocation.wxml-->
<button type="primary" bindtap="chooseLocationTap">选择位置</button>
// pages/chapter06/locationAPI/chooseLocation/chooseLocation.js
Page({
chooseLocationTap:function(){
wx.chooseLocation({
success:function(res){
console.log("位置的名称：" + res.name);
console.log("位置的地址：" + res.address);
console.log("位置的经度：" + res.longitude);
console.log("位置的纬度：" + res.latitude);
}
})
}
})小程序运行结果图：
显示位置信息：
wx.openLocation(Object)接口用于在微信内置地图中显示位置信息，其相关参数如表所示：
示例代码如下：
<!--pages/chapter06/locationAPI/openLocation/openLocation.wxml-->
<button type="primary" bindtap="openLocationTap">显示位置信息</button>
// pages/chapter06/locationAPI/openLocation/openLocation.js
Page({
openLocationTap:function(){
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:'南昌市昌西大道1818号'
})
}
})
}
})小程序运行结果图：
设备相关API：
设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API：
- wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口：用于获取系统信息
- wx.getNetworkType(Object)接口：用于获取网络类型
- wx.onNetworkStatusChange(Callback)接口：用于检测网络状态改变
- wx.makePhoneCall(Object)接口：用于拨打电话
- wx.scanCode(Object)接口：用于扫描二维码
获取系统信息：
wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。其相关参数如表所示：
wx.getSystemInfo()接口或wx.getSystemInfoSync()接口调用成功后，返回相关系统信息，如表所示：
示例代码如下：
<!--pages/chapter06/phoneAPI/SystemInfo/getSystemInfo.wxml-->
<button type="primary" bindtap="getSystemInfoTap">获取系统信息</button>
// pages/chapter06/phoneAPI/SystemInfo/getSystemInfo.js
Page({
getSystemInfoTap:function(){
wx.getSystemInfo({
success: (result) => {
console.log("手机型号：" + result.model);
console.log("设备像素比：" + result.pixelRatio);
console.log("窗口的宽度：" + result.windowWidth);
console.log("窗口的高度：" + result.windowHeight);
console.log("微信的版本号：" + result.version);
console.log("操作系统版本：" + result.system);
console.log("客户端平台：" + result.platform);
},
})
}
})小程序运行结果图：
网络状态：
获取网络状态：
wx.getNetworkType(Object)用于获取网络类型，其相关参数如表所示：
如果wx.getNetworkType(Object)接口被成功调用，则返回网络类型包，有wifi、2g、3g、4g、unknow(Android下不常见的网络类型)、none(无网络)。
示例代码如下：
wx.getNetworkType({
success:function(res){
console.log(res.networkType);
}
})监听网络状态变化：
wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络连接。
示例代码如下：
wx.onNetworkStatusChange(function(res){
console.log("网络是否连接：" + res.isConnected);
console.log("变化后的网络类型：" + res.networkType);
})拨打电话：
wx.makePhoneCall(Object)接口用于实现调用手机拨打电话，其相关参数如表所示：
示例代码如下：
wx.makePhoneCall({
phoneNumber:'13434343344'
})扫描二维码：
wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回响应的内容，其相关参数如表所示：
扫码成功后，返回的数据如表所示：
示例代码如下：
// 允许从相机和相册扫码
wx.scanCode({
success:(res) => {
console.log(res.result);
console.log(res.scanType);
console.log(res.charSet);
console.log(res.path);
}
})
// 只允许从相机扫码
wx.scanCode({
onlyFromCamera:true,
success:(res) => {
console.log(res);
}
})
本章小结：
本章主要介绍了小程序的各类核心API，包括网络API、多媒体API、文件API、本地数据及缓存API、位置信息API及设备相关API等。
7132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
