复习1-6章

第一章

1. 无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2. 触手可及
用户通过扫描二维码等形式直接进入小程序，实现见线下场景与线上应用的即时联通。
3. 用完即走
用户在线下场景中，当有相关需求时，可以直接接妾入小程序，使用服务功能后便可以对其不理会，实现用完即走。
4. 无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

第二章

1.主体文件

app.js 小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.is 文件会
和其他页面的逻辑文件打包成一个 JavaScript 文件。该文件在项目中不可缺少

app.json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少

app.wxss 小程序主样式表文件，类似 HTML 的css 文件。在主式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.页面文件

.js文件页面逻辑文件，在该文件中编写 JavaScript代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。s
.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。
.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖 app.wxss 中的样式规则;否则，直接使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。

.json 文件 页面配置文件。该文件在页面中不可缺少。

1.逻辑层

(1)增加 app()和 Page()方法，进行程序和页面的注册
(2) 提供丰富的 API，如扫一扫、支付等微信特有的能力。
(3)每个页面有独立的作用域，并提供模块化能力。

2.数据层

1.页面临时数据或缓存
在 Page()中，使用 setData 函数将数据从逻层发送到this.data 的值
setData()函数的参数接收一个对象，以 (key,vale) 的形对应的值改变成 value
2.文件存储 (本地存储)
使用数据 API 接口，如下
获取本地数据缓存wx. getStorage
设置本地数据缓存wx. setStorage
清理本地数据缓存wx. clearStorage
3.网络存储与调用
上传或下载文件 API 接口，如下:
wx.request发起网络请求
wx.uploadFile 上传文件。
wx.downloadFile下载文件
调用URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx. redirectTo原窗口打开页面

页面结构

数据绑定

1.简单绑定是指使用双大括号()将变量包起来，在页面中直接作为字符串输出简单绑定可以作用于内容、组件属性、控制属性等的输出

2.运算

在内可以做一些简单的运算 (主要有算术运算、逻辑运算、三元运算、字符运算等)，这些运算均应符合 JavaScript运算规则。

条件数据绑定

1.wx:if 条件数据绑定
wx:if条件数据绑定是指使用 wx:if 这个属性来判断是否数据绑定当前组件。

<view wx:if="!lconditonl!“>内容</view>

2.block wx:if 条件数据绑定
当需要通过一个表达式去控制多个组件时，可以通过<block >将多个组件包起来，然后在<block>中添加wx:if属性即可。

<block wx;if="/true!!>
<Niew><view>viewl
<view>view2 </view>
</block>

列表数据绑定

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

<view wx:for=”litems!!”>
lindexl!:flitem
<Wiew>

2. block wx;for
与 block wx;if 类似，在 wxml 中也可以使用<block>包装多个组件进行列表数据绑定例如，上面的代码可以被修改为以下形式，效果不变:

<block wx:for="/student!!"><view >
<text >flindexl! </text >
<text >llitem.namel!</text >
<text >llitem.agel| < /text >
<text >ffitem.hobby|| < /text >
< /view >
</block >

冒泡事件 冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件 非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递在WXML中，冒泡事件有6个

第三章

块级元素

（1）一个块级元素占一行。
（2）块级元素的默认高度由内容决定，除非自定度，除非自定义宽度。

（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置。

（5）块级元素可以容纳块级元素和行内元素。

<view style="border: 1px solid#f00;">块级元素1</view>
<view style="border: 1px solid #0f0;margin: 15px;padding: 20px;">块级元素2</view>
<view style="border: 1px solid #00f;width: 200px;height: 80px;">块级元素3</view>
<view style="border: 1px solid #ccc;">
<view style="height: 60px;">块级元素4</view>
</view>
<view style="border:1px solid #f00;width: 100px;background-color: #ccc;">父级元素高度随内容决定，内容为文本</view>
 

行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的display 属性设置为inline后，该元素即被设置为行内元素。行内元素的特点如下：
（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定

（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素
（3）同一块内，行内元素和其他行内元素显示在同一行。
<text/>组件默认为行内元素，使用<vicw/>及<text/>组件演示盒子模型及行内元素
的示例代码如下：
 

