评论

【实战记录】关于web-view的使用记录

wx.miniProgram.postMessage的使用条件要看清楚哦

需求背景:

产品经理希望能做到如下图所示效果(上面直接显示pdf内容,底部显示按钮):

需求分析:

小程序可以下载文件都本地,再预览pdf文件,但是其效果和图片预览的效果一致,皆为全屏显示,如下图所示;这块经过调研,并和产品battle后,最终制定方案为使用web-view的方式来实现这种效果

实现思路:

在第一次查阅https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html文档后发现wx.miniProgram.postMessage是个好东西,想当然的以为在h5中,点击下方按钮时可以调用postMessage向小程序传参了,然后事实并非如此,再次查阅文档发现如下图所示;原来只要再这几个特定的场景时才会触发,我勒个去!!!没办法将所有业务都放在小程序中来写,这个h5只是单纯的接收一下pdf的网络地址并预览,其次再点击立即签约时,通过wx.miniProgram.navigateTo来跳转到下个页面

小结:

看了下社区,这个问题几年前也就有了,虽然条条大路通罗马,还希望官方大大也能关注下这个问题,对咱开发者更有好一些,😁

最后一次编辑于  2022-05-10  
点赞 20
收藏
评论

11 个评论

  • 细水长流
    细水长流
    2022-07-25

    我更天真,我以为直接写个bindmessage事件监听就OK了,没想到还要专门为小程序写个postMessage。

    2022-07-25
    赞同 2
    回复 1
    • Frank
      Frank
      2022-07-25
      哈哈,还是仔细看文档的
      2022-07-25
      回复
  • 爱吃番茄的橘子猫
    爱吃番茄的橘子猫
    2022-10-27

    你h5展示pdf用的什么呀我现在是pdfh5.js

    2022-10-27
    赞同
    回复 1
    • Frank
      Frank
      2022-10-27
      是的,我这也是用的pdfh5.js
      2022-10-27
      回复
  • 爱吃番茄的橘子猫
    爱吃番茄的橘子猫
    2022-10-27

    请问你是webvie src地址直接是pdf的在线地址啊?

    2022-10-27
    赞同
    回复 1
    • Frank
      Frank
      2022-10-27
      src 是h5页面的地址,然后把pdf的参数decode下,拼在参数里
      2022-10-27
      回复
  • 老罗
    老罗
    2022-10-25

    没有实例对于初学者,看不懂

    2022-10-25
    赞同
    回复
  • 2022-07-13

    请问后面实现了吗?代码可以分享吗?

    2022-07-13
    赞同
    回复 3
    • Frank
      Frank
      2022-07-13
      我这里最终把业务都放在小程序中来做了,这个webview只做pdf预览
      2022-07-13
      回复
    • 2022-07-14回复Frank
      好的,谢谢
      2022-07-14
      回复
    • 人生短短急个球啊
      人生短短急个球啊
      01-24回复Frank
      webview会自动铺满屏幕,那你怎么把下面的按钮加到同一个页面中去的?
      01-24
      回复
  • 夏天
    夏天
    2022-07-13

    后来 底下加签约按钮有实现吗?

    2022-07-13
    赞同
    回复
  • 崔前明
    崔前明
    2022-05-17

    plus

    2022-05-17
    赞同
    回复
  • brave
    brave
    2022-05-16

    【小号】:牛逼+2

    2022-05-16
    赞同
    回复 1
    • Frank
      Frank
      2022-05-16
      哈哈哈哈
      2022-05-16
      回复
  • 陈某人
    陈某人
    2022-05-16

    NB

    2022-05-16
    赞同
    回复
  • 波风
    波风
    2022-05-16

    牛逼+1

    2022-05-16
    赞同
    回复

正在加载...

登录 后发表内容