1-6章总结

目录

1.1 小程序特征

1.2 应用场景特点

1.3 工具界面

2.1 小程序的基本目录结构

2.2小程序的开发框架

2.2.1 视图层

2.2.2 逻辑层

2.2.3 数据层

2.3 配置文件

2.3.1 全局配置文件

2.3.2 页面配置文件 

2.4 逻辑层文件

2.4.1 项目逻辑文件

2.4.2 页面逻辑文件 

2.5 页面结构文件

2.6 页面样式文件

3.1 盒子模型

3.2 块级元素与行内元素

3.2.1 块级元素

3.2.2 行内元素

 3.2.3 行内块元素

3.3浮动与定位

3.3.1 元素浮动与清除

3.3.2 元素定位

3.4 flex布局

3.4.1 容器属性

4.1 组件的定义及属性

4.2 容器视图组件

4.2.1 view

 4.2.2 scroll-view

       4.2.3 swiper

4.3 基础内容组件

4.3.1 icon

4.3.2 text 

 4.3.3 progress

4.4 表单组件 

4.4.1 button

​编辑4.4.2 radio

4.4.3 checkbox

4.4.4 switch 

4.4.5  slider

 4.4.6 picker

        1. 普通选择器

2.多列选择器 

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

 4. 省市选择器

4.4.7 picker-view

 4.4.8 input

4.4.9 textarea 

4.4.10 form

4.5 多媒体组件 

4.5.1 image       

4.5.2 audio

 4.5.3 video 

  4.5.4 camera 

  4.6 其他组件

        map属性如下:

        map中markers属性如下:

         map中polyline属性如下:

        canvas属性如下:

5.1 即速应用概述

5.1.1 即速应用的优势

5.1.2 即速应用界面介绍

 5.2 即速应用组件

5.2.1 布局组件

5.2.2 基本组件

5.2.3 高级组件

 5.2.4 其他组件

5.3 即速应用后台管理 (这里介绍3个)

 5.4 打包上传

5.4.1 打包

6.1 网络API

6.1.1 发起网络请求

 6.1.2 上传文件

6.1.3 下载文件

6.2 多媒体API

6.2.1 图片API

6.2.2 录音API

        1.开始录音

         2. 停止录音

6.2.3 音频播放控制API

1. 播放语音

        2. 暂停播放

        3. 结束播放

6.2.4 音乐播放控制API

 1.播放音乐

2.获取音乐播放状态

6.3 文件API

        1. 保存文件

        2. 获取本地文件列表

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

    4. 删除本地文件

     5.打开文档

6.4 本地数据及缓存API

6.4.1 保存数据

1.wx.setStorage接口

6.4.2 获取数据

1. wx.getStorage

6.4.3 删除数据

1. wx.removeStrage

 2. wx.removeStorageSync

6.4.4 清空数据

1. wx.clearStorage()

2. wx.clearStorageSync()

6.5 位置信息API

6.5.1 获取位置信息

        wx.getLocation调用成功后,返回的参数如表:

6.5.2 选择位置信息

        wx.chooseLocation调用成功后,返回的参数如表:

6.5.3 显示位置信息

6.6 设备相关API

6.6.1 获取系统信息

        wx.getSystemInfo接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。其相关参数如表:

        wx.getSystemInfo接口或wx.getSystemInfoSync接口调用成功后,返回系统相关信息如表:

6.6.2 网络状态

 1. 获取网络状态

2. 监听网络状态变化

6.6.3 拨打电话

6.6.4 扫描二维码


1.1 小程序特征

  1. 无须安装
  2. 触手可及
  3. 用完即走
  4. 无须卸载

1.2 应用场景特点

  1.  简单的业务逻辑
  2. 低频度的应用场景

1.3 工具界面

工具界面分为五大区域:工具栏、模拟区、目录文件区、编辑区和调试区。

2.1 小程序的基本目录结构

微信小程序的基本结构目录中,项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.json、app.wxss和project.config.json)。

在主目录中,3个以“app”开头的文件是微信小程序框架的主描述文件,是应用程序级别的文件。这3个文件不属于任何页面。

小程序的基本结构目录包括主体文件和页面文件。

2.2小程序的开发框架

        微信团队为小程序的开发提供了MINA框架。MINA框架通过微信客户端提供文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供了一整套JavaSeript API,让开发能够非常方便地使用微信客户端提供的各种基础功能快速构建应用。(如图)

