第一到六章复习总结

第一章

认识微信小程序
 简介：

      微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。

优势： 

1. 无需下载安装

2. 节约手机存储空间

3. 快速启动

4. 便捷分享

5. 先进的开发框架

场景：

1、低频类场景
2、碎片类场景
3、社交类场景
4、移动办公类场
5、服务类场景

模拟区：用于模拟手机环境，查看不同型号手机的运行效果
图中，上方的iPhone 6表示手机型号，单击可以切换成其他手机。由于不同手机屏幕的CSS像素不同，宽高比也不同，在开发小程序时应对常见的手机屏幕进行适配。100%表示缩放百分比，可以调节预览画面的大小。WIFI表示网络环境，还可以切换成2G、3G、4G或Offline(离线)，不同环境的网速不同，从而可以测试小程序的网络加载速度。模拟器的底部状态栏显示了当前的页面路径为/pages/index/index

目录文件区：目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
 编辑区：编辑区分为左右两栏，左栏用于浏览项目目录结构，右栏用于编写代码。在左栏中单击某个文件，就可以在右栏中对改文件进行编辑u
调试区：类似于Google Chrome浏览器中的开发者工具。下面对调试器中的各个面板的功能进行简要介绍。
Console：“控制台”面板，用于输出调试信息，也可以直接编写代码执行
Source：“源代码”面板，可以查看或编辑源代码，并支持代码调试
Network：“安全”面板，用于调试页面的安全和认证等信息，如HTTPS
AppData：“App数据”面板，可以查看或编辑当前小程序运行时的数据
Audits：“审计”面板，用于对小程序进行体验评分
Sensor：“传感器”面板，用于模拟地理位置、重力感应
Storage：“存储”面板，用于查看和管理本地数据缓存
Trace：“跟踪”面板，用于真机调试时跟踪调试信息
Wxml：Wxml面板，用于查看和调试WXML和WXSS

第二章

小程序基本目录结构

主题文件
app.js:小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件和其他页面的逻辑文件打包成一个 JavaScript文件。该文件在项目中不可缺少。

app.json：小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。

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

页面文件
.js文件：页面逻辑文件，在该文件中编写JavaScript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxml文件： 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件，该文件在页面中不可缺少。
.wxss文件：页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss 中指定的样式规则，该文件在页面中不可缺少。
.json文件：页面配置文件，该文件在页面中不可缺少

配置文件

        小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。
         全局配置文件
        小程序的全局配置保存在全局配置文件(app.json)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求AP的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等。

pages配置项

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

设置pages配置项时，应注意以下3点：

1.数组的第一项用于设定小程序的初始页面。
2.在小程序中新增或减少页面时，都需要对数组进行修改。
3.文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。

window配置项

tabBar配置项

network Timeout配置项 

页面结构文件

        页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。

WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

数据绑定
        小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑定，在页面中显示 data中的数据。小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。

简单绑定

        单绑定是指使用双大括号({{}})将变量包起来，在页面中直接作为字符串输出使用,简单绑定可以作用于内容、组件属性、控制属性等的输出。

注意：简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。

 

<view>{{name}}</view>
<imagesrc="{{img}}"></image>
<view wx:if="{{sex}}">男</view>
Page({
data:{
name:'/wk',
img:'/images/news2.png',
sex:true
},
})

运算
        在{{}}内可以做一些简单的运算(主要有算术运算、逻辑运算、三元运算、字符串运算等)，这些运算均应符合JavaScript运算规则。

<view>算数运算：{{age+num}}</view>
<view>逻辑运算：{{sge==40}}</view>
<view>三元运算正确判断语句：{{1==1 ? 4 : 8}}</view>
<view>三元运算错误判断语句：{{1==8 ? 4 : 8}}</view>
wx.if条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

<view wx:if="{{age>30}}">输出大于30</view>
<view wx:elif="{{age==30}}">输出等于30</view>
<view wx:else>输出小于30</view>
模板
在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板

