微信小程序开发与运营复习博客

第一章知识点：

微信小程序的特征：

1. 无需安装：用户无需下载安装即可使用，节省手机存储空间。
2. 触手可及：用户通过扫描二维码或搜索关键词即可快速找到并使用小程序。
3. 无需卸载：小程序不占用手机桌面空间，用户无需卸载，随时可用。
4. 开发成本低：相较于原生APP，小程序的开发成本较低，周期较短。
5. 功能丰富：小程序支持多种功能，如支付、地图导航、音视频播放等。
6. 跨平台：小程序支持Android和iOS操作系统，实现跨平台应用。

界面信息：

代码编辑：提供代码编辑功能，支持实时预览、错误检查等功能。
模拟器：支持在电脑上模拟小程序的运行环境，方便开发者调试。
调试工具：提供丰富的调试工具，如网络请求、日志输出、性能分析等。
组件库：提供丰富的组件库，方便开发者快速搭建小程序界面。
API文档：提供详细的API文档，方便开发者查阅和使用。
云开发：提供云数据库、云存储、云函数等服务，简化后端开发流程。

第二章知识点： 

小程序的基本目录结构：
 

项目主目录下有2个子目录(pages和utils)和4个文件(app.js、app.json、app.wxss和project.config.json)

在主目录中，3个以"app"开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。

utils目录用来存放一些公共的.js文件

                主题文件

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

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

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

app.wxss：小程序主样式表文件，类似于HTML的.css文件。该文件在项目中不是必须的

                页面文件

小程序通常是由多个页面组成的，每个页面包含4个问价，同一页面的这4个文件必须具有相同的路径与文件名。位于pages文件夹内

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

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

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

.json文件：页面配置文件

小程序的开发框架：

 小程序MINA框架

MINA框架将整个系统划分为视图层、逻辑层。视图层使用标签语言WXML和用于描述WXML组件样式的WXSS组成。逻辑层是MINA框架的服务中心。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

 视图层

对于小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss用于描述页面的样式。

                逻辑层

微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，做出了修改，主要包括：

1)增加了app（）和page（）方法，进行程序和页面的注册

2)提供丰富的API，如扫一扫、支付等微信特有的能力

3)每个页面有独立的作用域，并提供模块化能力

                数据层（不显示）

1.页面临时数据或缓存

2.文件存储（本地存储）

3.网络存储与调用

        掌握小程序的文件类型：

JSON 文件：用于配置小程序的全局配置和页面配置，包括小程序的基本信息、页面路径、窗口样式、导航栏样式等。

WXML 文件：类似于 HTML，用于编写小程序的页面结构，包括标签、属性和数据绑定等。

WXSS 文件：类似于 CSS，用于编写小程序的页面样式，包括选择器、样式属性、样式表达式等。

JS 文件：用于编写小程序的逻辑代码，包括页面的生命周期函数、事件处理函数、数据处理和业务逻辑等

                配置文件

pages：用于定义小程序的页面路径，是一个数组，每个元素是一个字符串，表示一个页面的路径。

window：用于定义小程序的窗口样式和导航栏样式等。可以设置窗口的背景颜色、顶部导航栏的背景颜色和文字颜色等。

tabBar：用于定义小程序底部的选项卡栏，包括选项卡的图标、文字、页面路径等。

networkTimeout：用于设置小程序的网络请求超时时间，可以分别设置 request、connectSocket、uploadFile、downloadFile 的超时时间。

navigationBarTitleText：用于设置小程序默认页面的导航栏标题文字。

navigationBarTextStyle：用于设置小程序默认页面的导航栏标题文字的样式，可以设置为 black 或 white。

backgroundColor：用于设置小程序的背景颜色。

backgroundTextStyle：用于设置小程序的下拉刷新样式，可以设置为 dark 或 light。

enablePullDownRefresh：用于设置小程序是否支持下拉刷新。

debug：用于设置小程序是否开启调试模式。

                全局配置文件

                window配置项 

                tabBar配置项  

                networkTimeout配置项  

 

 逻辑层文件

在微信小程序中，逻辑层文件主要是指 JavaScript (JS) 文件，用于编写小程序的逻辑代码和业务逻辑。逻辑层文件包含以下几个方面的内容：

页面生命周期函数：逻辑层文件中可以定义页面的生命周期函数，例如 onLoad、onShow、onReady、onHide、onUnload 等。这些生命周期函数在小程序页面的不同阶段被触发，可以用于执行相应的初始化、数据加载、页面渲染等操作。

事件处理函数：逻辑层文件中可以定义事件处理函数，用于响应用户的交互操作。例如，通过监听按钮的点击事件或表单的提交事件，编写相应的事件处理函数来执行相关操作。

数据处理：逻辑层文件可以处理数据的获取、处理和存储。可以通过调用小程序提供的 API，从服务器获取数据，对数据进行处理和转换，然后将数据传递给视图层进行展示。

业务逻辑：逻辑层文件是实现小程序业务逻辑的主要位置。根据业务需求，可以在逻辑层文件中编写条件判断、循环、数据计算、数据更新等代码，以实现小程序的功能和交互。

API 调用：逻辑层文件可以调用小程序提供的 API，用于实现各种功能。例如，可以调用网络请求 API 进行数据的获取与提交，调用文件 API 进行文件的读写操作，调用设备 API 获取设备信息和操作硬件等。

         项目逻辑文件

         页面逻辑文件 

