使用新公共管理安装

新公共管理安装weixin-js-sdk

使用方法

main.js中

从weixin-js-sdk '导入women's extra large size 女式特大号

Vue.prototype.$share=(title=' '，IMgurl=' https://IMG。vhiphop。top/web/logo-图标。jpg ')={

title=`${title？标题： ' ' } Vhiphop唯舞`;

document.title=title

const link=窗口。位置。href

api.post('sign/wx '，{link}).然后(e={

wx.config({

debug: false，//关闭调试模式

appId: e.appId，//必填，公众号的标识

timestamp: e.timestamp，//必填，生成签名的时间戳

非波峰： e .非波峰，//必填，生成签名的随机串

签名环： e .签名，//必填，签名

jsApiList: [

' updateAppMessageShareData '，

updateTimelineShareData '，

] //必填，需要使用的射流研究…接口列表

});

wx.ready(function () { //需在用户可能点击分享按钮前就先调用

wx.updateAppMessageShareData({

标题，//分享标题

描述： '更多精彩，尽在唯舞网唯舞。', //分享描述

链接，//分享链接，该链接域名或路径必须与当前页面对应的公众号射流研究…安全域名一致

imgUrl，//分享图标

success: function () {

//设置成功

}

});

wx.updateTimelineShareData({

标题，//分享标题

链接，//分享链接，该链接域名或路径必须与当前页面对应的公众号射流研究…安全域名一致

imgUrl，//分享图标

success: function () {

//设置成功

}

});

});

}，e=控制台。log(e))；

};

如上，在某视频剪辑软件原型上声明$share方法，该方法接受2个参数：

标题：将要分享出去的标题

imgUrl:将要分享出去的封面图片统一资源定位器

每次调用$share方法都会重新设置页面的标题，并且请求服务端接口，获取微信分享需要的配置参数。

服务端生成配置参数

服务端需要返回的配置参数包含以下四个参数：

apppId:公众号的标识

时间戳：生成签名的时间戳

非现金：生成签名的随机字符串

签名：签名

服务器端编程语言(专业超文本预处理器的缩写)示例：

//获取请求

受保护的静态函数获取($url)

{

$ ch=curl _ init($ URL)；

curl_setopt($ch，CURLOPT_RETURNTRANSFER，1)；//设置是否将响应结果存入变量1 : 存入0 : 直接回声

curl_setopt($ch，CURLOPT_SSL_VERIFYPEER，false)；//设置禁止证书校验否则安全超文本传输协议地址无法访问

curl_setopt($ch，CURLOPT_TIMEOUT，20)；//设置更大响应时间

$ RES=curl _ exec($ ch)；//存入变量

curl _ close($ ch)；

返回$ res

}

//生成微信配置参数

公共函数wxSign(请求$r)

{

$ URL=$ r-get(' link ')；

！$ url self:error错误错误('分享统一资源定位器不能为空');

$ appId=' wx25 * * * * * * *//你的应用编号

if(！$ ticket=rds :3360 GeT(' web : ticket '){//直接从存储中读取

$ appSecret=' b5a7 * * * * * * * * * * *//你的密钥

$ RES=self : get(' https://API。微信。QQ。com/CGI-bin/token？grant _ type=client _ credential AppID={ $ AppID } secret={ $ AppSecret } ')；

$res=json_decode($res，true)；

！isset($ RES[' access _ token '])自身：错误(' access _ token获取失败，请重新尝试');

$ access _ token=$ RES[' access _ token ']；

$ RES=self : get(' https://API。微信。QQ。com/CGI-bin/ticket/getticket？access _ token={ $ access _ token } type=jsapi ')；

$res=json_decode($res，true)；

！isset($ RES[' err code '])self :错误(' ticket请求失败');

$res['errcode']！==0 self:error错误错误('票获取失败，请重新尝试，错误码： { $ RES[' errcode ']} ')；

$ ticket=$ RES[' ticket ']；

rds :3360 steex(' web :票'，7000美元，$ ticket)；//票过期时间为7200秒，设置存储过期时间7000秒即可

}

$ non crest=substr(str _ shuffle(' abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz ')，mt_rand(0，46)，16)；

$ time=time()；

self:go([

appId'=$appId，

时间戳=$时间，

nonceStr '=$ nonceStr，

签名=sha1(' jsapi _ ticket={ $ ticket } non estr={ $ non estr }时间戳={$time}url={$url} ')

]);

}

如上，wxSign方法中返回了四个必需的参数，前端可以请求接口获取参数。

在组件中调用

原理：每次URL发生变化，都需要再次调用$share方法刷新微信共享的URL，避免路由变化后次共享的URL。

示例：

Beforerouteupdate (to，from，next){//如果使用了钩子，则在next()之后调用$share

const { sort }=to.query

this.api.get('video '，{sort: sort || 0})。然后(e=this.videos=e，this . err)；

next()；

这个。$ share(' video ')；//标题和封面可以定制

},

Async beforeMount() {//次进入组件，正常请求完成后调用$share

const {api，sort }=this

等待承诺

api.get('home/sort ')。然后(e=this.sorts=e)，

api.get('video '，{sort})。然后(e=this.videos=e)，

]).catch(this . err)；

this.isLoading=false

这个。$ share(' video ')；//标题和封面可以定制

},

如上所述，次输入路由时，在beforeMount中正常请求业务数据后，调用$share方法。

如果路由改变，组件被重用，在beforeRouteUpdate钩子中正常请求业务数据后，再次调用$share方法。