一.前因

首先，我其实是个标题党，标题所说的功能受制于微信限制，是没有方案可以在微信里打开的H5页面中直接保存视频到本地或者以视频消息的方式直接分享给好友。图片就没这个烦恼，可以直接长按图片，微信会弹出原生菜单保存或分享图片。如下图所示：

那视频要怎么分享呢？开始我们只能使用折中方案，将视频当作链接消息分享，接入了微信jssdk将视频地址作为链接地址，在页面中用箭头提示用户点击右上角去将地址分享出去，其他用户点击链接会打开浏览器直接播放视频。

二.后果

显而易见，这种方式十分挫，分享人需要被特意引导去分享链接，增加了分享门槛，分享人无法保存本地，没办法随时随地分享，除非他把链接收藏。而且分享出来的是链接消息，不能直观告诉被分享人是个视频，减少被分享人点击的意愿，同样的情况会减少二次分享意愿。所以我们最后还是想找到一种方式能直接把视频分享出去。

三.解决方案

在微信生态里面做事，必须要遵守微信规则（以及要填很多坑，后续再谈）。既然H5没有相关能力，那就只好往小程序找找了。不出所料，小程序的确可以直接保存视频或者分享视频。

具体接口：

转发视频到聊天

保存视频到系统相册

所以摆在眼下的就是如何运用小程序的能力问题了。经过调研总结如下三种方案：

1.在小程序内嵌现有H5

使用小程序的开放能力，内嵌webview加载H5页面，得到视频地址后，从webview页面跳转到小程序原生页面，展示视频并调用相关能力保存或者分享视频。

存在问题：

内嵌后，由于webview限制需要做一些适配等，比如现有的页面链接分享操作需要做调整，无法调用原jssdk接口分享链接消息，需要转为分享小程序卡片。再比如，原先是扫码打开H5，要调整为扫码打开小程序。

优点：

体验相对连贯（对比第2点），分享时只需要做一个小程序内页面跳转（这跳转是由于小程序限制在内嵌webview的页面没法直接调用原生接口，所以需要跳转到一个原生页面处理，也可能是我没找到方法，如果有请告诉我），工作量适中。

2.依然使用H5，只在分享视频时跳转小程序

微信提供了从H5页面直接打开小程序的能力，所以可以在拿到视频链接后，直接带参数跳到小程序，调用小程序能力去保存分享视频。

存在问题：

体验比较割裂，会弹框提示二次确认是否跳转，然后需要单独做一个单纯展示视频以及分享保存的小程序，这种不知道能不能通过审核。

优点：

目前绝大部分流程无需调整，只调整视频分享的逻辑，工作量小。

3.用小程序原生代码或者跨平台框架实现现有功能

存在问题：

移植工作量大。

优点：

体验最优，无需跳转分享，体验最流畅。

四.方案选择

方案选择需要评估自身项目实际情况来决定，比如工期不赶，页面架构简单，移植工作量不大，当然是选择方案三以达到用户体验最优解。

但是很多时候人在江湖，身不由己，做项目也一样，我们最后选择的是方案一，因为时间不是很充裕，而且最重要的是我们使用了一个第三方的库Three.js，用于展示3D模型的，在原生小程序中支持程度不明确（后续做了专门验证的确没法用，效果差），官方移植版本许久未更新，问题多多，另外还有一些民间移植版本效果不明。

所以在调研结束后，我们就选择了方案一，工作量适中，开发风险适中，用户体验适中。

五.结束

在写这篇文章的时候，已经在按方案一去调整了，本来以为正常流程都是和纯H5表现一致，结果发现了很多意想不到的坑，明明在微信浏览器打开H5都正常的，同样代码到了小程序webview打开就异常了，所以后续会对这些坑做一些记录总结。我们前端用的Vue开发，所以后续对微信小程序内嵌webview加载H5的坑总结也是基于Vue。

微信H5保存或下载视频到本地，将视频直接分享视频给好友相关推荐

html+js将文本和图片保存（下载）到本地技术
html+js将文本和图片保存(下载)到本地技术我在博文https://blog.csdn.net/cnds123/article/details/120469779介绍了用html+js读取本地文 ...
H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
微信跳转手机默认浏览器提示微信h5页面中下载第三方app的方法
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载. 可以参考:微信打开网址添加在浏览器中打开提示和 ...
需求：在微信h5页面中下载第三方app —— 安卓，直接下载apk文件包；iphone，跳转AppStore
分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app) 点击查看案例地址变通方法: 一.借助TX的应用市 ...
拼多多直播下载；怎么下载拼多多直播间的视频到本地？拼多多直播视频下载教程拼多多直播下载工具多平台直播下载
现在拼多多的直播视频行业很火爆,想要加入不知道怎么做的: 今天我就和大家说说直播视频的素材如何选取如何下载? 首先我们在拼多多上搜索一下想要的视频:然后用软件(资源通用下载器)下载就可以了. 接下来给 ...
安卓端微信H5下载文件处理：让微信自动弹起跳转外部浏览器窗口
配套视频:https://www.bilibili.com/video/BV1oA411B7gv/ 背景今天鼓捣了一下手机投屏到笔记本,就想录个视频展示一下学习成果,正好就想起了很早之前实现的这个功 ...
微信如何保存文件？企业微信如何下载文件？
我们经常用微信传输文件,用企业微信办公时也需要经常保存和下载文件,如何操作和设置呢? 个人微信如何保存文件? 大家对个人微信传输文件应该非常熟悉了,用"文件传输助手"可以很方便的将 ...
unity android视频录制sdk,Unity中保存EveryPlay录制视频到本地的解决方案
五月 14.2018. 0 Comment 在Unity中使用EveryPlay录制视频时,有如下问题: 1. EveryPlay API(截止到现在,之后Final Version可能会增加)不支持 ...
微信H5视频抓娃娃，没你想的那么难，看完你也会
短短两周时间,在线抓娃娃从一个默默赚钱的行业变成了风口行业,从硬件到软件架构.从盈利到投资.从运营到推广,全方位解读都有了.唯独H5抓娃娃(特指移动web.微信抓娃娃),仍然很神秘. H5抓娃娃真的有 ...
vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...

微信H5保存或下载视频到本地，将视频直接分享视频给好友

一.前因

二.后果

三.解决方案

1.在小程序内嵌现有H5

存在问题：

优点：

2.依然使用H5，只在分享视频时跳转小程序

存在问题：

优点：

3.用小程序原生代码或者跨平台框架实现现有功能

存在问题：

优点：

四.方案选择

五.结束

微信H5保存或下载视频到本地，将视频直接分享视频给好友相关推荐

最新文章

热门文章