微信公众号开发(一)微信分享接入

来源:互联网 发布:安顺大数据徐杰 编辑:程序博客网 时间:2024/05/17 00:52

微信分享

当有微信推广活动和页面的时候都会用到微信分享,本文介绍如何在页面上处理微信分享,使用的是js+C#.NET语言。

原理

大体流程是这样的:

  1. 绑定域名
  2. 列表内容
  3. 引入JS文件
  4. 通过config接口注入权限验证配置
  5. 通过ready接口处理成功验证
  6. 通过error接口处理失败验证
  7. 编写对应回调

实现

当然可以结合官网文档一起看

  • 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。

  • 引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载

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

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

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

这里可以使用ajax请求服务端,返回需要的一些签名信息:

$.ajax({    type: "get",    url: "getwxfxSign.ashx?url=" + encodeURIComponent(location.href.split('#')[0]),    success: function (data) {        if (data != null) {            data = JSON.parse(data);            var timeStamp = data.timeStamp;            var nonceStr = data.nonceStr;            var signature = data.signature;            wxfxConfig.timeStamp = timeStamp;            wxfxConfig.nonceStr = nonceStr;            wxfxConfig.signature = signature;            wxfxConfig.zm_title = "";            wxfxConfig.zm_summary = "";            wxfxConfig.zm_share = "";            wxfxConfig.init();        }    }})

确保你获取用来签名的url是动态获取的,前端需要用js获取当前页面除去’#’hash部分的链接(可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

wxfxConfig.js

var wxfxConfig = {    timeStamp: '',    nonceStr: '',    signature: '',    zm_title: '',    zm_summary: '',    zm_share: '',    zm_imgurl:'',    wxconfig: function () {        wx.config({            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。            appId: '', // 必填,公众号的唯一标识            timestamp: wxfxConfig.timeStamp, // 必填,生成签名的时间戳            nonceStr: wxfxConfig.nonceStr, // 必填,生成签名的随机串            signature: wxfxConfig.signature, // 必填,签名,见附录1            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2        });    },    wxready: function () {        wx.ready(function () {            wx.onMenuShareTimeline({                title: wxfxConfig.zm_title,//分享标题                desc: wxfxConfig.zm_summary,//分享摘要                link: wxfxConfig.zm_share,//分享链接                imgUrl: wxfxConfig.zm_imgurl,//分享图片                trigger: function (res) {                },                success: function (res) {                },                cancel: function (res) {                },                fail: function (res) {                    alert(JSON.stringify(res));                }            });            wx.onMenuShareAppMessage({                title: wxfxConfig.zm_title,                desc: wxfxConfig.zm_summary,                link: wxfxConfig.zm_share,                imgUrl: wxfxConfig.zm_imgurl,                trigger: function (res) {                },                success: function (res) {                },                cancel: function (res) {                },                fail: function (res) {                    alert(JSON.stringify(res));                }            });            //新加分享到qq,微博,qq空间            wx.onMenuShareQQ({                title: wxfxConfig.zm_title,                desc: wxfxConfig.zm_summary,                link: wxfxConfig.zm_share,                imgUrl: wxfxConfig.zm_imgurl,                success: function (res) {                },                cancel: function (res) {                },                fail: function (res) {                    alert(JSON.stringify(res));                }            });            wx.onMenuShareWeibo({                title: wxfxConfig.zm_title,                desc: wxfxConfig.zm_summary,                link: wxfxConfig.zm_share,                imgUrl: wxfxConfig.zm_imgurl,                success: function (res) {                },                cancel: function (res) {                },                fail: function (res) {                    alert(JSON.stringify(res));                }            });            wx.onMenuShareQZone({                title: wxfxConfig.zm_title,                desc: wxfxConfig.zm_summary,                link: wxfxConfig.zm_share,                imgUrl: wxfxConfig.zm_imgurl,                success: function (res) {                },                cancel: function (res) {                },                fail: function (res) {                    alert(JSON.stringify(res));                }            });        });    },    wxerror: function () {        wx.error(function (res) {            alert("接口验证失败,详细信息:\n" + JSON.stringify(res));        });    },    init: function () {        wxfxConfig.wxconfig();        wxfxConfig.wxready();        wxfxConfig.wxerror();    }}

getwxfxSign.ashx处理程序

using System;using System.Web;using System.Collections.Generic;public class getwxfxSign : IHttpHandler {    public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        if (string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["url"]))        {            return;        }        string timeStamp = string.Empty;        string nonceStr = string.Empty;        string signature = string.Empty;        nonceStr = CreateNoncestr();//16位随机字符串        timeStamp = GetTimeStamp();//时间戳        string url = HttpContext.Current.Request.QueryString["url"];        string jsapiTicket = GetJsapiTicket();//获取jsapi_ticket        Dictionary<string, string> signData = new Dictionary<string, string>() {                 {"noncestr",nonceStr},                {"jsapi_ticket",jsapiTicket},                {"timestamp",timeStamp},                {"url",url}            };        signature = Sign(signData);        context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { timeStamp = timeStamp, nonceStr = nonceStr, signature = signature }));    }    public bool IsReusable {        get {            return false;        }    }}

获取随机字符串:

public static String CreateNoncestr(){    String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";    String res = "";    Random rd = new Random();    for (int i = 0; i < 16; i++)    {        res += chars[rd.Next(chars.Length - 1)];    }    return res;}

获取jsapi_ticket可以参考这里