第一~六章总结

一、第一章

1、认识微信小程序
2、微信小程序开发流程

(1)、注册小程序账号

(2)、开发环境准备

(3)、微信开发工具的下载及安装

(4)、创建第一个小程序项目

(5)、运行及发布小程序

3、微信小程序开发者工具界面功能介绍

(1)、工具栏 ;(2)、模拟栏;(3)、目录文件栏;(4)、编辑区;(5)、调试区;

二、第二章

1、小程序的基本目录结构

(1)、主体文件

app.js  小程序逻辑文件,主要用来注册小程序全局实例。

app.json  小程序公共设置文件,设置小程序全局设置。

app.wxss  小程序主样式表文件,类似HTML的.css文件。

(2)、页面文件

.js文件  页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑。

.wxml文件  页面结构文件,用于设计页面的布局、数据绑定等,类似HTML页面中的.html文件。

.wxss文件  页面样式表文件,用于定义本页面中用到的各类样式表。

.json文件  页面配置文件。该文件在页面中不可缺少。

2、小程序的开发框架

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

    (1)、视图层(View)由框架设计的标签语言WXML和用于描述WXML组件样式的WXSS组成,它们的关系就像HTML和CSS的关系。

    (2)、逻辑层(App Service)是MINA框架的服务中心,由微信客户端启用步线程单独加载运行。

3、创建小程序页面
4、配置文件

(1)、小程序的全局配置保存在全局配置文件(app.json)中,使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等。

(2)、pages配置项接受一个数组,用来指定小程序由哪些页面组成,数组的每一项都是字符串,代表对应页面的“路径”+“文件名”。pages配置项是必填项。

(3)、window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。

(4)、当需要在程序顶部或底部设置菜单栏时,可以通过配置tabBar配置项来实现。

(5)、小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置,不能在API中单独设置。

(6)、debug配置项用于开启开发者工具的调试模式,默认为false。开启后,页面注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console(控制台)面板上。

5、逻辑层文件

(1)、项目逻辑文件 app.js中可以通过 App()函数注册小程序生命周期函数、全局属性和全局方法,已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

(2)、在逻辑层,Page()方法用来注册一个页面,并且每个页面有且仅有一个。

6、页面结构文件 

(1)、数据绑定

简单绑定

运算

(2)、条件数据绑定

wx:if条件数据绑定

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

block wx:if 条件数据绑定 

<block wx:if"{{true}}">
<view>view1</view>
</block>

(3)、列表数据绑定

wx:for

//js
Pages({
   data:{ 
students:[
      {nickname:'Tom',height:180,weight:140},
      {nickname:'Bob',height:178,weight:125},
      {nickname:'Ann',height:165,weight:100},
    ]
  }
})
//wxml
<view wx:for="{{students}}">
     <text>{{index}}--{{item.nickname}}--{{item.height}}--{{item.weight}}</text>
</view>

block wx:for

<block wx:for="{{students}}">
<view>
   <text>姓名:{{item.nickname}}</text>
   <text>身高:{{item.height}}</text>
   <text>体重:{{item.weight}}</text>
</view>
</block>

(4)、模板

定义模板

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

调用模板

<template name="stu">
<view wx:for="{{students}}">
   <text>姓名:{{item.nickname}}</text>
   <text>身高:{{item.height}}</text>
   <text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}" />

(5)、引用页面文件

import方式

<template name="item">
<text>{{item.name}}</text>
<text>{{item.height}}</text>
<text>{{item.weight}}</text>
</template>

include方式

//a.wxml
<text>{{item.name}}</text>
<text>{{item.height}}</text>
 
//bb.wxml
<include src="aa.wxml"/>
<text>{{item.weight}}</text>
 
//bb.wxml文件通过include把aa.wxml文件代码加载,结果如下
<text>{{item.name}}</text>
<text>{{item.height}}</text>
<text>{{item.weight}}</text>

(6)、页面事件

定义事件函数

调用事件

冒泡事件

非冒泡事件

7、页面样式文件

(1)、尺寸单位

