微信小程序之短连接 分享转发 点击短连接就可以直接打开小程序某个页面

article/2025/10/9 7:35:33

微信小程序之短连接 分享转发 点击短连接就可以直接打开小程序某个页面

首先,小程序官网地址:https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/short-link/generateShortLink.html#%E8%B0%83%E7%94%A8%E6%96%B9%E5%BC%8F

官网有个错误:
在这里插入图片描述
我就随便试了试 pages前面不加 / 居然成功了!!!
这个官网示例竟然有/ 害我一上午!!!

话不多说,上代码:
实现效果图:需要分享的页面,复制链接功能
在这里插入图片描述
html:我这里是个弹层

<view class="infoboxtan sharetanbox" wx:if="{{issharetan}}"><view class="tanmain"><view class="sharetopbox"><view class="sharetxt">分享到</view><view class="shareicobox"><view class="wximgbox"><image mode="aspectFill" src="http://www.meitang.cn/static/img/images/share_weixin.png" class="wximg" alt="" /><view class="wximgtxt">微信好友</view><button open-type="share" class="sharetap"  /></view><view class="wximgbox" bindtap="getaccess_token"><image mode="aspectFill" src="http://www.meitang.cn/static/img/images/share_fuzhi.png" class="wximg" alt=""  /><view class="wximgtxt">复制链接</view><!-- <button open-type="share" class="sharetap"  /> --></view>          </view></view><view class="sharequxiao" bindtap="sharequxiaotap">取消</view></view></view>

css: less格式

.infoboxtan {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);z-index: 999;.close {display: block;position: absolute;width: 30rpx;height: 30rpx;top: 20rpx;right: 20rpx;z-index: 2}.tanmain {background: #fff;position: absolute;top: 50%;left: 50%;width: 680rpx;height: 490rpx;margin: -200rpx 0 0 -340rpx;border-radius: 10rpx;}
}.sharetanbox{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;// background:rgba(0,0,0,0.8);.tanmain{position:fixed;// bottom: 0;// left: 0;// margin: 0;// width:100%;height: 400rpx;background: #f7f7f7;// border: 20rpx;// border-top-left-radius: 10rpx;// border-top-right-radius: 10rpx;overflow: hidden;.sharetopbox{position: relative;margin: 0 100rpx;.sharetxt{font-size: 40rpx;color: #333;font-weight: bold;line-height: 50rpx;margin-top: 40rpx;}.shareicobox{position: relative;width: 400rpx;margin: 30rpx auto 0;display: flex;flex-direction: row;justify-content: space-between;// margin-left: 40rpx;.wximgbox{position: relative;width: 150rpx;height: 150rpx;// margin-right: 6 0rpx;.sharetap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;z-index: 2;}.wximg{display: block;margin: 0 auto;width: 100rpx;height: 100rpx;// margin-right: 60rpx;}.wximgtxt{font-size: 30rpx;color: #333;// font-weight: bold;line-height: 50rpx;text-align: center;}}}}.sharequxiao{position: relative;width: 100%;height: 100rpx;background: #fff;font-size: 30rpx;color: #333;// font-weight: bold;line-height: 100rpx;text-align: center;margin-top: 35rpx;}}
}

js:

