当前位置: 首页 > news >正文

实现:uniapp项目分享视频页面到微信,可以自定义分享的页面样式及内容

背景:最近在逐步完善一个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那里就完成啦!)

http://www.lryc.cn/news/423208.html

相关文章:

  • 【C++】—— 类与对象(五)
  • scp命令的使用
  • 定位和解决线上接口性能优化或者数据库性能优化的思路是什么?
  • 修改docker的/var/lib/docker/overlay2储存路径
  • 解决中国式报表难题,这款工具真的免费且好用
  • 图解Kafka | 彻底弄明白 Kafka 两个最重要的配置
  • 创建线程的三种方式
  • 官宣|Apache Flink 1.20 发布公告
  • HarmonyOS应用一之登录页面案例
  • KubeSphere 部署 Kafka 集群实战指南
  • 手把手教你安装音乐制作软件FL Studio 24.1.1.4285中文破解版
  • SDL 与 OpenGL 的关系
  • 考研数学 线性代数----行列式与矩阵
  • Golang实现简单的HTTP服务,响应RESTful请求判断形状大小
  • 使用C语言构建Lua库
  • 愤怒的江小白,这几年怎么了?
  • Unity教程(十)Tile Palette搭建平台关卡
  • 如何防止员工私自拷贝公司内部文件?安企神帮你解决泄密之忧
  • Linux应急响应检查工具
  • CP AUTOSAR标准之EEPROMAbstraction(AUTOSAR_SWS_EEPROMAbstraction)(更新中……)
  • 重启redis服务时报错:Failed to start redis.service: Unit not found
  • Hive3:识别内部表、外部表及相互转换
  • Android笔试面试题AI答之Kotlin(7)
  • 高辐照整车太阳辐照模拟系统试验舱
  • 如何制作优秀的年终总结PPT?
  • 架构师第六周作业
  • 解密Java中介者模式:代码实例带你深入理解
  • 19c做好这件事,大幅提升Data Pump工作效率
  • 6种常用的AR跟踪方法
  • HBO引爆血腥浪漫,尺度全开必看的影视剧推荐