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>
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>
本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

浙公网安备 33010602011771号