概要
最后更新于：2022-04-01 23:51:32
[TOC]
# 小程序
## 小程序简介
### 文档与结构
小程序结构图
**app.json文件小程序设置全局配置 ，包括页面路径、窗口、选项卡，以及网络超时等
app.js文件中App()来注册一个小程序 提供了生命周期方法
app.wxss小程序应用的样式文件**
小程序文件结构图
### 知识储备
* 首先得有一定的网站开发基础（html css js）
* 因为不能像做网站那样用js中的window，document方法，所以要多看官网给的api文档
* 全新的一个模式，好多东西微信自己都还没定下来，所以就是要多看多练。
* 由于大小限制，所以不适合做大型开发。
## 小程序常用的API和逻辑绑定方法
**wx.request https网络请求**
~~~
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
method:"GET",
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
~~~
**本地缓存**
**通过key的形式添加缓存setStorage （异步接口）** ~~~ wx.setStorage({ key:"key" data:"value" }) ~~~ **通过key的形式获取缓存getStorage （异步接口）** ~~~ wx.getStorage({ key: 'key', success: function(res) { console.log(res.data) } }) ~~~ **从本地缓存中异步移除指定 key** ~~~ wx.removeStorage({ key: 'key', success: function(res) { console.log(res.data) } }) ~~~ **清理本地数据缓存** ~~~ wx.clearStorage() 显示、隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000) ~~~ **动态设置当前页面的标题** ~~~ wx.setNavigationBarTitle({ title: '当前页面' }) ~~~ **导航** **保留当前页面，跳转到应用内的某个页面** ~~~ wx.navigateTo({ url: 'test?id=1' }) ~~~ **关闭当前页面，跳转到应用内的某个页面** ~~~ wx.redirectTo({ url: 'test?id=1' }) ~~~ **获取用户信息，需要先调用 wx.login 接口** ~~~ wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } } ) ~~~ **设备 获取网络类型** ~~~ wx.getNetworkType({ success: function(res) { var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi } }) ~~~ **获取系统信息（异步接口）** ~~~ wx.getSystemInfo({ success: function(res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language) console.log(res.version) } }) ~~~ **拨打电话** ~~~ wx.makePhoneCall({ phoneNumber: '1340000' //仅为示例，并非真实的电话号码 }) ~~~ **获取当前的地理位置、速度** ~~~ wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } }) ~~~ ## 随手记 > 随手记录：const类似var 传递参数 在data{}中声明参数，在onLoad里面去传递参数（赋值） 例: ~~~ data: { pageNum:1 } const _this=this _this.setData({ pageNum:++_this.data.pageNum }) ~~~
';
**通过key的形式添加缓存setStorage （异步接口）** ~~~ wx.setStorage({ key:"key" data:"value" }) ~~~ **通过key的形式获取缓存getStorage （异步接口）** ~~~ wx.getStorage({ key: 'key', success: function(res) { console.log(res.data) } }) ~~~ **从本地缓存中异步移除指定 key** ~~~ wx.removeStorage({ key: 'key', success: function(res) { console.log(res.data) } }) ~~~ **清理本地数据缓存** ~~~ wx.clearStorage() 显示、隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000) ~~~ **动态设置当前页面的标题** ~~~ wx.setNavigationBarTitle({ title: '当前页面' }) ~~~ **导航** **保留当前页面，跳转到应用内的某个页面** ~~~ wx.navigateTo({ url: 'test?id=1' }) ~~~ **关闭当前页面，跳转到应用内的某个页面** ~~~ wx.redirectTo({ url: 'test?id=1' }) ~~~ **获取用户信息，需要先调用 wx.login 接口** ~~~ wx.getUserInfo({ success: function(res) { var userInfo = res.userInfo var nickName = userInfo.nickName var avatarUrl = userInfo.avatarUrl var gender = userInfo.gender //性别 0：未知、1：男、2：女 var province = userInfo.province var city = userInfo.city var country = userInfo.country } } ) ~~~ **设备 获取网络类型** ~~~ wx.getNetworkType({ success: function(res) { var networkType = res.networkType // 返回网络类型2g，3g，4g，wifi } }) ~~~ **获取系统信息（异步接口）** ~~~ wx.getSystemInfo({ success: function(res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language) console.log(res.version) } }) ~~~ **拨打电话** ~~~ wx.makePhoneCall({ phoneNumber: '1340000' //仅为示例，并非真实的电话号码 }) ~~~ **获取当前的地理位置、速度** ~~~ wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } }) ~~~ ## 随手记 > 随手记录：const类似var 传递参数 在data{}中声明参数，在onLoad里面去传递参数（赋值） 例: ~~~ data: { pageNum:1 } const _this=this _this.setData({ pageNum:++_this.data.pageNum }) ~~~