后端菜鸡开发钉钉小程序使用web-view传token到Vue遇到的坑

最新推荐文章于 2025-06-09 12:01:55 发布

原创

最新推荐文章于 2025-06-09 12:01:55 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #js #前端

本文记录了一位后端开发者在使用钉钉小程序开发过程中遇到的困难，主要涉及通过web-view组件在小程序和Vue页面间传递token的问题。作者详细描述了在实现过程中遇到的坑，包括官方示例的不完整、通信顺序的模糊以及模拟器与真机环境的差异，最终通过sessionStorage找到了解决方案。

起始因为公司要做一个小程序到钉钉上，需要传输文件，无奈钉钉小程序的文档上面只告诉我怎么打开发送图片，我要传的是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: