在实际开发中,无论是做PC端、WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑。废话不多说了,开始正题。

描述点
微信相关开发知识了解
怎么样实现微信相关功能本地测试
相对很多人都对这个问题比较感兴趣,因为在进行涉及到微信公众号中功能开发的时候,默认情况下我们是不能进行本地测试的,也就是说测试都需要将代码进行部署才测试,但这非常不利于我们的测试开发,其实进行本地测试开发很简单,只需要我们有一个域名就可以了,然后将我们本地的ip映射到这个域名上,就可以本地测试了。下面我就说说我是怎么做本地测试的.
因为购买域名需要进行备案操作之类的,比较麻烦,所以一般第三方平台就可以让我们得到一个域名。我是在natpp(ngrok)这个网站上注册的https://natapp.cn/
我是花了五元钱购买了一个月的隧道,因为免费的不怎么靠谱,毕竟是免费的,哈哈。
注意,我们不能直接使用这个隧道,因为这个隧道是三级域名,无法用于微信开发,需要绑定一个二级域名或自主域名
当绑定完域名之后,在本地我们需要将本地ip进行映射穿透操作。
windows下打开dos窗口,输入 natapp -authtoken 你的隧道的authtoken
将你在上面设置的二级域名添加到上述说的网页授权域名以及JS接口安全域名
接下来便可以进行本地测试了.最后说一下,开发过程中下载微信开发工具进行调试也是不错的选择,下载地址https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
微信网页授权
微信网页授权的目的主要是实现三方站点微信的登录、获取微信用户信息等
实现微信网页授权获取微信用户的基本信息
先判断当前浏览器是不是微信内置浏览器,微信网页授权api: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
isweixin() {
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
} else {
return false;
}
},
1 第一步:用户同意授权,获取code
2 第二步:通过code换取网页授权access_token
3 第三步:刷新access_token(如果需要)
4 第四步:拉取用户信息(需scope为 snsapi_userinfo)
5 附:检验授权凭证(access_token)是否有效
微信API里面关于这些都介绍得比较清楚的,我就说说在这个过程中我所遇到的问题,以及解决办法
在第一步获取code的时候,因为这个code在五分钟之内只能够使用一次,所以必须对这个code进行缓存起来。否则会出现"errcode":40163,"errmsg":"code been used, hints: [ req_id: nOCEBa0466th12 ]"或{"errcode":40029,"errmsg":"invalid code"} 错误。
微信分享
微信分享其实用得非常得多,我就简单说下在vue-cli中怎么引入微信分享的sdk,以及怎么样实现分享功能.
微信分享APi: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
首先引入sdk:
npm install weixin-js-sdk --save-dev
然后通过require或者import引入
import wx from 'weixin-js-sdk';
微信分享中最重要的是获取到签名,才能够实现微信的分享
再根据当前的url去获取到所需要的参数来完成签名的验证,参数主要用appId、nonceStr、timestamp、signature,然后通过wx对象的config方法去进行配置验证签名
wx.config({
debug: false,
appId: appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识
timestamp:timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
//需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
jsApiList: [
'onMenuShareAppMessage','onMenuShareTimeline',
'onMenuShareQQ','onMenuShareQZone'
]
});
//处理验证失败的信息
wx.error(function (res) {
logUtil.printLog('验证失败返回的信息:',res);
});
//处理验证成功的信息
wx.ready(function () {
// alert(window.location.href.split('#')[0]);
//分享到朋友圈
wx.onMenuShareTimeline({
title: _this.newDetailObj.title, // 分享标题
link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: _this.newDetailObj.thu_image, // 分享图标
success: function (res) {
// 用户确认分享后执行的回调函数
logUtil.printLog("分享到朋友圈成功返回的信息为:",res);
_this.showMsg("分享成功!")
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
logUtil.printLog("取消分享到朋友圈返回的信息为:",res);
}
});
//分享给朋友
wx.onMenuShareAppMessage({
title: _this.newDetailObj.title, // 分享标题
desc: _this.desc, // 分享描述
link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: _this.newDetailObj.thu_image, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function (res) {
// 用户确认分享后执行的回调函数
logUtil.printLog("分享给朋友成功返回的信息为:",res);
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
logUtil.printLog("取消分享给朋友返回的信息为:",res);
}
});
//分享到QQ
wx.onMenuShareQQ({
title: _this.newDetailObj.title, // 分享标题
desc: _this.desc, // 分享描述
link: window.location.href.split('#')[0], // 分享链接
imgUrl: _this.newDetailObj.thu_image, // 分享图标
success: function (res) {
// 用户确认分享后执行的回调函数
logUtil.printLog("分享到QQ好友成功返回的信息为:",res);
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
logUtil.printLog("取消分享给QQ好友返回的信息为:",res);
}
});
//分享到QQ空间
wx.onMenuShareQZone({
title: _this.newDetailObj.title, // 分享标题
desc: _this.desc, // 分享描述
link: window.location.href.split('#')[0], // 分享链接
imgUrl: _this.newDetailObj.thu_image, // 分享图标
success: function (res) {
// 用户确认分享后执行的回调函数
logUtil.printLog("分享到QQ空间成功返回的信息为:",res);
},
cancel: function (res) {
// 用户取消分享后执行的回调函数
logUtil.printLog("取消分享到QQ空间返回的信息为:",res);
}
});
});
在这个过程中出现的错误就是:config:invalid signature,这个错误就说明签名不对,这时候需要静下心来去想想,然后进行排除,我最后发现原来是当前的url的错误,看了网上很多都是url需要进行编码,我也是这样做的,但一直出现config:invalid signature
原来的:
let url = encodeURIComponent(window.location.href.split('#')[0]);
修改后
let url = window.location.href.split('#')[0];
就不错了,最后来看看效果
一般出现这个问题,大部分都是url的问题哦。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
# VueJs
# 微信分享
# 实现微信分享
# vue 微信授权登录解决方案
# 详解Vue微信授权登录前后端分离较为优雅的解决方案
# 详解vue微信网页授权最终解决方案
# Vue微信项目按需授权登录策略实践思路详解
# vue移动端微信授权登录插件封装的实例
# vue 授权获取微信openId操作
# Vue3项目中优雅实现微信授权登录的方法
# 回调
# 我就
# 必填
# 过程中
# 都是
# 给朋友
# 我是
# 在这个
# 就可以
# 这个问题
# 这两个
# 涉及到
# 绑定
# 是在
# 看了
# 让我们
# 在我们的
# 下载地址
# 就不
# 说了
相关文章:
如何在IIS7中新建站点?详细步骤解析
道歉网站制作流程,世纪佳缘致歉小吴事件,相亲网站身份信息伪造该如何稽查?
如何用IIS7快速搭建并优化网站站点?
c# 服务器GC和工作站GC的区别和设置
小视频制作网站有哪些,有什么看国内小视频的网站,求推荐?
如何通过二级域名建站提升品牌影响力?
惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?
如何快速搭建支持数据库操作的智能建站平台?
小型网站制作HTML,*游戏网站怎么搭建?
如何在阿里云虚拟服务器快速搭建网站?
为什么Go需要go mod文件_Go go mod文件作用说明
建站之星安装后如何配置SEO及设计样式?
图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf?
制作网站的软件下载免费,今日头条开宝箱老是需要下载怎么回事?
如何快速搭建响应式可视化网站?
建站之星如何快速解决建站难题?
如何解决VPS建站LNMP环境配置常见问题?
专业的网站制作设计是什么,如何制作一个企业网站,建设网站的基本步骤有哪些?
官网自助建站平台指南:在线制作、快速建站与模板选择全解析
沈阳制作网站公司排名,沈阳装饰协会官方网站?
郑州企业网站制作公司,郑州招聘网站有哪些?
如何选择高性价比服务器搭建个人网站?
建站之星后台密码如何安全设置与找回?
实惠建站价格推荐:2025年高性价比自助建站套餐解析
如何做网站制作流程,*游戏网站怎么搭建?
香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南
深圳防火门网站制作公司,深圳中天明防火门怎么编码?
湖南网站制作公司,湖南上善若水科技有限公司做什么的?
宝塔面板如何快速创建新站点?
建站IDE高效指南:快速搭建+SEO优化+自适应模板全解析
建站之家VIP精选网站模板与SEO优化教程整合指南
如何用y主机助手快速搭建网站?
如何选择香港主机高效搭建外贸独立站?
香港服务器WordPress建站指南:SEO优化与高效部署策略
建设网站制作价格,怎样建立自己的公司网站?
广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网?
定制建站价位费用解析与套餐推荐全攻略
北京制作网站的公司,北京铁路集团官方网站?
免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面,最好是免费的?
洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些?
南京网站制作费用,南京远驱官方网站?
专业网站制作企业网站,如何制作一个企业网站,建设网站的基本步骤有哪些?
c# 在高并发下使用反射发射(Reflection.Emit)的性能
如何在IIS中新建站点并解决端口绑定冲突?
如何制作网站标识牌,动态网站如何制作(教程)?
建站三合一如何选?哪家性价比更高?
建站之星手机一键生成:多端自适应+小程序开发快速建站指南
成都品牌网站制作公司,成都营业执照年报网上怎么办理?
胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?
如何将凡科建站内容保存为本地文件?
*请认真填写需求信息,我们会在24小时内与您取得联系。