挠头一晚上，终于弄好，事实证明 遇到什么困难都可以解决，沙漠的尽头就是绿洲！
1.小程序内关注公众号
想要小程序内关注公众号，那么就要先获取到公众号的biz，先登录公众号，账号详情页面
然后右键 查看网页源代码 ，搜索'uin_base64'即可看到biz的值
记录好这个值
打开代码
<tn-list-cell :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-row-between" style="width: 100%;">
<view class="tn-margin-left-sm">公众号推送通知（必须先关注公众号）</view>
<tn-switch v-model="body.is_tuisong" @change="redirectToOfficialAccount2()"></tn-switch>
</view>
</tn-list-cell>
把你的biz的值 替换一下 __biz ，其他不要动，这个是跳转到一个新页面
redirectToOfficialAccount() {
// 替换成你的关注链接
let followUrl = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkyMjdsU5ODUxNw==#wechat_redirect?param1=value1¶m2=value2';
console.log(followUrl)
// 打开 WebView
uni.navigateTo({
url: '/minePages/webview/webview?url=' + encodeURIComponent(followUrl),
});
},
新页面代码
<template>
<view>
<tn-nav-bar fixed alpha :isBack="true" >
关注公众号
</tn-nav-bar>
<!-- 在当前页面中使用 WebView 组件 -->
<web-view :src="followUrl" @message="onWebViewMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
// 替换成你的关注链接
followUrl: '',
};
},
onLoad(val) {
// 在接收端的代码中解码
let receivedUrl = decodeURIComponent(val.url);
// this.followUrl = val.url
},
methods: {
onWebViewMessage(e) {
// 处理 WebView 发送过来的消息，可以在消息中包含参数等信息
console.log('WebView Message:', e);
// 可以解析 e.detail.data 中的参数
},
},
};
</script>
即可
第二部分 给公众号传值！
上面部分代码
<tn-list-cell :unlined="true" :radius="true" :fontSize="30">
<view class="tn-flex tn-flex-row-between" style="width: 100%;">
<view class="tn-margin-left-sm">公众号推送通知（必须先关注公众号）</view>
<tn-switch v-model="body.is_tuisong" @change="redirectToOfficialAccount2()"></tn-switch>
</view>
</tn-list-cell>
下面部分代码
redirectToOfficialAccount2() {
//注意这个url是你公众号内的url，我的这个是首页
let url = 'https://mp.***********.com/h5?mobile='+this.body.mobile;
uni.navigateTo({
url: '/minePages/h5webview/h5webview?url=' + encodeURIComponent(url),
});
},
新页面
<template>
<view>
<tn-nav-bar fixed alpha :isBack="true" >
开启消息通知
</tn-nav-bar>
<!-- <view>{{h5Url}}</view> -->
<web-view :src="h5Url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
// 替换成你要加载的H5页面链接
h5Url: '',
};
},
onLoad(a) {
let receivedUrl = decodeURIComponent(a.url);
this.h5Url = receivedUrl
},
};
</script>
最重要的是首页部分
isWeiXin() {
// #ifndef H5
return false;
// #endif
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
},
是公众号环境下的话 就运行
onLoad(option) {
//接受上面的mobile值
this.canshu = theRequest.mobile
}
kaiqixiaoxi(){
// #ifdef H5
var app_type = this.isWeiXin() ? 'wechat' : 'h5';
var app_type_name = this.isWeiXin() ? '微信公众号' : 'H5';
// 公众号登录逻辑
// 设置回调 记得带上参数this.canshu
let redirect_uri = encodeURIComponent('https://mp.**********.com/api/gzh/login?canshu='+this.canshu);
let state = 'STATE'; // 可以根据需要设置
let scope = 'snsapi_userinfo'; // 请求用户授权，包括用户手机号码
//appid换成你自己的 其他不要动
let publicAccountLoginUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=************&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
// 跳转到公众号登录页面
window.location.href = publicAccountLoginUrl;
// #endif
},
// 在公众号授权回调页面处理获取用户信息
async handlePublicAccountCallback() {
let that = this;
// 获取 URL 参数中的 code 和 state
let params = new URLSearchParams(window.location.search);
let code = params.get('code');
let state = params.get('state');
// 根据 code 向微信服务器获取 access_token 和 openid
let accessTokenResult = await that.$request({
url: '/api/gzh/login', // 自行实现获取 access_token 的接口
data: {
code: code,
// 其他参数
}
});
// console.log(accessTokenResult)
// console.log(accessTokenResult)
// console.log(accessTokenResult)
// console.log(accessTokenResult)
// 根据获取到的 access_token 和 openid 向微信服务器获取用户信息
if (accessTokenResult.statusCode == 200 && accessTokenResult.data.access_token) {
let userInfoResult = await that.$request({
url: '/api/gzh/get_user_info', // 自行实现获取用户信息的接口
data: {
access_token: accessTokenResult.data.access_token,
openid: accessTokenResult.data.openid,
// 其他参数
}
});
// 处理用户信息
if (userInfoResult.statusCode == 200 && userInfoResult.data) {
// 存储用户信息
// ...（你的存储用户信息逻辑）
// 处理登录成功后的操作
// ...（你的登录成功逻辑）
} else {
console.error('获取用户信息失败', userInfoResult);
// 处理获取用户信息失败的情况
}
} else {
console.error('获取 access_token 失败', accessTokenResult);
// 处理获取 access_token 失败的情况
}
},
前端代码到此结束
后台代码
public function login()
{
// var_dump($_REQUEST);die;
// var_dump($_SERVER['REQUEST_METHOD']);die;
// header('Content-Type: application/json');
// 示例中使用文件存储 access_token，实际生产环境中应该使用数据库等持久化存储
$accessTokens = [];
$DOCUMENT_ROOT = $_SERVER['DOCUMENT_ROOT'];
$fp = fopen($DOCUMENT_ROOT.'/aaa.txt','a');
$code = $_REQUEST['code'];
$state = $_REQUEST['state'];
$canshu = $_REQUEST['canshu']; //就是传来的值
//换成自己的
$appid = '**********';
$appsecret = '*********';
$wxResponse = file_get_contents("https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code={$code}&grant_type=authorization_code");
$wxResponseArray = json_decode($wxResponse, true);
if(isset($wxResponseArray['openid'])){
$up = Db::name('user')->where('username',$canshu)->update(['wechat_openid'=>$wxResponseArray['openid']]);
if($up){
return success();
}else{
return error();
}
}else{
return error();
}
}
//其他的后台代码不需要
到此结束！