微信自定义分享功能实现Tips

以MVC为例

前台js通过.post()方法传给后台特定Controller当前页面的url,后台获取后,进行处理:

1.获取access_token:https://mp.weixin.qq.com/wiki/15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.通过获取的access_token进一步获取jsapi_ticket:(来自微信JSSDK说明文档,https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html)

  1. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

返回的Json对象

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}可通过反序列化JsonConvert.DeserializeObject(),将Json对象转化为一个C#对象,进行下一步处理。

3.生成时间戳 timestamp:

时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。

            DateTime timeNow1 = (DateTime.UtcNow.AddHours(8));
            DateTime timeGMT = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1));
            //计算时间戳
            int timeTotal = Convert.ToInt32((timeNow1 - timeGMT).TotalSeconds);
            //将时间戳转换为字符串
            string timestamp = timeTotal.ToString(CultureInfo.InvariantCulture);


4.生成随机串 nonceStr:

            //规定随机字符串的长度
            const int Length = 16;
            //限制字符串取值来源
            const string Chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
            //定义一个空字符串用于接收字符
            string nonceStr = string.Empty;
            //初始化一个随机数
            var rand = new Random();
            //循环从Chars里随机取一个字符增加到str中,获得随机字符串
            for (int i = 0; i < Length; i++)
            {
                //用Substring()方法,字符串从随机位置开始从Chars中取一个字符
                nonceStr += Chars.Substring((rand.Next(0, Chars.Length - 1)), 1);
            }


5.生成签名 signature:

需要四个字段 包括上面的timestamp,nonveStr和当前网页的URL(即要分享的页面url),以及有效的jsapi_ticket;

        public string GetSignature(string url, string jsapi_ticket, string timestamp, string noncestr)
        {
            //采用url键值格式拼接字符串
            string str = $"jsapi_ticket={jsapi_ticket}&noncestr={noncestr}&timestamp={timestamp}&url={url}";

            //对str进行SHA1加密,得到signature。先初始化一个SHA1CryptoServiceProvider类的实例。
            SHA1 sha1 = new SHA1CryptoServiceProvider();

            //以某种编码格式如UTF8,将str编码,获得一个字节序列
            byte[] buffer = Encoding.UTF8.GetBytes(str);

            //计算该字节数组的哈希值,并转化为字符串
            string strHash = BitConverter.ToString(sha1.ComputeHash(buffer));

            //此时strHash为用“-”隔开的字符串,去掉后返回全小写的字符串,即生成了signature
            return strHash.Replace("-", string.Empty).ToLower();
        }

微信公众平台开发者文档里有签名算法相关内容:https://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html



6.将AppId,时间戳timestamp,随机串noneStr,JsApi签名signature封装为json对象,返回给前台。

7.前台此时通过wx.config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: ‘‘, // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: ‘‘, // 必填,生成签名的随机串
    signature: ‘‘,// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

8.通过wx.ready(function(){})处理成功验证。/通过wx.error(function(res){})处理失败验证

wx.ready(function(){

    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
wx.error(function(res){

    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

附:SPA(Single-page Application)在 Web 设计上使用单一页面,利用 JavaScript 操作 Dom 的技术实现各种应用

对应为MPA(Multi-page Application)多页面应用,最传统的 HTML 网页设计

区别可进一步参考http://www.thinksaas.cn/topics/0/380/380109.html

时间: 2024-12-14 03:53:53

微信自定义分享功能实现Tips的相关文章

c#微信开发,使用JS-SDK自定义分享功能,分享朋友圈,分享给朋友等

如果一个后端开发掌握了微信开发,甚至有微信开发上线项目,这在换工作的时候 还是有竞争力的. 微信开发的资料很多,但是用asp.net c#进行微信开发好像比较少,或者资料不够完整. 使用JS-SDK自定义分享功能,分享朋友圈,分享给朋友,这里基本上不涉及后端语言. 1.首先要绑定域名,当然域名得备案. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 说明:设置此安全域名目的是为了当发现此公众平台发现诱导分享行为时,可以根据此域名追溯到所有分享出去的链接,以及通过这

andriod 实现新浪、QQ空间、微信朋友圈、微信好友分享功能

前言:自己在学习的过程中的一些操作过程,对分享的一些理解.下面就讲解一下: 下载地址:http://download.csdn.net/detail/u014608640/7490357 首先,我们需要去ShareSdk官方网站http://sharesdk.cn/ 去下载ShareSDK ,然后我们会有4个文件: 根据我自己在学习的过程中只用到了第一个文件夹的 libs目录的2个项目,这2个是必须要的,是ShareSdk提供的,然后需要将这2个放入到自己做的项目当中去,在Res目录下有一个 S

微信JSSDK分享朋友圈微信自定义分享接口

服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议       联系 851 488 243, 备注:模板消息 微信jssdk分享接口需要微信认证的公众号才有权限可以使用,而微信认证不仅需要企业资质,而且每年都要进行一次认证,认证费用需要交300给微信官方 如果你没有认证的公众号,可以租用我们的分享接口权限 1.一次收费,永久有效 2.使用简单,在你的网站加一段

微信的分享功能(针对web手机站页面进行的分享功能)

把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){ var lujing=$("#logimg").attr("src");  //分享中带有的图片 var url=window.location.href;         //分享页的地址 var title=document.title;             //分享内容的标题 weixin("http://m.e-iot.com/images/b

微信自定义分享到朋友圈API

<script src="http://s0.qhimg.com/!249ce048/WeixinApi.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> WeixinApi.ready(function(Api) { // 微信分享的数据 var wxData = { &

微信/企业微信的分享功能

前言: 最近有在做一个企业微信的分享功能,整体而言是没什么太大的难度,但是onMenuShareAppMessage, shareAppMessage这些原生的api,只有你自己触发了微信页面右上角的原生的分享按钮,才能触发. 举个例子,你自己在list页面中,每个记录自己设置一个分享按钮,从而想点击分享按钮而分享是做不到的,这个触发 不了原生的分享api. 所以这里的需要注意的坑点就是要注意,只有微信自己的分享按钮才能触发相应的分享api. 原文地址:https://www.cnblogs.c

使用微信JS-SDK 实现 自定义 分享 功能

微信PC端点击页面,转发给朋友. 开发前 ,分享之后 ,链接 样式如下: 格式化之后,样式如下: 页面代码: <!DOCTYPE html> <vt:function var="source" method="GetBySingle" args="$Company" type="Business.BLL.Sys.CompanyService" /> <html class="um lan

微信自定义分享操作步骤

微信内分享自定义图片.标题.摘要的设置及操作步骤 一.在微信内绑定站点域名 设置地址:https://mp.weixin.qq.com 位置:设置->公众号设置->功能设置->JS接口安全域名 这里填写好域名(比如 www.apple.com   比如 blog.apple.com) 按照提示下载对应文件上传到站点根目录,点"保存" (成功会有提示,没事别改着玩,有次数限制) 二.找到AppID(应用ID)和AppSecret(应用密钥) 地址:https://mp.

微信jssdk分享功能开发

先理解下分享: 在app端 ,经常能看见 分享按钮的功能,(分享给朋友,分享到朋友圈,分享到QQ空间等等): https://open.weixin.qq.com/(微信开发平台),这需要到开放平台注册账号,绑定自己的应用,才能实现其权限: 在微信公众号开发过程中,目前,现在只能,实现,自定义分享内容,而不能自己开发分享按钮: 我们通过 一些分享的方法,只是获取“*******” 按钮点击状态及 自定义分享内容接口,请注意 我们,仍然,需要点击,微信自带的头部菜单按钮里面(分享朋友,分享朋友圈按