因为需求原型现在需要在微信小程序上web-view访问一个h5页面,由于小程序这边的限制,想要实现需要通过两边的交互来达到效果,具体看以下操作:
一、h5页面准备工作
1.我这边的h5页面是使用vant开发的,所以在引入小程序jssdk方式上是使用import导入的;代码如下
import wx from "weixin-js-sdk";//引入小程序jssdk
Vue.prototype.$wx = wx;//挂载在prototype上,方便直接this.$wx可以使用
最后不要忘记npm 一下依赖包
2.在具体需要实现下载的页面方法上判断是否处于小程序环境,并进行路由跳转传参;其中在路由url上拼接上我们所需要的参数
二、微信小程序准备工作
1.pages目录下新建一个用于下载文件的文件夹,例如file-download文件夹新建相关页面文件,配置好app.json中的路由导航地址;
2.在ile-download文件下操作file-download.js,我这边偷懒直接在onLoad方法上实现,话不多说上代码
wx.downloadFile这个api中,url是要请求文件资源的请求地址,filePath是自定义存储的文件路径,这个配置很重要,只有设置了filePath才能实现小程序中的文件预览和下载,fileName是我们从h5页面那边那过来的文件名,跟wx.env.USER_DATA_PATH拼接一下就组成了一个自定义的下载地址,下载成功在success回调中获取filePath(其实是我们自定义的地址),然后调用wx.openDocument打开我们要预览的文件,最后在预览文件中选择保持文件到本地;随手调试代码,我就不规范了,看着来吧;