小程序复习(1~6章)

第一章

小程序的特征

1、无须安装

2、触手可及

3、用完即走

4、无需卸载

小程序应用场景的特点

简单的业务逻辑

低频度的使用场景

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

微信小程序开发者工具界面划分五大区域：工具栏、模拟器区、目录文件区、编辑区和调试区。

(1)工具栏

在工具栏中可以实现多种功能，例如账号的切换，模拟区，编辑区，调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。

(2)模拟区

在模拟区中选择模拟手机的类型，显示比例，网络类型后，模拟器中会显示小程序的运行效果。

(3)目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
(4)编辑区
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js 及.json文件的操作，使用组合键能提高代码的编辑效率。

(5)调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、 Wxml、Sensor和Trace。最右边的扩展菜单项是定制与控制开发工具按钮。

第二章

小程序的基本目录结构

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

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同扩展名（.wxml、.wxss、.js、.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。同一个页面的4个文件必须具有相同的路径与文件名。utils目录用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，可以将其引入后直接使用。

主体文件

微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，复制小程序的整体配置，他们的名称是固定的。

app.js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件会和其他页面的逻辑文件打包成一个JavaScript文件。

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

app.wxss 小程序主样式表文件，类似HTML的.css文件，在主样式表文件中设置的样式在其他页面文件中同样有效。

页面文件

小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对应的资源进行数据绑定。

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

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

.wxss文件 页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss中指定的样式规则。

.json文件 页面配置文件。

小程序的开发框架

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

视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述页面的样式

逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈

数据层

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

配置文件

全局配置文件

全局配置项

window配置项及其描述

 tabBar配置项

tabBar中list选项

 netwTimeout配置项

逻辑层文件

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

项目逻辑文件

页面逻辑文件

页面结构文件 

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

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

数据绑定

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

运算

在{ { } }内可以做一些简单的运算（主要由算术运算、逻辑运算、三元运算、字符串运算），这些运算均应符合javascript运算规则

页面事件

页面样式文件

本章小结

讲解了小程序的目录结构，通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。还有三种运算的讲解和小程序模板。

第三章

盒子模型

盒子模型就是我们页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容（content），内边距（padding），边框（border）和外边距（margin）4个部分组成

图中各元素的含义如下：

width和height 内容的宽度和高度

padding-top，padding-right，padding-botton和padding-left 上内边距，右内边距，底内边距和左内边距。

border-top，border-right，border-botton和borde-left 上边框，右边框，底边框和左边框。

margin-top，margin-right，margin-bottom和margin-left 上外边距，右外边距，底外边距和左外边距。

块级元素与行内元素

块级元素

块级元素的特点：

（1）一个块级元素占一行

（2）块级元素的默认高度由内容决定，除非自定义高度

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度

（4）块级元素的宽度，高度，外边距及内边距都可以自定义设置

（5）块级元素可以容纳块级元素和行内元素

示例代码如下

//块级元素
<view style="border: 1px solid #0f0;">块级元素1</view>
 
<view style="border: 1px solid #0f0; margin: 15px; padding: 20px;">块级元素2</view>
 
<view style="border: 1px solid #0f0;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>

行内元素

行内元素的特点：

（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

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

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

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

行内块元素 

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

 浮动与定位

元素浮动与清除：

none-----默认值，表示元素不浮动

left------元素向左浮动

right------元素向右浮动

<view>box1,box2,box3没浮动</view>
<view style="border: 5px solid #f00; padding: 5px;">
<view style="border: 5px solid #0f0;">box1</view>
<view style="border: 5px solid #0f0;">box2</view>
<view style="border: 5px solid #0f0;">box3</view>
</view>
 
<view>box1左浮动</view>
<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>kj
</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

元素定位

static--默认值，该元素按照标准流进行布局

relative--相对定位，相对于它在原本挡流的位置进行定位，它后面的盒子仍以标准流方式对待它；

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

fixed--固定定位，相对于浏览器窗口进行定位

flex布局

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

 容器属性

flex容器支持的属性有以下7种

