H5的分享功能

article/2025/9/13 18:45:58

在H5的 页面分享该活动给好友,代码如下:

1:需要添加 js引用:

<script src='http://res.wx.qq.com/open/js/jweixin-1.2.0.js'></script>

2:需要添加对象:

var wx = require("weixin-js-sdk");

3:实现方法

// 分享功能

shareOut() {

var that = this;

let baseurl = "https://i.csdn.com"; // 站点域名名称 

let nowappId = "wx384b5da598edc120"; //appId 格林服务号;

 

// let baseurl = "http://h5test.cn";

// let nowappId = "wx330c5becf5a36a7f"; //appId 贝壳测试号

 

let signStr = ""; //sha1加密字符串

let timestamp = 1530852096; //时间戳

let nonceStr = "shupao";

 

let nowLink = "";

let flag = this.inviteFlag == 1? "&flag=1" :"";

this.inviteFlag = 0;

nowLink = baseurl + "/Activity/AprilShareHelp?sourcecode=jthd201905CJFX&userId=" + this.NowUser + flag;

var obj = {

title: "快来!这里有一台¥4999华为Mate20X送给你!", //标题

desc:

"¥1899华为VR眼镜、¥888长江三角洲旅游护照,还有¥200免房券等一大批好礼等着你哦!", //描述

link: nowLink,

imgUrl: baseurl + "/static/Activity/Tips/wxShareImg.jpg"

};

 

var params = new this.URLSearchParam();

params.append("nonceStr", nonceStr);

params.append("timestamp", timestamp);

params.append("url", window.location.href);

this.$http.post(api.GetSignature(), params.toParam()).then(res => {

wx.config({

debug: false,

appId: nowappId, //appId 格林服务号

timestamp: timestamp, //时间戳

nonceStr: nonceStr, //加密需要字符串(自己定义的)

signature: res.Data, //sha1加密后字符串

jsApiList: [

"onMenuShareTimeline",

"onMenuShareAppMessage",

"onMenuShareQQ",

"onMenuShareWeibo",

"onMenuShareQZone"

]

});

 

wx.ready(function() {

//分享给朋友

wx.onMenuShareAppMessage({

title: obj.title, // 分享标题

desc: obj.desc, // 分享描述

link: obj.link, // 分享链接

imgUrl: obj.imgUrl, // 分享图标

success: function() {

// 未登录提醒用户

that.ShareCheck();

},

cancel: function() {}

});

 

//分享到朋友圈"

wx.onMenuShareTimeline({

title: obj.title,

desc: obj.desc, // 分享描述

link: obj.link, // 分享链接

imgUrl: obj.imgUrl, // 分享图标

success: function() {

// 未登录提醒用户

that.ShareCheck();

}

});

 

wx.onMenuShareQQ({

title: obj.title, // 分享标题

desc: obj.desc, // 分享描述

link: obj.link, // 分享链接

imgUrl: obj.imgUrl, // 分享图标

success: function() {

// 未登录提醒用户

that.ShareCheck();

}

});

wx.onMenuShareQZone({

title: obj.title, // 分享标题

desc: obj.desc, // 分享描述

link: obj.link, // 分享链接

imgUrl: obj.imgUrl, // 分享图标

success: function() {

// 未登录提醒用户

that.ShareCheck();

}

});

wx.onMenuShareWeibo({

title: obj.title, // 分享标题

desc: obj.desc, // 分享描述

link: obj.link, // 分享链接

imgUrl: obj.imgUrl, // 分享图标

success: function() {

// 未登录提醒用户

that.ShareCheck();

}

});

});

});

},

 


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

相关文章

微信小程序共享元素+ page-container假页实现弹出效果

1.实现效果 2.实现原理 page-container page-container 小程序如果在页面内进行复杂的界面设计&#xff08;如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等&#xff09;&#xff0c;用户进行返回操作会直接离开当前页面&#xff0c;不符合用户预期&#xff0c;预期…

小程序与h5分享

小程序分享 可以参考小程序文档小程序文档链接 介绍&#xff1a;小程序中有直接在按钮上面加open-type就会触发分享了 如下: <button open-type"share"></button>在onShareAppMessage这个生命周期上面书写你要分享的内容就可以了&#xff0c; 如下&…

小程序嵌套 h5 并分享给朋友

1.先准备一个https地址&#xff0c;用于在微信公众平台/小程序中/开发管理/开发设置/业务域名 中设置 主要是后续要用到 web-view 组件 2.在小程序中设置跳转信息 task/index.vue this.graceJS.navigate(“/pagesA/task/sharePage?pathyes&houseName”houseName“&ty…

H5页面设置微信分享

H5页面设置微信分享 写代码之前的准备工作 1、登录微信公众号&#xff08;需要已经认证过的公众号&#xff09;&#xff0c;进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”&#xff0c;将文件下载下来&#xff0c;上传至与将要分享的页面相同的域名服务…

闲置电视盒子不要扔!搭建Blynk物联网服务器,太香了!

之前写过WINDOS搭建blynk物联网的教程&#xff0c;由于电脑一直开机功耗太大&#xff0c;现在终于找到了用电视机顶盒刷linux系统安装服务器的方法&#xff0c;先一睹为快 在开始今天的折腾前&#xff0c;自备一个刷好linux系统的电视机顶盒&#xff0c;可以按神雕的教程来 地…

