VueJs单页应用实现微信网页授权及微信分享功能示例

2020-06-14 06:04:48易采站长站整理

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

描述点

微信相关开发知识了解
怎么样实现微信相关功能本地测试
微信网页授权
微信分享

微信相关开发知识了解

微信公众号的appId,AppSecret

当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公众号唯一的标识)和appSecret(可以进行重置),这两个信息是进行微信公众号开发必不可少的,因为微信公众号中几乎所有功能的开发都与这两个信息相关。

微信公众号中IP白名单

在开发微信公众功能的时候,需要我们添加IP白名单,这样以便能够获取到access_token,关于access_token的介绍请看这里https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

网页授权域名以及JS接口安全域名

网页授权域名:在我们的应用中需要微信用户进行登录、获取微信用户基本信息的时候,需要设置这个域名
JS接口安全域名:在我们的应用中需要实现微信分享等功能,需要设置这个域名。

怎么样实现微信相关功能本地测试

相对很多人都对这个问题比较感兴趣,因为在进行涉及到微信公众号中功能开发的时候,默认情况下我们是不能进行本地测试的,也就是说测试都需要将代码进行部署才测试,但这非常不利于我们的测试开发,其实进行本地测试开发很简单,只需要我们有一个域名就可以了,然后将我们本地的ip映射到这个域名上,就可以本地测试了。下面我就说说我是怎么做本地测试的.

因为购买域名需要进行备案操作之类的,比较麻烦,所以一般第三方平台就可以让我们得到一个域名。我是在natpp(ngrok)这个网站上注册的https://natapp.cn/

我是花了五元钱购买了一个月的隧道,因为免费的不怎么靠谱,毕竟是免费的,哈哈。

注意,我们不能直接使用这个隧道,因为这个隧道是三级域名,无法用于微信开发,需要绑定一个二级域名或自主域名

当绑定完域名之后,在本地我们需要将本地ip进行映射穿透操作。

windows下打开dos窗口,输入 natapp -authtoken 你的隧道的authtoken

将你在上面设置的二级域名添加到上述说的网页授权域名以及JS接口安全域名