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&timestamp=$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

添加安全域名