H5页面分享微信自定义分享title和img

时间:2022-01-23 14:40:31

前端开发H5 需分享到朋友圈和发给好友,想自定义分享的title和图表还有简短一句话,还需调用微信的api

首先需获取到微信的appId,timestamp,nonceStr,signature

微信JS-SDK说明文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

//微信分享代码

//通过config接口注入权限验证配置

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

appId: appid, // 必填,公众号的唯一标识

timestamp: timestamp, // 必填,生成签名的时间戳

nonceStr: nonceStr, // 必填,生成签名的随机串

signature: signature,// 必填,签名,见附录1

jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

wx.ready(function () {
wx.onMenuShareTimeline({
title: '分享标题', // 分享标题
link: 'http://papastyle.cn’, // 分享链接
imgUrl: 'http://papastyle.cn/images/logo.jpg', // 分享图标
success: function () {

},
cancel: function () {

}
});

wx.onMenuShareAppMessage({
title: '分享标题', // 分享标题
desc: ' ,我正在参加"活动",请为我投票!', // 分享描述
link: 'http://papastyle.cn', // 分享链接
imgUrl: 'http://papastyle.cn/images/logo.jpg', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数

},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

});

H5页面分享微信自定义分享title和img的更多相关文章

  1. H5 页面在微信端的分享

    微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wi ...

  2. H5微信自定义分享链接(设置标题+简介+图片)

    起源:最近公司在做招募广告的html5页面,然后做出来后,产品提出一个问题,需要分享出去的链接是卡片形式,内容也要自己定义,这下就难到我了,因为是第一次遇到这种需求,果断百度,然而,我就像大家一样,看 ...

  3. H5页面在微信端的分享

    微信分享,咋一看好像很复杂,实则非常简单.只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:https://mp.weixin.qq.com/wik ...

  4. Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法

    简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...

  5. ThinkPHP5集成JS-SDK实现微信自定义分享功能

    最近开发一个项目,需要将链接分享给好友时能够自定义标题.简介和logo,现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文. 一.准备工作 1.认证的公众号 不管是订阅号还是服 ...

  6. 生成二维码、微信自定义分享到朋友圈、ipa不从应用商店安装

    生成二维码网址:http://www.liantu.com/ 微信自定义分享到朋友圈:http://www.cnblogs.com/memor-y/p/6728179.html ipa不从应用商店安装 ...

  7. H5页面在微信中禁止下拉露出网页

    H5页面在微信中禁止默认事件的执行,js添加代码 $(function () { /************微信h5页面禁止下拉露出网页来**************/ $('body').on('t ...

  8. 公众号H5页面接入微信登录流程

    公众号H5页面接入微信登录流程 源码地址 https://gitee.com/szxio/h5_weixin 起步 首先创建一个项目,我们采用uni-app来作为我们的前端框架 环境安装 全局安装vu ...

  9. 安卓端 - H5页面在微信分享、收藏、保存图片不成功

    经过代码实践: 原因是微信在分享.收藏和保存时会获取到图片信息,当图片过大时,造成失败

随机推荐

  1. spring3.0使用annotation完全代替XML(续)

    从回帖的反应来看,大多数人还是不赞成完全代替XML的,这点倒是在意料之中.我个人还是倾向于用代码来取代XML的Bean定义,当然这更多的是关乎个人偏好,不代表与我观点不同的人就是错的. 先来说说代码相 ...

  2. 转战网站后台与python

    这么长时间了,迷茫的大雾也逐渐散去,正如标题所写的一样,转战网站后台开发.这段时间没怎么写博客,主要还是太忙,忙着期末考试的预习,以及服务器的搭建,python的学习,还有各种各样杂七杂八的小事,就像 ...

  3. WebRTC实现网页版多人视频聊天室

    因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...

  4. WCF分布式开发必备知识(3):Web Service 使用

    参考地址:http://www.cnblogs.com/zhili/p/WebService.html 一.WebService概述 SOAP.WSDL.UDDISOAP(Simple Object ...

  5. JS精粹:下半部分

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 多线程 or 多进程 &lpar;转强力推荐&rpar;

    在Unix上编程采用多线程还是多进程的争执由来已久,这种争执最常见到在C/S通讯中服务端并发技术 的选型上,比如WEB服务器技术中,Apache是采用多进程的(perfork模式,每客户连接对应一个进 ...

  7. 常见排序算法(JS版)

    常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html <! ...

  8. Adobe DreamweaverCS6安装及破解(序列号&plus;破解补丁)

    一:安装 1) Adobe DreamweaverCS6中文版下载地址:Adobe DreamweaverCS6中文版下载 2)Adobe DreamweaverCS6安装及破解说明下载地址:Adob ...

  9. &lbrack;置顶&rsqb; JSP中使用taglib出错终极解决办法

    jsp中 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c ...

  10. 强化学习&lpar;十二&rpar; Dueling DQN

    在强化学习(十一) Prioritized Replay DQN中,我们讨论了对DQN的经验回放池按权重采样来优化DQN算法的方法,本文讨论另一种优化方法,Dueling DQN.本章内容主要参考了I ...