Taro H5端微信授权链接获取code,回调页面通过this.$router.params获取不到参数

新手学堂042

Taro H5端微信授权链接获取code,回调页面通过this.$router.params获取不到参数,第1张

https://developersweixinqqcom/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorizationhtml#0 微信授权登录的官方步骤,目前做第一步请求获取code,微信会回调访问redirect_uri 将code返回接口,我们在页面componentWillMount() 中this$routerparams是获取不到的

我们预想的回调结果是这样的:(避免敏感信息,我把请求域名换成了localhost)

http://localhost:10086/#/pages/identification/identificationcode='xxxxx'

实际返回的结果是这样的:

http://localhost:10086code=071UBEge2snGkI0Szxhe2BPNge2UBEgU&state=123#/pages/identification/identification

这就是导致获取不到的根本原因,

目前解决办法只能解析地址路径的方式获取code

默认是 hash 的路由方式,这样的 #/page/xx/xx ,我们可以修改成 browser 的路由方式可以去掉 #

微信公共号现在是没有办法直接跳转到h5,微信在很早的时候就已经做了调整。如果说你需要将h5跳转的话,需要在微信公众号的推文里面加链接,比如给或者文字加链接,或者是将阅读原文的链接设置为H5的链接,也可以在H5菜单设置链接。

经常有朋友找我咨询H5的问题,但是在和他们沟通的过程中,我发现很多人对H5的理解都是停留在用户层面,邀请函、小游戏、品牌展示、抽奖等等。其实如果上升到营销层面的话,仅在用户层面去思考是远远不够的,因为任何传播都要考虑有效性的问题,如果100wpv带来的只是刷屏效果,而对品牌带不来任何有效转化,这样的传播显然是不成功的。

随着微信用户增多、H5小游戏、H5大翻页,到H5站点、H5营销。在微信上内容的数量和样式的逐渐增多,下面给大家介绍借助“布谷鸟”这一个在线制作工具,可以轻松的制作出炫酷的微信h5页面。

点击制作栏目,进入模板选择页

1:选择空模板,自由创作、选择主题模板,更快速的创作出炫丽的展示。

预览树操作

2:显示的页面的显示顺序;

右键调整页面的显示顺序;

3、点击页面右上角的X,可以把不需要的页面删除。

4功能—添加修改文字

1、添加文字:点击右侧的文字选项→主编辑区会出现文字输入框→双击修改

2、文字属性修改:右侧文字属性修改选项,包括字体种类,字体大小、颜色等等。

功能—添加修改按钮

添加按键:点击右侧按钮选项→点击编辑区的按钮→修改文字、链接

5功能—添加修改底图

1、修改背景颜色:点击右侧底图选项→选择颜色

2、上传底图:点击右侧底图选项→点击上传按钮→确定

6:保存。生成

1、添加标题、描述、缩略图

2、生成的二维码和链接可以用于分享到微信、微博等

3、点击生成按钮,即完成了一个作品的制作过程。

从公众号菜单中打开H5链接是固定的,没有办法动态传递参数,但是,可以通过其他方式来实现这个需求。

首先从思路上来说,这里没有办法通过传递的方式把数据由公众号菜单传入H5页面,但是可以通过在H5页面中获取用户信息的方式实现。这里提供下实现这个需求的方法和思路,仅供参考。

主要思路就是通过自定义菜单配合网页授权接口获取用户信息。具体实现方法如下:

1首先需要在公众号菜单中定义菜单类型为view,然后到指定的链接地址。

2然后在该页面上使用微信的网页授权接口,即可获取用户信息。

这里有几个细节说明下。

微信网页授权接口scope分为snsapi_base和snsapi_userinfo,前者是获取用户openid,后者为获取用户基本信息的,如果用户已经关注公众号并通过自定义菜单进入该H5页面,则这两个类型的授权接口都是静默授权,即在用户无感知的情况下获取信息。其他情况获取用户基本信息是需要用户手动授权才可以。

在网页授权时使用到的access_token和调用微信其他接口的access_token是不一样的,网页授权使用的access_token是通过网页OAuth授权以后得到的。网页授权同样支持unionID机制,所以如果需要多个客户端关联用户信息的时候注意下使用unionID而不是openID。

至此,这个需求的实现思路以及说完,具体的实现流程和注意事项,以及接口数据相关信息可以参见微信公众号开发文档之网页授权。