一~三章总结
工具界面功能介绍
1.工具栏
在工具栏中司以实现多种功他，例如账号的切推，拟区，瑞独区，确试区的是示/
藏，小程序的编译、预览，切换后台，请理缓存等。
2.模拟区
在模拟区中选择模拟手机的类型，显示比例、网络类型后，模拟器中会录示小程字的运
行效果。
3目录文件区
目录文件区用来是示当前项日的目录结构，单击左上角的“”按键可以进行目录和文件
的创建，右键单击目录文件区中的文件或口录可以进行“硬盘打开”“重命名”“酬除”等霜
关操作。
4.编辑区
编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml、.wxss、j及.jon文件的
操作，使用组合键能提高代码的编辑效率。
5.调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提
供了9个调试功能模块，分别是Console、Soures、Network、Secunty、Storge、AppData
Wxml、Sensor和Trace。最右边的扩展菜单项“:"是定制与控制开发工具按钮。
小程序的开发框架
小程序MINA框架示意图
1.视图层
MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图 层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss文件用于描述 页面的样式。
2.逻辑层
逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合，微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
3.数据层
数据层在逻辑上包括页面临时数据或缓存，文件储存和网络储存与调用。
页面结构文件
页面结构文件（wxml）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建页面的结构，即.wxml文件。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。
1、数据绑定
（1）：简单绑定：是指用大括号（{{}}）将变量包起来，作为字符串输出使用
运行代码：
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>2、条件数据绑定
（1）：wx:if 是指使用wx:if这个属性来判断是否数据绑定当前组件
运行代码：
<view wx:if="age>40">1</view>
<view wx:elif="age==40">2</view>
<view wx:else>3</view>（2）：block wx:if 是需要一个组件去控制多个组件，可以通过block包起来
运行代码：
<block wx:if="{{one}}">
<view wx:if="age>40">1</view>
</block>3、列表数据绑定
（1）：wx：for 用来绑定一个数组
运行代码：
<view wx:for="{{students}}">（2）：block wx:for 是需要一个组件去控制多个数组，可以通过block包起来
代码：
<block wx:for="{{students}}">
<view>
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</block>4、模板
（1）：定义模板
代码：
<template name="stu">（2）：调用模板
代码：
<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>5、引用页面文件
（1）：import方式
在a.wxml中定义了一个item模板
代码：
<template name="item">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>（2）：include方式
代码：
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>6、页面事件 ：
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
（1）定义事件函数： 在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
（2）调用事件： 调用事件也称为注册事件。
在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
（1）冒泡事件： 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
（2）非冒泡事件： 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。
盒子模型
1.概念：
微信小程序的视图层由WXML 和WXSS组成。 其中, WXSS (WeiXINStyleSheets) 是基于CSS 拓展的样式语言, 用于描述WXML 的组成样式, 决定WXML的组件如何显示。WXSS 具有CSS的大部分特性, 因此, 本章将重点讲解CSS 中的布局相关内容。在页面设计中, 只有掌握了盒子模型以及盒子模型的各个属性和应用方法, 才能轻松控制页面中的各个元素。 盒子模型就是我们在页面设计中经常用到的一种思维模型。 在CSS 中, 一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin) ４ 个部分组成。
2.盒子模型结构
图中各元素的含义如下:
■ width 和height 内容的宽度和高度。
■ padding-top、padding-right、padding-bottom 和padding-left 上内边距、右内边距、底内边距和左内边距。
■ padding-top、padding-right、padding-bottom 和padding-left 上边框、右边框、底边框和左边框。
简单来说，一个盒子实际所占有的高度应该由"内容"+"内边距"＋"边框"+"外边距"。
块级元素与行内元素
1.块级元素概念及特点
概念：块级元素默认占一行高度, 一行内通常只有一个块级元素(浮动后除外), 添加新的块级元素时, 会自动换行, 块级元素一般作为盒子出现。
特点：
（１) 一个块级元素占一行。
(２) 块级元素的默认高度由内容决定, 除非自定义高度。
(３) 块级元素的默认宽度是父级元素的内容区宽度, 除非自定义宽度。
(４) 块级元素的宽度、高度、外边距及内边距都可以自定义设置。
(５) 块级元素可以容纳块级元素和行内元素。
行内元素概念及特点
概念：
行内元素, 不必从新一行开始, 通常会与前后的其他行内元素显示在同一行中, 它们不占有独立的区域, 仅靠自身内容支撑结构, 一般不可以设置大小, 常用于控制页面中文本的样式。 将一个元素的display 属性设置为inline 后, 该元素即被设置为行内元素。
行内元素的特点：
(１) 行内元素不能被设置高度和宽度, 其高度和宽度由内容决定。
(２) 行内元素内不能放置块级元素, 只级容纳文本或其他行内元素。
(３) 同一块内, 行内元素和其他行内元素显示在同一行。
浮动与定位
1.元素浮动与清除
概念：元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制, 移到其父元素中指定位置的过程。 在CSS中, 通过float 属性来定义浮动, 其基本格式如下:
{float:none|left|right;}
none——默认值，表示元素不浮动；
left——元素向左浮动
right——元素向右浮动
元素定位
概念：浮动布局虽然灵活, 但无法对元素的位置进行精确的控制。 在CSS 中, 通过position属性可以实现对页面元素的精确定位。
基本格式如下:
{position:static|relative|absolute|fixed}
static———默认值, 该元素按照标准流进行布局;
relative———相对定位, 相对于它在原文档流的位置进行定位, 它后面的盒子仍以标准流方式对待它;
absoulute———绝对定位, 相对于其上一个已经定位的父元素进行定位, 绝对定位的盒子从标准流中脱离, 它对其后的兄弟盒子的定位没有影响;
fixed———固定定位, 相对于浏览器窗口进行定位。
五.flex布局
1.概念：
flex 布局是万维网联盟(WoeldWideWebConsortium,W3C) 在２００９ 年提出的一种新布局方案, 该布局可以简单快速地完成各种可以伸缩的设计, 以便很好地支持响应式布局。flex 是flexiblebox 的缩写, 意为弹性盒子模型, 可以简便、完整、响应式地实现各种页面布局。
2.布局：
flex 布局主要由容器和项目组成, 采用flex 布局的元素称为flex容器(flexcontainer),flex 布局的所有直接子元素自动成为容器的成员, 称为flex项目(flexitem)。
容器默认存在两根轴: 水平的主轴和垂直的交叉轴。 主轴的开始位置(与边框的交叉点) 叫做mainstart, 结束位置叫做mained; 交叉轴的开始位置叫做crosstart, 结束位置叫做crossend。 项目默认沿主轴排列。 单个项目占据的主轴空间叫做mainsize, 占据的交叉轴空间叫做crossize。 flex 布局模型如图所示。
设置display 属性可以将一个元素指定为flex布局, 设置flex-direction属性可以指定主轴方向。 主轴既可以是水平方向, 也可以是垂直方向。
3. 容器属性
flex容器支持的属性又七种，如图所示：
1）display
display用来指定元素是否为flex 布局, 语法格式为:
.box{display:flex|inline-flex;}
flex———块级flex布局, 该元素变为弹性盒子;
inline-flex———行内flex 布局, 行内容器符合行内元素的特征, 同时在容器内又符合flex 布局规范。
设置了flex布局之后, 子元素的float、clear 和vertical-align属性将失效。
(2)flex-direction
用于设置主轴的方向, 即项目排列的方向, 语法格式为:
.box{flex-direction:row|row-reverse|column|column-reverse;}
row———主轴为水平方向, 起点在左端, 当元素设置为 flex布局时, 主轴默认为row;
row-reverse———主轴为水平方向, 起点在右端;
column———主轴为垂直方向, 起点在顶端;
column-reverse———主轴为垂直方向, 起点在底端
如图所示：
(3)flex-wrap
用来指定项目在一根轴线的排列位置不够时，项目是否换行，其语法格式为：
.box{flex-flow:<flex-direction>||<flex-wrap>;}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, 项目将在交叉轴方向拉伸填充容器, 此为默认值。
示例代码如下：
在index.wxml写入代码：
<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>
在index.wxss写入代码：
.
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;
}在index.json写入代码：
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "win",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark"
}运行结果：
7)align-content
align-content 用来定义项目有多根轴线(出现换行后) 在交叉轴上的对齐方式, 如果只有一根轴线, 该属性不起作用。 语法格式如下:
.box{align-content;flex-start|flex-end|center|space-between|space-around|stretch}
apace-between——与交叉轴两端对齐, 轴线之间的间隔平均分布;
space-around——每根轴线两侧的间隔都相等, 轴线之间的间隔比轴线与边框间隔大一倍。 其余各属性值的含义与align-items属性的含义相同。
如图所示为align-content 不同值的显示效果:
四~六章总结
二.容器视图组件
容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、smoll-view和 swiper组件。
1.view
view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面（User Imterace，U）组件，通过设置view的CSS属性可以实现各种复杂的布局。view组件的特有属性如表所示
通过<view>组件实现页面布局示例代码如下：
在index.js中输入以下代码：
Page({
})
在 index.json中输入以下代码：
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "win",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark"
}
在index.wxml中输入以下代码：
<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>运行结果如下：
2.scroll-view
通过设置scroll-view组件的相关属性可以实现滚动视图的功能，其属性如下表所示：
【注意】
（1）在使用竖向滚动时，如果需要给 scroll-view组件设置一个固定高度，可以通过WXSS设置height来完成。
（2）请勿在 scroll-view组件中使用 textarea、map、canvaB、video组件。
（3）scroll-into-view属性的优先级高于scroll-top。
（4）由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。
（5）如果要实现页面下拉刷新，请使用页面的滚动，而不是设置scroll-view组件。这样做，能通过单击顶部状态栏回到页面顶部。
通过scroll-view组件可以实现下拉刷新和上拉加载更多，代码如下：
在scroll-view.wxml中输入下列代码：
<view class="container"style="padding:0rpx">
<!--垂直泳动,这里必须设置高度-->
<scroll-view scroll-top="{{scrolTop}}"scroll-y="true"
style=" height:{{scrolleight}}px;" class="list" bindscrolltolower="bindDownLoad"
bindscrolltoupper="topLoad"bindscroll="scroll">
<view class="item"wx:for="{{list}}">
<image class="img"src="{{litem.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}"bindchange="loadingChange">
加载中....
</loading>
</view>
</view>在scroll-view.js中输入下列代码：
var url="http:/Aww.imooc.com/hourse/ajaxlist";
var page=0;
var page_size =5;
var sort="last";
var is_easy =0;
var lange_id = 0;
var pos_id=0;
var unlearn=0;
var loadMore = function(that){
that.setData({
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(vari=0;1<res.data.list.length;i++){
list.push(res.data.list[i]);}
that.setData({list:list});
page++;
that.setData({
hidden:true
});
}
});
}
Page({
data: {
hidden: true,
liat:[],
acrol1Top: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");
},
scroll:function(event){
this.setData({
scrollTop: event.detail.scrollTop
});
},
topLoad:function(event){
page=0;
this.setData({
list:[],
scrollTop:0
});
loadMore(this);
console.log("lower");
}
})在scroll-view.wxss中输入下列代码：
.userinfo{
display:flex;
flex-direction:column;
align-items:center;
}
.userinfo-avatar{
width:128rpx;
height:l28rpx;
margin:20rpx;
border-radius:50%;
}
.userinfo-nickname{
color:#aaa;
}
.usermotto{
margin-top:200px;
}
scroll-view{
width:100%;
}
.item{
width:90%;
height:300rpx;
margin:20rpxauto;
background:brown;
overflow:hidden;
}
.item.img{
width:430rpx;
margin-right:20rpx;
float:left;
}
.title{
font-size:30rpx;
display:block;
margin:30rpxauto;
}
.description{
font-size:26rpx;
line-height:l5rpx;
}3.swiper
swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/>和<swiper-item/>两个标签组成，它们不能单独使用。<swiper/>中只能放置一个或多个<swiper-ilem/>，若放置其他组件则会被删除；<swiper-item/>内部可以放置任何组件，默认宽高自动设置为100%。swiper组件的属性如表
<swiper-item/>组件为滑块项组件，仅可以放置在<swiper/>组件中，宽高尺寸默认100%显示。
设置swpier组件，可以实现轮播图效果，代码如下：
在index.wxml中输入下列代码：
<swiper indicator-dots='ture'autoplay='ture'interval='5000'duration='1000'>
<swiper-item>
<image src="/pages/index/a.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
<image src="/pages/index/b.jpg" style="width: 100%"></image>
</swiper-item>
<swiper-item>
<image src="/pages/index/c.jpg" style="width: 100%"></image>
</swiper-item>
</swiper>
运行效果：
三.基础内容组件
基础内容组件包括icon，text和progress，主要用于在视图页面中展示图标，文本和进度条等信息
1.icon
icon组件即图标组件，通常用于表示一种状态，如success，info，warn，waiting，cancel等。其属性如下表：
示例代码如下：
在index.wxml中输入下列代码：
<view>icon类型：
<block wx:for="{{iconType}}">
<icon type="{{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_on_circle","info","warn","waiting","cancel","download","search","clear"],
iconSize:[10,20,30,40],
iconColor:['#f00','#0f0','#00f']
}
})
运行效果：
2.text
text组件用于展示内容，类似于HTML中的<span>,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="{{39+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]
}
})运行效果：
一.网络API
1.简介：
微信小程序处理的数据通常从后台服务器获取，再将处理过的结果保存到后台服务器，这就要求微信小程序要有与后台进行交互的能力。微信原生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。
1.图片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)
}
})
（2）预览图片
wx. previewImage（Object）接口主要用于预览图片，其相关参数如表所示。
示例代码如下：
wx.previewImage({
//定义显示第二张
current:"http:bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
urls:["http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
"http:bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
"http:bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.png"
]
})
(3)获取图片信息
wx. getImageInfo（Object）接口用于获取图片信息，其相关参数如表所示。
示例代码如下：
wx.chooseImage({
success:function(res){
wx.getImageInfo({
src:res.tempFilePaths[0]，
success:function(e){
console.log(e.width)
console.log(e.height)
}
})
}，
})
（4）图片保存在系统相册
wx. saveImageToPhotosAlbum（Object）接口用于保存图片到系统相册，需要得到用户授权scope.writePhotosAlbum。其相关参数如表所示。
三.文件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,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilepaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath:tempFilePaths,
success:function(res){
var saveFilePath = res.saveFilePath;
console.log(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,
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
var tempFilePaths = res.tempFilePaths[0]
wx.saveFile({
tempFilePath:tempFilePaths,
success:function(res){
var saveFilePath = res.saveFilePath;
wx.getSavedFileInfo({
fliePath:saveFilePath,
success:function(res){
console.log(res.size)
}
})
}
})
}
})4．删除本地文件
wx. removeSaveFile（Object）接口用于删除本地存储的文件，其相关参数如表所示。
示例代码如下：
wx.getSavedFilelist({
success:function(res){
if(res.fileList.lebgth>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/fmx.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后缀的为异步接口。
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')
2. 获取数据
（1）wx. getStorage（Object）
wx. getStorage（Object）接口是从本地缓存中异步获取指定key对应的内容。其相关参数如表6-20所示。
示例代码如下：
try{
var value = wx.getstorageSync('age')
if(value){
console.log("获取成功"+value)
}
catch(e){
console.log("获取失败")
}
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
}
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){
}
三.设备相关API
设备相关的接口用于获取设备相关信息，主要包括系统信息、网络状态、拨打电话及扫码等。主要包括以下5个接口API：
■ wx.getSystemInfo（Object）接口、wx.getSystemInfoSync（）接口 用于获取系统信息。
■ wx.getNetworkType（Object）接口 用于获取网络类型。
■ wx.onNetworkStatusChange（CallBack）接口 用于监测网络状态改变。
■ wx.makePhoneCall（Object）接口 用于拨打电话。
■ wx.scanCode（Object）接口 用于扫描二维码
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)},})
2. 网络状态
（1）获取网络状态
wx. getNetworkType（Object）用于获取网络类型，其相关参数如表所示。
如果wx. getNetworkType（）接口被成功调用，则返回网络类型包，有wifi、2G、3G、4G、unknown（Android下不常见的网络类型）、none（无网络）。
示例代码如下：
wx.getNetworkType({
success:function(res){
console.log(res.networkType)},})
（2）监听网络状态变化
wx. onNetworkStatusChange（CallBack）接口用于监听网络状态变化，当网络状态变化时，返回当前网络状态类型及是否有网络连接。
示例代码如下：
wx.onNetworkStatusChange(function(res){
console.log("网络是否连接:"+res.isConnected)
console.log("变化后的网络类型"+res.networkType)})
3.拨打电话
wx. makePhoneCall（Object）接口用于实现调用手机拨打电话，其相关参数如表所示。
示例代码如下：
wx.makePhoneCall({
phoneNumber:'18092585093'//需要拨打的电话号码
})
4. 扫描二维码
wx. scanCode（Object）接口用于调起客户端扫码界面，扫码成功后返回相应的内容，其相关参数如表所示。
扫码成功后，返回的数据如表6-32所示。
表6-32 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) =>{
console.log(res)
}
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
