微信小程序内嵌H5页面获取openid+分享功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序内嵌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页面文章来源地址https://www.toymoban.com/news/detail-855858.html

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

到了这里，关于微信小程序内嵌H5页面获取openid+分享功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！