微信小程序踩坑记录
` 前言:公司的某个项目要使用小程序,以前没接触过小程序,在使用学习小程序的过程中也踩了不少的坑,特此记录一下。
一、微信帮助文档:
二、获取权限(获取当前的模糊地理位置)
文档: 点击链接跳转
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
功能描述
获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。
你得在微信公众号服务器后台链接: 微信公众号登录申请获取权限,获取位置信息的话最好是获得下图这三个权限。
申请好之后在开发者工具中app.json编写代码:
"permission": {
"scope.userFuzzyLocation": {
"desc": "你的位置信息将用于发布的地址"
}
},
"requiredPrivateInfos": [
"getFuzzyLocation",
"chooseLocation",
"chooseAddress"
],
在你想要获取位置信息的地方绑定一个事件chooseLocation,在js中编写chooseLocation方法。
(这时候坑来了,如果你就编写获取位置信息,这个时候微信会弹出一个框说他申请获取你的位置信息,用户点击同意倒还好,点击拒绝之后小程序就会记住你拒绝它获取你的位置信息这个时候你就再次点击获取位置信息的时候是获取不了的,所以这个时候我们让他先判断用户是否授权获取位置信息,没授权就打开授权窗口让他再次授权,授权之后才能打开获取位置信息的窗口
/**
* 定位图标上的事件:授权从地图上取得地址
* @param {} e
*/
chooseLocation: function (e) {
console.log(e);
var that = this;
wx.getSetting({
success(res) {
console.log(res);
if (!res.authSetting["scope.userFuzzyLocation"]) {
wx.authorize({
scope: "scope.userFuzzyLocation",
success(res) {
console.log(res);
that.openLocation();
},
fail(res) {
wx.showModal({
title: '是否授权当前位置',
content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
complete: (res) => {
if (res.cancel) {
wx.showToast({
title: '您已经取消授权位置',
})
}
if (res.confirm) {
wx.openSetting({
success(res) {
console.log(res.authSetting)
res.authSetting = {
"scope.userFuzzyLocation": true
}
}
})
}
}
})
}
});
} else {
that.openLocation();
}
},
});
},
获取位置信息的方法是:先打开地图获取
/**
* 打开地图
* @param {}} e
*/
openLocation: function (e) {
var that = this;
wx.authorize({
scope: 'scope.userFuzzyLocation',
success(res) {
console.log(res)
if (res.errMsg == 'authorize:ok') {
wx.getFuzzyLocation({
type: 'gcj02',
success(res) {
console.log(res) //此时里面有经纬度
const latitude = res.latitude;
const longitude = res.longitude;
const speed = res.speed;
const accuracy = res.accuracy;
wx.chooseLocation({
latitude: latitude,
longitude: longitude,
success: function (res) {
console.log(res);
that.setData({
address: res.address + res.name,
addressLength: res.address.length + res.name.length,
});
},
fail(err) {
console.log(err);
}
});
}
})
}
},
fail(err) {
console.log(err)
}
})
},
二、图标页面分栏
只需要在项目的app.json中添加:
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",//页面路径
"text": "首页",//该页面的描述
"iconPath": "icons/首页-默认.png",//图标位置
"selectedIconPath": "icons/首页-选中.png"//选中的图标位置
},
{
"pagePath": "pages/login/login",
"text": "登录",
"iconPath": "icons/我的申请-默认.png",
"selectedIconPath": "icons/我的申请-选中.png"
}
...
]
},
自定义tabBar的话参考官方文档:链接:
二、创建页面
页面都放在pages这个文件夹下面的,最好是右键新建page就行,而不是新建文件夹,新建page会把你的js、json、wxml和wxss都创建好
三、云函数本地调试
在微信公众号后台申请好云函数的环境后,对着项目里的cloudfunctions文件夹右键,可以看出弹出的窗口中就有开启云函数本地调试
选择你要调试的云函数,可以看见右边有开启本地调试,勾选之后会提示你没有node_modules是否下载,这个文件夹是你调试不可缺少的里面有很多插件,但是小程序工具现在有个bug就是我试了很多次都没有从服务器上下载下来
node_modules网盘下载链接:
链接:https://pan.baidu.com/s/1O94m7QEh6vqoJgRxn_Wk3Q
提取码:7d2k
云函数从服务器上下载好之后应该是在某个云函数文件夹下的,所以这个文件夹下载好之后复制到你想调试的那个云函数文件夹下就行
四、页面调试
除了在控制调试打印出你想要的对象的值以外,还可以在source这里pages页面下带有[sm]的页面进行断点调试