aa02e37b6f164bb0a39b7a64c53d051c.png

        小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言 WXML(WeiXin Markup Language)和用于描述 WXML组件样式的 WXSS(WeiXinStyle Sheets)组成,它们的关系就像HTML和CSS的关系。逻辑层(AppService)是 MINA框架的服务中心,由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑网络请求、数据处理,但不能使用JavaSeript中的DOM操作。小程序中的各个页面可以通过 逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

        MINA 框架为页面组件提供了 bindtap、bindtouchstart 等与事件监听相关的属性,并与逻辑层中的事件处理函数绑定在一起,实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定,当逻辑层中的数据变更时,小程序会主动触发对应页面组件的重新数据绑定。

        微信小程序不仅在底层架构的运行机制上做了大量的优化,还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Nalive)的组件承载。所以小程序 MINA框架有着接近原生App的运行速度,对 Android 端和i0S 端能呈现得高度一致并为开发者准备了完备的开发和调试工具。

2.2.1 视图层

        MINA框架的视图层由WXML与WXSS编写,由组件来进行展示。对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构wxss 文件用于描述页面的样式。
        微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层,而数据展现是以组件来进行的。组件是视图的基本组成单元。

2.2.2 逻辑层

        逻辑层用于处理事务逻辑。对于微信小程序而言,逻辑层就是所有.js 脚本文件的集合微信小程序在逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层是采用JavaSeript编写的。在 JavaScript的基础上,微信队做了适当修改,以便提高开发小程序的效率。主要修改包括:

        (1)增加app()和Page()方法,进行程序和页面的注册,
        (2)提供丰富的 API,如扫一扫、支付等微信特有的能力。
        (3)每个页面有独立的作用域,并提供模块化能力。
        逻辑层就是通过各个页面的.js脚本文件来实现的。由于小程序并非运行在浏览器中所以 JavaScript在 Web 中的一些功能在小程序中无法使用,如 document、window 等。开发者开发编写的所有代码最终会被打包成独立的JavaSeript 文件,并在小程序启动时候运行,直到小程序被销毁。

2.2.3 数据层

        数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

        1.页面临时数据或缓存
        setData()函数的参数接收一个对象,以(key,value)的形式表示将 key 在 this. data 中this. data 的值。对应的值改变成 value。
        2.文件存储(本地存储)使用数据 API接口,如下:wx.getStorage 获取本地数据缓存,
设置本地数据缓存。wx.setStoragewx.clearStorage 清理本地数据缓存
        3.网络存储与调用

        上传或下载文件 API接口,如下:
        ■wx.request 发起网络请求。
        ■wx.uploadFile 上传文件。
        ■wx.downloadFile 下载文件
        调用 URL的 API接口,如下:

        ■wx.navigateTo 新窗口打开页面

        ■wx.redirectTo 原窗口打开页面。

2.3 配置文件

        小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序,页面配置文件只能作用于当前页面。

2.3.1 全局配置文件

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

99332bfe24a14eb0beaa49bb329ef2d4.png

2.3.2 页面配置文件 

        页面配置文件(*.json)只能设置本页面的窗口表现,而且只能设置window 配置项的内容。在配置页面配置文件后,页面中的window配置值将覆盖全局配置文件(app.json)中的配置值。
        页面中的 window 配置只需书写配置项,不必书写 window,代码示例如下:

{

"navigationBarBackgroundColor" : "#ffffff" ,

"navigationBarTextStyle":"black",

"navigationBarTitleText":"页面 window 配置演示",

"backgroundColor":"#eeeeee",

"backgroundTextStyle":"light "

}

2.4 逻辑层文件

        小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件。

2.4.1 项目逻辑文件

fe3942a573864c1cadff6c1d70238b23.jpeg

2.4.2 页面逻辑文件 

dbbc60ded0d04817a1a6505846f5776e.jpeg

2.5 页面结构文件

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

2.6 页面样式文件

  1.         尺寸单位
  2.         样式导入
  3.         选择器
  4.         WXSS样式

96f7331a5b164a099c84355ac1d1569a.png

f6801aec6c734d75b6a7fc78741ac202.png

3.1 盒子模型

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

3f39e701d1c1442a8311040a706f0fd9.jpeg

         此外,对padding、border 和margin可以进一步细化为上、下、左、右4个部分,在CSS中可以分别进行设置,如图所示。

621070b9cdf84fb7a5884e99cfed6f76.jpeg