<view style="padding: 20px">
<text style="border: 1px solid #0f0;margin: 10px;padding: 5px;">文本</text>
<view style="border: 1px solid #00f;display: inline;">块级元素设置行内元素</view>
</view>

元素定位

static—-默认值，该元素按照标准流进行布局;
relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流
方式对待它；
absolute—一绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子
从标准流中脱离，它对其后的兄弟盒子的定位没有影响；
fixed—固定定位，相对于浏览器窗口进行定位

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

flex布局

• ｆｌｅｘ 布局是万维网联盟 ( Ｗｏｒｌｄ Ｗｉｄｅ Ｗｅｂ Ｃｏｎｓｏｒｔｉｕｍ , Ｗ３Ｃ ) 在２００９ 年提出的一种新布局方案 , 该布局可以简单快速地完成各种可以伸缩的设计 , 以便很好地支持响应式布局。ｆｌｅｘ 是ｆｌｅｘｉｂｌｅ ｂｏｘ 的缩写 , 意为弹性盒子模型 , 可以简便、完整、响应式地实现各种页面布局。
• ｆｌｅｘ 布局主要由容器和项目组成 , 采用ｆｌｅｘ 布局的元素称为ｆｌｅｘ 容器 ( ｆｌｅｘ ｃｏｎｔａｉｎｅｒ ), ｆｌｅｘ 布局的所有直接子元素自动成为容器的成员 , 称为ｆｌｅｘ 项目 ( ｆｌｅｘ ｉｔｅｍ )
。
• 容器默认存在两根轴 : 水平的主轴 ( ｍａｉｎ ａｘｉｓ ) 和垂直的交叉轴 ( ｃｒｏｓｓ ａｘｉｓ ) 。 主轴的开始位置 ( 与边框的交叉点 ) 叫做ｍａｉｎ ｓｔａｒｔ , 结束位置叫做ｍａｉｎ ｅｎｄ ; 交叉轴的开始位置叫做ｃｒｏｓｓ ｓｔａｒｔ , 结束位置叫做ｃｒｏｓｓ ｅｎｄ。
• 项目默认沿主轴排列。 单个项目占据的主轴空间叫做ｍａｉｎ ｓｉｚｅ , 占据的交叉轴空间叫做ｃｒｏｓｓ ｓｉｚｅ。 ｆｌｅｘ 布局模型如
 

第四章

ｉｄ　组件的唯一表示, 保持整个页面唯一, 不常用。

ｃｌａｓｓ　组件的样式类, 对应ＷＸＳＳ 中定义的样式。

ｓｔｙｌｅ　组件的内联样式, 可以动态设置内联样式。

ｈｉｄｄｅｎ　组件是否显示, 所有组件默认显示。

ｄａｔａ － ∗　自定义属性, 组件触发事件时, 会发送给事件处理函数。

 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;">1</view>
<view style="border: 1px solid #f00;flex-grow: 1;">2</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;">1</view>
    <view style="border: 1px solid #f00;flex-grow: 1;">1</view>
</view>
</view>

 scroll-view

通过设置ｓｃｒｏｌｌ － ｖｉｅｗ 组件的相关属性可以实现滚动视图的功能, 其属性如

(１) 在使用竖向滚动时, 如果需要给ｓｃｒｏｌｌ － ｖｉｅｗ 组件设置一个固定高度, 可以通过ＷＸＳＳ设置ｈｅｉｇｈｔ 来完成。

(２) 请勿在ｓｃｒｏｌｌ － ｖｉｅｗ 组件中使用ｔｅｘｔａｒｅａ、ｍａｐ、ｃａｎｖａｓ、ｖｉｄｅｏ 组件。

(３) ｓｃｒｏｌｌ － ｉｎｔｏ － ｖｉｅｗ 属性的优先级高于ｓｃｒｏｌｌ － ｔｏｐ。

(４) 由于在使用ｓｃｒｏｌｌ － ｖｉｅｗ 组件时会阻止页面回弹, 所以在ｓｃｒｏｌｌ － ｖｉｅｗ 组件滚动时无法触发ｏｎＰｕｌｌＤｏｗｎＲｅｆｒｅｓｈ。