(2)、样式导入

(3)、选择器

(4)、wxss常用属性

三、第三章

1、盒子模型

(1)、微信小程序的视图层由WXML 和 WXSS 组成。其中, WXSS 是基于CSS拓展的样式语言,用于描述WXML 的组成样式,决定WXML的组件如何显示。

(2)、盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中,一个独立的盒子模型由内容、内边距、边框和外边框4个部分组成。

(3)、此外,对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:上外边距、右外边距、底外边距和左外边距。

2、块级元素和行内元素

(1)、块级元素

特点:一个块级元素占一行。

块级元素的默认高度由内容决定,除非自定义高度。

块级元素的默认高度是父级元素的内容区宽度,除非自定义宽度。

块级元素的宽度、高度、外边距及内边距都可以自定义设置。

块级元素可以容纳块级元素和行内元素。

(2)、行内元素

特点:行内元素不能被设置高度和宽度,其高度和宽度由内容决定。

行内元素内不能放置块级元素,只级容纳文本或其他行内元素。

同一块内,行内元素和其他行内元素显示在同一行。

(3)、行内块元素

当元素的display属性被设置为inline-block时,元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。

3、浮动与定位 

(1)、在CSS中,通过float属性来定义浮动,其基本格式如下:

none——默认值,表示元素不浮动;

left——元素向左浮动;

right——元素向右浮动。

(2)、在CSS中,clear属性用于清除浮动元素对其他元素的影响,其基本格式如下:

left——清除左边浮动的影响,也就是不允许左侧有浮动元素;

right——清除右边浮动的影响,也就是不允许右侧有浮动元素;

both——同时清除左右两侧浮动的影响;

none——不清除浮动。

(3)、另外,还可以在父元素外添加一个空元素,实现父元素包裹浮动元素。

(4)、元素定位,在CSS中,通过position属性可以实现对页面元素的精确定位。基本格式如下:

static——默认值,该元素按照标准流进行布局;

relative——相对定位,相对与它在原文档流的位置进行定位,它后面的盒子仍以标准流方式对待它;

absolute——绝对定位,相对于其上一个已经定位的父元素进行定位,绝对定位的盒子从标准流中脱离,它对其后的兄弟盒子的定位没有影响;

fixed——固定定位,相对于浏览器窗口进行定位。

4、flex布局

   flex布局主要由容器和项目组成,采用flex布局的元素称为flex容器(flex  container)、flex布局的所有直接子元素自动成为容器的成员,称为flex项目(flex  item)。
   容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。

(1)、display用来指定元素是否为flex布局。

(2)、flex-direction用于设置主轴的方向,即项目排列的方向。

 row——主轴为水平方向,起点在左端,当元素设置为flex布局时,主轴默认row;

row-reverse——主轴为水平方向,起点在右端;

column——主轴为垂直方向,起点在顶端;

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

(3)、flex - wrap用来指定当项目在一根轴线的排列位置不够时,项目是否换行。
nowrap——不换行,默认值;
wrap——换行,第一行在上方;
wrap-reverse——换行,第一行在下方。

(4)、flex -fow 是 flex- direction 和 flex-wap的简写形式,默认值为row nowrp。

(5)、justify-content 用于定义项目在主轴上的对齐方式。

justify-content-——于主轴方向有关,默认主轴水平对齐,方向从左到右;

flex-start——左对齐,默认值;
flex-end——右对齐;
center——居中;
space -between——两端对齐,项目之间的间隔都相等;
space-around——每个项目两侧的间隔相等。

(6)、align-items 用于指定项目在交叉轴上的对齐方式 。

aign-items——与交叉轴方向有关,默认交叉由上到下;
flex-start——交叉轴起点对齐;
flex -end——交叉轴终点对齐;

center——交叉轴中线对齐;

baseline——项目根据它们第一行文字的基线对齐;

setch——-如果项目未设置高度或设置为auto,项目将在交叉轴方向拉伸填充容器,此为默认值。

(7)、align-content用来定义项目有多根轴线(出现换行后)在交叉轴上的对齐方式,如果只有一根轴线,该属性不起作用。