页面生命周期函数：页面逻辑文件中可以定义页面的生命周期函数，例如 onLoad、onShow、onReady、onHide、onUnload 等。这些生命周期函数在页面的不同阶段被触发，可以用于执行相应的初始化、数据加载、页面渲染等操作。

事件处理函数：页面逻辑文件中可以定义事件处理函数，用于响应用户的交互操作。例如，通过监听按钮的点击事件或表单的提交事件，编写相应的事件处理函数来执行相关操作。

数据处理：页面逻辑文件可以处理数据的获取、处理和存储。可以通过调用小程序提供的 API，从服务器获取数据，对数据进行处理和转换，然后将数据传递给视图层进行展示。

业务逻辑：页面逻辑文件是实现页面特定业务逻辑的主要位置。根据页面的功能需求，可以在页面逻辑文件中编写条件判断、循环、数据计算、数据更新等代码，以实现页面的功能和交互。

API 调用：页面逻辑文件可以调用小程序提供的 API，用于实现各种功能。例如，可以调用网络请求 API 进行数据的获取与提交，调用文件 API 进行文件的读写操作，调用设备 API 获取设备信息和操作硬件等。

页面结构文件

列表数据绑定:

wx:for:在组件上，可以使用wx:for控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件，格式为

<view wx:for="{{items}}">
    {{index}}:{{item}}
</view>
模板:在小程序中 如果要经常使用几个组件的组合，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板

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

<template name="模板名">
2.使用模板:

<template is="模板名" data="{{传入的数据}}">

第三章知识点：

3.页面布局 

3.1盒子模型

模型结构

模型元素

3.2块级元素与行内块元素

3.2.1块级元素

<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行内元素 

  <view style="padding: 20px">
  <text style="border: 1px solid #f00;">行内元素1</text>
  <text style="border: 1px solid #0f0;margin: 10px;padding: 5px">行内元素2</text>
  <text style="border: 1px solid #00f;display: inline;">块级元素设置为行内元素</text>一行显示不全，自动换行显示
  </view>

3.2.3行内块元素 

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

3.3浮动与定位

3.3.1元素浮动与清除

1.浮动格式：

{float:none|left|right;}

2.清除格式：

{clear:left|right|both|none}

3.3.2元素定位

格式：

{position:static|relative|absolute|fixed}

3.4flex布局 

3.4.1容器属性

 1. display
display 用来指定元素是否为 flex 布局，语法格式为：
. box|display: flex linline-flex;}
其中，flex-块级 flex 布局，该元素变为弹性盒子；
inline-flex-行内 flex 布局，行内容器符合行内元素的特征，同时在容器内又符合 flex 布局规范。
设置了 flex 布局之后，子元素的 float、clear 和 vertical-align 属性将失效。
2. flex-direction
flex-direction 用于设置主轴的方向，即项目排列的方向，语法格式为：
. box{flex-direction: row |row-reverse lcolumn lcolumn-reverse;微信小程序开发与运营其中，row
row-reverse-主轴为水平方向，起点在右端；
column-主轴为垂直方向，起点在顶端；
column-reverse-主轴为垂直方向，起点在底端。
以下为元素在不同主轴方向下的显示效果。

 3. flex-wrap
fles-wrap 用来指定当项目在一根轴线的排列位置不够时,项目是否换行,其语法格式 box|flex-wrap: nowrap wrap wrap wrap - reverse 其中, nowrap--不换行,默认值;
wrap--换行,第一行在上方;
wrap-reverse--换行,第一行在下方。
当设置换行时,还需要设置 align-item 属性来配合自动换行,但 align-item 的值"stretch"。
flex-wrap 不同值的显示效果如下图所示

4. flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写形式,默认值为 row nowap。语法格式如下:
box|flex-flow:<flex-direction>||<flex-wrap>;
示例代码如下:
. box|flex-flow; row nowrap;|//水平方向不换行 box|flex-flow: row: row-reverse wrap;//水平方向逆方向换行 box|flex-flow; column wrap-reverse;|//垂直方向逆方向换行
5. justify-content
justify-content 用于定义项目在主轴上的对齐方式。语法格式如下下:
box|justify-content: flex-start|flex-end |cend|certer Ispace-between Ispace-around;}

其中, justify-content--与主轴方向有关,默认主轴水平对齐,方向从左到右;
flex-start-左对齐,默认值;
flex-end--右对齐;
center--居中;
space-between--两端对齐,项目之间的间隔都相等;
space-around--每个项目两侧的间隔相等。
下图所示为 justify-content 不同值的显示效果。 

6. align-items

align - items 用于指定项目在交叉轴上的对齐方式，语法格式如下
boxlalign-items: flex -start Iflex - end icenter Ibaseline Istretch.
其中，align-items——与交叉轴方向有关，默认交叉由上到下；
flex-start——交叉轴起点对齐；
flex-end——交叉轴终点对齐；
center——交叉轴中线对齐；
baseline——项目根据它们第一行文字的基线对齐；
stretch——如果项目未设置高度或设置为 auto，项目将在交叉轴方向拉伸填充容器，白为默认值。

7. align-content
align-content 用来定义项目有多根轴线 (出现换行后) 在交叉轴上的对齐方式,如果只有一根轴线,该属性不起作用。语法格式如下:
box|align-content; flex-start|flex-end|center|space-between space-around |stretch|
其中, space-between--与交叉轴两端对齐,轴线之间的间隔平均分布;
space-around--每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框间隔大一倍。
其余各属性值的含义与 align-items 属性的含义相同。
下图所示为 align-content 不同值的显示效果。

 

   3.4.2项目属性