(５) 如果要实现页面下拉刷新, 请使用页面的滚动, 而不是设置ｓｃｒｏｌｌ － ｖｉｅｗ 组件。 这样做, 能通过单击顶部状态栏回到页面顶部。

通过ｓｃｒｏｌｌ － ｖｉｅｗ 组件可以实现下拉刷新和上拉加载更多, 代码如下:

 swiper

ｓｗｉｐｅｒ 组件可以实现轮播图、图片预览、滑动页面等效果。 一个完整的ｓｗｉｐｅｒ 组件由< ｓｗｉｐｅｒ/ > 和< ｓｗｉｐｅｒ － ｉｔｅｍ/ > 两个标签组成, 它们不能单独使用。 < ｓｗｉｐｅｒ/ > 中只能放置一个或多个< ｓｗｉｐｅｒ － ｉｔｅｍ/ > , 若放置其他组件则会被删除; < ｓｗｉｐｅｒ － ｉｔｅｍ/ > 内部可以放置任何组件, 默认宽高自动设置为１００％。 ｓｗｉｐｅｒ 组件的属性
wxml的代码

<view>icon类型：
<block wx:for="{{iconType}}">
<icon type="{{item}}"/>{{item}}
</block>
</view>
<view>icon大小：
<block wx:for="{{iconSize}}">
<icon type="success"size="30"color="{{item}}"/>{{item}}
</block>
</view>

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

运行结果

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>

checkbox

复选框用于从一组选项中选取多个选项, 小程序中复选框由< ｃｈｅｃｋｂｏｘ － ｇｒｏｕｐ/ > (多项选择器) 和< ｃｈｅｃｋｂｏｘ/ > (多选项目) 两个组件组合而成。 一个< ｃｈｅｃｋｂｏｘ － ｇｒｏｕｐ/ > 表示一组选项, 可以在一组选项中选中多个选项

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

canvas

canvas组件用来绘制图形, 相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力, 仅仅是图形容器, 通过绘图ＡＰＩ 实现绘图功能。

在默认情况下,canvas组件的默认宽度为300px, 高度为225px, 同一页面中的canvas－id不能重复,否则会出错。canvas组件的属性如表所示。

先创建一个canvas绘图上下文

var context=wx.createCanvasContext('myCanvas')

在使用canvas绘图上下文进行绘图描述

 
context.setFillStyle('green')
context.fillRect(10,10,200,100)

​​​画图

Context.draw()

第五章

优势

1.开发流程简单，零门槛制作
使用即速应用来开发微信小程序的过程非常简单, 无须储备相关代码知识, 没有开发经验的人也可以轻松上手。

(１) 登录即速应用的官方网站(www.jisuapp.cn), 进入制作界面, 从众多行业模板中选择一个合适的模板。

(２) 在模板的基础上进行简单编辑和个性化制作。

(３) 制作完成后, 将代码一键打包并下载。

(４) 将代码上传至微信开发者工具。

(５) 上传成功后, 等待审核通过即可。

2.行业模板多样，种类齐全
即速应用为广大开发者提供了非常齐全的行业解决方案。 目前, 即速应用已经上线60多个小程序行业模板, 涉及餐饮(单店版、多店版)、婚庆、旅游、运动、美容、房地产、家居、医药、母婴、摄影、社区、酒店、KTV、汽车、资讯等多个行业。

这些小程序行业模板可以有效地帮助企业拓宽资源整合渠道, 降低运营成本, 提高管理效率。

3.丰富的功能组件和强大的管理后台
即速应用的功能组件和管理后台非常实用, 可以根据实际情况解决商家的不同需求。目前, 即速应用有４个版本,分别为基础版、高级版、尊享版和旗舰版。基础版为免费使用的版本,适合制作个人小程序,其他版本根据功能不同可以满足不同企业的需求。

即速应用的应用范围主要包括以下类型:

(１) 资讯类: 新闻、媒体。

(２) 电商类: 网购(服装、电器、读书、母婴……)。

(３) 外卖类: 餐饮及零售。

(４) 到店类: 餐饮及酒吧。

(５) 预约类: 酒店、KTV、家教、家政, 其他服务行业。

