微信小程序之短连接 分享转发 点击短连接就可以直接打开小程序某个页面_小程序分享链接_幽幽靖的博客-程序员秘密

技术标签: 微信小程序  小程序  

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

首先,小程序官网地址: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.options
    let 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和id
      header: {
     '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!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ws19900201/article/details/127319884

智能推荐

基于Springboot的人力资源管理系统的设计与实现_专注大学计算机毕设和教育的博客-程序员秘密

基于Springboot的人力资源管理系统 的设计与实现功能需求如下: 基于系统需求分析,人事管理系统主要完成以下功能:系统按所选角色分为职员、管理员两类身份登录功能界面。管理员:1)员薪资料管理:包括查看员工列表、添加员工、修改员工信息等。2) 部门管理:包括部门名单、技术资料修改、新增部门。3)员工考勤管理:添加、修改、删除员工考勤信息。4)员工培训管理:包括个人培训信息查询及添加新的培训记录等。5)假期情况管理:主要用来处理员工的请假申请。6)员工薪资管理:主要用来处.

Mybatis自定义排序详解CASE WHEN_mybatis排序_深知她是一场梦的博客-程序员秘密

简单排序例子需求提升,小试牛刀函数说明实现方式1:直接排序实现方式2:自定义排序字段后排序需求提升,大展身手简单排序例子我们现在有学生数据简单查询排序按照分数的升序排列需求提升,小试牛刀但是我们现在有一个需求,把分数分为3个等级,优秀(80分以上) 合格【60-80】 不合格(60分一以下)要求排序的顺序是:优秀--合格--不合格,同等级的再按照分数的升序排序根据我们的数据,一共有5个分数(40,49,6...

谈一谈自己对BFC的理解_用自己的话说一下bfc_Yunruohan的博客-程序员秘密

一、BFC概念BFC全名为块级格式化上下文,它是一个独立的渲染区域,其内部的盒子如何布局只遵循块级格式化上下文的规则,不受外部元素的干扰二、如何定义BFC当前元素的float属性不为none 当前元素的position属性不为static和relative 当前元素的overflow属性不为visible 当前元素的display属性是inline-block、table-cell、flex、table-caption和inline-flex三、BFC的布局规则每个盒子都占一行,在垂

用css制作带三角矩形_liujianhuan0622的博客-程序员秘密

在网页中通常会见到一种带三角的矩形框,常见于注释或者弹框提示。在百度2015校园招聘的笔试题目中也有一道题目要求利用css来绘出一个带三角矩形。如图所示。 在css中,三角形是采用盒子模型的border属性来绘制的。所以在进行上图绘制之前有必要回顾一下css盒子模型。css盒子模型同一方向共有四个属性,比如横向有margin,border,padding,width。其中width指定内容

Golang unsafe.Sizeof小结_菌菇的博客-程序员秘密

unsafe.Sizeof返回的是类型数据结构的大小而不是其指向内容的数据大小,如: slice := []int{1,2,3,4,5,6,7,8,9,10} fmt.Println(unsafe.Sizeof(slice)) //24使用 spew.Dump(*(*reflect.SliceHeader)(unsafe.Pointer(&amp;amp;slice))) ,我们可以打印出该切...

highcharts jpg java_highcharts本地导出图片,pdf服务端代码_宿迎的博客-程序员秘密

先要在exporting.js中修改导出图片的url是本地的服务器地址String type = getPara("type");//getRequest().getParameter("type");String svg =getPara("svg");// getRequest().getParameter("svg");String filename = getPara("filename"...

随便推点

字符串最小表示法 O(n)算法_zy691357966的博客-程序员秘密

求字符串的循环最小表示: 上面说的两个字符串同构的,并没有直接先求出Min(s),而是通过指针移动,当某次匹配串长时,那个位置就是Min(s)。而这里的问题就是:不是给定两个串,而是给出一个串,求它的Min(s),eg:Min(“babba”) = 4。那么由于这里并非要求两个串的同构,而是直接求它的最小表示,由于源串和目标串相同,所以处理起来既容易又需要有一些变化:我们仍然设置两个指针,

latex模板使用记录_latex 设置双面打印_RachelKong的博客-程序员秘密

毕业论文套了一份latex模板,但是格式采用硕士规范,硬生生调成了又丑又蠢的本科生规范。(除了封面)记录一下单双面的调整,正文之前是单面打印,左间距3cm,右间距2cm,正文开始是双面打印,单双面交替,装订部分3cm,外围2cm。想要实现oneside到twoside的切换,试了setboolean的方法,并不能实现,后来用\newgeometry实现了。开头文档属性是设为了oneside boo...

Java对象复制非空属性_奔跑的阳光的博客-程序员秘密

引用org.springframework.beans.BeanUtils类提供的方法copyProperties(Object source, Object target, String... ignoreProperties)  用于对象拷贝,spring 和 Apache都提供了相应的工具类方法,BeanUtils.copyPropertiespackage com.mixislink...

[失败]uuv_simulator在台式机_虚拟环境下会崩溃的问题[失败]_eca a9_方小汪的博客-程序员秘密

台式机下的系统环境下可以跑uuv笔记本下的虚拟环境下可以跑uuv目前遇到的问题是,台式机下的虚拟环境跑不了uuv接下来好好debug终端1运行source activate py27cd ~/catkin_wssource devel/setup.bashroslaunch uuv_gazebo_worlds ocean_waves.launch没有问题终端2运行source...

python常识系列07-->python利用xlwt写入excel文件_python xlwt写文件-程序员秘密

实例中有用到颜色的时候,只讲了部分颜色的代码,读者可以去看xlwt模块下的style.py查看更多颜色;实例4中有用到线条的样式,读者可以去看xlwt模块下的Formatting.py中的Borders类。worksheet.write(0, 0, '小红', font_style)worksheet.write(0, 0, '小名', style)#往表中写内容,第一个参数 行,第二个参数列,第三个参数内容。# 设置字体为红色,这里不能使用16进制表示颜色的方法去设置。抽空又来写一篇,毕竟知识在于分享!

Spring基于注解的Ioc及Junit集成_weixin_45108087的博客-程序员秘密

Spring的注解需要在配置文件中指定需要扫描的包.具体配置参照:&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance...

推荐文章

热门文章

相关标签