space-between——与交叉轴两端对齐,轴线之间的间隔平均分布;

space-around——每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框间隔大一倍。

四、第四章

1、组件的定义及属性

组件通过属性来进一步细化,不同的组件可以有不同的属性,但它们也有一些共用属性。

(1)、id :组件的唯一表示,保持整个页面唯一,不常用。

(2)、class :组件的样式类,对应WXSS中定义的样式。

(3)、style :组件的内联样式,可以动态设置内联样式。

(4)、hidden :组件是否显示,所有组件默认显示。

(5)、data -* :自定义属性,组件触发事件时,会发送给事件处理函数。

(6)、bind*/catch* :组件的事件,绑定逻辑层相关事件处理函数。

2、容器视图组件

(1)、view

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

(2)、scroll-view

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

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

(3)、swiper

swiper组件可以实现轮播图、图片预览、滑动页面等效果。

3、基础内容组件 

(1)、icon

icon组件即图标组件,通常用于表示一种状态,如success、info、warn、waiting、cancel等。

(2)、text

 text组件用于展示内容,类似HTML中的<span>,text组件中的内容支持长按选中,支持转义字符"\",属于行内元素。

(3)、progress

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

4、表单组件

(1)、button

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

(2)、radio

单选框用来从一组选项中选取一个选项。

(3)、checkbox

复选框用于从一组选项中选取多个选项,小程序中复选框由<checkbox-group/>(多项选择器)和<checkbox/>(多选项目)两个组件组合而成。

(4)、switch

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

(5)、slider

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

(6)、picker

picker组件为滚动选择器,当用户点击picker组件时,系统从底部弹出选择器供用户选择,picker组件目前支持5种选择器:普通选择器、多列选择器、时间选择器、日期选择器、省市选择器、

(7)、picker-view

picker-view组件为嵌入页面的滚动选择器,相当于picker组件,picker-view组件的列的个数和列的内容由用户通过<picker-view-column/>自定义设置。

(8)、input

input组件为输入框,用户可以输入相应的信息。

(9)、textarea

textarea组件为多行输入框组件,可以实现多行内容的输入。

(10)、label

label组件为标签组件,用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下,当点击label组件时就会触发对应的控件。for属性的优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

(11)、form

form组件为表单组件,用来实现将组件内的用户输入信息进行提交。当<form/>表单中formType 为submit的<button/>组件时,会将表单组件中的value值进行提交。

5、多媒体组件

(1)、image

image组件为图像组件,与HTML中的<img/>类似,系统默认 image 组件的宽度为300 px、高度为2250px。

(2)、audio

audio组件用来实现音乐播放、暂停等。

(3)、video

video组件用来实现视频的播放、暂停等。视频的默认宽度为300px,高度为225px。

(4)、camera

camera组件为系统相机组件,可以实现拍照或者录像功能。在一个页面中,只能有一个camera组件。

6、其他组件

(1)、map

map组件用于在页面中显示地图或路径,常用于LBS(基于位置服务)或路径指引,功能相对百度地图、高德地图较简单,目前具备绘制图标、路线、半径等能力,不能在croll-view、swiper、picker-view、movable-view组件中使用

(2)、canvas

canvas组件用来绘制图形,相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力,仅仅是图形容器,通过绘图API实现绘图功能。

五、第五章

1、即速应用的优势

(1)、开发流程简单,零门槛制作
使用即速应用来开发微信小程序的过程非常简单,无须储备相关代码知识,没有开发经验的人也可以轻松上手。
登录即速应用的官方网站(www.jisuapp.cn),进人制作界面,从众多行业模板中选择一个合适的模板。
在模板的基础上进行简单编辑和个性化制作
制作完成后,将代码一键打包并下载。
将代码上传至微信开发者工具。
上传成功后,等待审核通过即可。

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

(3)、丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用,可以根据实际情况解决商家的不同需求。

即速应用的应用范围主要包括以下类型;
资讯类:新闻、媒体。