容器内的项目支持6个属性，其名称和功能如下表所示:

1.order

order属性定义项目的排列顺序，数值越小，排名越靠前，默认值为0。语法格式如下:

.item{order:<number>;}

2. flex-grow 

flex-grow 定义项目的放大比例，默认值为 0，即不放大。语法格式如下：

. item{flex-grow:<number>;}示例代码如下：
<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" >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>

3.flex-shrink

.item{flex-shrink:<number>;}

4.flex-basis

.item{flex-basis:<number>|auto;}

5.flex

语法格式：

 .item{flex:<flex-grow>|<flex-shrink>|<flex-basis>;}

6.align-self

语法格式：

.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

第四章知识点 

4.1 组件的定义及属性

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

组件的语法格式:<标签名 属性名="属性值">内容……</标签名>

组件的共同属性:

        ·id：组件的唯一表示，保持整个页面唯一，不常用

        ·class：组件的样式类，对应WXSS中定义的样式

        ·style：组件的内联样式，可以动态设置内联样式

        ·hidden：组件是否显示，所有组件默认显示

        ·data-*：自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget.dataset方式来获取自定义属性的值

        ·bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数

4.2 容器视图组件
       

4.2.1 view
       

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

        view组建的特有属性如下表所示

        4.2.2 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 组件。这样做，能通过单击顶部状态栏回到页面顶部。

        4.2.3 swiper

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

4.3 基础内容组件

        4.3.1 icon
        4.3.2 text
        4.3.3 progress 

4.4 表单组件

        4.4.1 button

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

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

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})
  },
  //是否显示loading图案
  buttonLoading:function(){
    this.setData({loading:!this.data.loading})
  },
})

        4.4.2 radio

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

 

<view>选择您最喜爱的城市：</view>
<radio-group bindchange="citychange">
  <radio value="西安">西安</radio>
  <radio value="北京">北京</radio>
  <radio value="上海">上海</radio>
  <radio value="广州">广州</radio>
  <radio value="深圳">广州</radio>
</radio-group>
<view>你的选择:{{city}}</view>
 
<view>选择您最喜爱的计算机语言:</view>
<radio-group class="radio-group"bindchange="radiochange">
  <label class="radio"wx:for="{{radios}}">
    <radio value="{{item.value}}"checked="{{item.checked}}"/>{{item.name}}
  </label>
</radio-group>
<view>您的选择：{{lang}}</view>

Page({
  data:{
    radios:[
      {name:'java',value:'JAVA'},
      {name:'python',value:'Python',checked:'true'},
      {name:'php',value:'PHP'},
      {name:'swif',value:'Swif'},
    ],
    city:","
  },
  citychange:function(e){
    this.setData({city:e.detail.value});
  },
  radiochange:function(event){
    this.setData({lang:event.detail.value});
    console.log(event.detail.value)
  }
})

        4.4.3 checkbox

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

<view>选择您想去的城市:</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})
  }
})

        4.4.4 switch

                switch组件的作用类似于开关选择器，其属性如下表所示：

<view>
  <switch bindchange="swl">{{var1}}</switch>
</view>
<view>
  <switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
  <switch type="checkbox"bindchange="sw3">{{var3}}</switch>
</view>

Page({
  data:{
    var1:'关',
    var2:'开',
    var3:'未选'
  },
  sw1:function(e){
    this.this.setData({var1:e.detail.value?'开':'关'})
  },
  sw2:function(e){
    this.this.setData({var2:e.detail.value?'开':'关'})
  },
  sw3:function(e){
    this.this.setData({var3:e.detail.value?'已选':'未选'})
  }
})

        4.4.5 slider

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

<view>默认min=0 max=100 step=1</view>
<slider></slider>
 
<view>显示当前值</view>
<slider show-value></slider>
<view>设置min=20 max=200 step=10</view>
<slider min='0' max='200'step='10'show-value></slider>
 
<view>背景条红色，已选定颜色绿色</view>
<slider color="#f00"selected-color='#f00'></slider>
 
<view>滑动改变icon的大小</view>
<slider show-value bindchange='sliderchange'></slider>
<icon type="success"size='{{size}}'></icon>

Page({
  data:{
    size:'20'
  },
  sliderchange:function(e){
    this.setData({size:e.detail.value})
  }
})

        4.4.6 picker

                1.普通选择器

<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="{{ovjArray}}">
  当前选择:{{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.detail.value
    })
  },
  objArrayChange:function(e){
    console.log('picker值变为',e.detail,value)
    this.setData({
      index2:e.detail.value
    })
  }
})

                2.多列选择器

                        多列选择器(mode=multiSelector)允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如下表所示

 

<!--pages/chapter04/pickerDemo/pickerDemo02/pickerDemo02.wxml-->
<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
  <view>
    当前选择：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
  </view>
</picker>