布局组件

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

动态表单组件

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

5.动态分类

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

文本，文本组件用于展示文字、设置点击事件,是小程序页面中最常用的组件。

图片，图片组件用于在页面中展示图片,

按钮组件效果，按钮组件用于在页面中设置按钮, 

音频组件

音频组件用于播放音乐(每个页面有一个音频组件即可), 手动点击播放按钮后即可实现播放。 音频文件可以选择音频库中的音乐, 也可以上传本地音频进行更换, 音频组件的属性面板如图所示。

第六章

网络API

微信小程序处理的数据通常从后台服务器获取, 再将处理过的结果保存到后台服务器,这就要求微信小程序要有与后台进行交互的能力。 微信原生ＡＰＩ 接口或第三方ＡＰＩ 提供了各类接口实现前后端交互。

网络ＡＰＩ 可以帮助开发者实现网络ＵＲＬ 访问调用、文件的上传和下载、网络套接字的使用等功能处理。 微信开发团队提供了１０ 个网络ＡＰＩ 接口。

ｗｘ.ｒｅｑｕｅｓｔ(Ｏｂｊｅｃｔ) 接口　用于发起ＨＴＴＰＳ 请求。

ｗｘ.ｕｐｌｏａｄＦｉｌｅ(Ｏｂｊｅｃｔ) 接口　用于将本地资源上传到后台服务器。

 ｗｘ.ｄｏｗｎｌｏａｄＦｉｌｅ(Ｏｂｊｅｃｔ) 接口　用于下载文件资源到本地。

 ｗｘ.ｃｏｎｎｅｃｔＳｏｃｋｅｔ(Ｏｂｊｅｃｔ) 接口　用于创建一个ＷｅｂＳｏｃｋｅｔ 连接。

ｗｘ.ｓｅｎｄＳｏｃｋｅｔＭｅｓｓａｇｅ(Ｏｂｊｅｃｔ) 接口　用于实现通过ＷｅｂＳｏｃｋｅｔ 连接发送数据。

ｗｘ.ｃｌｏｓｅＳｏｃｋｅｔ(Ｏｂｊｅｃｔ) 接口　用于关闭ＷｅｂＳｏｃｋｅｔ 连接。

ｗｘ.ｏｎＳｏｃｋｅｔＯｐｅｎ(ＣａｌｌＢａｃｋ) 接口　用于监听ＷｅｂＳｏｃｋｅｔ 连接打开事件。

ｗｘ.ｏｎＳｏｃｋｅｔＥｒｒｏｒ(ＣａｌｌＢａｃｋ) 接口　用于监听ＷｅｂＳｏｃｋｅｔ 错误。

ｗｘ.ｏｎＳｏｃｋｅｔＭｅｓｓａｇｅ(ＣａｌｌＢａｃｋ) 接口　用于实现监听ＷｅｂＳｏｃｋｅｔ 接收到服务器的消息事件。

 ｗｘ.ｏｎＳｏｃｋｅｔＣｌｏｓｅ(ＣａｌｌＢａｃｋ) 接口　用于实现监听ＷｅｂＳｏｃｋｅｔ 关闭。

邮政编码

wxml的代码

<view>邮政编码：</view>
<input type="text"bindtap="input"placeholder='6位邮政编码'/>
<button type="primary"bindtap="find">查询</button>
<block kwx:for="{{address}}">
<block kwx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>

.js的代码

Page({
    data:{
        postcode:"",
        address:[],
        errMsg:"",
        error_codr:-1
    },
    input:function(e){
        this.setData({
            podtcofe:e.detail.value,
        })
        console.log(e.detail.value)
    },
    find:function(){
        var postcode = this.data.postcode;
        if(postcode!=null&&postcode!=""){
            var self = this;
            wx.showToast({
              title: '正在查询，请稍后....',
              icon:'loading',
              duration:10000
            });
            wx.request({
              url: 'https://v.juhe.cn/postcode/query',
              data:{
                  'postcode':postcode,
                  'key':'0ff9bfccdf147497e067de994eb5496e'
              },
              header:{
                  'Content-Type':'application/json',
              },
              method:'GET',
              success:function(res){
                  wx.hideToast();
                  if(red.data.error_codr==0){
                      console.log(res);
                      self.setData({
                          errMsg:"",
                          error_codr:res.data.error_codr,
                          address:res.data.result.list
                      })
                  }
                  else{
                      self.setData({
                          errMsg:res.data.reason ||res.data.reason,
                          error_codr:res.data.error_codr
                      })
 
                  }
              }
            })
        }
    }
})

