学习笔记——uni-app实现简单分享功能

最新推荐文章于 2024-05-11 09:18:20 发布

一一GG

最新推荐文章于 2024-05-11 09:18:20 发布

阅读量4.1k

点赞数

分类专栏：前端学习文章标签： html5 前端前端框架

本文链接：https://blog.csdn.net/qq_41339126/article/details/120506393

版权

前端学习专栏收录该内容

107 篇文章 2 订阅

订阅专栏

uni-app中有分享的API接口，但是需要现在QQ或者微信等开发者平台上注册账号，验证公司信息，而且只能分享图片或者文本等内容。分享API比较简单，但是总体使用起来比较麻烦，对初学者不太友好。

这里我使用了web-view组件来模拟分享功能。

实现思路：

1.通过WebView组件加载页面。

2.页面中接受必要参数，发送请求。最后将页面挂载到服务器上。

3.点击分享按钮，复制页面网络地址，手动粘贴分享到各个平台上。

1.创建web-view组件

其中该组件所在页面，需要配置好需要加载的html页面所需要的数据。

<template>
    <view class="page-container">
        <web-view :src="src"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                src: this.doorWebsiteUrl + "/monitor.html",
                monitorItem: {}
            };
        },
        async onLoad(options) {
            this.monitorItem = uni.getStorageSync("monitorItem")
            
            this.src += "?websiteUrl=" + this.websiteUrl + '&deviceNumber=' 
            + this.monitorItem.ncode + '&name=' +         encodeURIComponent(this.monitorItem.name)
        },
        onUnload() { uni.removeStorageSync("monitorItem") },
        onNavigationBarButtonTap() {
            // #ifdef H5
            uni.showToast({ title: "请在App上使用分享功能", icon: 'none' })
            // #endif
            
            // #ifdef APP-PLUS
            uni.setClipboardData({
                data: this.src,
                success: function () {
                    uni.showToast({ title: "复制成功" })
                }
            });
            // #endif
        }
    }
</script>

注意：最后加载的html网址，一定要是网络地址。最好让运维人员挂在到正式服务器上。

2.写html文件

html文件先写在根目录下hybrid/html文件夹下。最后交给运维人员，放到服务器上。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.15.0/video-js.min.css" rel="stylesheet">
    
    <style type="text/css">
        * { padding: 0; margin: 0; }
        .container {
            width: 100%;
            height: 100%;
        }
        .header-wrapper {
            height: 200px;
            background-color:rgba(0,0,244,0.6) ;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .messageItem {
            margin: 5px 0;
            line-height: 22px;
            color: white;
        }
        
        .title-icon {
            margin: 10px 0;
            padding: 5px 0 5px 10px;
            display: flex;
            align-items: center;
        }
        .leftLine {
        	background: linear-gradient(0deg, #6666f8, #7777f8);
        	width: 5px;
        	height: 15px;
        }
        .titleMess {
        	margin-left: 10px;
        	color: #033333;
        	font-weight: 550;
        	font-size: 15px;
        }
        
        .video-wrapper {
            width: 100%;
            
        }
        #mVideo {
            width: 100%;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-wrapper">
            <span class="messageItem" id="name">测试地址</span>
            <span class="messageItem" id="deviceNumber">设备编号</span>
        </div>
        
        <div class="title-icon">
            <div class="leftLine"></div>
            <span class="titleMess">监控视频</span>
        </div>
        
        <div class="video-wrapper">
            <video
            id="mVideo" controls autoplay muted
            class="video-js vjs-default-skin vjs-big-play-centered">
            </video>
        </div>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.15.0/video.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-hls/5.9.0/videojs-contrib-hls.min.js"></script> -->
    <script type="text/javascript">
        const paramObject = getParam()
        // 获取参数
        function getParam() {
            let obj = {}
            let originUrl = window.location.href
            let newUrl = originUrl.split("?").pop()
            let paramArr = newUrl.split("&")
            
            paramArr.forEach(item => {
                let temp = item.split("=")
                obj[temp[0]] = temp[1]
            })
            
            return obj
        }
        
        $("#name").text(decodeURIComponent(paramObject.name))
        $("#deviceNumber").text(paramObject.deviceNumber)
        
        var airPlayer = null
        
        // 请求数据
        $.ajax({
            url: paramObject.websiteUrl + "/fourCamera/getCameraPlayUrl",
            type: "GET",
            data: {
                deviceNumber: paramObject.deviceNumber
            },
            success: res => {
                if(res.state == "success") {
                    airPlayer = videojs("mVideo", {
                        controls: true, //控件显示
                        autoplay: true, //自动播放
                        preload: "auto",
                        bigPlayButton: true,
                        errorDisplay: true,
                        controlBar: true,
                        hls: true,
                    }, function onPlayerReady() { 
                        airPlayer.src({
                            src: res.data,
                            type: "application/x-mpegURL",
                        });
                        
                        setTimeout(() => { airPlayer.play(); }, 200)
                        
                    })
                }
            },
            error: error => {
                console.log(error)
            }
        })
    </script>
</body>
</html>

3.打包并使用

使用这种方法打包时，就不需要配置分享模块的权限了。将App装在手机上，并且点击右上角的分享按钮就可以分享整个页面了。

注意：需要被分享页面的数据如果来源于接口，尽可能在html文件中发送请求。

一一GG

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
学习笔记——uni-app实现简单分享功能

uni-app中有分享的API接口，但是需要现在QQ或者微信等开发者平台上注册账号，验证公司信息，而且只能分享图片或者文本等内容。分享API比较简单，但是总体使用起来比较麻烦，对初学者不太友好。这里我使用了web-view组件来模拟分享功能。实现思路：1.通过WebView组件加载页面。2.页面中接受必要参数，发送请求。最后将页面挂载到服务器上。3.点击分享按钮，复制页面网络地址，手动粘贴分享到各个平台上。1.创建web-view组件其中该组件所在页面，需要配置好需要加载的..
复制链接

扫一扫