// pages/chapter04/pickerDemo/pickerDemo02/pickerDemo02.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
    multiIndex:[0,0,0]
  },
  // 绑定MultiPicker
  bindMultiPickerChange: function(e){
    console.log('picker发送选择改变，携带值为：',e.detail.value);
    this.setData({
      multiIndex:e.detail.value
    })
  },
  // 绑定MultiPickerColumn
  bindMultiPickerColumnChange: function(e){
    console.log('修改的列为：',e.detail.column,'，值为：',e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch(e.detail.column){
      case 0:
        switch(data.multiIndex[0]){
          case 0:
            data.multiArray[1] = ['西安市','汉中市','延安市'];
            data.multiArray[2] = ['雁塔区','长安区'];
            break;
          case 1:
            data.multiArray[1] = ['深圳市','珠海市'];
            data.multiArray[2] = ['南山区','罗湖区'];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        switch(data.multiIndex[0]){
          case 0:
            switch(data.multiIndex[1]){
              case 0:
                data.multiArray[2] = ['雁塔区','长安区'];
                break;
              case 1:
                data.multiArray[2] = ['汉台区','南郑区'];
                break;
              case 2:
                data.multiArray[2] = ['宝塔区','子长县','延川县'];
                break
            }
          break;
          case 1:
            switch(data.multiIndex[1]){
              case 0:
                data.multiArray[2] = ['南山区','罗湖区'];
                break;
              case 1:
                data.multiArray[2] = ['香洲区','斗门区'];
                break;
            }
          break;
        }
      data.multiIndex[2] = 0;
      console.log(data.multiIndex);
      break;
    }
    this.setData(data);
  }
})

时间选择器、日期选择器：

时间选择器(mode=time)可以用于从提供的时间选项中选择相应的时间。其属性如表所示：

日期选择器(mode=date)可以用于从提供的日期选项中选择相应的日期，其属性如表所示：

<!--pages/chapter04/pickerDemo/pickerDemo03/pickerDemo03.wxml-->
<view>
  <picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">
    选择的日期：{{date}}
  </picker>
</view>
<view>
  <picker mode="time" start="{{starttime}}" end="{{endtime}}" value="{{time}}" bindchange="changetime">
    选择的时间：{{time}}
  </picker>
</view>

// pages/chapter04/pickerDemo/pickerDemo03/pickerDemo03.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    startdate:2000,
    enddate:2050,
    date:'2018',
    starttime:'00:00',
    endtime:'12:59',
    time:'8:00'
  },
  changedate: function(e){
    this.setData({date:e.detail.value});
    console.log(e.detail.value);
  },
  changetime: function(e){
    this.setData({time:e.detail.value});
    console.log(e.detail.value);
  }
})

省市选择器：

省市选择器(mode=region)是小程序的新版本提供的选择快速地区的组件，其属性如表所示：

<!--pages/chapter04/pickerDemo/pickerDemo04/pickerDemo04.wxml-->
<picker mode="region" value="{{region}}" custom-item="{{customitem}}" bindchange="changeregion">
  选择省市区：{{region[0]}},{{region[1]}},{{region[2]}}
</picker>

// pages/chapter04/pickerDemo/pickerDemo04/pickerDemo04.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    region:['陕西省','西安市','长安区'],
    cuntomitem:'全部'
  },
  changeregion: function(e){
    console.log(e.detail.value);
    this.setData({
      region:e.detail.value
    })
  }
})

        4.4.7 picker-view 

 

 
<view>当前日期：{{year}}年{{month}}月{{day}}日</view>
<picker-view 
indicator-style="height:50px;"
style="width:100%;height:300px;"
value="{{value}}"bindchange="bindChange">
<picker-view-column>
<view 
wx:for="{{years}}"
style="line-height:50px">
{{item}}年
</view>
</picker-view-column>
<picker-view-column>
<view 
wx:for="{{months}}"
style="line-height:50px">
{{item}}月
</view>
</picker-view-column>
<picker-view-column>
<view 
wx:for="{{days}}"
style="line-height:50px">
{{item}}日
</view>
</picker-view-column>
</picker-view> 

wx.pageScrollTo({
  duration: 0,
  offsetTop: 0,
  scrollTop: 0,
  selector: 'selector',
  success: (res) => {},
  fail: (res) => {},
  complete: (res) => {},
})
const date=new Date()
const years=[]
const months=[]
const days=[]
for(let i=1900;i<=2050;i++){
  years.push(i)
}
for(let i=1;i<=12;i++){
  months.push(i)
}
for(let i=1;i<=31;i++){
  days.push(i)
}
Page({
  data:{
    years:years,
    months:months,
    days:days,
    year:date.getFullYear(),
    month:date.getMonth()+1,
    day:date.getDate(),
    value:[118,0,0],
  },
  bindChange:function(e){
    const val=e.detail.value
    console.log(val);
    this.setData({
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[val[2]]
    })
  }
})

        4.4.8 input 

 

<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个是只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bind:tap="bindButtonTap">使得输入框获取焦点</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class="section_title">你输入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
<input bindinput="bindReplaceInput" placeholder="连续两个1会变成2"/>
<input password type="number" placeholder="输入数字密码"/>
<input password type="text" placeholder="输入字符密码"/>
<input type="digit" placeholder="带小数点的数字键盘"/>
<input type="idcard" placeholder="带身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>

Page({
data:{
  focus:false,
  inputValue:''
},
bindButtonTap:function(){
  this.setData({
    focus:true
  })
},
bindKeyInput:function(e){
  this.setData({
    inputValue:e.detail.value
  })
},
bindReplaceInput:function(e){
  var value=e.detail.value
  var pos=e.detail.cursor
  if(pos!=-1){
    var left=e.detail.value.slice(0,pos)
    pos=left.replace(/11/g,'2').length
  }
  return{
    value:value.replace(/11/g,'2'),
    cursor:pos
  }
}
})

        4.4.9 textarea 

 

