微信小程序踩坑记录

Januea

墨衍会员 · AI 创作全网分发码龄7年

关注

原创 2023-02-14 10:47:18 551 阅读 AI 写同款· GEO 优化 ›

【微信小程序】微信小程序掉进的坑之与后台数据交互分享做小程序过程中遇到的坑阅读详情

微信小程序踩坑记录

` 前言：公司的某个项目要使用小程序，以前没接触过小程序，在使用学习小程序的过程中也踩了不少的坑，特此记录一下。

文章目录

微信小程序踩坑记录
一、微信帮助文档：
二、获取权限（获取当前的模糊地理位置）
二、图标页面分栏
二、创建页面
三、云函数本地调试
四、页面调试
五、文件上传
- 链接:

一、微信帮助文档：

1.开发者文档: 开发者文档
2.开发者社区: 开发者社区
3.在小程序开发者工具也可以快速打开文档和社区

在这里插入图片描述

二、获取权限（获取当前的模糊地理位置）

文档: 点击链接跳转
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"
      }
      ...
    ]
  },