第4~6章总结

第4章页面组件总结

学习目标

了解小程序组件

掌握视图容器组件

掌握基础内容组件

掌握表单组件

掌握多媒体组件

掌握其他高级组件

组件的定义及属性

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

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

容器视图组件

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

view

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

scroll - view

通过设置scroll - view组件的相关属性可以实现滚动视图的功能

swiper

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

基础内容组件

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

text

text组件用于展示内容，类似HTML中的<span>,text组件中的内容支持长按选中，支持转义字符“\”

属于行内元素。

progress

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

表单组件

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

button

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

radio

单选框

checkbok

复选框用于从一组选项中选取多个选项，小程序中复选框由<checkbox-group/>（多项选择器）和<checkbox/>（多选项目）两个组件组合而成。一个<checkbox-group/>表示一组选项，可以在一组选项中选中多个选项。

switch

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

slider

slider组件为滑动选择器，可以通过滑动来设置相应的值

picker

picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器

普通选择器

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

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

 

多列选择器

时间选择器、日期选择器

 

省市选择器

 picker-view

input

textarea

tabel

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

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

 

form

多媒体组件

image

裁剪模式

top不缩放图片，只显示图片的顶部区域。

bottom不缩放图片，只显示图片的底部区域。

center不缩放图片，只显示图片的中间区域。

left不缩放图片，只显示图片的左边区域。

right不缩放图片，只显示图片的右边区域。

top left不缩放图片，只显示图片的左上边区域。

top right不缩放图片，只显示图片的右上边区域。

bottom left不缩放图片，只显示图片的左下边区域。

bottom right不缩放图片，只显示图片的右下边区域。

audio

 video

camera

其他组件

map

 map组件markers属性相关的属性

第五章即速应用总结

学习目标
了解即速应用的特征
掌握即速应用布局组件、基础组件和高级组件
掌握即速应用后台管理
掌握即速应用小程序打包上传

即速应用概述

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

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

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

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

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

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

1、资讯类：新闻、媒体

2、电商类：网购（服装、电器、读书、母婴）

3、外卖类：餐饮及零售

4、到店类：餐饮及酒吧

5、预约类：酒店、KTV、家教、家政、其他服务行业

即速应用界面介绍

1.菜单栏

2.工具栏

3.编辑区

4.属性面板

即速应用组件

布局组件

1.双栏组件

2.面板组件

3.自由面板组件

4.顶部导航组件

5.底部导航组件

基本组件

1.文本组件

2.图片组件

3.按钮组件

4.标题组件

5.轮播组件

6.分类组件

第六章API应用总结

学习目标

掌握网络API

掌握多媒体API

掌握文件API

掌握本地数据及缓存API

掌握位置信息API 

掌握设备相关API

网络API

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

发起网络请求

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

wx.request(Object)

上传文件

下载图片

多媒体API

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

图片API

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

1、选择图片或拍照

wx.chooseImage(Object)接口用于本地相册选择图片或使用相机拍照

2、预览图片

wx.previewImage(Object)接口主要用于预览图片

3、获取图片信息

wx.getImageInfo(Object)接口用于获取图片信息

4、保存图片到系统相册

wx.saveImageToPhotosAlbum(Object)接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum

录音API

录音API提供了语音录制的功能，主要包括以下两个API接口：
wx.startRecord（Object）接口用于实现开始录音。
wx.stopRecord（Object）接口

1、开始录音

wx. startRecord（Object）接口用于实现开始录音。当主动调用wx.stopRecord（Object）接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx. saveFile（）接口。

2．停止录音

wx. stopRecord（Object）接口用于实现主动调用停止录音

音频播放控制API

音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API：
wx.playVoice（Object）接口 用于实现开始播放语音。

wx.pauseVoice（Object）接口用于实现暂停正在播放的语音。

wx.stopVoice（Object）接口 用于结束播放语音。

1、播放语音

wx. playVoice（Object）接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。

2、暂停播放

wx. pauseVoice（Object）用于暂停正在播放的语音。再次调用wx.playVoice（Object）播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用wx.stopVoice（Object）

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

3、结束播放

wx.stipVoice(Object)用于结束播放语音

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

音乐播放控制API

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

 wx.playBackgroundAudio（Object）接口 用于播放音乐。

 wx.getBackgroundAudioPlayerState（Object）接口 用于获取音乐播放状态。

 wx.seekBackgroundAudio（Object）接口 用于定位音乐播放进度。

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

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

wx.onBackgroundAudioPlay（CallBack）接口 用于实现监听音乐播放。

wx.onBackgroundAudioPause（CallBack）接口 用于实现监听音乐暂停。

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

1、播放音乐

wx. playBackgroundAudio（Object）用于播放音乐，同一时间只能有一首音乐处于播放状态

2、获取音乐播放状态

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

3、放进度

wx. seekBackgroundAudio（Object）接口用于控制音乐播放进度

4、暂停播放音乐

wx. pauseBackgroundAudio（）接口用于暂停播放音乐

5、停止播放音乐

wx. stopBackgroundAudio（）接口用于停止播放音乐

6、监听音乐播放

wx. onBackgroundAudioPlay（CallBack）接口用于实现监听音乐播放，通常被wx. playBack-groundAudio（Object）方法触发，在CallBack中可改变播放图标

7、监听音乐暂停

wx. onBackgroundAudioPause（CallBack）接口用于实现监听音乐暂停，通常被wx. pause-BackgroundAudio（）方法触发。在CallBack中可以改变播放图标

8、监听音乐停止

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

文件API

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

1、保存文件

wx. saveFile（Object）用于保存文件到本地

2、获取本地文件列表

wx. getSavedFileList（Object）接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/01 08: 00: 00到当前时间的秒数）文件列表

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

wx. getSaveFileInfo（Object）接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx. getFileInfo（Object）接口

 

4、删除本地文件

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

5、打开文件

wx.openDocument(Object)接口用于新开页面打开文档，支持格式有doc、xsl、ppt、 pdf、 docs、 xlsx、 ppts

本地数据及缓存

小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过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后缀的为异步接口

1、保存数据

1.wx.setStorage(Object)

wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后覆盖原来key对应的内容

2.wx.setStorageSync(key,data)

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

2、获取数据

1.wx.getStorage(Object)

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容

2、wx.getStorageSync(key)

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

3、删除数据

1.wx.removeStorage（Object)

wx.removeStorage（Object)接口用于从本地缓存中异步移除指定key

2.wx.removeStorageSync(key)

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

4、清空数据

1.wx.clearStorage()

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

2.wx.clearStorageSync()

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

位置信息API

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

wx.getLocation（Object）接口用于获取位置信息。

wx.chooseLocation（Object）接口 用于选择位置信息。

wx.openLocation（Object）接口用于通过地图显示位置。

获取位置信息

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

调用成功后，返回参数

选择位置信息

wx.chooseLocation(Object)接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息

调用成功后，返回的参数

显示位置信息

wx.openLocation(Object)接口用于在微信内置地图中显示位置信息

相关设备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()接口调用成功后，返回系统相关信息

 网络状态

1、获取网络状态

wx.getNetworkType(Object)用于获取网络类型

 2、监听网络状态变化

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

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

 3、拨打电话

wx.makePhoneCall(Object)接口用于实现调用手机拨打电话