uniapp 开发微信公众号页面踩坑

第一次开发公众号,用uniapp画界面的时候,还觉得没什么,就更普通h5页面一样。结果。。。。。

坑1：定位

坑2：jssdk

坑3：获取code是重定向 会导致底部出现返回条,可以返回到无数据时的页面

一.定位

1.最开始是直接使用uniapp的定位 uni.getLocation。发现与实际的定位相差非常大,有,这时候怀疑是百度地图的问题(uniapp的h5用的是百度地图)，

2.换成高德地图偏差是小了,但是还是有大概1公里左右的差距，在高德上提工单,他们说这个不是他们能控制的。所以放弃外部地图定位这个思路,转向微信自身的定位。

3.这时候看测试公众号页面上有个获取用户地理位置的选项,开启它试了一下,发现和高德获取到的定位一样，不懂这个东西到底是干嘛的。。

 4.发现JS-SDK 

微信 JS-SDK 是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

这个应该就是我要找的了。所以进入下一个坑

二.JS-SDK

npm i weixin-js-sdk 导入sdk

config 接口注入权限验证配置：

需要将发起config的所在页面传给后端获取到wx.config所需要的配置参数

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

wx.error(function(res){
  // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});


wx.ready(function(){
  // config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
});

 然后问题来了,填入后端传过来的参数后,报错invalid signature

1.怀疑是#引起的.因为传递给后端的本地页面是有#号的，而公众号页面上的alert提示#被过滤掉了变成...//pages/... 所以uniapp的路由模式换成history,结果还是提示invalid signature

 2.怀疑是没有encodeURIComponent过，加上encodeURIComponent(window.location.href.split('#')[0])所有能加的。还是提示invalid signature

3.第一次开始怀疑后端,向后端要了他那边的参数在校验工具上校验了一遍,发现工具的signature和传给我的是一样的

微信 JS 接口签名校验工具

4.开始漫无目的的查看各种资料5天

5.直到看到一条回复,感觉到这应该就是答案了,直接截图 第二天发给后端,果然。

 三.返回条的问题

因为获取用户的openid需要重定向到授权页面去获取到code，重定向到授权页面自己可控可以用window.location.replace() 但是授权页面重定向回来就不可控了,导致页面出现返回条,而且可以返回到初始静态页面,这就不可接收了,发现一个很聪明的做法。

原先公众号菜单配置的是跳转到uniapp的界面 然后在uniapp的界面进行授权重定向,现在吧公众号的菜单配置成授权链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + AppId +
                        '&redirect_uri=' + encodeURIComponent(local) +
                        '&response_type=code&scope=snsapi_base&state=123#wechat_redirect

然后redirect_uri填原本要跳转的uniapp页面路径,这样就不会有返回条了。