定义模板
 模板代码由 wxml组成，因此其定义也是在 wxml 文件中，定义模板的格式为:

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

<template name="xm">

  <view wx:for="{{students}}">

    <text>姓名：{{item.nickname}}</text>，

    <text>身高：{{item.height}}厘米</text>，

    <text>身长：{{item.weight}}厘米</text>，

  </view>  

</template>

页面事件
        小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。

        要实现这种机制，需要定义事件函数和调用事件。

        定义事件函数：在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
        调用事件:调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现，key(属性名)以bind 或 catch 开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind 开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
 在小程序中、事件分为冒泡事件和非冒泡事件两大类型。

冒泡事件:冒泡事件是指某个组件上的事件被触发后级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

第三章

盒子模型

块级元素

        块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:
(1)一个块级元素占一行。
(2)块级元素的默认高度由内容决定，除非自定义高度
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。

<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 #CCC;">
<view style="height: 60px;">块级元素4</view>
</view>
<view style="border: 1px solid #f00;width: 100px;background-color: #CCC;">
父级元素高度随内容决定，内容为文本
</view>

3.2.2 行内元素
        行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不常用于控制页面中文本的样式。将一个元素的显示属性可以设置大小，"设置为内联后，该元素即被设置为行内元素。行内元素的特点如下:
(1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定

(2)行内元素内不能放置块级元素，只级容纳文本或其他行内元素。

(3)同一块内，行内元素和其他行内元素显示在同一行。

<texV>组件默认为行内元素，使用<view/>及<text>组件演示盒子模型及行内元素的示例代码如下:

 行内块元素

        当元素的显示属性被设置为行内块时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内边距和外边距。示例代码如下:

<view style="display: inline-block;border: 1px solid #f00;margin: 10px;padding: 10px;width: 200px;">
块级元素,行内元素和行内块元素</view>

3.3浮动与定位
3.3.1元素浮动与清除
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过foat属性来定义浮动，其基本格式如下:

{float:none | left lright;}
其中，none--默认值，表示元素不浮动:
lef--元素向左浮动;
nght--元素向右浮动。
在下面的示例代码中，分别对box1、box2、box3 元素左浮动:

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

在下面的示例代码中，分别对box1、box2、元素右浮动:

<view>box1,box2,右浮动</view>
<view style="border: 1px solid #F00;padding: 5px;">
  <view style="float:right;border: 1px solid #0f0;">box1</view>
  <view style="float:right;border: 1px solid #0f0;">box2</view>
  <view style="border: 1px solid #0f0;">box3</view>
</view>

通过案例我们发现，当box3 左浮动后，父元素的边框未能包裹 box3 元素。这时，可以通过清除浮动来解决。
由于浮动元素不再占用原文档流的位置，因此它会对页面中其他元素的排列产生影响在CSS中，clear属性用于清除浮动元素对其他元素的影响，其基本格式如下:

clear:left | right | both | none

其中，lef--清除左边浮动的影响，也就是不允许左侧有浮动元素:

night--清除右边浮动的影响，也就是不允许右侧有浮动元素,

both--同时清除左右两侧浮动的影响:
none--不清除浮动。
示例代码如下:

<view>box1,box2,右浮动,清除box3受到的右浮动的影响</view>
<view style="border: 1px solid #F00;padding: 5px;">
  <view style="float:right;border: 1px solid #0f0;">box1</view>
  <view style="float:right;border: 1px solid #0f0;">box2</view>
  <view style="clear: both;border: 1px solid #0f0;">box3</view>
</view>

flex布局

flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器，flex布局的所有直接子元素自动成为容器的成员，称为flex项目。

flex容器支持的属性有7种

<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>
<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>
<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>
<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>
<view class="cont1">
  <view class="item">1</view>
  <view class="item" style="flex-basis: 100px;">2</view>
  <view class="item" style="flex-basis: 20px;">3</view>
  <view class="item">4</view>
</view>

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

第四章

组件的定义及属性

组件是页面视图层（wxml）的基本组成单元，组件组合可以构建功能强大的页面结构。

每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：

<标签名 属性名="属性值">内容···</标签名>

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

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

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

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

基础内容组件

基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息。

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

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

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

表单组件
表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。

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

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

checkbox
复选框用于从一组选项中选取多个选项。

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

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

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

1、普通选择器

普通选择器（mode=selector）的属性如表。

2、多列选择器

多列选择器（mode=multiSelector）允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。

3、时间选择器和日期选择器

时间选择器（mode=time）可以用于从提供的时间选项中选择相应的时间。

日期选择器（mode=date）可以用于从提供的日期选项中选择相应的日期。

4、省市选择器

省市选择器（mode=region）是小程序的新版本提供的选择快速地区的组件。

picker-view
picker-view组件为嵌入页面的滚动选择器。

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

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

label
label组件为标签组件，用于提升表单组件的可用性。

form
form组件为表单组件，用来实现将组件内的用户输入信息进行提交。

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

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

image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。

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

video
video组件用来实现视频的播放、暂停等。

camera
camera组件为系统相机组件，可以实现拍照或录像功能。

其他组件

在小程序中，除了前面介绍的组件以外，map组件和canvas组件比较常用。

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

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

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})
  },
  buttonLoading:function(){
    this.setData({loading:!this.data.loading})
  }
})

