微信分享

序言

由于微信分享比较严格, 因此需要准备认证公众号来获取分享权限.

前期准备工作

公众号设置 => 功能设置 => JS接口安全域名 (注: 该域名需要通过ICP备案, 配置完此项以开启在该域名下调用微信JS接口的能力)
基本设置 => IP白名单 (配置完此项以开启可以调用获取access_token接口的权限)

流程: 服务端配置

1 . 获取access_token, 通过公众号后台查看appid和appsecret, 通过该接口获取 (https请求方式 GET) https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET (具体返回内容https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183)

2 . 获取jsapi_ticket, 通过刚刚拿到的access_token 请求 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi , 返回内容如下

{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200
}

3 . 生成js-sdk权限验证签名, 签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义. 注: 此逻辑必须在服务端实现.

例:

// 所生成的四项
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

// 步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

// 步骤2. 对string1进行sha1签名，得到signature：
// 对于Node可以直接使用jssha包进行开发, https://github.com/Caligatio/jsSHA0f9de62fce790f9a083d5c99e95740ceb90c27ed

具体实现代码, http://demo.open.weixin.qq.com/jssdk/sample.zip

流程: 前端配置

引入JS文件 http://res.wx.qq.com/open/js/jweixin-1.4.0.js (当你看到这篇博文的时候有可能不是最新版的, 你可以在下面错误处理办法的那个链接里寻找最新版)
wx.config 注入权限验证
如果是在页面加载时就要调用的接口, 需要写在wx.ready里, 当config验证成功之后便会调用, 如果是用户触发才调用的接口, 则可以直接调用.

其余接口以及错误处理办法: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

钉钉分享

钉钉这种卡片配置不需要调用api, 只需在html写上些许代码便可, 钉钉的卡片识别策略为: 基于Open Graph Data协议来识别当前网页内容, 如果该网页不支持OGP, 那么基于钉钉默认规则提取网页标题, 主图, 正文摘要, 注: 必须静态写在html中, 不支持js插入

// 例
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." /><!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg"><!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

微信H5分享钉钉分享设置方法相关推荐

微信朋友圈+html+字体颜色,微信新功能酷炫的彩色微信名字朋友圈彩色昵称设置方法...
原标题:微信新功能酷炫的彩色微信名字朋友圈彩色昵称设置方法这几天有几位微民们问小编,说看到朋友的微信昵称变成了彩色字体,好奇这怎么回事,觉得非常好玩,那怎样才可以设置彩色字体呢? 希望小编能教大 ...
微信接收离线消息状态的设置方法（图文教程）
为什么80%的码农都做不了架构师?>>> 摘自:穆童博客 http://mtoou.info 相信大家在上QQ的时候应该发现了很多人在使用腾讯的微信了,而且还常常发现使用了微信 ...
微信h5授权获取用户openId的方法和步骤，用于用户登录和注册
微信公众号的配置和专业名词就不介绍了,不懂的问度娘,我就直接上代码点击下载完整demo 先说一下我的demo放的位置: 微信H5授权登录分两种: ① 静默授权:snsapi_base,没有弹窗,只 ...
Android微信暗黑模式的方法,微信“暗黑”模式来了！设置方法拿走不谢
盼望着,盼望着暗黑模式来啦! 小编问问大家你们已经更新了吗? 3月上旬,微信方面表示为了优化用户体验微信与苹果达成合作共同探索微信在iOS系统的深色模式体验目前该功能已完成开发将有望在下 ...
ios微信H5网页没有声音的解决方法
一.问题描述在做微信网页抽奖开发时,点击抽奖需要添加音效, 正常情况下,直接调用audio标签的play方法即可,但是在ios微信端不起作用. 二.解决方法通过WeixinJSBridge调用pl ...
小程序、H5登录授权、分享、支付流程
微信登录.分享.支付流程 [TOC] 前言对于前端来说,微信的支付.分享.登录是一定要掌握的,今天这篇文章,主要对这三方面的流程进行详细的介绍.主要内容如下: 域名相关知识介绍业务域名:在微信浏览 ...
关闭笔记本显示器指定组合键才能打开_笔记本外接显示器怎么设置笔记本外接显示器设置方法【详解】...
相对来说笔记本显示器要比台式机的屏幕要小上很大一截,用习惯了台式机子,再看笔记本电脑屏幕真有些不习惯,特别是爱玩游戏的童鞋们.那么,你知道用笔记本可以外接显示器吗?今天小编就带大家一起来了解下笔记本外 ...
磊科无线路由器设置方法详解
一直以来磊科无线路由器的性能和质量都是很不错的,相信有不少的电脑用户都在使用磊科路由器,那么今天笔者就与大家一起分享磊科路由器的设置方法,以便于用户能够正确快速的运用磊科路由器. 首先我们需要对照设备 ...
微信H5支付跳回app的问题
最近使用到H5支付,需要在支付完成或者取消之后跳回到app.但是苹果做好H5支付只会跳转到Safair浏览器,这就需要找方法去解决了. 1.首先先配置微信支付的白名单. 在Xcode中,在plist文 ...
h5键盘把页面顶走了_微信h5开发的坑
记一次微信h5开发的坑... 正常的效果如下: 本身用的cube-ui开发,上半部分是自己写的,下边用的是better-scroll,为了滑动更流畅.这个页面前边有一个登录页面,登录之后就会跳到这个首 ...

微信H5分享钉钉分享设置方法