<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高"></textarea>
<textarea placeholder="placeholder颜色是红色的"placeholder-style="color:red;"></textarea>
<textarea placeholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"></textarea>
<button bind:tap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form中的textarea"name="textarea"></textarea>
<button form-type="submit">提交</button>
</form>

Page({
data:{
  height:10,
  focus:false
},
bindButtonTap:function(){
  this.setData({
    focus:true
  })
},
bindTextAreaBlur:function(e){
  console.log(e.detail.value)
},
bindFormSubmit:function(e){
  console.log(e.detail.value.textarea)
}
})

        4.4.10 label

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

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

        4.4.11 from 

 

<form bindsubmit="formSubmit" bindreset="formReset">
<view>姓名：
<input type="text" name="xm"/>
</view>
<view>性别：
<radio-group name="xb">
<label>
<radio value="男" checked/>男</label>
<label>
<radio value="女"/></label>
</radio-group>
</view>
<view>爱好：
<checkbox-group name="hobby">
<label wx:for="{{hobbies}}">
<checkbox value="{{item.value}}"checked='{{item.checked}}'>{{item.value}}</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>

Page({
hobby:'',
data:{
  hobbies:[
    {name:'jsj',value:'计算机',checked:'true'},
    {name:'music',value:'听音乐'},
    {name:'game',value:'玩电竞'},
    {name:'swim',value:'游泳',checked:'true'}
  ]
},
forSubmit:function(e){
  console.log('form发生了submit事件，携带数据为：',e.detail.value)
},
formReset:function(){
  console.log('form发生了reset事件')
}
})

4.5 多媒体组件

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

        4.5.1 image

1.缩放模式

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

Page({
data:{
  modes:['scaleToFill','aspectFit','aspectFill','widthFix']
}
})

 

1.裁剪模式 

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

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

 

        4.5.2 audio 

 

<auaio src="{{src}}"action="{{action}}"poster="{{poster}}"name="{{name}}"author="{{author}}"loop controls></auaio>
<button type="primary"bindtap='play'>播放</button>
<button type="primary"bindtap='pause'>暂停</button>
<button type="primary"bindtap='playRate'>设置速率</button>
<button type="primary"bindtap='currentTime'>设置当前时间(秒)</button>

Page({
  data:{
    poster:'http://y.gtimg.cn/music/photo_new/T002R300*300m000003rsKF44GyaSk.jpg?max_age=259000',
    name:'此时此刻',
    author:'许巍',
    src:'http://ws/stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4b12b3cd9337d5e7&uni=346897220&vkey=6292F51E1E384306DCBD9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
  play:function(){
    this.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)
  },
  currenTime:function(e){
    this.setData({
      action:{
        method:'setCurrenTime',
        data:120
      }
    })
  }
})

 

        4.5.3 video

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

<video src="{{src}}"controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>

Page({
  data:{
    src:'',
  },
  bindButtonTap:function(){
    var that=this
    wx.chooseVideo({
      sourceType:['album','camera'],
      maxDuration:60,
      camera:['front','back'],
      success:function(res){
        that.setData({
          src:res.tempFilePath
        })
      }
    })
  }
})

 

        4.5.4 camera

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

<camera device-position="back"flash="off"binderror="error"style="width=100%;height:350px"></camera>
<button type="primary"bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix"src="{{src}}"></image>

