uni 分享打开第三方小程序指定页面 短链生成二维码 二维码分享好友

难点1:怎么在自己小程序拿到其他小程序短链
难点2:怎么通过短链生成二维码
难点3:怎么通过短链 点击自动打开第三方小程序的某个页面
难点4:不是通过右上角的三个点触发 而是自己点击按钮进行触发分享
难点5:引入第三方插件
难点6:base64转小程序本地图片
难点7:分享本地图片给微信好友

附完整代码:

<template>
    <view class="user-content content_box2">
        <view class="user-header">
            <image class="header-bg" src="../../static/img/bg/userBg.png" />
            <view style="display: flex;">
                <view class="user-info flex">
                    <view class="user_photo"><image src="../../static/img/empty/userPhoto.png"></image></view>
                    <view class="flex_col flex_cen" style="margin-left: 30rpx;">
                        <text class="user-name" user-select>{{ userInfo.name }}</text>
                        <text class="user-phone" user-select>{{ userInfo.mobile }}</text>
                    </view>
                </view>
                <view style="position: absolute;top: 7%;right: 5%;">
                    <view style="font-size: 14px;border-radius: 20px;font-weight: 700;color: #e06363;padding:10px;border: 1px solid #e06363;" @click="toSJ">邀请司机注册</view>
            </view>
        </view>

        <view  style="width: 100%;height: 100%;position: fixed;top: 0;opacity: .8;background: #999;display: none;">
            <uqrcode ref="uqrcode" canvas-id="qrcode" auto="true" :value="imgUrl" :options="{ margin: 10 }" @complete="complete($event)"></uqrcode>
        </view>
    </view>
</template>

<script>
import { userMobileOperation } from '../../api/apiList.js';
import { TokenPrefix } from '../../publicConfig/config.js';
export default {
    options: { styleIsolation: 'shared' },
    data() {
        return {
            userInfo: {},
            YQnum: 0,
            isShowImg: false,
            imgUrl: '',
            bendiUrl: ''
        };
    },
    onLoad: function(options) {
        
    },
    methods: {
        base64ToFilePath(base64data, fun) {
            const base64 = base64data; //base64格式图片
            const time = new Date().getTime();
            const imgPath = wx.env.USER_DATA_PATH + '/addFriends' + time + 'share_qrcode' + '.png'; //去掉data:image/png;base64,如果图片字符串不含要清空的前缀,可以不执行下行代码.
            const imageData = base64.replace(/^data:image\/\w+;base64,/, '');
            const file = wx.getFileSystemManager();
            file.writeFileSync(imgPath, imageData, 'base64');
            fun(imgPath);
        },
        complete(e) {
            if (e.success) {
                const ref = this.$refs['uqrcode'];
                ref.toTempFilePath({
                    success: res => {
                        this.base64ToFilePath(res.tempFilePath, filePath => {
                            wx.showShareImageMenu({
                                //分享给朋友
                                path: filePath,
                                success: res => {
                                    console.log('分享成功:', res);
                                },
                                fail: err => {
                                    console.log('分享取消:', err);
                                }
                            });
                        });
                    }
                });
            } else {
                console.log('生成失败');
            }
        },
        toSJ() {
            uni.request({
                url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret`,
                method: 'GET',
                header: {
                    'content-type': 'application/json'
                },
                success: res => {
                    let token = res.data.access_token;
                    let data = {
                        path: 'pages/login/register',
                        query: `diaoduId=${this.userInfo.userExt.user_gid}`,
                        is_expire: true,
                        expire_type: 1,
                        expire_interval: 1,
                        env_version: 'release'
                    };
                    uni.request({
                        url: `https://api.weixin.qq.com/wxa/generate_urllink?access_token=` + token,
                        method: 'POST',
                        data,
                        header: {
                            'content-type': 'application/json'
                        },
                        success: res => {
                            this.imgUrl = res.data.url_link;
                            // this.isShowImg = true
                        },
                        fail: () => {
                            uni.showToast({
                                icon: 'none',
                                title: '服务异常,请稍后重试',
                                duration: 3000
                            });
                        }
                    });
                },
                fail: () => {
                    uni.showToast({
                        icon: 'none',
                        title: '服务异常,请稍后重试',
                        duration: 3000
                    });
                }
            });
        },
        
    }
};
</script>

<style lang="scss" scoped>
.content_box2 {
    overflow: scroll;
    height: 100vh;
}
.user-content {
    .user-header {
        height: 288rpx;

        .header-bg {
            width: 100%;
            height: 100%;
        }

        .user-info {
            position: absolute;
            top: 5%;
            left: 4%;
            font-size: 36rpx;
            color: #ffffff;
            .user_photo {
                width: 160rpx;
                height: 160rpx;
                border: 2rpx solid #edf5ff;
                border-radius: 50%;
                background-color: #dbe2fb;
                image {
                    width: 158rpx;
                    height: 158rpx;
                    background-size: 100%;
                    background-position: center;
                    background-repeat: repeat;
                }
            }

            .user-name {
                margin-bottom: 10rpx;
            }
        }
    }

    /deep/.edit-password {
        background: #ffffff;
        padding: 40rpx;
        padding-bottom: 80px;

        .u-cell__body {
            padding: 0;
            background-color: #ffffff !important;
        }

        .u-line {
            margin: 16rpx 0 !important;
        }

        .t-icon {
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
        }
    }

    .exit-login {
        color: #8c8c8c;
        position: fixed;
        /* #ifdef H5 */
        bottom: 140rpx;
        /* #endif */
        /* #ifdef MP */
        bottom: 40rpx;
        /* #endif */
        width: 686rpx;
        height: 96rpx;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 48rpx;
        border: 2rpx solid #8c8c8c;
        line-height: 96rpx;
    }
}
</style>
vue文件

 

 

uqrcode中间自定义logo

<uqrcode
ref="uqrcode"
canvas-id="qrcode"
auto="true"
:value="imgUrl"
:options="{
margin: 10,
foregroundImageSrc: '/static/img/bg/sijiduan.png',
}"
@complete="complete($event)"
></uqrcode>

posted @ 2024-04-07 11:09  阿蒙不萌  阅读(50)  评论(0编辑  收藏  举报