3.2 块级元素与行内元素

        元素按显示方式分为块级元素、行内元素和行内块元素,他们的显示方式由display属性控制。

3.2.1 块级元素

        块级元素默认占一行高度,一行内通常只有一个块级元素(浮动后除外),添加新的块级元素时,会自动换行,块级元素一般作为盒子出现。

3.2.2 行内元素

        行内元素,不必从新一行开始,通常会与前后的其他行内元素显示在同一行中,它们不占有独立的区域,仅靠自身内容支撑 结构,一般不可以设置大小,常用于控制页面中文本的样式。将一个元素的display属性设置为inline后,该元素即被设置为行内元素。

 3.2.3 行内块元素

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

3.3浮动与定位

3.3.1 元素浮动与清除

        元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制,移到其父元素中指定位置的过程。

3.3.2 元素定位

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

    {position:static|relative|absolute|fixed}

其中,static——默认值,该元素按照标准文档流布局;

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

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

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

3.4 flex布局

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

        容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main star,结東位置叫做main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。
        项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。flex布局模型如图所示。

da655799ce6441afa447ac71ac947c0f.png


        设置 display属性可以将一个元素指定为flex布局,设置 flex-direction 属性可以指定主轴方向。主轴既可以是水平方向,也可以是垂直方向。

3.4.1 容器属性

flex容器支持的属性有7种,如表所示。

665a865f477d477a9c8084e87a63b42e.png

 1.display属性

display用来指定元素是否为ex布局,语法格式为:

.box{display:flex|inline-flex;}

其中,flex--块级flex布局,该元素变为弹性盒子;
        inline-flex--行内flex布局,行内容器符合行内元素的特征,同时在容器内又符合flex布局规范。
        设置了 flex 布局之后,子元素的 float、clear 和 vertical-align 属性将失效。

2.flex-direction属性

        flex-direction 用于设置主轴的方向,即项目排列的方向,语法格式为:

.box{flex-direction:row|row-reverse|column|column-reverse;}

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

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

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

        column-reverse--主轴为垂直方向,起点在底端.如图所示为元素在不同主轴方向下的显示效果

 9fd0bbed7efe40caad44cb67b3806dd7.png

 (a)row; (b) row-reverse; (c) column; (d) column-reverse

 3. flex-wrap

 flex-wrap用来指定当项目在一根轴线的排列位置不够时,项目是否换行,其语法格式如下:

.box{flex-wrap:nowrap |wrap |wrap-reverse;}

 其中,nowrap--不换行,默认值;

        wrap--换行,第一行在上方;
        wrap-reverse--换行,第一行在下方。
        当设置换行时,还需要设置align-iem属性来配合自动换行,但align-item 的值不能" stretch ".
        flex-wrap 不同值的显示效果如图所示:

9f7faf2cd9824f91b986424c767f885a.png

(a)nowrap; (b)wrap; (c)wrap-severse

 4.flex-flow

        flex-fow是flex-direction 和flex-wrap 的简写形式,默认值为 row nowrap。语法格式如下:

.box{flex-flow:<flex-direction>||<flex-wrap>;}

5.justify-content

         justify-content用于定义项目在主轴上的对齐方式。语法格式如下:

.box {justify-content:flex-start |flex-end |center |space-between|space-around;}

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

        flex-start——左对齐,默认值;
        flex-end——右对齐;
        center——居中;
        space-between——两端对齐,项目之间的间隔都相等
        space-around——每个项目两侧的间隔相等。
        如图所示为justify-content 不同值的显示效果:

452c293b2caa487cb7d1f4053b883f41.png

 (a)flex-start(b)center;(c)flex-end;(d)space-between;(e)space-around

 6.align-items

        align-items用于指定项目在交叉轴上的对齐方式,语法格式如下:

.box{align-items:flex-start |flex-end |center |baseline |stretch;}

其中,align-items——与交叉轴方向有关,默认交叉由上到下;
        flex-start——交叉轴起点对齐;
        flex-end——交叉轴终点对齐;
        center——交叉轴中线对齐;
        baseline——项目根据它们第一行文字的基线对齐;
        stretch——如果项目未设置高度或设置为auto,项目将在交叉轴方向拉伸填充容器,此为默认值。

4.1 组件的定义及属性

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

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

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

4.2 容器视图组件

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

4.2.1 view

        view组件是块级组件,没有特殊功能,主要用于布局显示。view组件的特有属性如表所示。

