微信小程序开发问题总结 - 微信授权的开发和问题（二）

小十七_
155 阅读2分钟

这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战

hi 我是小十七_，之前开发微信小程序的时候遇到过一些问题，解决方案分享给大家～这篇主要是微信授权，上一篇文档在这里：juejin.cn/post/706305…

微信授权过程中遇到的问题

多个项目共用一个服务号带来的问题

也就是以上方法二中第一版和第二版中区别

需求：有多个企业使用，共用一个服务号授权

微信 REDIRECT_URI 中的域名需要和公众号设置 -> 功能设置 下的 网页授权域名 一致

如果 微信回调到后端接口，不同企业后端接口域名是不一样的，而服务号中 网页授权域名 只能填写一个，不满足要求。所以 微信回调到前端页面，前端把需要授权的页面单独打包出来，放到公用的地方，不同企业的应用共用一套详情页

涉及三个问题：

  1. 详情页分离打包
  2. 授权部分修改
  3. 已分享出去的链接兼容

hashHistory 的单页应用带来的问题（微信分享）

如果路由使用 hashHistory，涉及到微信分享时，微信分享后会把 # 后面的内容去掉，所以对于 hashHistory 做路由的单页应用来说，分享出去的页面就都是首页了。

解决方法：

方法一：将 # 后面的路径放到 query 后拼起来，分享后再取下来

方法二（推荐）：将 hashHistory 改为 browserHistory

http://test_domain/#/working?access_key=enterprise&access_id=test

http://wxtest.synapse.xin/working?access_key=enterprise&access_id=test

打包后 static 文件夹（css，js...），index.html

  1. 本地开发跑 node 服务时
app.get(/static/, (req, res) => {
    var filename = req.url.match(/\/static\/(.+)/)[1];
    res.sendFile(path.join(__dirname, './dist/static/'+filename));
});
app.get(/\/|index\.html/, (req, res) => {
    res.sendFile(path.join(__dirname, './index.html'));
});
  1. 线上修改 nginx
location / {
   root   /export/App/wecall;
   index  index.html index.htm;
   try_files $uri /index.html;
}  
location /static {
   root   /export/App/wecall;
}

把所有路由指向 index.html http://test_domain/working?access_key=enterprise&access_id=test

解决刷新页面时请求其他文件 http://test_domain/static/5.chunk.js

其他问题

在需要调用JS接口的页面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

引入微信 sdk 文件的时候，需要使用 https 的方式，如果使用 http 的方式，ios 11.0.3 7plus 里，会有 window.wx 是 undefined 的情况。

三. 将微信授权与分享部分抽成 SDK

  1. 将授权和分享相关逻辑封装成函数，传入不同页面类型，调用不同的函数
  2. 页面只需调用 sdk 的 init 方法，传入参数，由 sdk 控制授权和分享的逻辑
avatar
文章
阅读
粉丝