第一章
认识微信小程序简介
小程序简介： 小程序由2011年1月推出 2017年1月上线。
小程序的特点：无需安装、触手可及、用完即走、无需卸载。
小程序的场景的特点：业务逻辑简单、使用频率低。
微信小程序开发流程
第一步：在微信公众号平台上注册小程序账号
第二步：下载开发者工具进行编码
第三步：通过开发者工具提交代码，通过审核后便可发布
微信开发者工具功能简介
我们把微信小程序开发者工具界面划分为五个区域：工具栏、模拟区、目录文件区、编辑区和调试区。
1.工具栏：在工具栏中可以实现多种功能，列入账号的切换，模拟区，编辑区，调试区的显示/隐藏，小程序的编译，预览，切换后台，清理缓存等。
2.模拟区：在模拟区中选择模拟手机类型，显示比例，网络类型后，模拟器中会显示小程序的运行效果。
3.目录文件区：目录文件区用来显示当前项目的目录结构。
4.编辑区：编辑区用来实现对代码的编辑操作
调试区功能介绍
1.Console面板
Console面板是控制台，是调试小程序的控制面板，当代码执行错误时，错误信息将显示在控制Console面板中，便于开发者排查错误。
2.Sources面板
Sources面板是源码，用于显示当前项目的脚本文件，例如：微信开放文档
3.Network面板
Network面板是请求网络调试信息页，用于显示当前项目的脚本文件
4.Security面板
Security面板是安全人证信息页，开发者可以通过该面板调试当前的网页的安全和认证等问题。如果安全设置安全论证，则会显示“The security of this page is unknown.”
5.Storage面板
Storage面板是数据库存储信息页
6.AppData面板
AppData面板是实时数据信息页，用于显示被激活的所有页面的数据情况
7.Wxml面板
Wxml面板是布局信息页，主要用于调试Wxml组件和相关CSS样式，显示Wxml转化后的界面
8.Sensor面板
Sensor面板是重力传感器信息页，用于调试重力感应API
9.Trace面板
Trace面板是路由跟踪信息页，开发者在这里可以追踪连接到电脑中的安装的路由信息
第二章
小程序的基本目录结构简介
在微信小程序的基本目录结构中，项目主目录下 有2个子目录（pages和utils）和4个文件(app.js、app.json、app.wxss、和 project.config.json)。
pages：用于存放所有小程序的页面。
utils：用来存放工具函数模块的。
project.config.json：项目的配置文件。
主体文件
包括 app.js、app.json、app.wxss 这三个。
app.js 是小程序的脚本代码。
app.json 是对整个小程序的全局配置。
app.wxss 是整个小程序的公共样式表。
页面文件
包含.js，.json，.wxml，.wxss这些文件。
.js 页面逻辑文件。
.json 页面配置文件
.wxml 页面结构文件，用于设计页面的布局。
.wxss 页面样式表，用于定义页面中用到的各种样式表。
小程序的开发框架简介
微信团队为小程序的开发提供了MINA框架。小程序MINA框架将整个系统分为视图层和逻辑层。
视图层
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
组件(Component)是视图的基本组成单元。
逻辑层
逻辑层用于处理事务逻辑。
小程序开发框架的逻辑层是由JavaScript编写。
数据层
数据层在逻辑上包括页面临时数据或缓存，文件储存(本地储存)和网络储存与调用。
创建页面项目
在项目主目录下新建一个pages目录，在pages目录下新建一个news（任意）目录，并在它下新建 news.js、news.json、news.wxml、news.wxss文件。
列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
wx:for
在组件上，可以使用 wx:for 控制属性绑定一个数组，将数据中的各项数据循环进行数据绑定到该组件
block wx:for
与 block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定
模版
在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。
定义模板
模板代码由 wxml组成，因此其定义也是在 wxml 文件中。
<template name="模版名"></template>
调用模板
将模板定义后，就可以对其进行调用了。
<template is="模板名称"data=="{{传入的数据}}"/>
引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供
了两种方式来引用其他页面文件。
import方式
如果在要引用的文件中定义了模板代码，则需要用import方式引用。
include方式
include 方式可以将源文件中除模板之外的其他代码全部引人，相当于将源文件中的代码复制到include所在位置。
页面事件
小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
在小程序中、事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件:冒泡事件是指某个组件上的事件被触发后级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。
第三章
盒子模型
盒子模型就是我们在页面设计中经常用得到的一种思维。在css中，一个独立的盒子模型由内容、内边距、边框、外边距4个部分组成。
块级元素
块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。
特点:
(1)一个块级元素占一行
(2)块级元素的默认高度由内容决定，除非自定义高度。
(3)块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
(4)块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(5)块级元素可以容纳块级元素和行内元素。
元素定位
浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。基本格式如下:
{position:static | relative | absolute |fixed}
static-默认值，该元素按照标准流进行布局;
relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流式对待它;
absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒标准流中脱离，它对其后的兄弟盒子的定位没有影响:
fxed--固定定位，相对于浏览器窗口进行定位
示例代码如下：
三个元素均未定位
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
box2元素相对定位
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position:relative;left: 30px;top:30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>
box2元素决对定位
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position:absolute;left: 30px;top:30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>-->
box2元素固定定位
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position:fixed;left: 30px;top:30px;">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;">box3</view>运行结果如下：
flex布局
flex布局主要由容器和项目组成，采用flex布局的元素称为flex容器(flex container)，flex布局的所有直接子元素自动成为容器的成员，称为flex项目(flex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。flex布局模型如图所示：
容器属性
flex容器支持的属性有7种，如下表所示：
(1)display
display 用来指定元素是否为 flex布局，语法格式为:
.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——主轴为垂直方向，起点在底端。
如下图所示为元素在不同主轴方向下的显示效果。
(3)flex-wrap
flex-wrap用来指定当项目在一根轴线的排列位置不够时，项目是否换行，其语法格式如下:
.box{flex-wrap:nowrap|wrap|wrap-reverse;}
其属性值解析如下：
nowrap——不换行，默认值；
wrap——换行，第一行在上方；
wrap-reverse——换行，第一行在下方。
注意： 当设置换行时，还需要设置 align-item属性来配合自动换行，但align-item的值不能为“ stretch”。
flex-wrap不同值的显示效果如下图所示：
(4)flex-flow
flex-flow是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不同值的显示效果。
(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, 项目将在交叉轴方向拉伸填充容器, 此为默认值。 示例代码如下：
<view class="cont1">
<view class="item">1</view>
<view class="item item2">2</view>
<view class="item item3">3</view>
<view class="item item4">4</view>
</view>
.cont1{
display: flex;
flex-direction: row;
align-items: baseline;
}
.item{
background-color: #ccc;
border: 1px solid #f00;
height: 100px;
width: 50px;
margin: 2px;
}
.item2{
height: 80px;
}
.item3{
display: flex;
height: 50px;
align-items: flex-end;
}
.item4{
height: 120px;
}运行结果：
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不同值的显示效果。
项目属性
容器内的项目支持6个属性，其名称和功能如下图所示。
第四章
组件的定义及属性
语法格式如下：
< 标签名 属性名 = “属性值” > 内容.... < /标签名 >
id 组件的唯一表示，保持整个页面唯一，不常用
class 组件的样式类，对应 WXSS 中定义的样式
style 组件的内联样式，可以动态设置内联样式
hidden 组件是否显示，所有组件默认显示
data - * 组件触发事件时，会发送给事件处理函数
容器视图组件
主要包括：view，scroll - view 和 swiper 组件
示例代码如下：
//scroll-view.wxml
1 <view class="container"style = "padding:0rpx">
2 <!--垂直滚动,这里必须设置高度 -->
3 <scroll -view scroll-top="||scrollTop||" scroll -y="true*
4 style= " height:||scrollHeight }l px;" class =" list" bind.
scrolltolower = "bindDownLoad"
bindscrolltoupper ="topLoad" bindscroll ="scroll">
5
6 <view class = "item"wx;for ="{{list}|">
7 <image class = "img"src ="{{item.pic_url|}"></image>
8 <view class = "text" >
9 < text class ="title">|{item.name| } < /text >
< text class = "description" >|{ item. short _de-
20
scription|| </text >
11 </view>
12 </view >
13 </scroll -view>
14 <view class="body-view" >
15 <loading hidden ="{ |hidden||"bindchange = "loadingChange">
16 加载中...
17 </loading >
18 </view >
19 </view >
2021
22 //scroll-view.js
23 var url ="http://www.imooc.com/course/ajaxlist";24 var page = 0;
25 var page_size =5;26 var sort ="last";27 var is_easy =0;28 var lange_id =0;29 var pos_id =0;30 var unlearn =0;
32 //请求数据
33 var loadMore =function(that){
34 that.setData({
35 hidden: false
36 1);
37 wx.request({38 url:url,39 data:{
40 page: page,
41 page_size: page_size,
42 sort: sort,
43 is_easy: is_easy,
44 lange_id: lange_id,
45 pos_id:pos_id,
46 unlearn: unlearn
47 }，
48 success: function(res){
49 //console.info(that.data.list);
50 var list = that.data.list;
51 for(var i = 0; i < res.data.list.length;i++){
52 list.push(res.data.list[i]);
53 }
54 that.setData(
55 list:list
56 });
57 page ++;
58 that.setData(l
59 hidden:true
60 });61 {62);63
64 Page({
65 data:{
66 hidden; true,
67 list:[]，
68 scrollTop:0,
69 scrollHeight:0
70 }，
71 onLoad: function(){
72 //这里要注意,微信的scroll -view必须设置高度才能监听滚动事件,所以需要在面的 onLoad事件中为scroll-view的高度赋值74 var that = this;75 wx.getSystemInfo({
76 success: function(res){
77 that.setData(l
78 scrollheight:res.windowHeight
79 1);
80 }
81 1);
82 loadMore(that);83 1，
84 //页面滑动到底部
85 bindDownLoad;function()!
86 var that = this;
87 loadMore(that);
88 console.log("lower");
89 },
90 scroll: function(event)
91 //该方法绑定了页面滚动时的事件,这里记录了当前的position.y的值,为了在请求数据后把页面定位到这里
93 this.setData(i
94 scrollTop: event.detail.scrolltop
95
96 },
97 topLoad: function(event)
98//该方法绑定了页面滑动到顶部的事件,然后做页面上拉刷新99 page =0;
100 this.setData(l
101 list:[]，
102 scrollTop:0
103 1);
104 loadMore(this);
105 console.log("lower");
106 }
107 1)
108 //scroll-view.wxss109.userinfol
110 display:flex;
111 flex - direction:column;
112 align - items:center;
113
115 .userinfo - avatar
116 width:128rpx;
117 height:128rpx;
118 margin:20rpx;
119 border -radius:50%:
120 }121
122.userinfo -nickname
123 color:#aaa:
124 }
126 .usermotto{
127 margin-top:200px;
128 }
130 /* */
132 scroll-view
133 width:100%;
134 }
136 .item{
137 width:90%;
138 height:300rpx;
139 margin:20rpxauto;
140 background;brown;
141 overflow:hidden;
142 }
143.item.img
144 width:430rpx:
145 margin -right:20rpx;
146 float:left;
147 }
148 .title{
149 font -size:30rpx:
150 display:block;
151 margin:30rpxauto;
152 }
153 .description
154 font -size:26rpx:
155 line -height:15rpx;
156 }view 组件特有属性
代码如下：
<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"> 3 </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:lpx solid #f00;flex-grow:l"> 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:lpx 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:lpx solid #f00; flex-grow:2"> 3 </view>
</view>
</view>运行结果：
scroll - view 组件属性
示例代码如下：
//scroll-view.wxml
1 <view class="container"style = "padding:0rpx">
2 <!--垂直滚动,这里必须设置高度 -->
3 <scroll -view scroll-top="||scrollTop||" scroll -y="true*
4 style= " height:||scrollHeight }l px;" class =" list" bind.
scrolltolower = "bindDownLoad"
bindscrolltoupper ="topLoad" bindscroll ="scroll">
5
6 <view class = "item"wx;for ="{{list}|">
7 <image class = "img"src ="{{item.pic_url|}"></image>
8 <view class = "text" >
9 < text class ="title">|{item.name| } < /text >
< text class = "description" >|{ item. short _de-
20
scription|| </text >
11 </view>
12 </view >
13 </scroll -view>
14 <view class="body-view" >
15 <loading hidden ="{ |hidden||"bindchange = "loadingChange">
16 加载中...
17 </loading >
18 </view >
19 </view >
2021
22 //scroll-view.js
23 var url ="http://www.imooc.com/course/ajaxlist";24 var page = 0;
25 var page_size =5;26 var sort ="last";27 var is_easy =0;28 var lange_id =0;29 var pos_id =0;30 var unlearn =0;
32 //请求数据
33 var loadMore =function(that){
34 that.setData({
35 hidden: false
36 1);
37 wx.request({38 url:url,39 data:{
40 page: page,
41 page_size: page_size,
42 sort: sort,
43 is_easy: is_easy,
44 lange_id: lange_id,
45 pos_id:pos_id,
46 unlearn: unlearn
47
48 success: function(res){
49 //console.info(that.data.list);
50 var list = that.data.list;
51 for(var i = 0; i < res.data.list.length;i++){
52 list.push(res.data.list[i]);
53
54 that.setData(
55 list:list
56 |);
57 page ++;
58 that.setData(l
59 hidden:true
60 });61 |62 |);63
64 Page(|
65 data:{66 hidden; true,
67 list:[]，
68 scrollTop:0,
69 scrollHeight:0
70
71 onLoad: function()|
72 //这里要注意,微信的scroll -view必须设置高度才能监听滚动事件,所以需要在面的 onLoad事件中为scroll-view的高度赋值74 var that = this;75 wx.getSystemInfo({
76 success: function(res)|
77 that.setData(l
78 scrollheight:res.windowHeight
79 1);
80
81 1);
82 loadMore(that);83 1，
84 //页面滑动到底部
85 bindDownLoad;function()!
86 var that = this;
87 loadMore(that);
88 console.log("lower");
89
90 scroll: function(event )
91 //该方法绑定了页面滚动时的事件,这里记录了当前的position.y的值,为了在请求数据后把页面定位到这里
93 this.setData(i
94 scrollTop: event.detail.scrolltop
95
96 |.
97 topLoad: function(event )
98//该方法绑定了页面滑动到顶部的事件,然后做页面上拉刷新99 page =0;
100 this.setData(l
101 list:[]，
102 scrollTop:0
103 1);
104 loadMore(this);
105 console.log("lower");
106
107 1)
108 //scroll-view.wxss109 .userinfol
110 display:flex;
111 flex -direction:column;
112 align -items:center;
113
115 .userinfo -avatar
116 width:128rpx;
117 height:128rpx;
118 margin:20rpx;
119 border -radius:50%:
120 }121
122.userinfo -nickname
123 color:#aaa:
124 }
126 .usermotto{
127 margin-top:200px;
128 }
130 /* */
132 scroll-view
133 width:100%;
134 |
136 .item{
137 width:90%;
138 height:300rpx;
139 margin:20rpxauto;
140 background;brown;
141 overflow:hidden;
142 }
143.item.img
144 width:430rpx:
145 margin -right:20rpx;
146 float:left;
147 }
148 .title{
149 font -size:30rpx:
150 display:block;
151 margin:30rpxauto;
152
153 .description
154 font -size:26rpx:
155 line -height:15rpx;
156 }因网址没用，无运行结果
基础内容组件
基础内容组件包括icon，text 和 progress，主要用在视图页面中展示图标、文本和进度条等信息
icon组件即图标组件，通常用于表示一种状态
示例代码如下：
<!--pages/leixin/leixin.wxml-->
<view> icon 类型:
<block wx:for="{{iconType}}">
<icon type ="{{item}}"/>{{item}}
</block>
</view>
<view> icon 大小:
<block wx:for="{{iconSize}}">
<icon type ="success" size ="{{item}}"/>{{item}}
</block>
</view>
<view> icon 颜色:
<block wx:for ="{{iconColor}}">
<icon type ="success" size ="30" color ="{{item}}"/>{{item}}
</block>
</view>// leixin.js
Page({
data:{
iconType:["success","success_no_circle","info","warn","wait-ing","cancel","download","search","clear"],
iconSize:[10,20,30,40],
iconColor:['#f00','#0f0','#00f']
}
})
// leixin.json
{
"navigationBarBackgroundColor": "#FFFE91",
"navigationBarTitleText": "类型",
"navigationBarTextStyle":"black",
"usingComponents": {}
}运行结果：
radio
radio 单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio- group/ > (单项选择器)和<radio/>(单选项目)两个组件组合而成
示例代码如下：
//radio.wxml
<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 >//radio.js
Page({
data:{
radios:[
{ name:'java',value:'JAVA' },
{name:'python',value: 'Python',checked: 'true' },
{name:'php',value: 'PHP'},
{name:'swif',value:'swif'},
],
city:"",
lang:""
},
citychange: function(e){
this.setData({ city: e.detail.value });
},
radiochange: function(event){
this.setData({lang: event.detail.value});
console.log(event.detail.value)
}
})运行结果：
input
input组件为输入框,用户可以输入相应的信息，其属性如下表所示。
示例代码如下所示:
//index.wxml
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}"/>
<button bindtap="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"/>
<input password type="text"/>
<input type="digit" placeholder="带小数点的数学键盘"/>
<input type="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>
//index.js
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
}
//或者直接返回字符串,光标在最后边
//return value.replace( /11 /g,'2'),
}
})效果图如下：
audio
audio组件用来实现音乐播放、暂停等，其属性如下表所示。
示例代码如下：
//index.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>
//index.js
Page({
data:{
poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg? max_age=2592000',
name:'此时此刻',
autor:'许巍',
src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3? guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&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
}
})
}
}) 
第五章
即速应用的概念
即速应用的优势
1.开发流程简单，零门槛制作
2.行业模版多样，种类齐全
3.丰富的功能组件和强大的管理后台
即速应用界面介绍
登录即速应用官网，单击“注册”按钮，在如图5-1所示的页面填写相应信息，即可完成注册。完成注册后，即可登录账号，使用即速应用。
即速应用后台管理
即速应用后台提供了非常强大的后台管理, 开发者在后台进行修改操作就可以让数据即时更新, 开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具、多商家管理等功能。
1.数据管理
数据管理包括数据总览、访客分析和传播数据功能。
数据总览提供小程序总浏览量、昨日/ 今日访问量、总用户量、总订单数及浏览量曲线图, 如图所示。
访客分析是以图例的形式来展示用户从微信的哪个模块来访问及访问的次数、比例、用户来源地区、用户访问时间及使用设备等, 便于管理者更好地做好营销工作, 如图所示。
传播数据主要是用于提供新老访客的比例, 以及访客使用哪些主要平台打开应用的次数及占比。
２.分享设置
分享设置主要提供可以分享应用的方式, 如图所示。
３.用户管理
用户管理主要用于实现对用户进行添加、分组、群发消息、储值金充值、赠送会员卡等功能, 如图所示。
４.应用数据
应用数据是后台管理的主要内容, 前端组件(动态列表、动态表单) 的数据都是通过在应用数据中的数据对象来管理的, 类似通过数据库存放和管理数据
５. 轮播管理
轮播管理是前端软播组件的后台数据管理器, 通过软播管理来设置前端软播组件展示的图片内容。
６. 分类管理
分类管理适用于电商、到店、应用数据。 分类管理可以通过选择动态分类组件样式来实现在顶部分类或侧边栏分类以展示应用数据、商品数据等效果。 动态分类的二级有图模式只适用于电商。
７. 商品管理
商品管理是后台管理的主要内容, 前端商品列表组件的数据来源于后台商品管理。 商品管理可以管理商品列表、积分商品、位置管理、支付方式、订单管理、拼团订单管理、订单统计、账单明细、运费管理和评价管理功能。
８.经营管理
经营管理主要包括子账号管理、手机端客户关系管理和短信接收管理, 便于管理者管理小程序的运营。
９.营销工具
营销工具是小程序营销推广的有力工具, 主要有会员卡、优惠券、积分、储值、推广、秒杀、集集乐、拼团活动、大转盘、砸金蛋、刮刮乐等。 这些营销工具都需要事前在后台合理设置后, 才能在活动中发挥更大的作用。
10.多商家管理
商家管理是即速应用为有众多商家的商城(如“华东商城” “义乌商城” 等) 开设的管理功能, 方便管理者统计每家店铺的订单及进行收益分析。
第六章
网络API
微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生API接口或第三方API提供了各类接口实现前后端交互。
网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口。
wx.request（Object）接口 用于发起HTTPS请求。
wx.uploadFile（Object）接口用于将本地资源上传到后台服务器。
wx.downloadFile（Object）接口用于下载文件资源到本地。
wx.connectSocket（Object）接口 用于创建一个WebSocket连接。
wx.sendSocketMessage（Object）接口 用于实现通过WebSocket连接发送数据。
wx.closeSocket（Object）接口用于关闭WebSocket连接。
wx.onSocketOpen（CallBack）接口 用于监听WebSocket连接打开事件。
wx.onSocketError（CallBack）接口 用于监听WebSocket错误。
wx.onSocketMessage（CallBack）接口 用于实现监听WebSocket接收到服务器的消息事件。
wx.onSocketClose（CallBack）接口 用于实现监听WebSocket关闭。
在本节，我们将介绍常用的3个网络API。
发起网络请求
wx. request（Object）实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表6-1所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求。
通过wx. request（Object）的GET方法获取邮政编码对应的地址信息。
示例代码如下：
在.js输入代码：
//postcode.js
Page({
data:{
postcode:"",
address:[],//邮政编码对应的地址
errMsg:"",
error_code:-1//错误码
},
input:function(e){//输入事件
this.setData({
postcode:e.detail.value,
})
console.log(e.detail.value)
},
find:function(){//查询事件
var postcode =this.data.postcode;
if(postcode!=null&& postcode!=""){
var self =this;
//显示 toast 提示消息
wx.showToast({
title:'正在查询,请稍候....',
icon: 'loading',
duration:10000
});
wx.request({
url:'https://v.juhe.cn/postcode/query',
//第三方后台服务器
data :{
' postcode' :postcode,
'key':'0ff9bfccdf147476e067de994eb5496e'
},
header :{
'Content-Type ':'application/json',
},
method:'GET',//方法为GET
success:function(res){
wx.hideToast();//隐藏toast
if(res.data.error_code==0){
console.log(res);
self.setData({
errMsg:"",
error_code:res.data.error_code,//错误代码
address:res.data.result.list//获取到的数据
})
}
else{
self.setData({
errMsg:res.data.reasonllres.data.reason,//错误原因分析
error_code:res.data.error_code
})
}
}
})
}
}
})在index.wxml输入代码：
<view>邮政编码:</view >
<input type="text" bindinput="input" placeholder='6位邮政编码'/>
<button type="primary" bindtap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}"><text>{{item}}</text></block>
</block >运行结果：
多媒体API
多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API等，其目的是丰富小程序的页面功能.
图片API
图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：
wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
wx.previewImage（Object）接口 用于预览图片。
wx.getImageInfo（Object）接口用于获取图片信息。
wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。
音频播放控制API
音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API：
wx.playVoice（Object）接口 用于实现开始播放语音。
wx.pauseVoice（Object）接口用于实现暂停正在播放的语音。
wx.stopVoice（Object）接口 用于结束播放语音。
音乐播放控制API
音乐播放控制API主要用于实现对背景音乐的控制，音乐文件只能是网络流媒体，不能是本地音乐文件。音乐播放控制API主要包括以下8个API：
wx.playBackgroundAudio（Object）接口 用于播放音乐。
wx.getBackgroundAudioPlayerState（Object）接口 用于获取音乐播放状态。
wx.seekBackgroundAudio（Object）接口 用于定位音乐播放进度。
wx.pauseBackgroundAudio（）接口 用于实现暂停播放音乐。
wx.stopBackgroundAudio（）接口 用于实现停止播放音乐。
wx.onBackgroundAudioPlay（CallBack）接口 用于实现监听音乐播放。
wx.onBackgroundAudioPause（CallBack）接口 用于实现监听音乐暂停。
wx.onBackgroundAudioStop（CallBack）接口 用于实现监听音乐停止。
文件API
从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力，主要包括以下5个API接口：
wx.saveFile（Object）接口 用于保存文件到本地。
wx.getSavedFileList（Object）接口 用于获取本地已保存的文件列表。
wx.getSaveFileInfo（Object）接口 用于获取本地文件的文件信息。
wx.removeSaveFile（Object）接口 用于删除本地存储的文件。
wx.openDocument（Object）接口 用于新开页面打开文档，支持格式：doc、xls、ppt、pdf、docx、xlsx、ppts。
位置信息API
小程序可以通过位置信息API来获取或显示本地位置信息, 小程序支持WGS84和GCj02标准,WGS84标准为地球坐标系,是国际上通用的坐标系ꎻGCj02标准是中国国家测绘局制定的地理信息系统的坐标系统,是由WGS84坐标系经加密后的坐标系,又称为火星坐标系。
默认为WGS84标准,若要查看位置需要使用GCj02标准。主要包括以下３个API接口:
wx.getLocation(Object)接口用于获取位置信息。
wx.chooseLocation(Object)接口用于选择位置信息。
wx.openLocation(Object)接口用于通过地图显示位置
设备相关API
设备相关的接口用于获取设备相关信息,主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下５个接口API:
一、wx.getSystemInfo(Object)接口、wx.getSystemInfoSync()接口用于获取系统信息。
二、wx.getNetworkType(Object)接口用于获取网络类型。
三、wx.onNetworkStatusChange(CallBack)接口用于监测网络状态改变。
四、wx.makePhoneCall(Object)接口用于拨打电话。
五、wx.scanCode(Object)接口用于扫描二维码。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
