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