学会搭建小程序生鲜商城,开启生鲜电商新模式

电商平台的出现&#xff0c;为人们带来了极大的便利。然而&#xff0c;传统的电商平台已经不能满足消费者对于购物体验的要求。如今&#xff0c;小程序生鲜商城因其轻量化、高效率等特点&#xff0c;成为了众多卖家的首选。本文将介绍如何学会搭建小程序生鲜商城&#xff0c;并…

【HTML+CSS】实现小盒子水平垂直居中大盒子

小div在大div中如何水平垂直居中 关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种&#xff0c;下面仅列举了常用 的几种。 首先看一下要实现的效果图及对应的html代码&#xff1a; // 大盒子嵌套小盒子 小盒子水平垂直居中 <div class"big&qu…

Docker网络---容器互联

前言&#xff1a; 虽然每个docker容器之间都能通过ip来进行互联&#xff0c;但当容器重新启动&#xff0c;ip就会被重新分配给重新启动的容器&#xff0c;这时同个容器由于重启导致ip不一样了&#xff0c;这时就会导致开发和运维的困难程度大大增加&#xff0c;这时候就要考虑…

京东首页静态页面html+css

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大一在校生&#xff0c;web前端开发专业 &#x1f921; 个人主页&#xff1a; python学不会 &#x1f43c;第一次写博客&#xff0c;写的不好望指正 &#x1f385;学习目标: 坚持每一次的学习打卡 项目介绍&#xf…

Java-微信H5分享功能

操作前必看 微信自带的点击按钮分享已经下架了&#xff0c;目前只支持在微信浏览器点击右上角的分享&#xff0c;自己配置分享参数&#xff0c;而且目前分享参数也无法使用。 原因&#xff1a;响应国家反垄断规章&#xff0c;微信调整可实现访问外链&#xff1b; 异常&#x…

计算机考证照片尺寸规格

1&#xff09;照片应为考生本人近期正面免冠彩色证件照。 2&#xff09;成像区上下要求头上部空1/10&#xff0c;头部占7/10&#xff0c;肩部占1/5&#xff0c;左右各空1/10。采集的图象大小最小为192144&#xff08;高宽&#xff09;&#xff0c;成像区大小为48mm33mm&#x…

2016 PayPal商家账户界面 如何设置开启IPN

登陆账户到www.paypal.com点击右上方“用户信息”〉“用户信息与设置”&#xff0c;在打开的页面中&#xff0c;点击左侧“销售工具”菜单页面右侧找到“即使付款通知”&#xff0c;点击“更新”链接勾选“接收即使付款通知消息&#xff08;已启用&#xff09;”&#xff0c;并…

paypal IPN and PDT

paypal IPN and PDT 相关文档说明&#xff1a; https://developer.paypal.com/docs/classic/ipn/gs_IPN/ https://developer.paypal.com/docs/classic/ipn/integration-guide/IPNTesting/ https://developer.paypal.com/docs/classic/ipn/integration-guide/IPNPDTAnAltern…

paypal付款通知IPN

什么是即时付款通知IPN 当您收到新的付款交易或者已发生的付款交易的状态发生变化时&#xff0c;PayPal都将异步&#xff08;即不作为网站付款流程的一部分&#xff09; 发送付款详细数据到您所指定的URL&#xff0c;以便您了解买家付款的具体情况并做出相应的响应。这个过程我…

paypal 新注册帐号有哪些问题,paypal EC 和paypal checkout 如何设置账户IPN\签名等

一、IPN如何设置 IPN的设置 https://www.paypal.com/cgi-bin/customerprofileweb?cmd_profile-ipn-notify 二、paypal EC的用户名、密码、签名的设置 https://www.paypal.com/businessprofile/mytools/apiaccess/firstparty/signature 三、新账户提示该商家目前无法接收pa…

paypal的IPN机制

paypal对接时发现有这么一个机制&#xff0c;看起来还不错&#xff0c;起到了防止篡改欺诈行为&#xff0c;保证了通信的安全性&#xff0c;但会增加几次通信。

paypal IPN返回

1.设定返回的地址 目标&#xff1a;登录paypal-->用户信息-->我的销售工具-->即时付款通知-->编辑并填写url 填写的URL必须为公网的&#xff0c;不能为局域网&#xff0c;要不就无法接收到paypal发送的信息 2.编写IPN.jsp (此代码为官方代码) //从 PayPal 出读取 P…

沙箱环境和正式环境【PayPal接入(java)】【IPN通知问题】项目实战干货总结记录!

如果你是第一次接入paypal&#xff0c;相信本文的每一个地方都会对你有帮助的&#xff01;&#xff01;因为这篇文章都是一个一个的坑踩出来的&#xff01; 一、接入paypal环境准备&#xff1a; 1、注册paypal账号 https://www.paypal.com 注册“商家账号”&#xff0c;完成…

php paypal ipn,PHP 开发详解:PayPal Instant Payment Notification (IPN)

上次在 PHP 开发详解&#xff1a;PayPal Payment Data Transfer (PDT) 一文中介绍了网站集成 Paypal 付款功能并如何将付款数据返回&#xff0c;能够使得用户在付款完成后继续回到网站上来&#xff0c;并将付款信息告知用户。但是 PayPal Payment Data Transfer 这样的数据返回…