项目属性 

<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布局的基本原理，容器和项目的属性、

第四章

组件的定义及属性

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、elass、style、hidden、data-*、bind */catch *等
（1）、id组件的唯一表示，保持整个页面唯一，不常用。
（2）、class 组件的样式类，对应WXSS 中定义的样式。
（3）、style 组件的内联样式，可以动态设置内联样式，
（4）、hidden 组件是否显示，所有组件默认显示。
（5）data-* 自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值。

（6）、bind*/catch* 组件的事件，绑定逻辑层相关事件处理函数。

容器视图组件

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

View

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

​

​

示例代码如下

<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;">2</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 组件的相关属性可以实现滚动视图的功能。

​

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

wxml

<view class="container" style="padding: 0px;">
<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>

js

var url = "http://www.imooc.com/course/ajaxlist";
var page = 0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lang_id = 0;
var pos_id = 0;
var unlearn = 0;
//请求数据
var losdMore = function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url: 'url',
    data:{
      page:page,
      page_size:page_size,
      sort:sort,
      is_easy:is_easy,
      lang_id:lang_id,
      pos_id:pos_id,
      unlearn:unlearn
    },
    success:function(res){
      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,
   scrollHeigt:0
 },
 onLoad:function(){
   //这里要注意，微信的scroll-view必须设置高度才能监听滚动事件，所以需要在页面的onLoad事件中为scroll-view的高度赋值
   var that = this;
   wx.getSystemInfo({
     success:function(res){
       that.setData({
         scrollHeigt: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");
 }
}) 

 swiper

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

​

基础内容组件 

icon

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

​

text

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

​

 progress

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

​

表单组件

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

button

button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一个按钮至少有3种状态：默认点击（default）、建议点击（primary）、谨慎点击（warn）。在构建项目时，应在合适的场景使用合适的按钮，当<button>被<from/>包裹时，可以通过设置from-type属性来触发表单对应的事件。

wxml

<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bind:tap='buttonsize' size="{{size}}">改变size</button>
<button type="default" bind:tap="butttonplain" plain="{{plain}}"></button>
<button type="default" bind:tap="buttonLoading" loading="{{loading}}">改变loading显示 </button>

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

radio

单选框用来从一组选项中选取一个选项。在小程序中单选框由<radio-group/>（单项选择器）和<radio/>（单选项目）两个组件组合而成

checkbox

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

 switch

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

slider 

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

picker

picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是:selector(普通选择器)、multiSelector(多列选择器)、time(时间选择器)、date(日期选择器)、region(省市选择器)

多列选择器

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

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

picker组件region选择器属性

picker-view

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

input

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

textarea

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

label

label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下，当点击1abel组件时就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前，label组件可以绑定的控件有<button/><checkbox/>、<radio/>、<switch/>。

<view><checkbox></checkbox>中国</view>
<view><label><checkbox></checkbox>中国</label></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>

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

运行结果

from

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

多媒体组件

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

2、裁剪模式
top 不缩放图片，只显示图片的顶部区域
bottom不缩放图片，只显示图片的底部区域，
center 不缩放图片，只显示图片的中间区域。
left 不缩放图片，只显示图片的左边区域。
向式直垂苑平太查只常通
right 不缩放图片，只显示图片的右边区域，
top_left 不缩放图片，只显示图片的左上边区域
top_right 不缩放图片，只显示图片的右上边区域，

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

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

示例代码如下

<block wx:for="{{modes}}">
<view>当前图片的模式是:{{item}}</view>
<image mode="{{item}}" src="../../images/con2.jpg" style="width: 100%,height 100%"/>
</block>

Page({
  data:{
    modes:['top','center','bottom','left','right',
  'top_left','top_right','bottom_left','bottom_right']
  }
})

audio

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

示例代码

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>

js

Page({
  data:{
  poster:'http://y.gtimg.cn/music/photo_new/T1002R300x300M00KF44GyaSk.jpg? max_age=2592000',name:'此时此刻',
  author:'许巍',
  src:'http://ws.streamqqmusicqqcomM500001VfvsJ21xFqbffffffff82def4af4b12b3ca9337d5e7uin=346897220vkey=6292E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36DFEAF74C0A5CCFADD6471160CAF3 E6A&fromtag = 46',
},
  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
}
})
}
})

