微信小程序内嵌H5页面获取openid+分享功能

主要实现功能:1.通过webview实现小程序内嵌H5页面

                         2.在H5页面获取到用户的openid

                         3.在H5页面实现分享获取到分享人的openid和被分享者的openid

代码实现:

1.通过webview实现小程序内嵌H5页面

 //index.wxml
<block>
    <web-view src="{{src}}"/>
 </block>
//index.js

 data: {
    logs: [],
    src:""
  },
  onLoad(options){
    console.log("options:",options)
    let redirect_url = 'https://需要内嵌H5页面的html文件?p1='+options.openid+"&p2="+options.shareOpenId;   
    this.setData({
      src:redirect_url
    })
    },

传参:在地址后面加入的参数就是我们分享人id和被分享者的id

2.小程序中获取openid

  wx.getUserInfo({
        success:(res)=>{
          console.log(res)
          let userInfo=res.userInfo
          wx.login({
            success: (res) => {
      //首先是拿到code,利用code来换取openid
              console.log(res.code)
              let code=res.code
              wx.request({
     //这个地址只用改变一下appid和secret
                url: `https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的地址&js_code=${code}&grant_type=authorization_code`,
                success:(res)=>{
                  console.log(res);
                  userInfo.openid=res.data.openid
                  //获取到你的openid
                  console.log(userInfo.openid);
                  this.setData({
                    str_openid: userInfo.openid
                  });
                  wx.setStorageSync('openid', userInfo.openid);

3.的页面

//log.wxml
<view>
  <button bindtap="clk">获取openid</button>
</view>
<view>
  {{str_openid}}
</view>
 clk() {
 //info的方法就是我们获取openid的方法
    this.info();
    const opid = wx.getStorageSync('openid');
    setTimeout(()=>
      {
        if(opid) {
          wx.navigateTo({
          url: '../logs/logs?openid='+wx.getStorageSync('openid')+"&shareOpenId="+this.data.shareOpenId
          })
        }
      }, 1000)
   
  },



onLoad(options) {
    var shareOpenId = "";
//做一个判断 是否已经存在openid,若存在则是分享人的openid,若不存在则获取openid
    if (options.userShare) { 
      shareOpenId = options.userShare;
      this.setData({
        shareOpenId:shareOpenId
      })
    }else{
      this.info();
    }
    console.log("shareOpenId:",shareOpenId);
    const opid = wx.getStorageSync('openid');
//判断页面是否已经有自己的openid 存在则跳转webview页面
    if(opid){
      wx.navigateTo({
        url: '../logs/logs?openid='+wx.getStorageSync('openid')+"&shareOpenId="+this.data.shareOpenId
      })
    }
  },





4.分享内嵌H5页面

 onShareAppMessage() {
      return {
        title: '分享测试' ,
        // desc: '分享页面的内容',
        imageUrl:"封面图片路径",
        path: '/pages/share/share?userShare=' + wx.getStorageSync('openid')
    }
    }

  • 14
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

努力奋斗在前端的雯雯

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

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

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

打赏作者

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

抵扣说明:

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

余额充值