<button type="default">type:defaulf</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>

第五章

即速应用概述
 

【即速应用】是国内领先的企业微信小程序制作开发工具,免代码生成企业微信小程序平台,拥有海量企业微信小程序模板案例,为小程序企业公司,H5网站提供小程序定制推广,私域流量营销一站式服务。

功能特点：

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

行业模版多样，种类齐全

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

即速应用组件

即速应用提供了大量的组件供用户快速布局页面

文本组件
既可做普通的文本展示，也可设置点击事件。进入文本编辑页面，编辑文字，可以自定义文本的字体大小、位置、粗细、斜体、下划线、颜色等
图片组件
图片组件可以单独放置，可以置入双栏、自由面板、面板、弹窗、侧边栏、滑动面板、动态列表、动态容器、动态表单、动态分类等组件中

按钮组件
按钮组件可以单独放置，可以置入双栏、自由面板、面板、弹窗、侧边栏、滑动面板、动态列表、动态容器、动态表单、动态分类等组件中

标题组件
标题组件是商家可以自定义标题的一个组件工具

视频组件
即速应用视频分为视频组件以及视频列表组件两种，可实现后台上传视频

【视频组件】：前端直接点击播放视频功能，不会进入到视频详情页

【视频列表组件】：可设置付费或免费播放视频，点击播放进入视频详情页有收藏视频、开启弹幕及评论等基础功能，实现用户边观看边互动的效果

【抖音视频列表】：可以展示从该小程序跳转进入拍摄页面所拍摄成功的抖音视频

轮播组件
在页面某个模块内，自动滑动/手指滑动后，可以查看图片/视频，并对当前项进行设置点击事件，就叫做轮播。

双栏组件
用来整体的布局，相当于一个一分为二的板块，它分为两部分，操作的时候显示一个分隔的标志，便于操作，预览则不会出现。双栏默认每个栏占50%，当然，百分比是可以调整的。双栏里面可以添加基本的组件（包括文本组件、图片组件、按钮组件、标题组件、分类组件、音频组件、双栏组件、计数组件），从而达到一个整体的布局效果。双栏也可以嵌套双栏，也就是一个双栏里嵌入再嵌一个双栏就可以分成三部分了，四部分就接着再嵌套一个，如此下去。

分割线组件
小程序分割线组件放置于任意组件之间，实现分割功能

面板组件
面板为容器，可在其中置放文本、图片、按钮、分割线等组件；面板不支持拖拽改变大小，只能在组件样式设置中去设置

自由面板组件
自由面板为容器，可在其中置放文本、图片、按钮、分割线、自由面板等组件；组件置放到自由面板中，支持自由拖动、拖拉调节组件大小