运行结果

 video

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

camera

camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中，只能有一个camera 组件。在开发工具中运行时，使用电脑摄像头实现拍照或录像;在手机中运行时，使用手机前后摄像头实现拍照或录像。

其他组件

map

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

用于在地图上显示标记的位置

map组件的polyline属性用来指定一系列坐标点，从数组第一项连线到最后一项，形成一条路线，可以指定线的颜色，宽度，线形以及是否带箭头等

canvas

canvas组件用来绘制图形，相当于一块无色透明的普通图布。canvas 组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图功能。在默认情况下，canvas组件的默认宽度为 300 px，高度为225 px，同一页面中的 canvas-id不能重复，否则会出错

第五章

即速应用

即速应用概述

即速应用优势

1、简单，零门槛制作

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

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

即速应用界面介绍

1、菜单栏

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

2、工具栏

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

3、编辑区 

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

4、属性面板

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

即速应用组件

布局组件

1、双栏组件

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

2、面板组件

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

3、自由面板组件

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

4、顶部导航组件

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

5、底部导航组件

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

6、分割线组件

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

7、动态分类组件

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

基本组件

基本组件是小程序页面常用的组件，包括文本，图片，按钮，标题，轮播，分类，图片列表。

1、文本组件

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

2、图片组件

图片组件用于在页面中展示图片

3、按钮组件

按钮组件用于在页面中设置按钮

4、标题组件

标题组件用于在页面中设置标题

5、轮播组件

轮播组件用于实现图片的轮播展示

6、分类组件

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

7、图片列表组件

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

8、公告组件

9、视频组件

视频组件用于展示视频

高级组件

高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改

1、动态列表组件

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

2、个人中心组件

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

3、动态表单组件

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

4、评论组件

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

5、计数组件

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

6、地图组件

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

7、城市定位组件

城市定位组件通常与列表类组件搭配使用，常见搭配有动态列表和商品列表。例如，城市定位组件与商品列表搭配，可以实现通过城市定位来搜索出某具体位置信息下的商品列表

8、悬浮窗组件

悬浮窗组件的固定搭配有：客服、我的订单、购物车、回到顶部。悬浮窗组件通常出现在个人中心或者商品列表页面

其他组件

1、音频组件

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

2、动态容器组件

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

即速应用后台管理

1、数据管理

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

数据总览提供小程序总浏览量、昨日/今日访问量、总用户量、总订单数及浏览量曲线图。

传播数据主要是用于提供新老访客的比例，以及访客使用哪些主要平台打开应用的次数及占比

2、用户管理

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

3、商品管理

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

4、店铺管理

第六章

API应用

网络API

        微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生AP接口或第三方APL提供了各类接口实现前后端交互
        网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口
（1）wx.request(0bject)接口 用于发起HTTPS 请求。
（2）wx.uploadFile(Object)接口 用于将本地资源上传到后台服务器。
（3）wx.downloadFile(Object)接口用于下载文件资源到本地。
（4）wx.connectSocket(0bject)接口用于创建一个WehSocket 连接。
（5）wx.sendSocketMessage(0bject)接口 用于实现通过 WehSocket连接发送数据
（6）wx.closeSocket(0bject)接口用于关闭WebSocket 连接。
（7）wx.onSocketOpen(CallBack)接口用于监听WebSocket 连接打开事件。
（8）wx.onSocketEror(CallBack)接口用于监听WebSocket 错误。
（9）wx.onSocketMessage(CallBack)接口 用于实现监听WebSocket 接收到服务器的消息
事件。

（10）wx.onSocketClose(CallBack)接口用于实现监听WebSocket 关闭

发起网络请求

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

示例代码如下

wxml

<button type="primary" bind:tap="getbaidutap">获取HTML数据</button>
<textarea value="{{html}}" auto-height="" maxlength="0"></textarea>

