本文主要介绍如何在微信中打开自己的页面，然后用户分享的时候，我们可以自定义分享后显示的页面卡片页面标题，页面描述，页面中的图片和分享链接。这个功能，具体是：打开你的微信首页，点击右上角的微信功能按钮，会出现功能菜单，点击分享给朋友、朋友圈、QQ好友等，选择对应的好友，发送打开对应的好友聊天界面，可以看到分享页面卡片与默认样式不同的显示。如下图，左边是我要分享的页面，右边是分享页面的卡片，分别是未自定义的分享信息和自定义的分享信息：风格已经很不一样了，最关键的是共享url也可以自定义。如果你默认分享，你当前页面的url是什么，那么它就是你分享的内容。在自定义情况下，可以自己定义url，具有很大的灵活性。当然，还是有一些限制，但至少，链接的参数是可以完全自定义的，本文后面会介绍。首先说一下从零开始完成自定义分享信息的过程：基础硬件服务：需要公网可以访问的有效域名：购买域名备案。我是在阿里云上购买的，备案需要十几个工作日。买个ip，然后设置上面的域名，解析到ip，这个时候可以忽略。有自己的服务器，存放自己的页面项目：我还是在阿里云买服务器，这个最贵，几百块一年的使用权。而且这个服务器本质上就是一台电脑，电脑有它的配置。目前只是自己学习使用，配置几乎是最低的，买的包自带公网ip。节省。综上所述，最后我只购买了一个域名和一个公网IP的服务器。服务器用于放置前端项目和后台项目。阿里云ECS：https://cn.aliyun.com/product/ecs微信公众平台，打开微信公众平台https://mp.weixin.qq.com/进行开发者认证，使用邮箱注册，注意一个邮箱只有你可以注册一个微信公众平台账号。一个账户只能选择一个账户类别，不能更改。你必须小心这里。您可以在此处选择一个订阅号。可以选择个人型、企业型等，其中个人型没有分享自定义功能，企业型不符合我的要求。..最后我还是选择了个人类型，因为即使我的账号没有权限，在微信里面提供一个功能齐全的测试账号还是没有问题的公众号，可以用来学习和测试。填写信息，绑定微信，完成注册，登录。为了开发，这里需要和你的后台项目和前端项目进行相应的配置，让微信确认后台项目和前端项目在提供服务之前是你的。关于服务端和后端项目的配置：首先需要说明的是，由于订阅号的功能比较少，如果只是为了学习，建议选择使用公众平台测试在Development=>DeveloperTools中学习开发的账号，这样就可以使用完整功能齐全的微信服务，配置相对较少。下面的配置步骤是使用自己的账号需要的配置开发=>基本配置=>公众号开发信息，这里记下开发者ID（AppID），然后激活服务，记下开发者密码（AppSecret）,在开发过程中需要输入。设置IP白名单，这里是自己服务器的IP地址，因为功能上线后需要使用这个服务器通过开发者号和密码到微信服务区获取自己服务的access_token才能进行下面的后台工程，目的是让微信确认这个后台工程是你的。验证方式是微信发起get请求，你返回正确的返回值。启用该配置后，调用：url：接口地址，如http://wx.my.com/forWxToken：一个完全自定义的字符串相当于一个密码，你的返回值需要这个字符串参与组装。EncodingAESKey：可以随机生成报文加解密方式：可选，我这里使用纯文本方式前端项目配置：设置=>公众号设置=>功能设置=>JS接口安全域名在这里添加你的需求使用微信sdk功能的网站域名，如wx.qq.com或wx.qq.com/user，最多可以写三个，需要验证。>验证方法是在该域名对应的服务器上放置的web项目的访问根目录下放一个微信提供的txt文件，需要结合主文件（多默认为```index.html）。html```)同级，提交的时候微信会访问获取文件，确认域名是你的。配置完成后，就可以进行开发了。下面进入代码阶段。在证明后台工程和前端工程时，我首先证明服务是我自己的部分。我们需要实现一个接口。我以http://wx.my.com/forWx为例，所以为了开启配置，我需要实现/forWx来调用微信，代码如下：省略了node的基础环境搭建，只接口内部方法写在这里，关键是参数加密和组装constcrypto=require('crypto')//导入加密模块constconfig=require('./config')//导入配置文件//提供给微信调用server.get('/forWx',function(req,res){res.header('Access-Control-Allow-Origin','*')//1.获取参数signature,timestamp,nonce,微信服务器获取请求的echostrletsignature=req.query.signature//微信加密签名lettimestamp=req.query.timestamp//时间戳letnonce=req.query.nonce//随机数letechostr=req.query.ecost//随机字符串//2.将token、timestamp、nonce按字典序排序，其中token为微信页面自定义字符集Stringletarray=[config.token,timestamp,nonce]array.sort()//3.将三个参数字符串拼接成一个字符串进行sha1加密lettempStr=array.join('')consthashCode=crypto.createHash('sha1')//创建一个加密类型letresultCode=hashCode.update(tempStr,'utf8').digest('hex')//4.开发者获取的加密字符串可以与签名进行比对来识别请求来自微信if(resultCode===signature){res.send(echostr)}else{res.send('mismatch')}})完成。以上就是为了证明服务器是我的。后面需要证明前端项目是我的。此处略过，因为它太简单了。只需要下载文件，放到自己的服务器中，前端项目的index.html就可以和上面同级操作了。只要你想开发微信公众号，这一步都是必须的。所有的基础开始正式开发。首先按照功能使用流程，按照步骤实现这个功能方法：用户在微信打开页面后，立即或者通过方法触发ajax，以当前url为参数请求自己的后台界面。后台请求微信服务器，发送自己的AppID和AppSecret，得到一个7200秒有效的Access_token。后台再次请求微信服务器，发送access_token，得到一张同样有效期为7200秒的Ticket（如果前端自己请求，Ticket还没有过期，就不用费心去请求微信了server两次，直接使用即可，access_token一样）后台有可用的Ticket，然后，生成如下参数返回给前端：timestamp：当前时间戳url：从前端传过来获取到TicketappId:ownAppIDsignature:noncestr,timestamp,url,jsapi_ticketstring用sh1加密前端最终拿到返回值，然后初步下载了微信服务（当然在初始化微信服务之前，需要引入js的微信SDK文件），初始化服务需要用到以上参数。同时，您可以配置您想要监控的用户操作，比如我们的关键---分享页面！执行微信配置后，编写配置完成的回调函数。在这个回调函数中，你可以定义用户分享页面时的页面参数。分享页面时，显示的分享卡片就是我们定义的内容！当然不只是分享页面，发朋友圈等也可以配置，而且配置项更多，可以入手！下面是前端获取微信授权的方法//微信初始化sdkletwxInitSdk=function(){letmyUrl=window.location.href.split('#')[0]console.log('我的url:',myUrl)$.ajax({url:BASE_URL+'/getsign',type:'post',data:{url:myUrl,},success:function(data){console.log(data)wx.config({debug:false,//开启debug模式，开发时可以开启appId:data.appId,//必填，公众号的唯一标识由接口返回timestamp:data.timestamp,//Mandatory,生成签名的时间戳由接口返回nonceStr:data.noncestr,//Mandatory,生成签名的随机字符串由接口url返回:data.url,//Mandatory,的随机字符串生成的签名由接口signature返回:data.signature,//必填，签名由接口jsApiList返回:['updateAppMessageShareData',//share]//这里填写你使用的方法});//方法监听wx.ready(function(){console.log('初始化成功')wx.updateAppMessageShareData({title:'我们的标题',//分享标题desc:'我们的描述',//分享描述链接：window.location.href,//分享链接，链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:window.location.protocol+'//'+window.location.hostname+'/img.jpg',//分享图标type:"link",//分享类型，音乐，视频或链接，不填默认为链接dataUrl:"",//如果type为音乐或视频，必须提供数据链接，默认为空success:function(){//用户确认分享后执行的回调函数console.log("分享配置完成");},cancel:function(){//用户取消分享后执行的回调函数console.log('Sharingcancel')}});})wx.error(function(res){console.log('初始化失败')console.log(res)})},error:function(error){console.log('error')}})}的下面是节点端的一系列方法constsha1=require('sha1')constconfig=require('./config')//导入配置文件//临时缓存constmyCache={access_token:{setedTime:0,//数据设置时间val:undefined,//数据值},jsapi_ticket:{setTime:0,//数据设置时间val:undefined,//数据值},}//获取access_tokenconstgetAccess_token=()=>{//access_token没有过期if(myCache.access_token.val&&(Math.floor(Date.now())-myCache.access_token.setedTime)/1000<7100){returnPromise.resolve(myCache.access_token.val)}else{//access_token过期returnnewPromise((resolve,reject)=>{request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`,function(error,response,body){if(!error&&am;response.statusCode==200){lettokenMap=JSON.parse(body)//缓存access_tokenmyCache.access_token.setedTime=Math.floor(Date.now())myCache.access_token.val=tokenMap.access_tokenresolve(tokenMap.access_token)}else{reject(error)}})})}}//获取TicketconstgetJsapi_ticket=()=>{//缓存的签名没有过期---微信规定过期时间为7200秒，设置一下你自己在这里7100秒，留下100秒的延迟if(myCache.jsapi_ticket.val&&(Math.floor(Date.now())-myCache.jsapi_ticket.setedTime)/1000<7100){returnPromise.resolve(myCache.jsapi_ticket.val)}else{//过期了，重新获取returnnewPromise((resolve,reject)=>{//先获取tokenutils.getAccess_token().then(access_token=>{request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+access_token+'&type=jsapi',function(error,resp,json){if(!error&&resp.statusCode==200){letticketMap=JSON.parse(json)//缓存票证myCache.jsapi_ticket.setedTime=Math.floor(Date.now())myCache.jsapi_ticket.val=ticketMap.ticketresolve(ticketMap.ticket)}else{reject(error)}})}).catch(error=>reject(error))})}}//自己前端调用获取微信签名server.post('/getsign',(req,res)=>{try{params=req.bodyif(!params&&!params.url)returnres.send('请设置页面的url')leturl=params.url//getticketgetJsapi_ticket().then(jsapi_ticket=>{letnum=Math.random()letnoncestr=num.toString(32).substr(3,20)//随机字符串lettimestamp=Math.floor(Date.now()/1000)//精确到秒letobj={noncestr,timestamp,url,appId:config.appId,jsapi_ticket,signature:sha1('jsapi_ticket='+jsapi_ticket+'&noncestr='+noncestr+'×tamp='+timestamp+'&url='+url)}res.send(obj)}).catch(error=>{res.send(error)})}catch(error){res.send(error)}})整体功能实现步骤和具体代码如上，请酌情参考