运行结果

下载文件

ｗｘ.ｄｏｗｎｌｏａｄＦｉｌｅ(Ｏｂｊｅｃｔ)接口用于实现从开发者服务器下载文件资源到本地, 在客户端直接发起一个ＨＴＴＰ ＧＥＴ 请求, 返回文件的本地临时路径

wxml的代码

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

.js的代码

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

运行结果

录音API

录音ＡＰＩ 提供了语音录制的功能, 主要包括以下两个ＡＰＩ 接口:
 ｗｘ.ｓｔａｒｔＲｅｃｏｒｄ(Ｏｂｊｅｃｔ) 接口　用于实现开始录音。
 ｗｘ.ｓｔｏｐＲｅｃｏｒｄ(Ｏｂｊｅｃｔ) 接口　用于实现主动调用停止录音。

１.开始录音

ｗｘ.ｓｔａｒｔＲｅｃｏｒｄ(Ｏｂｊｅｃｔ) 接口用于实现开始录音。 当主动调用ｗｘ.ｓｔｏｐＲｅｃｏｒｄ(Ｏｂｊｅｃｔ)接口或者录音超过１ 分钟时, 系统自动结束录音, 并返回录音文件的临时文件路径。 若要持久保存, 则需要调用ｗｘ.ｓａｖｅＦｉｌｅ()接口。

wx.startRecord)
({
success:function(res){
var tempFilePath=res.tempFilePath
}，
fail:function(res)
}
}）
setTimeout(function(){
wx.stopRecord()
}.10000)

运行结果

文件API

从网络上下载或录音的文件都是临时保存的,若要持久保存,需要用到文件API。文件API提供了打开、保存、删除等操作本地文件的能力,主要包括以下５个API接口:

（一）wx.saveFile(Object)接口用于保存文件到本地。
（二）wx.getSaveFileList(Object) 接口用于获取本地已保存的文件列表。
（三）wx.getSaveFileInfo(Object) 接口用于获取本地文件的文件信息。
（四）wx.removeSaveFile(Object) 接口用于删除本地存储的文件。
（五）wx.openDocument(Object) 接口用于新开页面打开文档,支持格式:doc、xls、ppt、pdf、docx、xlsx、ppts。

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

本地数据及缓存API
小程序提供了以键值对的形式进行本地数据缓存功能,并且是永久存储的,但最大不超过10MB,其目的是提高加载速度。数据缓存的接口主要有４个:

（一）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保存数据
１.wx.setStorage(Object)
wx.setStorage(Object)接口将数据存储到本地缓存接口指定的key中,接口执行后会覆盖原来key对应的内容。其参数如表所示。

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

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

２.wx.setStorageSync(key,data)
wx.setStorageSync(key,data)是同步接口,其参数只有key和data。示例代码如下

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

6.4.2获取数据

１.wx.getStorage(Object)
wx.getStorage(Object)接口是从本地缓存中异步获取指定key对应的内容

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

 清空数据

１.wx.clearStorage()

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

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

２.wx.clearStorageSync()

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

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

6.5位置信息API

国际上通用的坐标系ꎻGCj02标准是中国国家测绘局制定的地理信息系统的坐标系统,是由WGS84坐标系经加密后的坐标系,又称为火星坐标系。

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

wx.getLocation(Object)接口用于获取位置信息。
wx.chooseLocation(Object)接口用于选择位置信息。
wx.openLocation(Object)接口用于通过地图显示位置
 

6.5.1获取位置信息

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

运行结果

6.2.5 选择位置信息

wx.chooseLocation(Object)接口用于在打开的地图中选择位置,用户选择位置后可返回当前位置的名称、地址、经纬度信息

代码

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

运行结果