create-at 2019-02-16

引入微信JS-SDK http://res.wx.qq.com/open/js/jweixin-1.4.0.js (当前最新版本)

js 相关代码 (移动端实测, 需做老版本兼容)

function weChatShare(title,desc) {
var link = window.location.href;// 这里如果采用的并非当前页可能会出错,具体原因有待查找
var serverUrl = encodeURIComponent(link);
var imgUrl = '分享显示的小图'; //80*80 实测可以使用其它比列,最好使用小尺寸正方形,域名也要在安全域名之下 // 数据请求,根据项目需求更改
function ajaxFn() {
var xhr = new XMLHttpRequest() xhr.open('get', '这是请求配置项的接口?url=' + serverUrl, true)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
wxConfig(JSON.parse(xhr.responseText))
}
}
xhr.send()
} function wxConfig(res) {
wx.config({
// 是否开启调试(会返回一些错误原因)
debug: true,
// 公众号的唯一标识
appId: res.appId,
// 签名的时间戳
timestamp: res.timestamp,
// 签名的随机串
nonceStr: res.nonceStr,
// 签名
signature: res.signature,
// 需要调用的JS接口
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline'
]
}); // config 验证后会执行ready方法
wx.ready(function () {
var shareConfig = {
title: title,
desc: desc,
link: link,
imgUrl: imgUrl
}; // 目前新版方法存在问题,所以如果有老方法,优先选择老方法
if(wx.onMenuShareAppMessage){
wx.onMenuShareAppMessage(shareConfig);
wx.onMenuShareTimeline(shareConfig);
} else {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData(shareConfig);
// 朋友圈
wx.updateTimelineShareData(shareConfig);
}
}); wx.error(function (res) {
// config信息验证失败
console.log(res);
});
} ajaxFn()
} weChatShare('tit', 'des')

本篇文章只是做了方法整合,详见 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

交流 Github blog issues

微信分享(移动web端)的更多相关文章

  1. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  2. 关于MUI集成微信分享遇到的坑

    今天聊一下MUI这个框架吧! 首先,用这个框架也有很长一段时间了,项目不同,涉及到的功能也有不同,之前没有涉及到微信分享相关的内容!今天,遇到了,也解决了,分享出来. 下面是手顺: 1.分享的代码是参 ...

  3. ionic2+Angular web端 实现微信分享以及如何跳转回分享出去的页面

    微信分享,首先参考微信JS-SDK开发文档. step1:在启动文件index.html中引入微信js文件: <script src="http://res.wx.qq.com/ope ...

  4. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

  5. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  6. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  7. react网页版聊天|仿微信、微博web版|react+pc端仿微信实例

    一.项目介绍 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+nodejs等技术混合开发的仿微信web端聊天室react ...

  8. 如约而至:微信自用的移动端IM网络层跨平台组件库Mars已正式开源

    1.前言 关于微信内部正在使用的网络层封装库Mars开源的消息,1个多月前就已满天飞(参见<微信Mars:微信内部正在使用的网络层封装库,即将开源>),不过微信团队没有失约,微信Mars ...

  9. 使用JSSDK集成微信分享遇到的一些坑

    h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众 ...

随机推荐

  1. Azkaban 3.73.1 使用简介

    本文上接<Azkaban 3.73.1 集群搭建(Multiple Executor)>,对Azkaban的使用做简单说明 目录 目录 简介 1. 登录 2. 创建工程 3. 创建job ...

  2. C语言学习书籍推荐《C语言接口与实现:创建可重用软件的技术》下载

    <C语言接口与实现:创建可重用软件的技术>概念清晰.实例详尽,是一本有关设计.实现和有效使用C语言库函数,掌握创建可重用C语言软件模块技术的参考指南.书中提供了大量实例,重在阐述如何用一种 ...

  3. Yii basic 模板支持连接多数据库

    1.首先修改db配置文件,修改格式如下: return [ 'db' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:hos ...

  4. asp.net core系列 68 Filter管道过滤器

    一.概述 本篇详细了解一下asp.net core filters,filter叫"筛选器"也叫"过滤器",是请求处理管道中的特定阶段之前或之后运行代码.fil ...

  5. shell_chmod与目录权限

    此篇文档将讲解关于linux中文件权限常用命令chmod.为了达到一个比较好的效果,我会在需要的地方实际上机验证测试,并截图给朋友们看.我的linux机器装的是(opensuse-11.3),并且以文 ...

  6. Mysql常用语法及入门开篇(一)

    数据:信息,记录.阅读: 数据库:数据的仓库,存储许多的数据(信息).按照数据结构来组件.存储和管理数据的,建立在计算机存储设备上的仓库. DBMS:   database management Sy ...

  7. 摄像头驱动的使能配置、V4L2编程接口的设计应用

    摄像头采集子系统 一.摄像头驱动的使能配置 摄像头软件驱动构架 摄像头采集系统由上图所示,硬件(摄像头) -> 驱动(Linux内核配置中,选择支持V4L2的驱动选项) -> V4L2接口 ...

  8. 个人永久性免费-Excel催化剂功能第41波-文件文件夹相关函数

    对于日常办公过程中,每天面对的操作离不开文件.文件夹的操作,当然可以用资源管理器.Everything之类的管理软件来管理.但涉及到批量操作时,在Excel环境或许是个更好的方式,前面很多的内容中不断 ...

  9. C语言入门5-键盘的输入和屏幕输出

    C程序中的键盘输入和屏幕输出都是通过  调用输入/输出函数  实现的. 一.数据的格式化    屏幕输出 函数printf()的一般格式  (有两种) (1)第一种: printf(格式控制字符串): ...

  10. springboot启动不设置端口

    非web工程 在服务架构中,有些springboot工程只是简单的作为服务,并不提供web服务 这个时候不需要依赖 <dependency> <groupId>org.spri ...