js

Page({
  data:{
    html:''
  },
  getbaidutap:function(){
    var that=this;
    wx.request({
      url: 'https://www.baidu.com',//百度网址
      data:{},//发送数据为空
      header:{"Content-Type":"application/json"},
      success:function(res){
        console.log(res);
        that.setData({
          html:res.data
        })
      }
    })
  }
})

运行结果

上传文件

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

wxml

<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"/>

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({
        icon:"loading",
        title: '正在上传'
      }),
      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.setData({
            img:path[0]
          })
        },
        fail:function(e){
          console.log(e);
          wx.showModal({
            title:'提示',
            content:'上传失败',
            showCancel:false
          })
        },
        complete:function(){
          wx.hideToast()
        }
      })
    }
  }
})

运行结果

下载文件

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

多媒体API

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

图片API

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

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

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

wx.saveImageToPhotosAIbum(Object) 接口 用于保存图片到系统相册

1.选择图片或照片

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

示例代码如下

Page({
  count:2,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths = res.tempFilePaths
    var tempFiles = res.tempFilePaths;
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

预览图片

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

获取图片信息

保存图片到系统相册

录音API

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

wx.startRecord（Object）接口 用于实现开始录音

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

开始录音

停止录音

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

音频播放控制API

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

wx.playBackgroundAudio(0bject)接口 用于播放音乐。wx.getBackgroundAudioPlayerState(Object)接口 用于获取音乐播放状态wx.seekBackgroundAudio(0bject)接口 用于定位音乐播放进度。
wx.pauseBackgroundAudio()接口 用于实现暂停播放音乐。
wx.stopBackgroundAudio()接口 用于实现停止播放音乐。
wx.onBackgroundAudioPlay(CalBack)接口用于实现监听音乐播放wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停wx.onBackgroundAudioStop(CallBack)接口 用于实现监听音乐停止

1.播放音乐

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

示例代码如下

 wx.playBackgroundAudio({
    dataUrl: 'http://bmob - cdn - 16488.b0.upaiyun/2018/02/09/117e4a1b405195b18061299e2de89597.mp3',
    title:'有一天',
    coverImgUrl:'http://bmob - cdn - 16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg',
    success:function(res){
      console.log(res)
    }
  })
Page({
 
})

获取音乐播放状态

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

接口调用成功后返回的参数

示例代码如下

wx.getBackgroundAudioPlayerState({
    success:function(res){
      var status = res.status
      var dataUrl = res.dataUrl
      var currentPosition = res.currentPosition
      var duration = res.duration
      var downloadPercent = res.downloadPercent
      console.log("播放状态:"+status)
      console.log("音乐文件地址:"+dataUrl)
      console.log("音乐文件当前播放位置:"+currentPosition)
      console.log("音乐文件的长度:"+duration)
      console.log("音乐文件的下载进度:"+status)
    }
  })

控制音乐播放进度

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

暂停播放音乐

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

停止播放音乐

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

监听音乐播放

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

监听音乐暂停

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

监听音乐停止

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

案例展示如下

wxml

<view class="container">
  <image class =" bgaudio" src="{{changedImg? music.coverImg:'../../images/ai.png'}}"/>
  <view class="Control-view">
    <image src ="../../images/ps.png" bindtap="onPositionTap" data-how="0"/>
    <image src ="../../images/{{isPlaying? 'pause': 'play'}}.png"bindtap="onAudioTap"/>
    <image src ="../../images/微信图片_20240306105445.jpg"bindtap ="onStopTap"/>
    <image src ="../../images/ai.png"bindtap ="onPositionTap"data -how = "1"/>
  </view>
  </view> 
 

js

​
Page({
  data:{
      //记录播放状态
  isPlaying:false, 
  //记录coverImg，仅当音乐初始时和播放停止时，使用默认的图片。播放中和暂停时都使用当前音乐的图片
 coverImg,
 changedImg: false, 
 //音乐内容
 music:{
 "url":
 "http://bmob-can-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
"title":"盛晓玫-有一天",
"coverImg":
"http://bmob-can-16488.b0upaivun.com/2018/02/09/£6042971409681880cc3d3e581f7724.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(){
//改变 coverImg 和播放状态
that.setData
({isPlaying:false,changedImg:false});
}
})
},
//点击“快进10秒”或者“快退10秒”时，触发
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});
}
(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({lisPlaying:false,changedImg:false});
console.log("on stop");
});
  }
},)

