武冈企业建站,电商平台网站制作,qq空间转wordpress,莱芜金点子保安最新招聘信息背景#xff1a;最近在逐步完善一个uniapp项目的视频功能#xff0c;
包括有视频录制及发布#xff0c;在完善过程中想要实现分享
视频到微信的功能#xff0c;也就是相当于分享链接到微信#xff0c;
微信打开后可以获取到视频并可以观看#xff0c;有了想法便
准备实行…背景最近在逐步完善一个uniapp项目的视频功能
包括有视频录制及发布在完善过程中想要实现分享
视频到微信的功能也就是相当于分享链接到微信
微信打开后可以获取到视频并可以观看有了想法便
准备实行但是由于没做过中间也走了很多弯路
特此记录一下。
一、查看官网文档
首先在准备实现这个功能时我们想到的肯定是看看uniapp
官网是怎么写的方便我们学习模仿
uniapp分享相关api
1.1、查阅官网的api与我们现有的对比选择使用uni.share就行根据api写的代码我放在下面大家可以参考一下。
//页面模板如下
view tapshare(WXSceneTimeline) classsharewayitemimage classshareimg modewidthFix src../../../static/images/pengyouquan.png/imagetext classtxt微信朋友圈/text/viewview tapshare(WXSceneSession) classsharewayitemimage classshareimg modewidthFix src../../../static/images/weixingreen.png/imagetext classtxt分享给好友/text/view
//方法处理逻辑如下xxx.xxx.xxx是自己服务器的域名这个下面一会有说明
share(scene) {uni.share({provider: weixin,scene: scene,type: 4,mediaUrl: https://xxx.xxxxx.xxx/h5/#/pages/index/xxh5?idthis.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那里就完成啦)