电商类:网购(服装、电器、读书、母婴……)。

外卖类:餐伙及零售。

到店类:餐饮及酒吧。

预约类:酒店、KTV、家教、家政,其他服务行业。

2、即速应用界面介绍 

登录即速应用官网,单击“注册”按钮,在收示的页面填写相应信息,即可完成注册。

  即速应用的主界面主要分为4个区域,分别为菜单栏、工具栏、编辑区和属性面板。

(1)、菜单栏

  菜单栏中的“风格”选项用于设置小程序页面的风格颜色,“管理”选项用于进人后台管理页面,“帮助”选项用于提示帮助功能,“客服”选项用于进人客服界面,“历史选项用来恢复前项操作,“预览”选项用在PC端预览制作效果,“保存”选项用于保存已制作的内容,“生成”选项用于实现小程序打包上线设置。 

(2)、工具栏

  工具栏包括“页面管理”“组件库”2个选项卡,“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件。

(3)、编辑区

  编辑区是用来制作小程序页面的主要区域,通过拖拽组件实现页面制作,右边的“前进”“后退”选项可以进行恢复操作,“模板”选项可以用来选择模板,“元素”选面可以用来显示页面中的组件及其层次关系,“数据”选项可以用来进行页面数据管理,“模块”选项可以用来选择模块。

(4)、属性面板

  属性面板用来设置选定组件的属性及样式,包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件内容及点击事件;“组件样式”选项卡用来设置组件的样式,不同组件有不同的样式需要设置。

3、即速应用组件

布局组件

  布局组件用于设计页面布局,主要包括双栏、面板自由面板、顶部导航、底部导航、分割线和动态分类如图收示。

(2)、双栏组件

  双栏组件用来布局整体,它可以把一个区块分为两部分,操作时显示一个分隔的标志,便于操作,预览时则不会出现。双栏组件默认设置每个栏占50%总宽,也可以按实际需要调整比例。双栏里面可以添加基本组件,从而达到整体的布局效果。双栏还可以嵌套双栏,即可以在其中的一个栏里嵌入一个双栏,从而将整体分成3部分(若需要将整体分成4部分,就再嵌套一个双栏,依次类推)。

(3)、面板组件

  面板组件相当于一个大画板,用户可以将很多基本(甚至高级)的组件(如文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件等)放进面板组件里一起管理。

(4)、自由面板组件

  自由面板组件是指放置在该面板内的组件可以自由拖动,调节组件大小。用户既可以向自由面报肉拖入部分组件(包括文本组件、图片组件和按钮组件),也可以拖人任意相关容器组件,用于不规则布局。

(5)、顶部导航组件

顶部导航组件固定于页面顶部,用于编辑顶部的导航。常用的手机应用在顶部有一条导航,上面写有手机应用App的名称或logo,以及返回键等。

(6)、底部导航组件

  底部导航组件固定于页面底部,用于编辑底部的导航。

(7)、分割线组件

  分割线组件被放置于任意组件之间,用于实现分割。

(8)、动态分类组件

动态分类组件仅适用于电商、到店类小程序。用户通过选择动态分类组件的样式,可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序。

基本组件

基本组件是小程序页面常用的组件,包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频

(1)、文本组件
文本组件用于展示文字、设置点击事件是小程序页面中最常用的组件。

(2)、图片组件
图片组件用于在页面中展示图片。

(3)、按钮组件
按钮组件用于在页面中设置按钮。

(4)、标题组件
标题组件用于在页面中设置标题。

(5)、轮播组件
轮播组件用于实现图片的轮播展示。

(6)、分类组件

   分类组件可以设置不同内容展示在不同类别中,还可以添加、删除分类的个数及进行加应的设置。

(7)、图片列表组件

   图片列表组件可以将图片以列表的形式展示,还可以设置图片的名称、标题和点击事件。

(8)、图片集组件

  图片集组件用于展示图片、标题和简介。

(9)、视频组件

视频组件用于展示视频。

高级组件

(1)、动态列表组件

  动态列表组件是容纳基础组件来展示后台数据的容器,通过添加基础组件来展示对应的后台数据。

