调研内容

通过小程序和H5网页数据交互，打通小程序和对应公众号的用户关系

调研结果

可以通过互传openId的方式，通过加密字符串的校验，可以实现数据互通，这个数据并不是百分百准确，但是具有一定的可靠性

实例

通过组件web-view来实现，属性src，具体代码如下

入口页：有一个确认跳转的弹窗

model/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady: function() {
  //将小程序用户的openId保存
  wx.setStorageSync('miniOpenId', '12345656777888');
  wx.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success(res) {
      if (res.confirm) {
        console.log('用户点击确定')
        var i = 0;
        if (i = 1)
          wx.navigateTo({
            url: '/index/index'
          })
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
},

web-view加载页面

index/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Page({
  /**
   * 页面的初始数据
   */
  data: {
    miniOpenId:'',
    url: ''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    //获取保存的小程序用户openId
    var miniOpenId = wx.getStorageSync('miniOpenId');
    //设置页面加载需要的参数
    that.setData({ url: 'https://abc.cn/demo/auth2/code' });
    that.setData({ miniOpenId: miniOpenId });
    console.log(miniOpenId);
    
  },
  //接收h5发送的数据
  //需要注意，只有在特定时间点才能触发该方法
  postMessage(e) {
    console.log(1)
    console.log(e.detail.data[0])
    console.log(e.detail.data[0].openId)
    console.log(e.detail.data[0].count)
  }
})

index/index.wxml页面

1
2
3
4
5
6
7
<view class="page-body">
  <view class="page-section page-section-gap">
    <web-view src="{{url}}?miniOpenId={{miniOpenId}}" bindmessage="postMessage">
    <p >请稍等....</p>
    </web-view>
  </view>
</view>

微信授权页面 auth.html,这是在springboot下的thymeleaf页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></meta>
    <title>WebView测试</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- jssdk依赖 -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" type="application/javascript"></script>
</head>
<body>
<div>
    <h1 align="center">小程序WebView测试</h1>
    <div align="center" style="background-color: aquamarine;margin:10px;padding: 10px;width: auto;height: 180px;align-content: center">
        <button style="width: 320px;height: 180px;font-size: xx-large" onclick="comeback1()"><h1>原页面</h1></button>
        <button style="width: 320px;height: 180px;font-size: xx-large" onclick="comeback2()"><h1>重定向</h1></button>
    </div>
</div>
<script th:inline="javascript">
    //后端传的openId
    var openId = [[${openId}]];
    console.log(openId);
    var count = 1;
    //发送数据到小程序
    wx.miniProgram.postMessage({ data: {"openId": openId,"count":count} })
    //原路返回
    function comeback1() {
        wx.miniProgram.navigateBack()
    }
    //重定向到新页面
    function comeback2() {
        wx.miniProgram.redirectTo({url: '/m2/index'})
    }
</script>
</body>
</html>

代码放到csdn上了，https://download.csdn.net/download/defxino/10811121
如果没积分就给我发邮件吧，主题中说明是干嘛的，我会给你发,mailto:dujc1018@gmail.com

里面有很多坑，需要慢慢踩！