第一章总结
页面简介：
首先创建项目需要项目名和目录地址尾部需要一致，在填写创建好的APPID即可。创建完项目我们把微信小程序开发者工具界面划分五大区域：工具栏、模拟区、目录文件区、编辑区和调试区。
1. 工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。
2. 模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
3. 目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+” 按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
4. 编辑区
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、•WXSS、•js 及.json 文件的
操作。
5.调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是 Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor 和 Trace。最右边的扩展菜单项“：”是定制与控制开发工具按钮。
第二章总结
页面配置文件
页面配置文件（*.json)只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json)中的配置值。页面中的window配置只需书写配置项，不必书写window
逻辑层文件
项目逻辑文件app.js中可以通过App（）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp（）获取。
项目逻辑文件配置项
onLaunch(){
console.log("初始化")
},
onShow(){
console.log("启动")
},
onHide(){
console.log("隐藏")
}index.js 数据初始
Page({
data:{
name:'lwk',
age:30,
birthday:[{year:1998},{month:11},{data:18}],
object:{hobby:'computer'}
}
})
index.wxml 数据绑定
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>出生日期：
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>运行效果
在app.json文件中设置如下taBar配置：
{
"pages": [
"pages/index/index",
"pages/news/news",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Wechat",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"lazyCodeLoading": "requiredComponents",
"tabBar":{
"color": "#666",
"selectedColor": "#ff0000",
"borderStyle":"black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath":"pages/index/index",
"iconPath":"images/index.jpg",
"selectedIconPath":"images/index.jpg",
"text":"首页"
},
{
"pagePath":"pages/news/news",
"iconPath":"images/news.jpg",
"selectedIconPath":"images/news.jpg",
"text":"新闻"
}
]
}
}页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数要实现这种机制，需要定义事件函数和调用事件。
定义事件函数: 在.js文件中定义事件函数来实现相关功能，当事件响应后就事件处理代码。
调用事件: 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“ke形式出现形式出现，key(属性名)以bind或catch开头，再加上事件类型，如bindtap、cat其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。
在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件：冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素在向其父级元素传递，一直到页面的顶级元素
级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件：非冒泡事件是指某个组件上的事件被触发后，该事代吗的发果与下到代码的在WXML中，冒泡事件有6个
冒泡事件
第三章总结
3.浮动与定位
元素浮动
元素浮动就是设置了浮动属性的元素会脱离标准文档流的控制。
none——默认值，不浮动
left——元素左浮动
right——元素右浮动
浮动的案例：
<view>box1,box2,box3 没浮动</view>
<view style="border: 1px solid #0f0;padding: 5px">
<view style="border: 1px solid #0f0">box1</view>
<view style="border: 1px solid #0f0">box2</view>
<view style="border: 1px 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>
</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">box2</view>
</view>
<view>box1 box2 左浮动 box3清除左浮动</view>
<view style="border: 1px solid #f00;padding: 5px">
<view style="float:left; border: 1px solid #0f0">box1</view>
<view style="float:left; border: 1px solid #0f0">box2</view>
<view style="clear: left; border: 1px solid #0f0">box3</view>
</view>
<view>box1 box2 box3 左浮动 在父元素后添加一个空元素</view>
<view style="height: 22px; border: 1px solid #f00;padding: 5px"class="clear-float">
<view style="float:left; border: 1px solid #0f0">box1</view>
<view style="float:left; border: 1px solid #0f0">box2</view>
<view style="float: left; border: 1px solid #0f0">box3</view>
</view>运行结果：
flex布局
flex布局主要由容器和项目组成，采用flex布局的元素成为容器，flex布局的所有直接子元素自动成为容器的成员, 称为flex项目(flexitem)。
容器属性
flex容器支持的属性有7种：
display
display用来指定元素是否为flex布局，语法格式为：
.box{display:flex|inline-flex;}
flex-direction
flex-direction用于设置主轴的方向,即项目排列的方向：
.box{flex-direction:row|row-reverse|column|column-reverse;}row———主轴为水平方向, 起点在左端, 当元素设置为 flex布局时, 主轴默认为row;
row-reverse———主轴为水平方向, 起点在右端;
column———主轴为垂直方向, 起点在顶端;
column-reverse———主轴为垂直方向, 起点在底端
元素在不同主轴方向下的显示效果：
flex-warp
flex-flow是flex-direction 和flex-wrap 的简写形式, 默认值为rownowrap。
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}nowrap——不换行，默认值
wrap——换行，第一行在上方
wrap-reverse——换行，第一行在下方
flex-wrap不同值的显示效果：
flex-flow
flex-flow是flex-direction和flex-wrap的简写形式：
.box{flex-flow:<flex-direction>||<flex-wrap>;}示例代码：
.box{flex-flow:row nowrap;}
.box{flex-flow:row-reverse wrap;}
.box{flex-flow:column wrap-reverse;}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不同值的显示效果：
第四章总结
基础内容组件
基础内容组件包括icon、text和progress，主要用于视图页面中展示图标，文本和进度条等信息。
icon
index.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>
index.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']
}
})运行结果：
text
text组件用于展示内容，支持转义字符”\“，属于行内元素。
index.wxml
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{25-x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}"> </text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<=2*x-1}}">
<text>*</text>
</block>
</block>
</view>
</block>
<block wx:for="{{x}}" wx:for-item="x">
<view class="aa">
<block wx:for="{{19+x}}" wx:for-item="x">
<text decode="{{true}}" space="{{true}}"> </text>
</block>
<block wx:for="{{y}}" wx:for-item="y">
<block wx:if="{{y<= 11-2*x}}">
<text>*</text>
</block>
</block>
</view>
</block>
index.js
Page({
data:{
x:[1,2,3,4,5],
y:[1,2,3,4,5,6,7,8,9]
}
})运行结果：
progess
progess组件显示进度条状态，progess组件属于块级元素。
index.wxml
<view>显示百分比</view>
<progress percent="80" show-info="80"></progress>
<view>改变宽度</view>
<progress percent="50" stroke-width="2"></progress>
<view>自动显示进度条</view>
<progress percent="80" active/>运行结果：
表单组件
表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现与小程序与用户之间的沟通。
button
button组件属性
index.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>index.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})
}
})运行结果：
Picker
概念：picker组件为滚动选择器，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multiSelector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。
index.wxml:
<view>---range 为数组 ---</view>
<picker range="{{array}}" value="{{index1}}"bindchange='arrayChange'>
当前选择：{{array[index1]}}
</picker>
<view>---range 为数组对象 ---</view>
<picker range="{{objArray}}" value="{{index2}}"bindchange="objArrayChange" range-key="name">
当前选择：{{objArray[index2].name}}
</picker>
index.js:
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
})
}
})运行结果：
多列选择器
多列选择器（mode=multiSelector）允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。
index.wxml:
<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bidnMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view>当前选择：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view>
</picker>index.js:
Page({
data:{
multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
multiIndex:[0,0,0]
},
bindMultiPickerChange:function(e){
console.log('picker 发送选择改变,携带值为',e.detail.value)
this.setData({
multiIndex:e.detail.value
})
},
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);
},
})运行结果：
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:
//input.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'),
}
})运行结果：
textarea
textarea组件为多行输入框组件，可以实现多行内容的输入
index.wxml:
<textarea bindblur ="bindTextAreaBlur" auto-height placeholder="自动变高"/>
<textarea placeholder="placeholder 颜色是红色"placeholderstyle="color:red;"/>
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus/>
<textarea placeholder="这个只有在按钮点击的时候才聚焦"focus="{{focus}}"/>
<button bindtap="bindButtonTap">使得输入框获取焦点</button >
<form bindsubmit="bindFormSubmit">
<textarea placeholder ="form 中的textarea" name ="textarea" />
<button form-type="submit">提交</button></form>index.js:
//textarea.js
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)
}
})运行结果：
laber
label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id,或者将控件放在该标签下，当点击label组件时，就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前，label组件可以绑定的控件有<button/ >、<checkbox/ >、<radio/>、<switch/ >。
index.wxml:
<!--单击中国不能选择/取消复选框-->
<view><checkbox></checkbox>中国</view>
<!--单击“中国”可以选择/取消复选框-->
<view><label><checkbox> </checkbox >中国</label></view>
<!--使用for找到对应的 id -->
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value ="{{item.value}}" checked = '{{item.checked}}'>
{{item.value}}</checkbox>
</label>
</checkbox-group>
<view>您的选择是:{{city}}</view>index.js:
//1abel.js
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})
}
})运行结果：
第五章总结
即速应用概述
即速应用是深圳市咫尺网络科技开发有限公司开发的一款同时兼具微信小程序和支付宝小程序快速开发能力的工具，用户只需简单拖拽可视化组件，就可以实现在线小程序开发。据不完全统计，在微信小程序正式发布的1年内，在即速应用上打包代码并成功上线的微信小程序已经超过5万个。
即速应用的优势
即速应用的功能特点主要体现在以下几个方面：
1．开发流程简单，零门槛制作
使用即速应用来开发微信小程序的过程非常简单，无须储备相关代码知识，没有开发经验的人也可以轻松上手。
（1）登录即速应用的官方网站（www.jisuapp.cn），进入制作界面，从众多行业模板中选择一个合适的模板。
（2）在模板的基础上进行简单编辑和个性化制作。
（3）制作完成后，将代码一键打包并下载。
（4）将代码上传至微信开发者工具。
（5）上传成功后，等待审核通过即可。
2．行业模板多样，种类齐全
即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮（单店版、多店版）、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。
这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道，降低运营成本，提高管理效率。
3．丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算；社区体系可以实现评论留言和话题管理；多商家系统可以实现分店统一管理、多门店统一运营；营销工具可以实现会员卡、优惠券的设置等营销方式……
目前，即速应用有4个版本，分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本，适合制作个人小程序，其他版本根据功能不同可以满足不同企业的需求。
即速应用的应用范围主要包括以下类型：
（1）资讯类：新闻、媒体。
（2）电商类：网购（服装、电器、读书、母婴……）。
（3）外卖类：餐饮及零售。
（4）到店类：餐饮及酒吧。（5）预约类：酒店、KTV、家教、家政，其他服务行业。
即速应用界面介绍
登录即速应用官网，单击“注册”按钮，在如图5-1所示的页面填写相应信息，即可完成注册。完成注册后，即可登录账号，使用即速应用。
即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板，如图5-2所示。
1．菜单栏
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史”选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置。
2．工具栏
工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件。
3．编辑区
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板，“元素”选项可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块。
4．属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡。“组件”选项卡用来设置组件内容及点击事件；“组件样式”选项卡用来设置组件的样式，不同组件有不同的样式需要设置。
即速应用组件
即速应用提供了大量的组件供用户快速布局页面，9个基础组件和11个应用组件。
布局组件
布局组件用于设计页面布局，主要还包括双栏、面板、自由面板、顶部导航、分割线和动态分类
点击任意一个右侧都有相应的属性面板
1．双栏组件
双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志，便于操作，预览时则不会出现。双栏组件默认设置每个栏占50%总宽，也可以按实际需要调整比例。双栏里面可以添加基本的组件，从而达到整体的布局效果。双栏还可以嵌套双栏，即可以在其中的一个栏里嵌入一个双栏，从而将整体分成3部分（若需要将整体分成4部分，就再嵌套一个双栏，依次推）。
2. 面板组件
面板组件相当于一个大画板，用户可以将很多基本(甚至高级)的组件(如文本组件、
图片组件、按钮组件、标题组件、分类组件 音频组件、组件、数组件等)放进面板
组件里一起管理。
3. 自由面板组件：
自由面板组件是指放置在该面板内的组件可以自由拖动，调节组件大小。用户既可以向自由面板内拖入部分组件(包括文本组件、图片组件和按钮组件)，也可以拖入任意相关容器组件，用于不规则布局。
4. 顶部导航组件
顶部导航组件固定在页面顶部，用于编辑顶部的导航。常用的的手机应用在顶部有一条导航，上面写有手机应用App的名称或logo，以及返回键等.
5. 底部导航组件
底部导航组件固定于页面底部，用于编辑底部的导航底部
6. 分割线组件：
分割线组件被放置于任意组件之间，用于实现分割。
7. 动态分类组件
动态分类组件仅适用于电商、到点小程序。用户通过选择动态组件的样式，可以实现顶部分类、侧边栏分类来展示应用数据、商品数据等。动态分类的二级有图模式只适用于电商类小程序
基本组件
基础组件是小程序页面常用的组件，包括文本、图片、按钮、标题、轮播、分类、图片列表、图文集和视频
文本组件
文本组件是用来展示文字，设置点击事件，是小程序页面最常用的组件。
图片组件
图片组件主要是用来插入图片，或者进行图片模板，设置图片的样式等。
按钮组件
按钮组件是用来拉一个按钮框，可以编辑按钮的文字，也可以设置按钮的类型和样式等。
标题组件
标题组件是用来编辑标题的组件，可以编辑标题的文字，样式等。
商品列表组件
商品列表组件是用来设置以下商品的组件，可以设置组件样式，选择模板等。
视频组件
视频组件是用来插入视频或者更改其样式，可以选择视频组件的样式 等。
轮播组件
轮播组件用于实现图片的轮播展示，可以更改组件样式添加轮播图，以及数据的绑定等。
公告组件
公告组件是用来添加公告，可以输入公告信息，添加组件的样式等等。
高级组件
高级组件通常需要后台数据，通过设置后台数据来实现数据后台化，让小程序的数据随时更新，及时修改。
第六章总结
网络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）获取百度（https://www.baidu.com）首页的数据。（需要在微信公众平台小程序服务器配置中的request合法域名中添加“https://www.baidu.com”。）
示例代码如下：
index：wxml:
<button type="primary"bindtap ="getbaidutap">获取 HTML 数据</button>
<textarea value ='{{html}}'auto-heightmaxlength ='0'> </textarea>index.js :
//.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. request（Object）的GET方法获取邮政编码对应的地址信息。
示例代码如下：
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 >index.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
})
}
}
})
}
}
})运行结果：
上传文件
wx. uploadFile（Object）接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求
通过wx. uploadFile（Object），可以将图片上传到服务器并显示。
index.wxml:
<button type="primary" bindtap="uploadimage">上传图片</button>
<image src="{{img}}"mode="widthFix"/>
index.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({
filePath: 'Path[0]',
name: 'file',
url: 'http://localhost/',
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）接口用于实现从开发者服务器下载文件资源到本地，在客户端直接发起一个HTTPGET请求，返回文件的本地临时路径。
例如，通过wx. downloadFile（Object）实现从服务器中下载图片，后台服务采用WAMP软件在本机搭建。
index.wxml：
<button type="primary" bind:tap="downloadimge">下载图像</button>
<image src="{{img}}"mode='widthFix'style = "width:90%;height:500px"></image>index.js:
Page({
data:{
img:null,
},
downloadimage:function(){
var that = this;
wx.downloadFile({
url: "http://localhost/1.jpg", //通过WAMP软件实现
success:function(res){
console.log(res)
that.setData({
img:res.tempFilePath
})
}
})
}
})运行结果：
多媒体API
多媒体API主要包括图片API、录音API、音频播放控制API、音乐播放控制API等，其目的是丰富小程序的页面功能。
图片API
图片API实现对相机拍照图片或本地相册图片进行处理，主要包括以下4个API接口：
■ wx.chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。
■ wx.previewImage（Object）接口 用于预览图片。
■ wx.getImageInfo（Object）接口用于获取图片信息。
■ wx.saveImageToPhotosAlbum（Object）接口 用于保存图片到系统相册。
1．选择图片或拍照
wx. chooseImage（Object）接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wx. saveFile保存图片到本地。
若调用成功，则返回tempFilePaths和tempFiles,tempFilePaths表示图片在本地临时文件路径列表。tempFiles表示图片的本地文件列表，包括path和size。
示例代码如下：
wx.chooseImage({
count:2,//默认值为9
sizeType:['original','compressed'],//可以指定是原图还是压缩图,默认
者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有
success:function(res){
//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性来显示图片
var tempFilePaths =res.tempFilePaths
var tempFiles =res.tempFiles;
console.log(tempFilePaths)
console.log(tempFiles)
}
})录音API
录音API提供了语音录制的功能，主要包括以下两个API接口：
■ wx.startRecord（Object）接口用于实现开始录音。
■ wx.stopRecord（Object）接口
用于实现主动调用停止录音。
1．开始录音
wx. startRecord（Object）接口用于实现开始录音。当主动调用wx.stopRecord（Object）接口或者录音超过1分钟时，系统自动结束录音，并返回录音文件的临时文件路径。若要持久保存，则需要调用wx. saveFile（）接口。
停止录音
wx. stopRecord（Object）接口用于实现主动调用停止录音。
示例代码如下：
wx.startRecord)
({
success: function(res){
var tempFilePath= res.tempFilePath},
fail: function(res){
//录音失败
}
})
setTimeout(function(){//结束录音
wx.stopRecord()
},10000)音频播放控制API
音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制，主要包括以下3个API：
■ wx.playVoice（Object）接口 用于实现开始播放语音。
■ wx.pauseVoice（Object）接口用于实现暂停正在播放的语音。
■ wx.stopVoice（Object）接口 用于结束播放语音。
1．播放语音
wx. playVoice（Object）接口用于开始播放语音，同时只允许一个语音文件播放，如果前一个语音文件还未播放完，则中断前一个语音文件的播放。
示例代码如下：
wx.startRecord({
success: function(res){
var tempFilePath= res.tempFilePath wx.playVoice({//录音完后立即播放
filePath:tempFilePath, complete:function(){
}
})
}
})暂停播放
wx. pauseVoice（Object）用于暂停正在播放的语音。再次调用wx.playVoice（Object）播放同一个文件时，会从暂停处开始播放。如果想从头开始播放，则需要先调用wx.stopVoice（Object）。
示例代码如下：
wx.startRecord({
success: function(res){
var tempFilePath = res.tempFilePath
wx.playVoice({ filePath:tempFilePath
})
setTimeout(function(){
//暂停播放
wx.pauseVoice()},5000)
}
})结束播放
wx. stopVoice（Object）用于结束播放语音。
wx.startRecord({
success: function(res){
var tempFilePath =res.tempFilePath wx.playVoice({
filePath:tempFilePath})
setTimeout(function(){
wx.stopVoice()},5000)
}
})音乐播放控制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）接口 用于实现监听音乐停止。
1．播放音乐
wx. playBackgroundAudio（Object）用于播放音乐，同一时间只能有一首音乐处于播放状态，其相关参数如表6-10所示。
获取音乐播放状态
wx.getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态
接口成功后返回的参数
控制音乐播放速度
wx.seekBackgroundAudio(Object)接口用于控制音乐播放进度
暂停播放音乐
wx.pauesBackgroundAudio()接口用于暂停播放音乐
停止播放音乐
wx.stopBackgroundAudio()接口用于停止播放音乐
监听音乐播放
wx.onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放，通常被wx.playBackgroundAudio(Object)方法触发，在CallBack中可改变播放图标。
监听音乐暂停
wx. onBackgroundAudioPause （CallBack）接口用于实现监听音乐暂停，通常被 wx. pause-watepondhudio（）方法触发。在 CallBeck 中可以改变播放图标。
监听音乐停止
wx. onBackgroundAudioStop（CallBack）接口用于实现监听音乐趾，通常被音乐自然播放停止或 wx. seekBackgroundAudio （Object）导致播放位置等于音乐总时长时触发。在CallBack 中可以改变图标。
案例展示
在此，以小程序 music 案例来展示音乐 API 的使用。该小目的4个页面文件分别为 music.wxml、 music. wxss、music.json和music.cojs。实际效果如图6-5所示。
index.wxml:
<view class="container">
<image class="bgaudio"src = "{{changedImg? music.coverImg:'/images/IMG10.jpg'}}"/>
<view class ="control-view">
<!--使用data-how定义一个0表示快退10秒-->
<image src ="/images/IMG9.jpg"bindtap="onPositionTap"data-how= "0 "/>
<image src = "/images/IMG11.jpg" bindtap = "onAudioTap"/>
<image src ="/images/IMG8.jpg"bindtap = "onStopTap"/><!--使用data-how定义一个1表示快进10秒-->
<image src ="/images/IMG7.jpg"bindtap ="onPositionTap"data-how = "1"/>
</view >
</view >
index.wxss:
.bgaudio{
height:350rpx; width:350rpx;
margin-bottom:100rpx;
}
.control-view image{
height:64rpx;
width:64rpx;
margin:30rpx;
}index.js:
Page({
data:{
//记录播放状态
isPlaying:false,
//记录coverImg,仅当音乐初始时和播放停止时,使用默认的图片。播放中和暂停时，都使用当前音乐的图片
coverImgchangedImg:false,
//音乐内容
music:{
"url":"../images/e e.mp4",
"title":"盛晓玫-有一天",
"coverImg":
"../images/e e.mp4"
},
},
onLoad:function(){
//页面加载时,注册监听事件
this.onAudioState();
},
//点击播放或者暂停按钮时触发
onAudioTap:function(event){
if(this.data.isPlaying){
//如果在正常播放状态,就暂停,并修改播放的状态
wx.pauseBackgroundAudio();
}else{
//如果在暂停状态,就开始播放,并修改播放的状态28
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){
//仅在音乐播放中,快进和快退才生效
//音乐的播放状态,1表示播放中54
let status = res.status;
if(status === 1){//音乐的总时长
let duration = res.duration;//音乐播放的当前位置
let currentPosition = res.currentPosition;
if(how ==="0"){
//注意:快退时,当前播放位置快退10秒小于0时,直接设置position为1;否则,直接减去10秒//快退到达的位置
let position = currentPosition - 10;
if(position <0){
position =1;//执行快退
}
wx.seekBackgroundAudio({
position: position
});
//给出一个友情提示,在实际应用中,请删除!!!
wx. showToast({title:"快退10s",duration:500});
}
if(how === "1"){//注意:快进时,当前播放位置快进10秒后大于总时长时,直接设置position 为总时长减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(){//当wx.playBackgroundAudio()执行时触发101 //改变coverImg和播放状态
that.setData({ isPlaying:true,changedImg:true});
console.log("on play");
});
wx.onBackgroundAudioPause(function(){ //当wx.pauseBackgroundAudio()执行时触发//仅改变播放状态
that.setData({isPlaying:false});
console.log("on pause");
});
wx.onBackgroundAudioStop(function(){ //当音乐自行播放结束时触发//改变coverImg和播放状态
that.setData({isPlaying:false,changedImg:false});
console.log("on stop");
});
}
})运行结果：
文件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。
1．保存文件
wx.saveFile(Object)用于保存文件到本地
示例代码如下：
saveImg:function(){
wx.chooseImage({
count:1，/默认值为9
sizeType:['original',compressed],/可以指定是原图还是压缩图,默认
者都有
sourceType:[album,camera’],/可以指定来源是相册还是相机,默认二
都有
success:function(res)var tempFilePaths =res.tempFilePaths0wx.saveFile(tempFilePath:tempFilePathssuccess:function(res)var saveFilePath =res.savedFilePath;
console.1og(saveFilePath)
}
})
}
})
}示例代码如下：
2．获取本地文件列表
wx. getSavedFileList（Object）接口用于获取本地已保存的文件列表，如果调用成功，则返回文件的本地路径、文件大小和文件保存时的时间戳（从1970/01/01 08: 00: 00到当前时间的秒数）文件列表。
示例代码如下：
wx.getSavedFileList({
success:function(res){
that.setData({
fileList:res.fileList
})
}
})3．获取本地文件的文件信息
wx. getSaveFileInfo（Object）接口用于获取本地文件的文件信息，此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，则使用wx. getFileInfo（Object）接口 。
示例代码如下：
wx.chooseImage({
count:1，/默认值为9sizeType:['original',compressed],/可以指定是原图还是压缩图,默认
二者都有
sourceType:['album',camera’],/可以指定来源是相册还是相机,默认二者
都有
success:function(res){
var tempFilePaths=res.tempFilePaths[0]
wx.saveFile({tempFilePath:tempFilePaths,
success:function(res){
var saveFilePath =res.savedFilePath;
wx.getSavedFileInfo({
filePath:saveFilePath,
success:function(res){
console.1og(res.size)
}
})
}
})
}
})4．删除本地文件
wx. removeSaveFile（Object）接口用于删除本地存储的文件
示例代码如下：
wx.getSavedFileList({
success:function(res){
if(res.fileList.length>0){
wx.removeSavedFile({
filePath:res.fileList[0],filePath,
complete:function(res){
console.log(res)
}
})
}
}
})5.打开文档
wx.openDocument(Object）接口用于新页面打开文档，支持的格式有doc、xls、ppt、pdf、docx、xlsx、pptx，其相关参数如下
示例代码如下：
wx.downloadFile({
url: 'http://localhost/fm2.pdf',
success:function(res){
var tempFilePath = res.tempFilePath;
wx.openDocument({
filePath: 'tempFilePath',
success:function(res){
console.log("打开成功")
}
})
}
})本地数据及缓存API
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10 MB，其目的是提高加载速度。数据缓存的接口主要有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后缀的为异步接口。
6.4.1 保存数据
1. wx. setStorage（Object）
wx. setStorage（Object）接口将数据存储到本地缓存接口指定的key中，接口执行后会覆盖原来key对应的内容。其参数如表6-19所示。
示例代码如下：
wx.setStorage({
Key:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})运行结果：
2. wx. setStorageSync（key, data）
wx. setStorageSync（key, data）是同步接口，其参数只有key和data。
示例代码如下：
wx.getStorageSync('age','25')6.4.2 获取数据
1. wx. getStorage（Object）
wx. getStorage（Object）接口是从本地缓存中异步获取指定key对应的内容。其相关参数如表6-20所示。
示例代码如下：
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。其相关参数如表6-21所示。
示例代码如下：
wx.removeStorage({
key:'name',
success:function(res){ console.log("删除成功")
},
fail:function(){
console.log("删除失败")
}
})运行结果:
2. wx. removeStorageSync（key）
wx. removeStorageSync（key）接口用于从本地缓存中同步删除指定key对应的内容。其参数只有key。
示例代码如下：
try {
wx.removeStorageSync('name')
} catch(e){
//Do something when catch error
}6.4.4 清空数据
1. wx. clearStorage（）
wx. clearStorage（）接口用于异步清理本地数据缓存，没有参数。
示例代码如下：
wx.getStorage({
key:'name',
success:function(res){
wx.clearStorage()
},
})2.wx.clearStroageSync()
wx.clearStroageSync()接口用于同步清理本地数据缓存。
示例代码如下：
try{
wx.clearStorageSync()
}catch(e){
}6.5 位置信息API
小程序可以通过位置信息API来获取或显示本地位置信息，小程序支持WGS84和GCj02标准，WGS84标准为地球坐标系，是国际上通用的坐标系；GCj02标准是中国国家测绘局制定的地理信息系统的坐标系统，是由WGS84坐标系经加密后的坐标系，又称为火星坐标系。默认为WGS84标准，若要查看位置需要使用GCj02标准。主要包括以下3个API接口：
■ wx.getLocation（Object）接口用于获取位置信息。
■ wx.chooseLocation（Object）接口 用于选择位置信息。
■ wx.openLocation（Object）接口用于通过地图显示位置。
6.5.1 获取位置信息
wx. getLocation（Object）接口用于获取当前用户的地理位置、速度，需要用户开启定位功能，当用户离开小程序后，无法获取当前的地理位置及速度，当用户点击“显示在聊天顶部”时，可以获取到定位信息，其相关参数如表6-22所示。
wx. getLocation（Object）调试成功后，返回的参数如表6-23所示。
示例代码如下：
wx.getLocation({
type:'wgs84',
success:function(res){
console.log("经度:"+res.longitude);
console.log("纬度:"+res.latitude);
console.log("速度:"+res.longitude);
console.log("位置的精确度:"+res.accuracy);
console.log("水平精确度:"+res.horizontalAccuracy);
console.log("垂直精确度:"+res.verticalAccuracy);},
})6.5.2 选择位置信息
wx. chooseLocation（Object）接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如表6-24所示。
wx. chooseLocation（Object）调用成功后，返回的参数如表6-25所示。
示例代码如下：
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',//返回可以用于wx.openLocation的经纬度
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）接口 用于扫描二维码
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
