vue 微信分享 weixin-js-sdk
vue前端
1 安装微信sdk weixin-js-sdk
npm install weixin-js-sdk --save
2 安装jquery 我用的是ajax发送请求
npm install jquery --save
我封装好的代码
我放在 /src/utils/share.js
import wx from 'weixin-js-sdk' import $ from 'jquery' //stitle 分享标题 //sdesc 分享描述 //slink 分享链接 //simgUrl 分享图标 function share(stitle,sdesc,slink,simgUrl){ var url = encodeURIComponent(location.href.split("#")[0]); $.ajax({ type: "get", url: "http://www.xxxxxx.com/share.php?link=" + url, dataType: "json", contentType: "application/json; charset=utf-8", success: function(e) { var d = e.appid, i = e.timestamp, t = e.noncestr, n = e.signature; wx.config({ debug: false, appId: d, timestamp: i, nonceStr: t, signature: n, jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] }), wx.ready(function() { //执行分享的方法 wx.onMenuShareTimeline({ title: stitle, desc: sdesc, link: slink, imgUrl: simgUrl }), //分享的信息 wx.onMenuShareAppMessage({ title: stitle, desc: sdesc, link: slink, imgUrl: simgUrl }) }) } }); } export default { share };
vue 在需要分享的页面调用
引入封装好的代码
import wxShare from '../../utils/share.js'
执行
var stitle = "全民购物商城"; var sdesc = "欢迎来到全民购物商城"; var slink = "http://www.quanmingou168.com"; var simgUrl = "http://www.quanmingou168.com/static/img/logo.png"; wxShare.share(stitle,sdesc,slink,simgUrl)
服务器端代码,填写一下你的appid , 和 appsecret
<?php //允许接口跨域请求 header("Access-Control-Allow-Origin:*"); header("Access-Control-Allow-Methods:GET, POST, DELETE"); header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding"); // 步骤1.设置appid和appsecret $appid = 'appid'; //此处填写绑定的微信公众号的appid $appsecret = '密钥id'; //此处填写绑定的微信公众号的密钥id // 步骤2.生成签名的随机串 function nonceStr($length){ $str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//随即串,62个字符 $strlen = 62; while($length > $strlen){ $str .= $str; $strlen += 62; } $str = str_shuffle($str); return substr($str,0,$length); } // 步骤3.获取access_token $result = http_get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret); $json = json_decode($result,true); $access_token = $json['access_token']; function http_get($url){ $oCurl = curl_init(); if(stripos($url,"https://")!==FALSE){ curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($oCurl, CURLOPT_SSLVERSION, 1); //CURL_SSLVERSION_TLSv1 } curl_setopt($oCurl, CURLOPT_URL, $url); curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1 ); $sContent = curl_exec($oCurl); $aStatus = curl_getinfo($oCurl); curl_close($oCurl); if(intval($aStatus["http_code"])==200){ return $sContent; }else{ return false; } } // 步骤4.获取ticket $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$access_token"; $res = json_decode( http_get ( $url ) ); $ticket = $res->ticket; // 步骤5.生成wx.config需要的参数 $surl = $_GET['link']; $ws = getWxConfig( $ticket,$surl,time(),nonceStr(16) ); function getWxConfig($jsapiTicket,$myurl,$timestamp,$nonceStr) { global $appid; $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$myurl"; $signature = sha1 ( $string ); $WxConfig["appid"] = $appid; $WxConfig["noncestr"] = $nonceStr; $WxConfig["timestamp"] = $timestamp; $WxConfig["url"] = $myurl; $WxConfig["signature"] = $signature; $WxConfig["rawstring"] = $string; return $WxConfig; } echo json_encode($ws); ?>
微信开发准备
拿到 appid 和 appsecret
添加安全域名