efaca337cab74853ace3dac728ca4b99.png

eddc843e0dd547f6be8a60fdac41e860.png

 4.2.2 scroll-view

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

7ccb4632eca142dea41f75b61942254a.png

       4.2.3 swiper

        swiper组件可以实现轮播图、图片预览、滑动页面等效果。属性如表所示:

1127fc690ef549399475f28f737ee515.png

4.3 基础内容组件

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

4.3.1 icon

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

b87ec78090fb4b288e91a490612bc22f.png

4.3.2 text 

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

956f0b32cb0f4af7af490625888f6926.png

 4.3.3 progress

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

progress组件属于块级元素,其属性如表所示:

        207b74b73d94423ea3d627d38cd94b44.png

4.4 表单组件 

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

4.4.1 button

        button组件用来实现用户和应用之间的交互,同时按钮的颜色起引导作用。一般来说,在一个程序中一个按钮至少有三种状态:默认点击(default)、建议点击(primary)、谨慎点击(warn)。在构建项目时,应在合适的场景使用合适的按钮,当<button>被<form/>包裹时,可以通过设置form-type属性来触发表单对应的事件。button组件的属性如表所示:

1ce7bf19faf2443880cf823899e9a19e.png4.4.2 radio

        单选框用来从一组选项中选取一个选项。在小程序中,单选框由<radio-group>和<radio/ >两个组件组合而成,一个包含多个<radio/>的<radio-group/>表示一组单选项,在同一组单选项中<radio/>是互斥的,当一个按钮被选中后,之前选中的按钮就变为非选。它们的属性如表所示:

67b40b7a42954c60bb9dfb8851aaa63f.png

4.4.3 checkbox

        复选框用于从一组选项中选取多个选项,小程序中复选框由<checkbox-group/>和<checkbox/>两个组件组合而成。一个<checkbox-group/>表示一组选项中选中多个选项。它们的属性如表所示:

0bbda3e2f6404725b0c076c8350fd005.png

4.4.4 switch 

        switch组件的作用类似开关选择器,其属性如表所示:

6c08608c2dc34ee291d95e338fe5d7f4.png

4.4.5  slider

         slider组件为滑动选择器,可以通过滑动来设置相应的值,其属性如表所示:

7d2725a4c071426890ccd4184e8ae252.png

 4.4.6 picker

        picker组件为滚动选择器,当用户点击picker组件时,系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器,分别是:selector、multiSelector、time、date、region。

        1. 普通选择器

        普通选择器的属性如表所示:

e8d5fb68dea84cc9a66a9ad7825d171d.png

2.多列选择器 

        多列选择器允许用户从不同列中选择不同的选择项,其选项是二维数组或数组对象。其属性如表所示:

72c96108934949e4a64cadbdf3235dac.png

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

         它们的属性如下:8afe91f7a35143988b4ea999ffbe087c.png

2a9a4358d33d4a79a9d36c671e3eceb8.png

 4. 省市选择器

        省市选择器是小程序的新版本提供的快速选择地区的组件,其属性如表所示:

9428e917d27043df957f95ae54dedb0c.png

4.4.7 picker-view

1b3309ff71d84951b7ce2876bcc38688.png

 4.4.8 input

a6665f961b5943fd989688fb61fbacb4.png

3cc8b158b2384b138415e01f8b1555bd.png

4.4.9 textarea 

        textarea组件为多行输入框组件,可以实现多行内容的输入。其属性如下:

32eb608923a6459d8994be23a838d372.png

872c4ccb7ca04410be63cb8a21d5bdaf.png

8e8d25f488064419a9c8ba1de6f5a627.png

4.4.10 form

         form属性如下:

fe169b7a194847e48dbe32978b9b3da7.png

4.5 多媒体组件 

        多媒体包括image、audio、video、camera组件。其属性如下:

d2c26f85294b4ad0a2a44841114b598e.png

4.5.1 image       

        缩放模式代码如下:

  1. //wxml

  2. <block wx:for="{{modes}}">

  3. <view>当前图片的模式是:{{item}}</view>

  4. <image mode="{{item}}" src="../image/ji.png" style="width: 100%;height:100%" />

  5. </block>

  6. //js

  7. Page({

  8. data:{

  9. modes:['scaleToFill','aspectFit','aspectFill','widethFix']

  10. }

  11. })

        裁剪模式代码如下: //wxml

  1. <block wx:for="{{modes}}">

  2. <view>当前图片的模式是:{{item}}</view>

  3. <image mode="{{item}}" src="./image/leishen.jpg" style="width:100%,height:100%" />

  4. </block>

  5. //js

  6. Page({

  7. data:{

  8. modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']

  9. }

  10. })

