博客

起始因为公司要做一个小程序到钉钉上，需要传输文件，无奈钉钉小程序的文档上面只告诉我怎么打开发送图片，我要传的是excel。

找了半天找不到打开文件夹的方法，就只有个上传文件的方法。。（懂的都懂）

只能使用web-view来解决了（开始踩雷）

遇到的问题：

1.官方案例的传值：

<web-view id="web-view-1" src="https://open.dingtalk.com/mobile" onMessage="test"></web-view>

这里就是所在钉钉小程序的弄个页面，使用这个标签，就可以打开一个指定网页

onMessage里的内容是js页面接收web-view数据的方法名

接下来写js中的方法

Page({
  webViewContext:'',
  data: {
    message : {
      token: ''
    }
  },
  onLoad(options) {
    // console.log(options.data)
    this.webViewContext = dd.createWebViewContext('web-view-1'); 
    this.setData({
      message:{
        token: app.token
      }
    })
    // console.log(app.token
  },
  test(e){
    console.log(e)
    this.webViewContext.postMessage({'sendToWebView': this.data.message});
  }
});

（示例代码中，是没有加webViewContext: ’ ‘这个声明的，也是因为没有加，导致我测试时只能接收到网页给小程序传递的信息，无法从小程序传递信息给网页）


钉钉文档中提示说要web-view要接一个html5的页面，但是我是用的一个

Vue页面

，所以我把它的js代码引用在了index.html中（我.菜鸡行为）

<!-- html -->
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// 如该H5页面需要同时在非钉钉客户端内使用，为避免该请求404，可参考以下写法
// 请尽量在html头部执行以下脚本
<script>
  if (navigator.userAgent.toLowerCase().indexOf('dingtalk') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  }

// javascript
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script>
  if (navigator.userAgent.toLowerCase().indexOf('dingtalk') > -1) {
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
  }
  // javascript
  // dd.navigateTo({url: '/Pages/home/index'})
  let token = '0'
  // 网页向小程序 postMessage 消息
  dd.postMessage({name: token})


  // 接收来自小程序的消息。
  window.dd.onMessage = function (e) {
    if (token === '0') {
      // window.dd.postMessage({name: e})
      window.sessionStorage.setItem('msg', JSON.stringify(e))
      token = e
      window.eventBus.$emit('msg', e)
    }
    // {'sendToWebView': '1'}

  }
</script>

小程序和web-view的通信顺序在钉钉文档里没有写清楚，但是在支付宝小程序中，写明白了，

先是小程序接收到网页发送过来的信息，然后再小程序给网页发送信息


注释的

window.dd.postMessage({name: e})

就是为了验证网页是否拿到传递过来的值

2.传值问题

在index中拿到值之后，如何把token拿过去，这件事情用了我挺久时间，在index中使用

window.eventBus.$emit('msg', e)

再在main.js中注册

//  ========注册全局事件总线
window.eventBus = new Vue()

接下来在上传文件的页面获取

 window.eventBus.$off('msg') // 关闭上一次的监听
        window.eventBus.$on('msg', (res) => {
          thiz.msg.token = res.sendToWebView.token
        })

在模拟器上顺顺利利的运行了一遍，

我以为这样就万事大吉了、、、、

结果！！！

我放到真机上模拟，怎么都拿不到值，我就通过测试发现，eventBus根本无法执行，我就得尝试其他方法，然后我使用sessionStorage

  window.sessionStorage.setItem('msg', JSON.stringify(e))

接收

this.msg.token = msg.sendToWebView.token

结果。。。模拟器接收不到值（项目没用到vuex，我也不咋会）

我又重试了其他几种方法，都是模拟器没值，我第二天早上一想，是不是模拟器接收不到，真机能接收到，我就从新把sessionStorage写上去，手机运行了一遍，

拿到值了

，TMD，泪目，这什么玩意啊，模拟器跟真机还是相反的，你拿不到我拿的到，你拿得到我拿不到，最后写下这一记录，钉钉小程序文档是真的XX！