背景:最近在逐步完善一个uniapp项目的视频功能,
包括有视频录制及发布,在完善过程中想要实现分享
视频到微信的功能,也就是相当于分享链接到微信,
微信打开后可以获取到视频并可以观看,有了想法便
准备实行,但是由于没做过,中间也走了很多弯路,
特此记录一下。
一、查看官网文档
首先在准备实现这个功能时我们想到的肯定是看看uniapp
官网是怎么写的,方便我们学习模仿
uniapp分享相关api
1.1、查阅官网的api,与我们现有的对比选择使用uni.share就行,根据api写的代码我放在下面,大家可以参考一下。
//页面模板如下:
<view @tap="share('WXSceneTimeline')" class="sharewayitem"><image class="shareimg" mode="widthFix" src="../../../static/images/pengyouquan.png"></image><text class="txt">微信朋友圈</text></view><view @tap="share('WXSceneSession')" class="sharewayitem"><image class="shareimg" mode="widthFix" src="../../../static/images/weixingreen.png"></image><text class="txt">分享给好友</text></view>
//方法处理逻辑如下:(xxx.xxx.xxx是自己服务器的域名,这个下面一会有说明)
share(scene) {uni.share({provider: "weixin",scene: scene,type: 4,mediaUrl: "https://xxx.xxxxx.xxx/h5/#/pages/index/xxh5?id="+this.id,title: this.title,imageUrl: this.imgurl,success: function (res) {console.log("success:" + JSON.stringify(res));},fail: function (err) {console.log("fail:" + JSON.stringify(err));}});},
1.2、这个最开始我是直接把阿里云上视频的地址(我们使用的是阿里云的OSS)放在了mediaUrl那里,我以为这样就可以分享后直接看到视频内容,但是实际上不是的,把文件存储地址放在这里分享后是不能直接看到的,打开后是让你下载这个视频,查看阿里云官方的说明,是要求做域名绑定之类的很多内容,而且个人感觉即使这样做完之后打开的页面也不确定是否满足需求(通过设置HTTP头管理OSS文件元数据_对象存储(OSS)-阿里云帮助中心 (aliyun.com),大家感兴趣可以自己研究一下)、
二、转变思路,构建使用h5页面放在服务器上访问这些页面
2.1、方法行不通后我们只能换一种思路,我们可以尝试将项目的几个页面打包构建好后放在服务器上,这样我们访问链接在打开的实际就是这几个页面,通过URL携带的参数在服务器上查询渲染之后同样获取到视频内容展现出来。
2.2、接下来我们将思路变成如何把uniapp的某几个页面打包构建放在服务器上并设置好域名,方便浏览器访问
三、页面选择
manifest.json中的web配置(h5配置)中这样设置
3.1、如果说,我们只需要整个项目中的某几个页面可以在浏览器访问到,其余页面无需做h5该怎么做?经过试验,我们只要把uniapp项目的pages.json文件中的pages路径那些不需要的给删掉就行,比如说,我原本项目中有40多页面,我需要分享到微信能打开的也就5个页面,那我们把其余的路径给删了,只保留这几个Path,然后打包就行
四、打包步骤
4.1、我们使用hbuilderX,点击上方的发行按钮,选择网站-PC Web......,
4.2、这里的标题应该是网页打开后上方显示的内容,域名就是上面输入的访问这个页面的URL的域名,然后输入完直接点击发行即可。
4.3、打包完成后我们可以在控制台看到我们生成的网页文件的目录地址,我们打开,把这个h5文件夹放在我们的服务器目录的public下
4.4、服务器重启后,我们就可以通过链接访问到这几个页面了
五、访问的链接是什么?
访问的链接也很简单:
5.1、如果你uniapp的manifest.json中启用了https协议:
https://你设置的域名/h5/#/你的pages.json中设置的页面的path路径,
5.2、如果你uniapp的manifest.json中没启用https协议,自然就是:
http://你设置的域名/h5/#/你的pages.json中设置的页面的path路径,
(最后:如果有参数的话记得后面加上“?参数=xxx”,也有的是链接中间没加#,但是我这里别的页面都加了,可以自己都试一试,最后我们把这个链接放在uni.share的mediaUrl那里就完成啦!)