web-view的jssdk如何引入vue项目及使用？

小程序文章 2021-03-24 17:22 918  0 全屏看文

web-view的jssdk如何引入vue项目及使用？How to introduce the Vue project and use the jssdk of web-view?

大家好，我遇到个难题，由于当前的H5页面是通过uni的HBuilderX 工具把小程序的项目导出为H5页面，目前是想做个功能，从另外一个小程序的webview 来访问这个H5页面，页面中有个分享按钮，当用户点击的时候要把当前的H5页面的链接分享到用户的微信朋友，目前遇到的难题就是看到官方的webview 的说明文档，也没介绍怎么在Vue里配置和使用jssdk，h5与小程序的通信案例，希望各位大佬帮助一下，感谢

Hello everyone, I have a problem. Because the current H5 page exports the project of the small program as H5 page through the hbuilderx tool of uni, I want to make a function to access it from the WebView of another small program There is a share button in this H5 page. When users click it, they should share the link of the current H5 page with their wechat friends. The current problem is to see the official WebView documentation, and it doesn't introduce how to configure and use jssdk in Vue. I hope you can help me. Thank you

回答：

俊杰Hiro:

看你的描述，你的核心诉求应该是如何在小程序webview中实现：通过触发H5中按钮把当前H5页面分享对吧？这个目前是无法实现的。只能通过小程序右上角的分享。

然后再提供一个H5自定义分享的思路给您：首先jssdk跟用不用vue没有关联，然后可以利用jssdk里的postmessage实现与小程序的通讯。小程序端通过监听接收数据，就可以动态更改分享信息了。

จุ๊บ:

web-view 支持的 JSSDK 接口只有文档这些

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

郑先森:是滴呀，只有这些文字，但是我在Vue里不知道怎么去使用哪些函数，因为文档中的都是在纯的html里操作，在Vue里没有做说明呢

จุ๊บ:引入JSSDK 你要看公众号开发文档啊，不管你前端用什么写，引入方法，调用方式都一样
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

郑先森:

感谢回复，不对呀，大佬，我这个是微信小程序的webview ，不是微信公众号呢，我看它也没说要配置些什么呢

Brother斌🎈:webview里的H5不能用jssdk的分享接口，只能用小程序右上角的分享