Page({
  takePhoto(){
    const ctx=wx.createCameraContext()
    ctx.takePhoto({
      quality:'high',
      success:(res)=>{
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  error(e){
    console.log(e.detail)
  }
})

 

4.6 其他组件

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

        4.6.1 map

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

 

 map组件的markers属性用于在地图上显示标记的位置，其相关属性如表所示：

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

<map id="map"
  longitude="108.9200"  //中心点经度
  latitude="34.1550"    //中心点纬度
  scale="14"            //缩放比例
  controls="{{controls}}"//地图上显示控件
  bindcontroltap="controltap"//点击控件时触发
  markers="{{markers}}"  //标记点
  bindmarkertap="markertap"//点击标记点时触发
  polyline="{{polyline}}" //路线点
  bindregionchange="regionchange"//视野发生变化时触发
  show-location
  style="width: 100%;height: 300px;">
</map>

Page({
  data:{
    markers:[{
      iconPath:"/pages/dw.png",
      id:0,
      longitude:"108.9290",
      id:0,
      longitude:"108.9290",
      latitude:"34.1480",
      width:50,
      height:50
    }],
    polyline:[{
      points:[
        {
          longitude:"108.9200",//线路1
          latitude:"34.1400",
        },
        {
          longitude:"108.9200",//线路2
          latitude:"34.1500"
        },
        {
          longitude:"108.9200",//线路3
          latitude:"34.1700"
        }
      ],
      color:"#00ff00",
      width:2,
      dottedLine:true
    }],
    controls:[{   //控件的相关信息
      id:1,
      iconPath:'/pages/dw.png',
      position:{
        left:0,
        top:300,
        width:30,
        height:30
      },
      clickable:true
    }]
  },
  regionchange(e){
    console.log(e.type)
  },
  markertap(e){
    console.log(e.markerId)
  },
  controltap(e){
    console.log(e.controlId)
  }
})

        4.6.2 canvas

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

实现绘图需要3步：

（1）创建一个canvas绘图上下文。

var context =wx.createCanvasContext('mtCanvas')

（2）使用canvas绘图上下文进行绘图描述

context.setFillStyle('green')    //设置绘图上下文的填充色为绿色
context.fillRect(10,10,200,100)    //方法画一个矩形，填充为设置的绿色

（3）画图

context.draw()

示例代码 

Page({
  onLoad:function(options){
    var ctx=wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('green')
    ctx.fillRect(10,10,200,100)
    ctx.draw()
  }
})

<canvas canvas-id="myCanvas" style="border: 1px solid red;"/>

 

第五章总结 

5.1即速应用概述

5.1.1 即速应用的优势 

即速应用是深圳市题尺网络科技开发有限公司开发的一数同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单指接可视化组件，就可以实现在线小程序开发。
即速应用的功能特点主要体现在以下几个方面：

1. 开发流程简单，零门槛制作
(1)登录即速应用的官方网站，
https://www.jisuapp.cn/

进入制作界面，从众多行业模板中选择一个合适的模板。
(2)在模板的基础上进行简单编辑和个性化制作
(3)制作完成后，将代码一键打包并下载
(4)将代码上传至微信开发者工具
(5)上传成功后，等待审核通过即可

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

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

目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。

即速应用的应用范围主要包括以下类型：
(1)资讯类：新闻、媒体。

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

(3)外卖类：餐饮及零售。

(4)到店类：餐饮及酒吧。

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

5.1.2 即速应用界面介绍

登录即速应用官网，单击“注册”按钮，在所示的页面填写相应信息，即可完成注册后，即可登录账号，使用即速应用。
即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板。
1. 菜单栏 
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史”选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置。
2. 工具栏
工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。 “组件库”有9个基础组件、7 个布局组件、18 个高级组件和2 个其他组件。

3. 编辑区
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的一“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板，“元素”选填可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块。
4.属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件内容及点击事件；“组件样式”选项卡用来设置组件的样式，不同组件有不同的样式需要设置。

5.2 即速应用组件

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

5.2.1 布局组件

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

 

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

 

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

 

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

 

 4. 顶部导航组件
顶部导航组件固定于页面顶部，用于编辑顶部的导航。常用的手机应用在顶部有一条导航，上面写有手机应用App的名称或logo，以及返回键等。顶部导航组件的属性面板设置如图所示。 

5. 底部导航组件
底部导航组件固定于页面底部，用于编辑底部的导航。底部导航组件的属性面板设置如图所示。 

 

通过底部导航组件可以添加标签、删除标签，同时可以分别设置每个标签的名称、原始图片、点击图片及链接至某一页面；通过组件面板可以进行组件背景色，图片及文字的设置。
6.分割线组件
分制线组件被放置于任意组件之间，用于实现分割。分割线组件的属性面板如图了所示。

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

5.2.2 基本组件

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

1.文本组件
文本组件用于展示文字、设置点击事件。是小程序页面中最常用的组件。文本组件的属性面板如图所示。

 

2.图片组件

图片组件用于在页面中展示图片，其属性面板如图所示。

3. 按钮组件

按钮组件用于在页面中设置按钮，其属性面板如图所示。

4. 标题组件
标题组件用于在页面中设置标题，其属性面板如图所示。

5.轮播组件
轮播组件用于实现图片的轮播展示，其属性面板如图所示。

单击“添加轮播分组”按钮进入管理后台，然后单击“轮播管理”→“新建分组”选项可以创建轮播分组。
分别填写“分组名称”和“分组描述”，单击“确定”按钮进入轮播管理界面。

6.分类组件

分类组件可以设置不同内容展示在不同类别中，还可以添加、删除分类的个数及进行相应的设置。其属性面板如图所示。

7.图片列表组件

图片列表组件可以将图片及列表的形式展示，还可以设置图片的名称、标题和点击事件。其属性面板如图所示。

8.图文集组件

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

9.视频组件
视频组件用于展示视频。

视频组件提供网页应用、小程序和云服务3种视频来源。网页应用使用视频通用代码来确定视频来源。例如，打开优酷网站，找到需要的视频，进入“分享给朋友”页面，通用代码就显示出来。
单击“复制通用代码”按钮，把复制好的通用代码粘贴到文本框中，保存后即可在小程序项目中添加该视频。

5.2.3 高级组件
高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改。下面介绍其中的几种常用组件。

1.动态列表组件

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

要使用动态列表组件，必须在后台进行数据管理，单击”管理对象“按钮，进入管理后台。单击”新增数据对象“按钮，进入”数据对象列表“页面。

单击”添加字段“按钮，添加相应字段。

单击”保存“按钮并返回，进入”对象管理“页面

单击”数据管理“按钮，进入”数据管理”页面。

单击”+添加数据“按钮新建数据，进入”添加数据“页面。

添加相应数据并保存，继续添加所需数据，”数据管理“页面。

退回到编辑页面，为了方便布局，拖拽“自由面板”组件到动态列表中，然后拖拽一个图片和两个文本组件到自由面板组件。

在动态列表属性面板的绑定数据对象中选择“羽绒服”数据对象，同时图片组件绑定数据对象样式字段，文本组件分别绑定数据对象的名称和价格字段。

2. 个人中心组件

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

3. 动态表单组件

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

5.3 即速应用后台管理

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

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

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

4.应用数据
应用数据是后台管理的主要内容承担组件的数据都是通过在应用数据中的数据对象来管理的类似通过数据库存放和管理数据 。

5.轮播管理
轮播管理是前端软播组件的后台数据管理器通过软钵管理来设置前端软播组件展示的图片内容。 

6.分类管理
分类管理适用于电商、到店、应用数据 。

7.商品管理
商品管理是后台管理的主要内容前端商品列表组件的数据来源于后台商品管理 。

8.经营管理
经营管理主要包括子账号管理手机端客户关系管理和短信接收管理便于管理者管理小程序的运营。

9.营销工具
营销工具是小程序营销推广的有力工具主要有会员卡优惠券积分储值技巧秒杀吉吉乐拼团活动大转盘砸金蛋刮刮乐等  。

10.多商家管理
多商家管理是即速应用有众多商家的商城开设的管理功能方便管理者统计每家店铺的订单及进行收益分析 。

2.分享设置

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

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

4、应用数据
应用数据是后台管理的主要内容，前端组件(动态列表、动态表单)的数据都是通过在应用数据中的数据对象来管理的，类似通过数据库存放和管理数据。
5.轮播管理
轮播管理是前端软播组件的后台数据管理器，通过软播管理来设置前端软播组件展示的图片内容。
6.分类管理
分类管理适用于电商、到店、应用数据。分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。动态分类的二级有图模式只适用于电商。
7.商品管理
商品管理是后台管理的主要内容，前端商品列表组件的数据来源于后台商品管理。商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能。
8. 经营管理
经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理，便于管理者管理小程序的运营。

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

10.多商家管理

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

打包上传

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

打包

进入即速应用后台管理，选择左边选项“分享设置”按钮，单击“微信小程序”项，

选择“代码包下载”选项，单击“确定”按钮

通过“微信公众平台一小程序一设置一开发设置”获取 AppID和 AppSecret,在“服务器配置”中填写相关信息，选择相应分类，单击“打包”按钮，即可成功打包

单击“下载”按钮，即可下载该小程序代码包。

上传

打开微信 Web开发者工具，新建项目，并填写相关内容。其中，项目目录为下载包解压后的目录

单击“确定”按钮，打开小程序代码，编译无误后，填写该项目的服本号，单击“传”按钮即可实现该小程序代码上传

上传成功后，打开微信公众平台的“开发管理”界面，就可以看到该小程序的版本信息

待审核通过后，即可在“微信”一“发现”一“小程序”中搜索到该小程序

第六章知识点 

6.1.1发起网络请求

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

示例代码

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

<button type="primary" bindtap="getbaidtap">获取HTML数据</button>
<text areavalue='{{html}}'auto-heightmaxlength='0'></text>

6.1.2上传文件

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

示例代码

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

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){
//显示toast提示消息
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();
}
})
}
}
})

6.1.3 下载文件

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

例如，通过 wx.downloadFile(Object)实现从服务器中下载图片，后台服务采用WAM
软件在本机搭建。

示例代码 

<button type = "primary"bindtap ='downloadimage'>下载图像</button> <image src ="{{img}}"mode ='widthFix'style ="width: 90%; height 500px"></image>

Page({
    data:{
    img:null},
    downloadimage: function(){
    var that =this;
    wx.downloadFile({
    url:"http://localhost /l.jpg",//通过WAMP软件实现
    success:function(res){
    console. log(res)
    that.setData({
    img:res.tempFilePath
    })}})}
})

6.2 多媒体API

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

6.2.1 图片API

图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：
 wx. chooselmage( Object）接口 用于从本地相册选择图片或使用相机拍照。
 wx. previewlmage(Object)接口 用于预览图片。
 wx. getlmagelnfo( Object）接口 用于获取图片信息。
wx.savelmageToPhotosAlbum(Object）接口用于保存图片到系统相册。

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

 

若调用成功，则返回tempFilePaths 和 tempFiles，tempFilePaths表示图片在本地临时文件
路径列表。tempFiles表示图片的本地文件列表，包括path和 size。

2.预览图片

wx. previewlmage( Object）接口主要用于预览图片，其相关参数如表所示：

 3.获取图片信息

wX.getlmagelnfo(Object）接口用于获取图片信息，其相关参数如表所示：

4.保存图片到系统相册

WX. savelmageToPhotosAlbum( Object）接口用于保存图片到系统相册，需要得到用户授权
scope. writePhotosAlbum。其相关参数如表所示：

6.2.2 录音API

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

1.开始录音
wX. stanRecord(Object）接口用于实现开始录音。当主动调用 wx. stopRecord(Object)接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx.saveFile（）接口。其相关参数如表所示：

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

6.2.3音频播放控制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)。

3.结束播放
Wx. stopVoice（Object）用于结束播放语音。

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

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

■wx. seekBackgroundAudio(Object）-接日一用于定位音乐播放进度。

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

■wx. stopBackgroundAudio(）接口用于实现停止播放音乐。
■w.onBackgroundAudioPlay(CallBack）接口用于实现监听音乐播放。

■w. 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-
ndAudio(Object)方法触发，在CallBack中可改变播放图标。

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

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

9.案例展示
在此，以小程序music为案例来展示音乐API的使用。该小程序的4个页面文件分别为music. wxml、music. wxss、music. json和 music. cojs。

6.3文件API

从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件
API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口：
 wx. saveFile( Object)接口 用于保存文件到本地。
wx. getSavedFileList(Object)接口用于获取本地已保存的文件列表。

wx. getSaveFileInfo(Object)接口用于获取本地文件的文件信息。

WX.removeSaveFile(Object)接口 用于删除本地存储的文件。
wX. openDocument( Object)接口用于新开页面打开文档，支持格式：doc、xs、ppt、pdf、 docx、xlsx、 ppts。

1.保存文件
wX. saveFile(Object）用于保存文件到本地，其相关参数如表所示：

2.获取本地文件列表

wgeSavedFileList(Object）接口用于获取本地已保存的文件列表，如果调用成功，则运国文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/0108：00：00到当前的秒数）文件列表。其相关参数如表所示：

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

wx. gelSaveFileInfo(Object)接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用 wx. getFileInfo(Object）接口。其相关参数如表所示：

4.别除本地文件

W.removeSaveFile(Object)接口用于删除本地存储的文件，其相关参数如表所示：

5.打开文档

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

6.4 本地数据及缓存API

6.4.1 保存数据

1.wx.setStorage(Object)

wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容。其参数如下表所示：

示例代码：

wx.setStorage({
  key:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

 运行结果

2.wx.setStorageSync(key,data)

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

示例代码

wx.setStorageSync('age','25')

6.4.2 获取数据 

1.wx.getStorage(Object)

wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容。其参数如下表所示：

示例代码：

wx.getStorage({
  key:'name',
    success:function(res){
  console.log(res.data)
    },
})

运行结果：

2.wx.getStorageSync(key)

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

示例代码：

try{
  var value=wx.getStorageSync('age')
  if(value){
    console.log("获取成功"+value)
  }
}catch(e){
  console.log("获取失败")
}

运行结果:

6.4.3 删除数据 

 1.wx.removeStorage(Object)

wx.removeStorage(Object)接口用于从本地缓存中异步移除指定key。其相关参数如下表所示：

示例代码:

wx.removeStorage({
  key: 'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

运行结果:

2.wx.removeStorage(key)

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

示例代码:
 

try{
  wx.removeStorageSync('name')
}catch(e){
}

运行结果：

6.4.4 清空数据

 1.wx.clearStorage()

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

示例代码：

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

运行结果:

2.wx.clearStorageSync() 

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

示例代码:

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

运行结果：

6.5 位置信息API 

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

默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下三个API接口：

        wx.getLocation(Object)接口        用于获取位置信息

        wx.chooseLocation(Object)接口        用于选择位置信息

        wx.openLocation(Object)接口        用于通过地图显示位置

6.5.1 获取位置信息

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

wx.getLocation(Object)调用成功后，返回的参数如下表所示：

示例代码：

wx.getLocation({
  type:'wgs84',
    success:function(res){
      console.log("经度："+res.longitude);
      console.log("纬度："+res.longitude);
      console.log("速度："+res.longitude);
      console.log("位置的精确度："+res.accuracy);
      console.log("水平精确度："+res.horizontalAccuracy);
      console.log("垂直精确度："+res.verticalAccuracy);
    },
})

运行结果:

6.5.2 选择位置信息

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

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

示例代码：

wx.chooseLocation({
    success:function(res){
      console.log("位置的名称："+res.name);
      console.log("位置的地址："+res.address);
      console.log("位置的经度："+res.longitude);
      console.log("位置的纬度："+res.latitude);
    },
})

运行结果： 

6.5.3 显示位置信息

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

 

示例代码：

wx.getLocation({
  type:'gcj02',
    success:function(res){
  var latitude=res.latitude
  var longitude=res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale:10,
      name:'智慧国际酒店',
      address:'西安市长安区西长安区300号'
    })
    }
})

 运行结果：

 6.6 设备相关API

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

        wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口        用于获取系统信息

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

        wx.onNetworkStatusChange(CallBack)接口        用于检测网络状态改变

        wx.makePhoneCall(Object)接口        用于拨打电话

        wx.scanCode(Object)接口        用于扫描二维码

6.6.1 获取系统信息

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

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

示例代码：

wx.getSystemInfo({
    success:function(res){
      console.log("手机型号："+res.model);
      console.log("设备像素比："+res.pixelRatio);
      console.log("窗口的宽度："+res.windowWidth);
      console.log("窗口的高度："+res.windowHeight);
      console.log("微信的版本号："+res.version);
      console.log("操作系统版本："+res.system);
      console.log("客户端平台："+res.platform);
    },
})

 运行结果：

6.6.2 网络状态 

1.获取网络状态

wx,getNetworkType(Object)用于获取网络类型，其相关参数如下表所示：

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

示例代码：

wx.getNetworkType()({
  success:function(res){
    console.log(res.networkType)
  },
})

运行结果： 

6.6.3 拨打电话

wx. .makePhoneCall(Object)接口用于实现调用手机拨打电话，其相关参数如下表所示：

示例代码：

wx.makePhoneCall()({
  PhoneNumber:'15958742451'
})

运行结果：

6.6.4 扫描代码 

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

扫码成功后，返回的数据如下表所示：

示例代码：

//只允许从相机和相册扫码
wx.scanCode({
    success:(res)=>{
      console.log(res.result);
      console.log(res.scanType);
      console.log(res.charSet);
      console.log(res.path);
    },
})
//只允许从相机扫码
/*wx.scanCode({
  onlyFromCamera:true,
  success:(res)=>true,
  console.log(res)
}
}）
*/

运行结果：

本章小结

 本章主要介绍了小程序的各类核心API，包括网络API、多媒体API、文件API、本地数据及缓存API、位置信息API及设备相关API等。通过对本章的学习，大家应深刻地理解各类API是开发各类小程序的核心。