滑动面板组件
定义：在滑动面板上添加图片、文本、按钮等基本组件，在小程序中可通过手指滑动屛幕就可以切换面板，称为滑动面板。

动态分类组件
“动态分类”组件可以展示电商、到店、应用数据等信息，与其他组件不同的是，它有多种展示样式可供选择

侧边栏组件
侧边栏属于一种方便功能操作的形式，通常用来整合部分资源或者放置一些快捷入口，对用户起到提醒或者导航的作用，提升用户的交互体验。

悬浮窗组件
在小程序界面悬挂在右侧，可以快速直接进入到软件功能的快捷键，称为悬浮窗。对悬浮窗可以设置相关点击事件。

即速应用后台管理
即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即时更新。

总览

浏览大致的后台数据。

数据统计

数据统计包括数据总览、用户分析、商品分析、交易分析和营销分析功能。

用户管理

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

除了以上功能外，还有菜品管理、订单管理、营销推广、客服管理等管理系统。

第六章

网络API

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

发起网络请求
wx.request(Object)实现向服务器发送请求、获取数据等各种网络交互操作。

上传文件
wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求。

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

多媒体API

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

图片API

图片API实现对相机拍照图片或本地相册图片进行处理。

1.选择图片或拍照

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

2.预览图片

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

3.获取图片信息

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

4.保存图片到系统相册

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

录音API

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

1.开始录音

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

2.停止录音

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

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

1.播放语音

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

2.暂停播放

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

3.结束播放

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

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

1.播放音乐

wx.playBackgroundAudio(Object)用于播放音乐, 同一时间只能有一首音乐处于播放状态。

2.获取音乐播放状态

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

3.控制音乐播放进度 

wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度。

4.暂停播放音乐

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

5.停止播放音乐

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

6.监听音乐播放

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

7.监听音乐暂停

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

8.监听音乐停止

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

文件API

从网络上下载或录音的文件都是临时保存的, 若要持久保存, 需要用到文件ＡＰＩ。

1.保存文件

wx.saveFile(Object)用于保存文件到本地。

2.获取本地文件列表

wx.getSavedFileList(Object)接口用于获取本地已保存的文件列表, 如果调用成功, 则返回文件的本地路径、文件大小和文件保存时的时间戳(从１９７０/０１/０１ ０８: ００: ００ 到当前时间的秒数) 文件列表。

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

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

4.删除本地文件

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

5.打开文档

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

本地数据缓存API
小程序提供了以键值对的形式进行本地数据缓存功能, 并且是永久存储的, 但最大不超过10ＭＢ, 其目的是提高加载速度。

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

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

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

删除数据
wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。

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

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

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

位置信息API
小程序可以通过位置信息API 来获取或显示本地位置信息, 小程序支持WGS84 和GCj02标准, WGS84 标准为地球坐标系, 是国际上通用的坐标系； GCj02 标准是中国国家测绘局制定的地理信息系统的坐标系统, 是由WGS84 坐标系经加密后的坐标系, 又称为火星坐标系。

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

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

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

设备相关API
设备相关的接口用于获取设备相关信息, 主要包括系统信息、网络状态、拨打电话及扫码等。

获取系统信息
wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。

网络状态
获取网络状态

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

监听网络状态变化

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

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

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

<view class="container">
  <image class="bgaudio" src="{{changedImg?music.coverImg:'/images/分类.png'}}"></image>
  <view class="control-view">
    <image src="/images/导出.png" bind:tap="onPositionTap" data-how="0"></image>
    <image src="/images/{{isPlaying?'pause':'play'}}.png" bind:tap="onAudioTap"></image>
    <image src="/images/导出.png" bind:tap="onStopTap"></image>
    <image src="/images/导出.png" bind:tap="onPositionTap" data-how="1"></image>
  </view>
</view>

.bgaudio{
  height: 350px;
  width: 350px;
  margin-bottom: 100px;
}
.control-view image{
  height: 64px;
  width: 64px;
  margin: 30px;
}

Page({
  data:{
    isPlaying:false,
    coverImg: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")
    })
  }
})