(2)、个人中心组件

个人中心组件显示个人相关信息的组件包括图像昵称我的订单收货地址购物车等 。

(3)、动态表单组件

  动态表单组件相当于HTML中的form标签是一个容器组件,可以添加子表单组件和基本组件用来收集用户提交的相关信息给后台数据对象。

(4)、评论组件

评论组件是提供信息发布或回复信息的组件。

(5)、计数组件

计数组件可以用于点赞统计浏览量等类似的技术功能 。

(6)、地图组件

地图组件用于显示指定地址的地图常用于实现定位及导航功能 。

(7)、城市定位组件

城市定位组件通常与列表类组件搭配使用 ,常见搭配有动态列表和商品列表 。

(8)、悬浮窗组件

悬浮窗组件的固定搭配有客服我的订单购物车回到顶部 。

其他组件

(1)、音频组件

  音频组件用于播放音乐(每个页面有一个音频组件即可),手动点击播放按钮后即可实现播放。音频文件可以进择音频库中的音乐,也可以上传本地音频进行更换。

(2)、动态容器组件

  动态容器组件用于动态页面,即所在页面绑定了数据对象。动态容器组件中可以添加多种组件——文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件计数组件。其中,文本组件和图片组件可以绑定相应的数据对象字段(填充相应动态数据),若有计数组件,则会自动与动态容器关联。

4、即速应用后台管理

(1)、数据管理

数据管理包括数据总览、访客分析和传播数据功能。

(2)、分享设置

分享设置主要提供可以分享应用的方式。

(3)、用户管理

用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能。

(4)、应用数据

  应用数据是后台管理的主要内容,前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的,类似通过数据库存放和管理数据。
(5)、轮播管理

  轮播管理是前端软播组件的后台数据管理器,通过软播管理来设置前端软播组件展示的图片内容。
(6)、分类管理

  分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商。
(7)、商品管理

  商品管理是后台管理的主要内容,前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能。
(8)、经营管理

   经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理,便于管理者管理小程序的运营。
(9)、营销工具

   营销工具是小程序营销推广的有力工具,主要有会员卡、优惠券、积分、储值、推广秒杀、集集乐、拼团活动、大转盘、砸金蛋、刮刮乐等。这些营销工具都需要事前在后台合理设置后,才能在活动中发挥更大的作用。
(1)0、多商家管理

  多商家管理是即速应用为有众多商家的商城(如“华东商城”“义乌商城”等)开设的管理功能,方便管理者统计每家店铺的订单及进行收益分析。

六、第六章

1、网络API

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

wx.request(Object)接口:用于发起 HTTPS 请求。

wx.uploadFile(Object)接口:用于将本地资源上传到后台服务器。

wx.downloadFile(Object)接口:用于下载文件资源到本地。

wx.connectSocket(0bject)接口:用于创建一个 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 关闭。

(1)、发起网络请求

wx.request(Object) 实现向服务器发送请求、获取数据等各种网络交互操作,其相关参数如表所示。

 

(2)、上传文件

wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器,并在客户端发起一个HTTPS POST请求,其相关参数如表所示。

 

(3)、下载文件

   wx.downloadFile(Object)接口用于实现从开发者服务器下载文件资源到本地,在客户端直接发起一个HTTP GET请求,返回文件的本地临时路径。其相关参数如表所示。

2、多媒体API 

 (1)、图片API

选择图片或拍照

wx.choosemage(Object)接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用,若要持久保存,则需要调用w.savekFile 保存图片到本地。其相关参数如表所示。

 

预览图片

wx.previewImage(Object)接口主要用于预览图片,其相关参数如表所示。

获取图片信息

 保存图片到系统相册

(2)、录音API

录音API提供了语音录制的功能,主要包括以下两个API接口:

wx.startRecord(0biect)接口用于:实现开始录音。

wx.stopRecord(0bject)接口:用于实现主动调用停止录音。

开始录音

 停止录音

(3)、音频播放控制API

