小程序内部一键关注关联公众号 如何实现小程序无跳转关注公众号

上效果

在这里插入图片描述
在这里插入图片描述

实现前提

在这里插入图片描述
打开微信公众平台----->设置 ---------> 打开公众号关注组件
注:设置的公众号需与小程序主体一致。

具体实现
//wxml
<official-account bindload='loadSuccess'></official-account>
//js
  /** 关注公众号组件 */
  loadSuccess(e){
    console.log("关注公众号组件加载成功")
  },

official-account 为公众号关注组件。当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内。
注意:
在一个小程序的生命周期内,只有从以下场景进入小程序,才具有展示引导关注公众号组件的能力:
1、当小程序从扫小程序码场景(场景值1047,场景值1124)打开时
2、当小程序从聊天顶部场景(场景值1089)中的「最近使用」内打开时,若小程序之前未被销毁,则该组件保持上一次打开小程序时的状态
3、当从其他小程序返回小程序(场景值1038)时,若小程序之前未被销毁,则该组件保持上一次打开小程序时的状态
4、小程序开发工具默认是1011场景,可以自行切换编译环境查看效果。
5、每个页面只能配置一个该组件。

小程序云开发提供了一键登录功能,可以帮助开发者快速集成微信、QQ、微信企业号等第三方账号的登录。以下是使用微信登录的一个简单示例: 首先,在微信公众平台上创建或关联小程序项目,并启用云开发服务。 1. **安装依赖**: 使用`mpx`命令行工具,在终端中运行: ``` mpx login ``` 2. **引入配置**: 在`app.json`文件中,添加微信登录的相关配置: ```json { "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "你的小程序名" }, "permission": { "scope.userInfo": { "desc": "用于获取用户信息,包括头像、昵称、性别等" } }, "login": { "quickLogin": true, "Platforms": ["wx"] } } ``` 3. **页面文件**: 在需要登录的页面(如`pages/login/login.js`),导入所需模块并处理登录事件: ```javascript Page({ onLaunch() { wx.login({ success(res) { // 获取到code后,可以发送请求到云端服务器换取access_token this.globalData.code = res.code; wx.request({ url: &#39;https://your-cloud-function-url/auth&#39;, data: { code: res.code }, method: &#39;POST&#39;, // 替换为你云函数的URL header: { &#39;content-type&#39;: &#39;application/json&#39; }, success(res) { // 登录成功,存储用户信息 wx.setStorageSync(&#39;userInfo&#39;, res.data); // 跳转到其他页面 wx.redirectTo({ url: &#39;/pages/index/index&#39; }); } }); } }); } }) ``` 4. **云函数处理**: 创建一个云函数(如`cloud/api/auth.js`),接收code并调用微信API换取access_token及用户信息: ```javascript const axios = require(&#39;axios&#39;); exports.main = async (context) => { try { const code = context.request.body.code; let result = await axios.post(&#39;https://api.weixin.qq.com/sns/jscode2session&#39;, { js_code: code, grant_type: &#39;authorization_code&#39;, appid: &#39;your_app_id&#39;, secret: &#39;your_secret_key&#39;, redirect_uri: &#39;your_redirect_url&#39; // 与你在公众号后台设置的回调地址一致 }); context.success(result.data); } catch (err) { context.error(err.message); } }; ```
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【拾光静好 微微一笑】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值