实现：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那里就完成啦！)