第一章
小程序简介
小程序是一种轻量级应用，提供了一种更快捷、更高效的方式来访问和使用特定服务或功能。与传统的手机应用相比，小程序无需下载和安装，用户只需通过扫描二维码、搜索或直接打开链接，就可以直接使用。
小程序具有以下特点：
1. 快速体验：小程序无需下载和安装，用户可以直接使用，不占用手机存储空间，加载速度快。
2. 低门槛：开发小程序相对于开发传统应用门槛较低，开发成本较低。
3. 全平台适配：小程序可以在各种操作系统和平台上运行，包括iOS和Android系统。
4. 丰富的功能：小程序可以提供各种功能和服务，包括在线购物、社交媒体、新闻资讯、生活服务等。
5. 具有互联网思维：小程序与互联网服务紧密结合，可以实现实时更新、数据互通等特点。
微信小程序开发者工具界面功能介绍：
1.工具栏：
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等
2.模拟区：
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果
3.目录文件区：
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作
4.编辑区：
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、.js及.json 文件的操作，使用组合键能提高代码的编辑效率。
5.调试区：
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sourees、Network、Security、Storage、AppDataWxml、Sensor和Trace。最右边的扩展菜单项“:”是定制与控制开发工具按钮。
第二章
小程序的基本目录结构
主体文件
微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责小
程序的整体配置，它们的名称是固定的。
app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app·js文件会和其他页面的逻辑文件打包成一个JavaScript文件。该文件在项目中不可缺少。
app.json小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。
app.wxss小程序主样式表文件，类似HTML的.css文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。
页面文件
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根 app.json 设置的路径找到相对应的资源进行数据绑定。
.js文件 页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
.wxml文件 页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则;否则，直接使用 app.wxss 中指定的样式规则。该文件在页面中不可缺少。
.json 文件页面配置文件。该文件在页面中不可缺少。
配置文件及描述
全局配置项
小程序的全局配置保存在全局配置文件(appjson)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等
window配置项
window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式
taBar配置项
当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现
taBar中list选项
networkTimeout配置项
小程序中各种网络请求 API的超时时间值只能通过networkTimeout配置项进行统一设置不能在 API中单独设置
项目逻辑文件配置项
项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取
页面逻辑文件配置项
页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件
页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxm文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</vew>)标志，每个组件可以设置不同的属性(如id、class 等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力
数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data 进行动态绑定，在页面中显示 data中的数据。小程序的数据绑定使用Mustache语法(H)将变量或运算规则包起来。
第三章
盒子模型
在css中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）、和外边距（margin）4个部分组成。 
此外，对padding、border、和margin可以进一步细化为上、下、左、右四个部分，在css中可以分别进行设置。
块级元素与行内元素
元素按显示方式分为块级元素、行内元素和行内块元素，它们的显示方式由display 属性控制
3.2.1块级元素
块级元素默认占一行高度，一行内通常只有一个块级元素(浮动后除外)，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下:
（1）一个块级元素占一行。
（2）块级元素的默认高度由内容决定，除非自定义高度。
（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度。
（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置。
（5）块级元素可以容纳块级元素和行内元素。
行内元素
行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的 display 属性设置为inline 后，该元素即被设置为行内元素。
行内块元素
当元家的 dfsplay属性被设置为inline-bock 时，元素被设置为行内块元素。行内块元素司以被设置高度、宽度、内边距和外边距。
元素浮动与清除
元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过foat属性来定义浮动。
元素定位
浮动布局虽然灵活、但无法对元素的位置进行精确的控制。在CSS中，通过position属性可以实现对页面元素的精确定位。
static--默认值，该元素按照标准流进行布局;
relative--相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它;
absolute--绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响;
fixed--固定定位，相对于浏览器窗口进行定位。
flex布局
flex布局主要由容器和项目组成，采用flex布局的元素成为flex容器（flex container），flex布局的所有直接子元素自动成为容器的成员，称为flex项目（flex item）。
flex布局模型
flex容器支持的属性
flex-wrap示例
align-content示例
容器内项目属性
jiustify-content示例
.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;
}
.itm3{
display: flex;
height: 50px;
align-items: flex-end;
}
.item4{
height: 120px;
}flex-grow定义项目的放大比例，默认值为0，即不放大。
<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>
flex-shrink用来定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小
<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-shrink:2">2</view>
<view class="item"style="flex-shrink:1">3</view>
<view class="item"style="flex-shrink:4">4</view>
</view>
第四章
组件的定义及属性
组件是页面视图层（wxml）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布开放能力等8类基础组件。
容器视图组件
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll-view和swiper 组件。
view组件的特有属性
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: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;">1</view>
<view style="display: flex;flex-direction: column;flex-grow: 1;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>
scroll-view组件属性
通过scroll-view组件可以实现下拉刷新和上拉加载更多：
<view class="container" style="padding: 0rpx;">
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true"
style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad"
bindscrolltoupper="topLoad" bindscroll="scroll">
<view class="item" wx:for="{{list}}">
<image class="img"src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_de-scription}}</text>
</view>
</view>
</scroll-view>
<view class="boby-view">
<loading hidden="{{hidden}}"bindchange="loadingChange">
加载中...
</loading>
</view>
</view>
var url ="http://.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var short = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
var loadMore = function(that){
that.setDate({
hidden:false
});
wx.request({
url:url,
data:{
page:page,
page_size:page_size,
sort:sort,
is_easy:is_easy,
lange_id:lange_id,
pos_id:pos_id,
unlearn:unlearn
},
success:function(res){
//console.info(that.data.list);
var list = that.data.list;
for(var i= 0; i<res.data.list.length; i++){
list.push(res.data.list[i]);
}
that.setData({
list:list
});
page ++;
that.setData({
hidden:true
});
}
});
}
Page({
data:{
hidden:true,
list:[],
scrollTop:0,
scrollHeight:0
},
onLoad:function(){
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});
loadMore(that);
},
bindDownLoad:function(){
var that = this;
loadMore(that);
console.log("lower");
},
srcoll:function(event){
this.setData({
scrollTop:event.detail.scrollTop
});
},
topLoad:function(event){
page = 0;
this.setData({
list:[],
scrollTop:0
});
loadMore(this);
consolelog("lower");
}
})
.userinfo{
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar{
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname{
color: #aaa;
}
.usermotto{
margin-top: 200px;
}
scroll-view{
width: 100%;
}
.item{
width: 90%;
height: 300rpx;
margin: 20rpx auto;
background: brown;
overflow: hidden;
}
.item .img{
width: 430rpx;
margin-right: 20rpx;
float: left;
}
.title{
font-size: 30rpx;
display: block;
margin: 30rpx auto;
}
.description{
font-size: 26rpx;
line-height: 15rpx;
}wiper组件属性
<swiper indicator-dots='true' autoplay='true' interval='5000' duration ='1000'>
<swiper-item>
<image src="/pages/images/1.jpg" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="/pages/images/2.jpg" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="/pages/images/3.jpg" style="width: 100%;"></image>
</swiper-item>
</swiper>
icon组件属性
icon组件即图标组件，通常用于表示一种状态
<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>
Page({
data:{
iconType:["success","success_no_circle","info","warn","warn","waiting","cancel",
"download","search","clear"],
iconSize:[10,20,30,40],
iconColor:['#f00','#0f0','#00f']
}
})
progress组件属性
progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等
<view>显示百分比</view>
<progress percent='80' show-info='80'></progress>
<view>改变宽度</view>
<progress percent='50' stroke-width='2'></progress>
<view>自动显示进度条</view>
<progress percent='80' active></progress>
表单组件
表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与期户之间的沟通，表单组件不仅可以放置在<form/>标签中使用，还可以作为单独组件和其他组件混合使用。
button
button组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。
<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>
<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>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})
}
radio-group及radio组件属性
checkbox
<view>选择你想要去的城市：</view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" checked="{{item.checkd}}">
{{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})
}
})
switc
<view>
<switch bindchange="sw1">{{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.setData({var1:e.detail.value?"开":"关"})
},
sw2:function(e){
this.setData({var2:e.detail.value?"开":"关"})
},
sw3:function(e){
this.setData({var3:e.detail.value?"开":"关"})
},
})
slider 组件属性
<view>默认 min=0 max=100 step=1</view>
<slider></slider>
<view>显示当前值</view>
<slider show-value=""></slider>
<view>设置 min="0" max="200" step="10" show-value</view>
<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})
}
})
picker
普通选择器
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
})
}<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="{{objArray}}">
当前选择：{{objArray[index2].name}}
</picker>
多列选择器
<view>多列选择器</view>
<picker
rmode="multiSelector"
bindchange="bindMultipickerChange"
bindcolumnchange="bindMultipickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}">
<view>
当前选择：{{multiArray[0][multiIndex[0]]}},
{{multiArray[1][multiIndex[1]]}},
{{multiArray[2][multiIndex[2]]}}
</view>
</picker>Page({
data:{
multiArray:[["陕西省","广东省"],["西安市","汉中市","延安市"],["雁塔区","长安区"]],
multiIndex:[0,0,0]
},
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);
},
})
时间选择器，日期选择器
<view>
<picker
mode="date"
start="{{startdate}}"
end="{{enddate}}"
value="{{date}}"
bindchange="changedate">
选择的日期：{{date}}
</picker>
</view>
<view>
<picker
mode="time"
start="{{starttime}}"
end="{{endtime}}"
bindchange="changetime">
选择的时间{{time}}
</picker>
</view>Page({
data:{
startdate:2000,
enddate:2050,
data:'2018',
starttime:'00:00',
endtime:'12:59',
time:'8:00'
},
changedate:function(e){
this.setData({data:e.detail.value});
console.log(e.detail.value)
},
changetime:function(e){
this.setData({time:e.detail.value})
console.log(e.detail.value)
}
})
省市选择器
<picker>
mode="region"
value="{{region}}"
custom-item="{{custom-item}}"
bindchange="changeregion">
选择省市区{{region[0]}},{{region[1]}},{{region[2]}}
</picker>Page({
data:{
region:['陕西省','西安市','长安区'],
customitme:'全部'
},
changeregion:function(e){
console.log(e.detail.value)
this.setData({
region:e.detail.value
})
},
})
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]]
})
}
})
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
}
}
})
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)
}
})
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})
}
})
form
<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事件')
}
})
多媒体组件
多媒体组件包括image (图像)、audio (音频)、video(视频)、camera (相机) 组件,使用这些组件, 可以让页面更具有吸引力。
image
<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']
}
})
裁剪
<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']
},
})
audio
<audio src="{{src}}"action="{{action}}"poster="{{poster}}"name="{{name}}"author="{{author}}"loop controls></audio>
<button type="primary" bind:tap='play'>播放</button>
<button type="primary" bind:tap="pause">暂停</button>
<button type="primary" bind:tap="playRate">设置速率</button>
<button type="primary" bind:tap="currentTime">设置当前时间（秒）</button>Page({
data:{
poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSK.jpg? max_age=2592000',
name:'只因你太美',
author:'蔡徐坤',
src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3? guid= ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey =6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8 DFEAF74 C0A5CCFADD6471160CAF3E6A&from tag=46'
},
play:function(){
this.setData({
action:{
method:'play'
}
})
},
pause:function(){
this.setData({
action:{
method:'pause'
}
})
},
playRate:function(){
this.setData({
action:{
method:'setPlaybackRate',
data:10
}
})
console.log('当前速率:'+this.data.action.data)
},
currentTime:function(e){
this.setData({
action:{
method:'setCurrentTime',
data:120
}
})
}
})
video
<video src="{{src}}"controls></video>
<view class="btn-area">
<button bind:tap="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
})
}
})
}
})
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)
}
})
map
<map id="map"
longitude="108.9200"
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindcontroltap="controlstap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
show-location style="width: 100%;height: 300px;"></map>Page({
data:{
markers:[{
iconPath:"/pages/we.jpg",
id:0,
longitude:"108.9290",
latitude:"34.1480",
width:50,
height:50
}],
polyline:[{
points:[
{
longitude:"108.9200",
latitude:"34.1400",
},
{
longitude:"108.9200",
latitude:"34.1500"
},
{
longitude:"108.9200",
latitude:"34.1700"
}
],
color:"#00ff00",
width:2,
dottedLine:true
}],
controls:[{
id:1,
iconPath:'/pages/xi.jpg',
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)
}
})
canvas
<canvas canvas-id="myCanvas"style="border:1px solid red"></canvas>Page({
onLoad:function(options){
var ctx=wx.createCanvasContext('myCanvas')
ctx.setFillStyle('green')
ctx.fillRect(10,10,200,100)
ctx.draw()
}
})
第五章
即速应用
即速应用的优势
1.开发流程简单，零门槛制作
使用即速应用来开发微信小程序的过程非常简单，无须储备相关代码知识，没有开发经验的人也可以轻松上手。
2.行业模板多样，种类齐全
即速应用为广大开发者提供了非常齐全的行业解决方案。目前，即速应用已经上线60多个小程序行业模板，涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业
3.丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用，可以根据实际情况解决商家的不同需求。例如，到店体系可以实现电子点餐、排队预约和线上快速结算;社区体系可以实现评论留言和话题管理;多商家系统可以实现分店统一管理、多门店统一运营;营销工具可以实现会员卡、优惠券的设置等营销方式……
即速应用界面介绍
即速应用的主界面主要分为4个区域，分别为菜单栏、工具栏、编辑区和属性面板
1.菜单栏
菜单栏中的“风格”选项用于设置小程序页面的风格颜色，“管理”选项用于进入后台管理页面，“帮助”选项用于提示帮助功能，“客服”选项用于进入客服界面，“历史’选项用来恢复前项操作，“预览”选项用在PC端预览制作效果，“保存”选项用于保存已制作的内容，“生成”选项用于实现小程序打包上线设置
2.工具栏
工具栏包括“页面管理”“组件库”2个选项卡，“页面管理”实现添加页面和添加分组以及对某一页面进行改名、收藏、复制、删除操作。“组件库”有9个基础组件、7个布局组件、18个高级组件和2个其他组件
3.编辑区
编辑区是用来制作小程序页面的主要区域，通过拖拽组件实现页面制作，右边的“前进”“后退”选项可以进行恢复操作，“模板”选项可以用来选择模板,“元素”选项可以用来显示页面中的组件及其层次关系，“数据”选项可以用来进行页面数据管理，“模块”选项可以用来选择模块
4.属性面板
属性面板用来设置选定组件的属性及样式，包括“组件”和“组件样式”两个选项卡“组件”选项卡用来设置组件内容及点击事件:“组件样式”选项卡用来设置组件的样式不同组件有不同的样式需要设置
布局组件
布局组件用于设计页面布局，主要包括双栏、面板自由面板、顶部导航、底部导航、分割线和动态分类
双栏组件
双栏组件用来布局整体，它可以把一个区块分为两部分，操作时显示一个分隔的标志
分割线组件
分割线组件被放置于任意组件之间，用于实现分割分割线组件的属性面板
弹窗组件
面板
面板组件相当于一个大画板，用户可以将很多基本(甚至高级)的组件(如文本组件图片组件、按钮组件，标题组件、分类组件、音组件、双栏组件、计数组件等)放进面板组件里一起管理
自由面板
滑动面板
动态分类
动态分类组件仅适用于电商、到店类小程序
分类导航
侧边栏
悬浮窗
分类横滑
基本组件
基本组件是小程序页面常用的组件
文本
文本组件用于展示文字、设置点击事件，是小程序页面中最常用的组件
图片
图片组件用于在页面中展示图片
按钮
按钮组件用于在页面中设置按钮
标题
标题组件用于在页面中设置标题
商品列表
视频
轮播
公告
添加组合
即速应用后台管理
即速应用后台提供了非常强大的后台管理，开发者在后台进行修改操作就可以让数据即时更新，开发者还可以通过后台来查看小程序数据管理、用户管理、商品管理、营销工具多商家管理等功能
数据统计
用户管理
应用数据总览
商品管理
营销推广
店铺管理
第六章
网络API
微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生AP接口或第三方APL提供了各类接口实现前后端交互
网络API可以帮助开发者实现网络URL访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了10个网络API接口
发起网络请求
wx.request(0bject)实现向服务器发送请求、获取数据等各种网络交互操作，其相关参数如表所示。一个微信小程序同时只能有5个网络请求连接，并且是HTTPS请求
wx.request(Object)参数 
<button type="primary" bind:tap="getbaidutap">获取HTML数据</button>
<textarea value="{{html}}" auto-height="" maxlength="0"></textarea>button{
margin-top: 100px;
}Page({
data:{
html:''
},
getbaidutap:function(){
var that=this;
wx.request({
url: 'https://www.baidu.com',
data:{},
header:{"Content-Type":"application/json"},
success:function(res){
console.log(res);
that.setData({
html:res.data
})
}
})
}
})
上传文件
wx.uploadFile(Object)接口用于将本地资源上传到开发者服务器，并在客户端发起一个HTTPS POST请求
wx.uploadfile(Object)相关参数
<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{img}}" mode="widthFix"></image>Page({
data:{
img:null,
},
uploadumage: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();
}
})
}
}
})button{
margin-top: 100px;
}
下载文件
wx.downloadFile(Objeet)接口用于实现从开发者服务器下载文件资源到本地，在客户端
直接发起一个HITPGET请求，返回文件的本地临时路径
wx.downloadfile(Object)相关参数
<button type="primary" bind:tap="downloadimage">下载图像</button>
<image src="{{img}}" mode="widthFix" style="width: 90%;height: 500px;"></image>Page({
datd:{
img:null
},
downloadimage:function(){
var that=this;
wx.downloadFile({
url: 'http://localhost/1.jpg',
success:function(res){
console.log(res)
that.setData({
img:res.tempFilePath
})
}
})
}
})button{
margin-top: 100px;
}
多媒体API
多媒体API主要包括图片API、录音API、音频播放控制AP1、音乐播放控制API等，其目的是丰富小程序的页面功能
图片API
选择图片或拍照
wx.chooselmage(Object)接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用，若要持久保存，则需要调用wsaveFile保存图片到本地
Page({
wx.chooseImage({
//默认值为9
count:2,
//可以指定是原图还是压缩图，默认二者都有
sizeType:['original','compressed'],
//可以指定来源是相册还是相机，默认二者都有
sourceType:['album','camera'],
success:function(res){
//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的sec属性来显示图片
var tempFilePaths=res.tempFilePaths
var tempFiles=res.tempFiles
console.log(tempFilePaths)
console.log(tempFiles)
}
})
})预览图片
wx.previewlmage(0bject)接口主要用于预览图片
page({
wx.previewImage({
current:"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
urls: ["http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
"http://bomob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
],
})
})获取图片信息
wx.getlmagelnfo(Object)接口用于获取图片信息
wx.chooseImage({
success:function(res){
wx.getImageInfo({
src: res.tempFilePaths[0],
success:function(e){
console.log(e.width)
console.log(e.height)
}
})
},
})保存图片到系统相册
wx.savelmageToPhotosAlbum(Objee)接日用于保存图片到系统相册
wx.chooseImage({
success:function(res){
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePaths[0],
success:function(e){
console.log(e)
}
})
},
})录音API
录音API提供了语音录制的功能，主要包括以下两个API接口:
（1）wx.stariRecord(Object)接口 用于实现开始录音。
（2）wx.stopRecord(Objeet)接日 用于实现主动调用停止录音
开始录音
wx. startRecord(0bject)接口用于实现开始录音
停止录音
ws.slopReeord(Objeet)接口用于实现主动调用停止录音
wx.startRecord({
success:function(res){
var tempFilePath=res.tempFilePath
},
fail:function(res){
//录音失败
}
}),
setTimeout(function() {
//结束录音
wx.stopRecord()
},10000)音频播放控制API
音频播放控制API主要用于对语音媒体文件的控制，包括播放、暂停、停止及audio组件的控制
播放语音
wx.playVoice(Object)接口用于开始播放语音
wx.startRecord({
success:function(res) {
var tempFilePath=res.tempFilePath
wx.playVoice({
filePath: tempFilePath,
complete:function() {
}
})
}
})暂停播放
wx.pauseVoice(0bject)用于暂停正在播放的语音
//结束播放
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主要用于实现对背景音乐的控制
播放音乐
wx.playBackgroundudio(Object)用于播放音乐
获取音乐播放状态
wx. getBackgroundAudioPlayerState(Object)接口用于获取音乐播放状态
接口调用成功后返回的参数
控制音乐播放进度
wx,seekBackgroundAudio(0bject)接口用于控制音乐播放进度
暂停播放音乐
wx.pauseBackgroundAudio()接口用于暂停播放音乐
停止播放音乐
wx.stopBackgroundAudio()接口用于停止播放音乐
监听音乐播放
wx. onBackgroundAudioPlay(CallBack)接口用于实现监听音乐播放
监听音乐暂停
wx.onBackgroundAudioPause(CallBack)接口用于实现监听音乐暂停
监听音乐停止
wx.onBackgroundAudioStop(CallBack)接口用于实现监听音乐停止
案例展示
<view class="container">
<image class="bgaudio"src = "{{changedImg? music.coverImg:'../images/1.jpg'}}"/>
<view class ="control-view">
<image src ="../images/1.jpg"bindtap="onPositionTap"data-how= "0 "/>
<image src = "/pages/images/1.jpg" bindtap = "onAudioTap"/>
<image src ="../images/1.jpg"bindtap = "onStopTap"/>
<image src ="../images/1.jpg"bindtap ="onPositionTap"data-how = "1"/>
</view >
</view >Page({
data:{
isPlaying:false,
coverImgchangedImg:false,
music:{
"url":"../images/aa.mp4",
"title":"蔡徐坤-只因你太美",
"coverImg":
"../images/aa.mp4"
},
},
onLoad:function(){
this.onAudioState();
},
onAudioTap:function(event){
if(this.data.isPlaying){
wx.pauseBackgroundAudio();
}else{
let music = this.data.music;
wx.playBackgroundAudio({
dataUrl: music.url,
title: music.title,
coverImgUrl:music.coverImg
})
}
},
onStopTap:function(){
let that = this;
wx.stopBackgroundAudio({
success:function(){
that.setData({ isPlaying:false,changedImg:false});
}
})
},
onPositionTap:function(event){
let how = event.target.dataset.how;
wx.getBackgroundAudioPlayerState({
success:function(res){
let status = res.status;
if(status === 1){
let duration = res.duration;
let currentPosition = res.currentPosition;
if(how ==="0"){
let position = currentPosition - 10;
if(position <0){
position =1;
}
wx.seekBackgroundAudio({
position: position
});
wx. showToast({title:"快退10s",duration:500});
}
if(how === "1"){
let position =currentPosition +10;
if(position >duration){
position =duration-1;
}
wx.seekBackgroundAudio({
position: position});
wx.showToast({ title:"快进10s",duration:500});
}
}else {
wx.showToast({title:"音乐未播放",duration:800});
}
}
})
},
onAudioState:function(){
let that =this;
wx.onBackgroundAudioPlay(function(){
that.setData({ isPlaying:true,changedImg:true});
console.log("on play");
});
wx.onBackgroundAudioPause(function(){
that.setData({isPlaying:false});
console.log("on pause");
});
wx.onBackgroundAudioStop(function(){
that.setData({isPlaying:false,changedImg:false});
console.log("on stop");
});
}
}).bgaudio{
height:350rpx; width:350rpx;
margin-bottom:100rpx;
}
.control-view image{
height:64rpx;
width:64rpx;
margin:30rpx;
}{
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "cxk",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark"
}
文件API
从网络上下载或录音的文件都是临时保存的，若要持久保存，需要用到文件API
保存文件
wx. saveFile
saveImg:function(){
wx.chooseImage({
count:1，
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath:tempFilePaths;
success:function(res){
var saveFilePath = res.savedFilePath;
console.log(saveFilePath)
}
}）
}
}）
}获取本地文件列表
wx. getSavedFileList（Object）接口用于获取本地已保存的文件列表
wx.getSavedFileList({
success:function(res){
that.setData({
fileList:res.fileList
}）
}
}）获取本地文件的文件信息
wx. getSaveFileInfo（Object）接口用于获取本地文件的文件信息
wx.chooseImage({
count:1，
sizeType:['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:SavedFilePath,
success:function(res){
console.log(res.size)
}
}）
}
}）
}
})删除本地文件
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)
}
})
}
}
})打开文档
wx.openDocument(Object)接口用于新页面打开文档
wx.downloadFile({
url:"http://localhost/fm2.pdf"，
success:function(res){
var tempFilePath=res.tempFilePath;
wx.openDocument({
filePath:tempFilePath,
success:function(res){
console.log("打开成功")
}
})
}
})本地数据及缓存API
小程序提供了以键值对的形式进行本地数据缓存功能，并且是永久存储的，但最大不超过10MB，其目的是提高加载速度
保存数据
wx. setStorage( Object )接口将数据存储到本地缓存接口指定的key中
wx.setStorage({
Key:'name',
data:'sdy',
success:function(res){
console.log(res)
}
})wx. setStorageSync（key, data）是同步接口
wx.getStorageSync('age','25')获取数据
wx. getStorage( Object )接口是从本地缓存中异步获取指定key 对应的内容
wx.getStorage({
key:'name',
success:function(res){
console.log(res.data)
},
})wx. getStorageSync( key)从本地缓存中同步获取指定key 对应的内容
try{
var value=wx.getStorageSync('age')
if(value){
console.log("获取成功"+value)
}
}catch(e){
console.log("获取失败")
}删除数据
wx. removeStorage( Object )接口用于从本地缓存中异步移除指定key
wx.removeStorage({
key: 'name',
success:function(res){
console.log("删除成功")
},
fail:function(){
console.log("删除失败")
}
})wx.removeSlorageSyne( key )接口用于从本地缓存中同步删除指定key对应的内容
try{
wx.removeStorageSync('name')
}catch(e){
//Do something when catch error
},清空数据
wx.clearStorage()接口用于异步清理本地数据缓存
wx.getStorage({
key:'name',
success:function(res){
wx.clearStorage()
}
})wx.clearStroageSyne()接口用于同步清理本地数据缓存
try{
wx.clearStorageSync()
}catch(e){}位置信息API
小程序可以通过位置信息API来获取或显示本地位置信息
获取位置信息
wx. getLocation（Object）接口用于获取当前用户的地理位置、速度，需要用户开启定位功能
wx. getLocation（Object）相关参数
wx. getLocation（Object）成功返回相关信息
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);},
})选择位置信息
wx. chooseLocation（Object）接口用于在打开的地图中选择位置，用户选择位置后可返回当前位置的名称、地址、经纬度信息
wx. chooseLocation（Object）调用成功后，返回的参数204
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号'})
}
})设备相关API
设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等
获取系统信息
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.res.syatem)
console.log("客户端平台："+res.platform)
},
})网络状态
获取网络状态
wx.getNetworkType(0bject)用于获取网络类型
wx.getNetworkType({
success:function(res){
console.log(res.networkType)
},
})监听网络状态变化
wx.onNetworkStatusChange(CallBack)接口用于监听网络状态变化
wx.onNetworkStatusChange(function(res){
console.log("网络是否连接："+res.isConnected)
console.log("变化后的网络类型："+res.networkType)
})拨打电话
wx.makePhoneCall(0bject)接口用于实现调用手机拨打电话
wx.makePhoneCall({
phoneNumber: '18092585093'
}),扫描二维码
wx.scanCode(Object)接口用于调起客户端扫码界面
扫码成功后，返回的数据
wx.scanCode({
success:function(res){
console.log(rers.result)
console.log(res.scanType)
console.log(res.charSet)
console.log(res.path)
}
}),
wx.scanCode({
onlyFromCamera:true,
success:function(res){
console.log(res)
}
})
扫一扫
7319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
