微信公众号授权第三方小程序平台步棸

我想要实现公众号能授权小程序平台

一、公众号网页授权
1.第一步:用户同意授权,获取code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

参数说明

appid                          是公众号的唯一标识

redirect_uri                 是授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理response_type是返回类型,请填写codescope是应用授权作用域,

snsapi_base            (不弹出授权页面,直接跳转,只能获取用户openid),

snsapi_userinfo      (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )

state                            否重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节

#wechat_redirect          是无论直接打开还是做页面302重定向时候

### 微信公众号实现页面跳转至小程序的方法与配置教程 #### 配置第三方小程序权限 为了使微信公众号能够成功跳转到指定的小程序,需由目标小程序的相关负责人完成必要的白名单设置。这一步骤确保了只有经过授权的应用才能发起有效的跳转请求[^1]。 #### 使用开放标签进行前端开发 在HTML文件中引入特定于微信公众平台的开放标签`<wx-open-launch-weapp>`用于定义触发条件以及携带必要参数来启动对应的小程序实例。此标签内的`username`属性应填入所要访问的小程序原始ID;同时建议为按钮样式设定`display:block;`以优化视觉效果[^3]。 #### 后端支持验证签名生成 由于安全机制的存在,在实际部署过程中往往还需要服务器端参与处理——即通过调用微信提供的API接口获取并返回合法的身份认证信息(signature),以此证明此次跳转行为的真实性及合法性。 #### 实现示例代码片段 以下是基于上述说明的一个简单案例展示: ```html <!-- HTML部分 --> <button wx:if="{{canJump}}" bindtap="jumpToMiniProgram">立即体验</button> <script type="text/wxtag-template"> <div> <!-- 这里放置其他内容 --> <wx-open-launch-weapp id="launchWeApp" username="gh_xxxxxxxxxxxx"></wx-open-launch-weapp> </div> </script> ``` ```javascript // JavaScript逻辑控制层 (假设使用的是Vue框架) export default { data() { return { canJump: false, signature: '' }; }, methods: { async fetchSignature() { try { let res = await this.$axios.get('/api/get-signature'); if (!res.data.errcode) { this.signature = res.data.signature; document.getElementById('launchWeApp').setAttribute('signature', this.signature); this.canJump = true; } } catch (error) {} }, jumpToMiniProgram(e) { e.currentTarget.parentNode.querySelector('#launchWeApp').click(); } }, mounted() { this.fetchSignature(); } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值