4.5.2 audio

        audio组件用来实现音乐播放、暂停等,其属性如下:

2e7862e932e947ffa29699c2283cc342.png

 4.5.3 video 

        video组件实现视频的播放暂停等,其属性如下:

b75ad5640ba2484ba847de860f22b774.png

  4.5.4 camera 

        该组件可实现拍照或录像功能,在一个页面中,只能有一个camera组件。其属性如下:

24b41b73ba844398baa3b470400e274d.png

  4.6 其他组件

        除了前面介绍的组件以外,map和canvas组件比较常用。

        map组件用于在页面中显示地图或路径,canvas组件用来绘制图形,相当于一块无色透明的普通画布。

        map属性如下:

b8cfe527e8894901b4d1095b0bc84a48.png

476f8d14fb864db8a7effa14f69bfb8f.png

        map中markers属性如下:

76b8b88558f84d22a761b7af67974813.png

         map中polyline属性如下:

68e576222d7d4724a76af3cb27bb0bcd.png

        canvas属性如下:

6d78d5174cf04935bbcc94ad93ae1e7d.png

5.1 即速应用概述

        即速应用是深圳市咫尺网络科技开发有限公司开发的一款具有小程序开发能力的软件。

5.1.1 即速应用的优势

  1. 开发流程简单,零门槛制作。
  2. 行业模板多样,种类齐全。
  3. 丰富的功能组件和强大的后台管理。

bef8b5807c664b23a0e61b987bd2cd0f.png

5.1.2 即速应用界面介绍

  1. 菜单栏
  2. 工具栏
  3. 编辑区
  4. 属性面板

046a444a6df54cc4af841468811184f5.png

菜单栏 

3dbf9111dc48477483b4da3111d3e248.png

工具栏

3fc0601d34c449d5838f49fb773b6dbf.png

编辑区

99a45e5cd9ae409a82848c9acef22245.png

属性面板

 5.2 即速应用组件

        即速应用提供了大量的组件供用户快速布局页面,包括7个布局组件、9个基本组件、18个高级组件和2个其他组件组成。

5.2.1 布局组件

        布局组件分为双栏组件、面板组件、自由面板组件、顶部导航组件、底部导航组件、分割线组件、动态分类组件部分。

 文本图片和按钮的应用。

624a046b81714d89ae842904c58a0cf9.png

        双栏组件和分割线及弹窗的应用。

160f154ada074a70aab85c2569fad0ab.png

5.2.2 基本组件

        如图所示:

61662733a23f445e81fa95944419988a.png

5.2.3 高级组件

         动态列表组件

d32286e539834fedbe43d070d6876ae2.png

        个人中心组件

8bdb1e7a67e34955bf3dff5fde03452c.png

        动态表单组件 
 

413271e7a318447dbc0d2354ae254f49.png

        评论组件

6d25dc8c5a2d43078b494445e7382be6.png

        计数组件

4ab1a74c1e994c378baaea26775a3fe3.png

        地图组件及城市定位组件

3f9fb64c00214a56a70ca93bde03e24d.png

        悬浮窗组件和分类横滑的应用

d7d60e3f4f0041ceac0b5f14499cfd84.png

 5.2.4 其他组件

        音频组件

0e9d1ab7c7a8489fb89990f32d4a8a86.png

        动态容器组件 

010bc31604f14a7f97c9f4950e7d3f89.png

5.3 即速应用后台管理 (这里介绍3个)

        数据管理

b5b28446f1f947cc902ae123aae50e56.png

        分享管理

27bdb99062b74a38a803e7a6957d74e2.png

         用户管理

300bf90d56a14b3286558434d162cb79.png

 5.4 打包上传

        即速应用可以将小程序的代码打包,该代码包可以通过微信开发者工具来对接微信小程序。

5.4.1 打包

03cf29d7c52d4c08bf8ed6387d37215b.png

        在系统设置找到小程序设置进行授权即可打包代码到开发者工具。 

6.1 网络API

6.1.1 发起网络请求

wx.request相关参数如下:decba4ac1218458db88c4d3bd6916fbd.png21d412eccd69466d9b2240d8d7227abe.png

 6.1.2 上传文件

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