wxss

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

文件API

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

保存文件

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

saveImg:function(){
  wx.chooseImage({
    cont:1,
    sizeType:['original','compressed'],
    sourceType:['album','camera'],
    success:function(res){
      var tempFilePaths = res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          varsaveFilePath = res.savedFilePath;
          console.log(saveFilePath)
        }
      })
    }
  })
}

获取本地文件列表

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

wx.getSavedFileList({
  success:function(res){
    that.setData({
      fileList:res.fileList
      
    })
  }
})

获取本地文件的文件信息

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

示例代码如下

wx.chooseImage({
  count:1,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths = res.tempFilePaths,
    wx.saveFile({
      tempFilePath:tempFilePaths,
      success:function(res){
        var saveFilePath = res.saveFilePath;
        wx.getSavedFileInfo({
          filePath:saveFilePath,
          success:function(res){
            console.log(res.size)
          }
        })
      }
    })
  }
})

删除本地文件

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

打开文档

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

本地数据及缓存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.setStorageSync(key,data)

wx.setStorageSync(key,data)是同步接口

获取数据

wx.getStorage(Object)

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

 删除数据

wx.removeStorage(Object)

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

清空数据

wx.clearStorage()

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

wx.getStorage({
  key:'name',
  success:function(res){
    wx.clearStorage()
  },
})

 wx.clearStroageSync()

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

try{
  wx.clearStorageSync()
}catch(e){
  
}

位置信息API

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

获取位置信息

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

wx.getLocation(Objcet)调用成功后，返回的参数如表

选择位置信息

wx.chooseLocation(Object)接口用于打开的地图中选择位置，用户选择为之后可返回当前位置的名称，地址，经纬度新信息。其相关参数如表

 wx.chooseLocation(Object)调用成功后，返回参数如表

 显示位置信息

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

 设备相关API

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

获取系统信息

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

 wx.getSystemInfo()接口或wx.getSystemInfoSync()接口调用成功后，返回系统相关信息，如下表

 网络状态

获取网络状态

wx.getNetworkType(Object)用于获取网络类型，如下表

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

 监听网络状态变化

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

拨打电话

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

wx.makePhoneCall({
  phoneNumber: '13177843308',
})

运行结果

扫描二维码

wx.scanCode(Object)接口用于调起客户端扫码界面，扫码成功后返回相应的内容 ，如下表

扫码成功后，返回的数据如表

复习总结

第一章讲解了微信小程序的特征及微信小程序应用场景的特点和微信小程序项目的开发流程。第二章讲解了小程序的目录结构，通过目录结构介绍了小程序的框架，最后主要介绍了小程序文件的类型及其配置。还有三种运算的讲解和小程序模板。第三章，介绍了页面布局中的基本盒子模型，浮动和定位，掌握flex布局的基本原理，容器和项目的属性。第四章，

介绍了小程序中的常用组件，包括容器组件(view、scroll-view、swiper)、容组件(icon、text、progress、rich-text)、表单组件(form、input、button、radio、check-box、label、picker、picker -view、slider、switch、textarea)、多媒体组件(audio、imagevideo、camera)、其他组件(map、canvas等)。第五章，讲解了微信小程序的第三方工具--即速应用，首先介绍了即速应用的优势及特点，然后介绍了即速应用的布局组件、基础组件、高级组件和其他组件，最后介绍了即速应用的后台管理及打包、上传功能。第六章，主要介绍了小程序的各类核心API，包括网络API、多媒体API、文件API、本地数据及缓存API、位置信息API及设备相关API等。