音频播放控制 API主要用于对语音媒体文件的控制,包括播放、暂停、停止及audio 组件的控制,主要包括以下3个API:

wx.playVoice(Object)接口:用于实现开始播放语音。

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

wx.stopVoice(0biect)接口:用于结束播放语音。

播放语音

暂停播放

结束播放

(4)、音乐播放器控制API

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

wx.playBackgroundAudio(Object)接口:用于播放音乐。

wx.getBackgroundAudioPlayerState(0bject)接口:用于获取音乐播放状态。

wx.seekBackgroundAudio(Object)接口:用于定位音乐播放进度

wx.pauseBackgroundAudio()接口:用于实现暂停播放音乐。

wx.stopBackgroundAudio()接口:用于实现停止播放音乐。

wx.onBackgroundAudioPlay(CallBack)接口:用于实现监听音乐播放。

wx.onBackgroundAudioPause(CallBack)接口:用于实现监听音乐暂停。

wx.onBackgroundAudioStop(CallBack)接口:用于实现监听音乐停止。

播放音乐

获取音乐播放状态

接口调用成功后返回的参数如表所示。

控制音乐播放速度

暂停播放音乐

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

停止播放音乐

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

监听音乐播放

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

监听音乐暂停

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

监听音乐停止

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

3、文件API

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

wx.saveFile(0bject)接口:用于保存文件到本地。

wx.getSavedFileList(0biect)接口:用于获取本地已保存的文件列表。

wx.getSaveFilelnfo(0bject)接口:用于获取本地文件的文件信息。

wx.removeSaveFile(0bject)接口:用于删除本地存储的文件。

wx.openDocument(0biect)接口:用于新开页面打开文档,支持格式:doc、xls、ppt、pdf、docx、xlsx、ppts。

(1)、保存文件

(2)、获取本地文件列表

 

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

 

(4)、删除本地文件

 

(5)、打开文档

 4、本地数据及缓存API

(1)、保存数据

小程序提供了以键值对的形式进行本地数据缓存功能,并且是永久存储的,但最大不超过10MB,其目的是提高加载速度。数据缓存的接口主要有4个:
wx.setStorage(Object)或wx.selSlorageSync(key,data)接口用于设置缓存数据。wx.getStorage(Object)或wx.getStorageSync(key)接口 用于获取缓存数据。wx.removeStorage(Object)或wx.removeStorageSync(key)接口用于删除指定缓存
数据。
wx.clearStorage()或wx.clearStorageSync()接口 用于清除缓存数据。
其中,带 Sync 后缀的为同步接口,不带Sync 后缀的为异步接口。

wx.setStorage(Object)

(2)、获取数据

wx.getStorage(Object)

 wx.getStorageSync(key)

(3)、删除数据

wx.removeStorage(Object)

wx.removeStorageSync(key)

(4)、清除数据

wx.clearStorage()

wx.clearStorageSync()

5、位置信息API

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

■wx.getLocation(0bject)接口 用于获取位置信息。
■wx.chooseLocation(0bject)接口 用于选择位置信息。
■wx.openLocation(0bject)接口 用于通过地图显示位置。

(1)、获取位置信息

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

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

 

(2)、选择位置信息

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

 

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

 

(3)、显示位置信息

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

 

6、设备相关API

设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及码等。主要包括以下5个接口API:
■wx. getSystemInfo(0bject)接口、wx.getSystemInfoSync()接口用于获取系统信息
■wx.getNetworkType(0bject)接口 用于获取网络类型。
■wx.onNetworkStatusChange(CalBack)接口用于监测网络状态改变。
■wx.makePhoneCall(Object)接口 用于拨打电话。
■wx.scanCode(0bject)接口 用于扫描二维码。

(1)、获取系统信息

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

(2)、网络状态

获取网络状态

wx.getNetwoekType(object)用手获取网络类型。

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

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

(3)、拨打电话

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

(4)、扫描二维码

wx.seanCode(Objeel)接口用于调起客户端扫码界面,扫码成功后返回相应的内容。

  • 19
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值