6.1.3 下载文件

        wx.downloadFile用于实现下载文件资源到本地,在客户端发起一个HTTPS GET请求,返回文件的临时路径。其相关参数如表:

12662c341d3a4c119ba002d19b56a8cb.png

6.2 多媒体API

         多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API。

6.2.1 图片API

1. 选择图片或拍照

        wx.chooseImage接口用于从本地相册选择图片或使用相机拍照。其属性如下:

9945aa77487e4005a747e7f7c0b607b7.png

39d43e85e93d49b7b0271ce0c26a4b9a.png

3. 获取图片信息

        wx.getImageInfo接口用于获取图片信息,其相关参数如表:

73d46bd37fa9491ea334672123c22f0c.png

4. 保存图片到系统相册

        wx.saveImageToPhotosAlbum接口用于保存图片到系统相册,其参数如表:

9c82ed5668374cf6b913ec77e8a1e15c.png

6.2.2 录音API

        1.开始录音

        wx.startRecord接口用于实现开始录音。其相关参数如表:

58fe2e84bb4b489898918307a5e07d72.png

         2. 停止录音

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

6.2.3 音频播放控制API

1. 播放语音

        wx.playVoice接口用于开始播放语音,其相关参数如表:

36100dbd3a7a40d090b6180ea3b595d7.png

        2. 暂停播放

        wx.pauseVoice用于暂停正在播放的语音。

        3. 结束播放

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

6.2.4 音乐播放控制API

 1.播放音乐

        wx.playBackgroundAudio用于播放音乐,其相关参数如表:

26462d5f30974a1c9264546691d0a8c2.png

2.获取音乐播放状态

        代码如下:

  1. //wxml

  2. <view class="container">

  3. <image class="bgaudio" src="{{changeImg?music.coverImg:'/image/background.png'}}"/>

  4. <view class="control-view">

  5. <image src="../image/cxk.png" bind:tap="onPositionTap" data-how="0"/>

  6. <image src="/image/{{isPlaying?'pause':'play'}}.png" bind:tap="onAudioTap" />

  7. <image src="../image/ik.gif" bind:tap="onStopTap"/>

  8. <image src="../image/ji.png" bind:tap="onPositionTap" data-how="1"/>

  9. </view>

  10. </view>

  11. //js

  12. Page({

  13. data:{

  14. isPlaying:false,

  15. changeImg:false,

  16. //音乐内容

  17. music:{

  18. "url":"http://bmbo-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",

  19. "title":"盛晓玫 - 有一天",

  20. "coverImg":"http://bmbo-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg"

  21. },

  22. },

  23. onLoad:function() {

  24. this.onAudioState();

  25. },

  26. onAudioTap:function(event) {

  27. if(this.data.isPlaying){

  28. wx.pauseBackgroundAudio();

  29. }else{

  30. let music = this.data.music;

  31. wx.playBackgroundAudio({

  32. dataUrl: music.url,

  33. title:music.title,

  34. coverImgUrl:music.coverImg

  35. })

  36. }

  37. },

  38. onStopTap:function() {

  39. let that = this;

  40. wx.stopBackgroundAudio({

  41. success:function() {

  42. that.setData({isPlaying:false,changeImg:false});

  43. }

  44. })

  45. },

  46. onPositionTap:function() {

  47. let how = event.target.dataset.how;

  48. wx.getBackgroundAudioPlayerState({

  49. success:function(res) {

  50. let status = res.status;

  51. if(status === 1){

  52. let duration = res.duration;

  53. let currentPosition =res.currentPosition;

  54. if(how === "0"){

  55. let position = currentPosition - 10;

  56. if(position <0){

  57. position = 1;

  58. }

  59. wx.seekBackgroundAudio({

  60. position: position

  61. });

  62. wx.showToast({

  63. title: '快退10s',duration:500

  64. });

  65. }

  66. if(how === "1"){

  67. let position = currentPosition + 10;

  68. if(position>duration){

  69. position = duration - 1;

  70. }

  71. wx.seekBackgroundAudio({

  72. position: position,

  73. });

  74. wx.showToast({

  75. title: '快进10s',duration:500

  76. });

  77. }else{

  78. wx.showToast({

  79. title: '音乐未播放',duration:800

  80. })

  81. }

  82. }

  83. }

  84. })

  85. },

  86. onAudioState:function() {

  87. let that = this;

  88. wx.onBackgroundAudioPlay(function() {

  89. that.setData({isPlaying:true,changeImg:true});

  90. console.log("on play");

  91. });

  92. wx.wx.onBackgroundAudioPause(function() {

  93. that.setData({isPlaying:false});

  94. console.log("on pause");

  95. });

  96. wx.onBackgroundAudioStop(function() {

  97. that.setData({isPlaying:false,changeImg:false});

  98. console.log("on stop");

  99. })

  100. }

  101. })

  102. //wxss

  103. .bgaudio{

  104. height: 350rpx;

  105. width: 350rpx;

  106. margin-bottom: 100rpx;

  107. }

  108. .control-view{

  109. height: 64rpx;

  110. width: 64rpx;

  111. margin: 30rpx;

  112. }

        运行结果如下:

0b9d188d9e6743b0bb2a5866f667f4a4.png

6.3 文件API

        1. 保存文件

        wx.saveFile接口用于保存文件到本地,其相关参数如表:

1a8134e5ff6f408fb7396bfc0882becf.png

        2. 获取本地文件列表

        wx.getSavedFileList接口用于获取本地已保存的文件列表。其相关参数如下:

bbefa2904d134fc6a7b414a9cbb1fa15.png

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

        wx.getSaveFileInfo接口用于获取本地文件的文件信息,此接口只能用于获取已保存的文件,其相关参数如表:

4cae6dc3637f4af181742228551e218f.png

    4. 删除本地文件

        wx.removeSaveFile接口用于删除本地存储的文件,其相关参数如表:

a04889b12b594841adceaaa3397caa90.png

     5.打开文档

        wx.downloadFile接口用于新开页面打开文档,其相关参数如下:

af749f40fa04454385675702e4570456.png

6.4 本地数据及缓存API

6.4.1 保存数据

1.wx.setStorage接口

        wx.setStorage接口将数据存储到本地缓存接口指定的key中,接口执行后会覆盖掉原来key对应的内容。其相关参数如表:

c720315cd8e3461a991ddfd57084d0c8.png

 2. wx.setStorageSyne(key,data)

6.4.2 获取数据

1. wx.getStorage

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

8a91ac8d34dc45789953e0fbf3fac869.png

6.4.3 删除数据

1. wx.removeStrage

        wx.removeStorage接口用于从本地缓存中异步移除指定key。其相关参数如表:

8a91ac8d34dc45789953e0fbf3fac869.png

 2. wx.removeStorageSync

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

6.4.4 清空数据

1. wx.clearStorage()

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

2. wx.clearStorageSync()

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

6.5 位置信息API

6.5.1 获取位置信息

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

0f829e34217a4fc693b4b2684be36b99.png

        wx.getLocation调用成功后,返回的参数如表:

ffe484137f5a43c2b39f2b8c42d3c673.png

6.5.2 选择位置信息

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

6aa7b73a9d684f928a198d0565ccdef5.png

        wx.chooseLocation调用成功后,返回的参数如表:

a1443c15dd294f52a47a71d5184baf1b.png

6.5.3 显示位置信息

        wx.openLocation接口用于在微信内置地图中显示位置信息,其相关参数如表:

e5badd1b844c4b8b875d6c4702f69faa.png

f2f6e8877fd4492dbe1c99cd20b0b608.png

6.6 设备相关API

6.6.1 获取系统信息

        wx.getSystemInfo接口、wx.getSystemInfoSync()接口分别用于异步和同步获取系统信息。其相关参数如表:

be9194e229ff453fb151518792068663.jpeg

        wx.getSystemInfo接口或wx.getSystemInfoSync接口调用成功后,返回系统相关信息如表:

36b8819ddc444d70912eb74e92ec301d.jpeg

6.6.2 网络状态

 1. 获取网络状态

        wx.getNetworkType用于获取网络类型,其相关参数如表:

a2bce3e850f146d4993b392345c2d402.jpeg

2. 监听网络状态变化

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

6.6.3 拨打电话

        wx.makePhoneCall接口用于实现调用手机拨打电话,其相关参数如表:

55e5633ab3724c599833b749c1f61885.jpeg

6.6.4 扫描二维码

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

691f428abb1c4ede8c330576328183b9.jpeg

微信小程序小程序

autho.png

全国首例AI声音侵权案一审宣判!

pointRight.png

发布于2024-04-11著作权归作者所有

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值