const myUrl = require("../../../../utils/requst/url.js");
import { getRentInfo, loupanSign, getRentList, addcollection, delCollection, setzhuanfa, setLiulan } from '../../../../utils/requst/api.js'
data: {isdenglutan: false,issharetan: false,access_token: '',},
onLoad: function (options) {
this.getaccess_token();
// 获取当前页面url+参数 后边需要const pages = getCurrentPages(); 				//前两句不要忘记写const currentPage = pages[pages.length - 1] 	//前两句不要忘记写const url = currentPage.route// const options = currentPage.optionslet urlWithArgs = `/${url}?`let canshu = '';for (let key in options) {const value = options[key]urlWithArgs += `${key}=${value}&`canshu += `${key}=${value}&`}urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)canshu = canshu.substring(0, canshu.length - 1)this.setData({urlWithArgs: urlWithArgs,canshu: canshu})console.log(urlWithArgs);console.log(canshu);
}
//这里请求access_token
getaccess_token: function () {wx.request({url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=写自己小程序的appid&secret=写自己小程序的secret (查找方式同appid)',data: {// page_url: e.detail.encryptedData,// // access_token: e.detail.iv,// page_title: this.data.title,// is_permanent: false,},method: "get",header: { 'content-type': 'application/json' },dataType: 'json',//请求头设置,根据需要自己设置success: (res) => {console.log(res);this.setData({access_token: res.data.access_token})// console.log(this.data.access_token);},fail: (err) => {// console.log(err);// wx.hideLoading();// wx.showToast({//   title: '登录失败!系统错误,请重试!',//   icon: 'none',//   durtion: 2000// })}})},
//这里复制 短连接sharecopylink: function () {let _this = this;let pagelink = this.data.urlWithArgs + '&sharewxid=' + this.data.wxid;pagelink = pagelink.slice(1);console.log(pagelink);wx.request({url: 'https://api.weixin.qq.com/wxa/genwxashortlink?access_token=' + this.data.access_token,//请求的接口data: {// 'page_url': 'pages/newhouse/pages/newhouse/newhouse?areaid=3','page_url': pagelink,// 'access_token': this.data.access_token,'page_title': this.data.r_title,'is_permanent': false,},//请求的参数,如name和idheader: { 'content-type': 'application/json' },//请求头设置,根据需要自己设置method: 'POST',//请求方式dataType: 'json',responseType: 'text',success: (res) => {console.log(res);if (res.statusCode == 200) {wx.setClipboardData({data: res.data.link,  // 返回的短链接success: function success () {wx.showToast({  // 弹框提示title: '复制成功!'});_this.setData({issharetan: false,})// wx.getClipboardData({//   success (res) {//     console.log(res.data) // data//   }// })}});}},//成功的回调fail: () => {wx.showToast({title: '系统错误,请联系攻城狮!',icon: 'none',durtion: 2000})},//失败的回调complete: () => { }//请求后的执行的函数});},

其实这就完事了,得到短连接了!!!
成功了!
在这里插入图片描述
但是吧。。。。。。。!!!你不能上线啊,腾讯不让你这样上线啊!!!
小程序后台-开发管理-开发设置里面需要写这个,相信做过成功上线的小程序都知道这个吧!
在这里插入图片描述
为啥呢?小程序有人家的理由啊!
在这里插入图片描述
那咋办呢?请求开发加入吧。。。。。。。
开发人员怎么做就让他们百度去吧~
加油!!!

开发人员的解决办法来啦!!!

首先接口:我这里是封装过的接口,至于怎么封装接口自己查哦。。


getaccess_token: function () {let _this = this;let pagelink = this.data.urlWithArgs + '&sharewxid=' + this.data.wxid;pagelink = pagelink.slice(1);console.log(pagelink);let params = {page_url: pagelink,// page_title: '1111',title: this.data.title,}console.log(params);access_token(params).then((res) => {console.log(res);if (res.statusCode == 200) {//由于之前开发给的是字符串里面有对象,这个样子   '{data...}' ,开发偷懒,让我转换于是就有了下面这一堆;// let fuzhilink = res.data.data;// fuzhilink = JSON.parse(fuzhilink);// console.log(fuzhilink);// let returnData = unescape(fuzhilink.link.replace(/\\u/g, '%u'));//将unicode转为字符串// console.log(returnData)// // returnData = JSON.parse(returnData);//字符串转为对象// console.log(returnData);//但是这么做不行啊!开发给过来的 标题是Unicode码了,他说腾讯接口就是这么给他的,#小程序://美堂/\u4e1c\u65b9\u4e3d\u***/ltNGgN0XajckcBi//于是我就转码,但是腾讯限制了20字符,转码出来打不开啊,于是开发想了个办法,他去拼一下中间的标题名称!!!// 恍然大悟!!! 终于出坑了!!!#小程序://美堂/买房房价租房新房二手房/(优选必看)样板间装修,双卫,南向,急售,价格可议/CqwpBrHawzq0uZb//复制口令wx.setClipboardData({data: res.data.data.link,success: function success () {wx.showToast({  // 弹框提示title: '复制成功!'});_this.setData({issharetan: false,})// wx.getClipboardData({//   success (res) {//     console.log(res.data) // data//   }// })}});}})},

在这里插入图片描述
完美!perfect!


http://chatgpt.dhexx.cn/article/FLZYy3jD.shtml

相关文章

uniapp小程序分享转发功能

1、当前页面使用转发按钮 官网的介绍 <button type"default" open-type"share" ShareAppMessage"onShareAppMessage()" class"share-btn">转发</button>data(){ return{//设置默认的分享参数share:{title:活动分享,path:…

小程序携带参数转发

小程序携带参数转发 在项目中有做一个需求&#xff0c;老师转发一张图片&#xff0c;学生登录的时候要获取老师转发图片中的信息&#xff0c;这个信息就要在转发的路径path中定义。 需要转发的图片&#xff1a; 上图绿色部分的文字需要发送一个request才能获取到&#xff0c;前…

微信小程序 转发分享功能

转发 获取更多转发信息 通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息&#xff0c;例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true &#xff0c;当用户将小程序转发到任一群聊之后&#xff0c;此转发卡片在群聊中被其他…

小程序之 实现转发/分享功能

1.点击右上角转发菜单实现转发/分享 点击右上角胶囊按钮的转发菜单 2.点击’转发’ 3. 最终效果如图所示: wxml部分代码如下: <text>hello world!</text>js部分代码如下: onShareAppMessage: function (res) {console.log(res.from)return {title: 标题标题标…

微信小程序如何实现转发/分享功能

在微信小程序的开发中&#xff0c;我们经常遇到把当前页面转发给好友的需求。并且大部分时候&#xff0c;转发的页面都是带参数的。这里面坑还是比较多的。 <button open-type"share" type"primary">分享给好友</button>首先我们先写一个butto…

微信小程序 转发功能实例讲解

▽ 背景 最近在开发小程序过程中&#xff0c;需要设计一个 “好友代付” 的功能&#xff0c;目的就是点击按钮&#xff0c;引导微信用户转发此页面到好友或微信群中&#xff0c;让对方帮你付款 ▼ 知识讲解 ①. 首先&#xff0c;开发前的重要一步就是&#xff0c;阅读小程序…

微信小程序 转发功能的实现

微信小程序 转发功能的实现 1.当用户将小程序转发到任一群聊之后&#xff0c;可以获取到此次转发的 shareTicket 2.此转发卡片在群聊中被其他用户打开时&#xff0c;可以在 App.onLaunch() 或 App.onShow 获取到另一个 shareTicket 3.两步获取到的 shareTicket 均可通过 wx…

uniapp开发的微信小程序之实现转发功能以及页面跳转传递、接收对象

效果图&#xff1a; 转发功能&#xff1a; <template><view class"container"><button class"share-btn" open-type"share">转发</button></view> </template><script> export default {data() {re…

微信小程序转发功能

微信小程序转发涉及以下4个方法&#xff1a; 1、Page.onShareAppMessage({}) 设置右上角“转发”配置&#xff0c;及转发后回调函数返回 shareTicket 票据 2、wx.showSahreMenu() 用户点击右上角后&#xff0c;显示“转发”按钮 3、wx.hideShareMenu() 隐藏转发按钮&#xff0…

微信小程序开发实战9_2 小程序页面转发

小程序页面转发是小程序分享的一个重要方式&#xff0c;在设计小程序应用时就需要考虑那些页面需要实现转发功能&#xff0c;以及页面的转发参数。本节介绍如何进行小程序页面的分享&#xff0c;并介绍如何获取小程序卡片的分享票据。 9.2.1小程序页面转发 微信小程序提供了页…

Ubuntu16.04安装Cronolog

一、下载安装包 wget https://files.cnblogs.com/files/crazyzero/cronolog-1.6.2.tar.gz 二、 解压缩 tar -xzvf cronolog-1.6.2.tar.gz 三、进入安装目录 cd cronolog-1.6.2/ 四、运行安装 ./configure && make && make install 五、查看是否安装成功 wh…

Linux中Tomcat中的Cronolog日志分割工具配置

说明 在Tomcat 部署中我们默认访问的日志是logs 随着访问量的增加 一个catalina.out 访问量可能是10几G 如果不对logs 的日志进行分割的话&#xff0c;随着访问量的增加Tomcat 的日志就会占用大量资源浪费 &#xff0c;特此 需要使用 cronlong 日志分割工具进行分割日志 如图所…

CentoS 7.8.2003 安装篇三:Cronolog 日期切割工具

一、下载 wget http://cronolog.org/download/cronolog-1.6.2.tar.gz二. 解压缩 tar zxvf cronolog-1.6.2.tar.gz 三. 进入安装目录 cd cronolog-1.6.2 四. 运行安装 ./configure make make install 五. 查看是否安装成功 which cronolog…

使用cronolog进行日志切割

1、下载&#xff08;最新版本&#xff09; # wget http://cronolog.org/download/cronolog-1.6.2.tar.gz 2、解压缩 tar -xvf cronolog-1.6.2.tar 3、进入cronolog安装文件所在目录 cd cronolog-1.6.2 4、运行安装 # ./configure # make # make install 5、查看cronol…

cronolog切割tomcat的catalina.out日志

Linux下运行的Web服务器Apache&#xff0c;默认日志文件是不分割的&#xff0c;一个整文件既不易于管理&#xff0c;也不易于分析统计。安装cronolog后&#xff0c;可以将日志文件按时间分割&#xff0c;易于管理和分析。补充&#xff1a;apache自带的日志分割工具rotatelogs&a…

Tomcat日志切割cronolog

Cronolog 分割 Tomcat8 Catalina.out日志。 默认情况下&#xff0c;tomcat的catalina.out日志文件是没有像其它日志一样&#xff0c;按日期进行分割&#xff0c;而是全部输出全部写入到一个catalina.out&#xff0c;这样日积月累就会造成.out日志越来越大&#xff0c;给管理造成…

使用工具Cronolog进行日志分隔

前言&#xff1a;tomcat日志按日期切割 使用Cronolog 分割 Tomcat9下的catalina.out日志&#xff1b;tomcat的catalina.out日志文件无法按照日期进行自行分割&#xff0c;全部输出并写入到一个catalina.out文件下&#xff0c;如此日积月累就会造成.out日志越来越大&#xff0c…

Linux下tomcat日志分割工具cronolog

使用cronolog在Linux 下进行日志分割 1、下载编译安装 点击下载&#xff1a;cronolog-1.6.2.tar.gz 上传至Linux的/usr/local/src/07.cronolog下 执行解压&#xff1a; tar –zxvf cronolog-1.6.2.tar.gz 编辑配置 cd cronolog-1.6.2 ./configure 编译…

日志切割工具cronolog详解

日志切割工具cronolog详解 大家都知道apache服务器&#xff0c;默认日志文件是不分割的&#xff0c;一个整文件既不易于管理&#xff0c;也不易于分析统计。本文主要讲解Web服务器日志切割工具cronolog&#xff0c;下面我们就来详细的讲解一下。 1.上传及安装日志轮询工具cro…

win cronolog tomcat 日志分割

首先找到tomcat得bin目录录下边得startup.bat 编辑文件 call "%EXECUTABLE%" start %CMD_LINE_ARGS% 换成 call "%EXECUTABLE%" run %CMD_LINE_ARGS% 修改之后 如下 cronolog.exe 去下边得链接去下载&#xff0c;我也是花了一块钱去下载的&#xff0c;找…