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

小灰灰 2022-08-28 11:58 650阅读 0赞

> 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 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装在手机上，并且点击右上角的分享按钮就可以分享整个页面了。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5LiAR0c_size_12_color_FFFFFF_t_70_g_se_x_16][]

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA5LiAR0c_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/5677dcd5fa7d4f5e93ad5c3a687b6948.png