介绍 JS是什么 import wx 得到& # 39;weixin-js-sdk& # 39;;
wx.config ({
,调试:没错,
,appId: & # 39; & # 39;
时间戳:,,
,nonceStr: & # 39; & # 39;
,签名:& # 39;& # 39;
,jsApiList: []
});
wx.ready((),=祝辞,{
,//do 一些…
});
wx.error ((err),=祝辞,{
,//do 一些…
}); #,跑龙套
．
├──,common.js ,,,,, #,通用函数
└──自由
└才能──,wechat ,,,,, #,微信相关代码
,,,├──,auth ,,,, #,微信用户登陆获取信息相关代码
,,,│,,├──,auth.js
,,,│,,└──,index.js
,,,├──,config ,,, #, jssdk 初始化相关代码
,,,│,,└──,index.js
,,,├──,helper.js , #,微信相关操作
,,,└──,share ,,, #,分享接口相关代码
,,,,,└──,指数。js import sdk 得到& # 39;weixin-js-sdk& # 39;;
export function initSdk ({, appid、时间戳、,noncestr,,签名,,jsApiList }),{//大敌;从后端获取
,sdk.config ({
调试才能:process.env.VUE_APP_ENV !==, & # 39;生产# 39;
appId才能:appId,
时间戳:才能,时间戳,
,,nonceStr: nonceStr,
,,签名:签名,
jsApiList才能:jsApiList
,});
} //, example.vue
export default {
,名字:& # 39;示例# 39;
,wechatShareConfig (), {
return {才能
,,,标题:& # 39;示例# 39;
,,,描述:& # 39;example desc # 39;
,,,imgUrl: & # 39; https://cache.yisu.com/upload/information/20200622/114/32657.png& # 39;
,,,链接:window.location.href.split (& # 39; # & # 39;) [0]
,,};
,}
} //, wechatMixin.js
{},share import 得到& # 39;@/utils/lib/微信/分享# 39;;//,获取,wechat 分享接口配置
function getWechatShareConfig (vm), {
{,const wechatShareConfig },=, vm。美元选项;
,if (wechatShareConfig), {
return 才能typeof wechatShareConfig ===, & # 39;函数# 39;
,,,? wechatShareConfig.call (vm)
,,,:wechatShareConfig;
,}
｝
const wechatShareMixin =, {
,建立了(){
const 才能;wechatShareConfig =, getWechatShareConfig(这个);
if 才能;(wechatShareConfig), {
,才能分享({},…wechatShareConfig );
,,}
,}
};
export default wechatShareMixin; //,跑龙套/lib/微信分享
{},getTicket import 得到& # 39;@/utils/lib/微信/辅助# 39;,,//,签名接口
{},initSdk import 得到& # 39;@/utils/lib/微信/配置# 39;;
import sdk 得到& # 39;weixin-js-sdk& # 39;;//,接口清单
const JS_API_LIST =, (& # 39; onMenuShareAppMessage& # 39;,, & # 39; onMenuShareTimeline& # 39;];//,消息分享
function onMenuShareAppMessage(配置),{
{,const ,标题,desc,链接,,imgUrl },=,配置;
,sdk.onMenuShareAppMessage({,标题,desc,链接,,imgUrl });
｝//,朋友圈分享
function onMenuShareTimeline(配置),{
{,const ,标题,链接,,imgUrl },=,配置;
,sdk.onMenuShareTimeline({,标题、链接,,imgUrl });
｝
export function 分享(wechatShareConfig), {
,if (! wechatShareConfig.link), return 假;
,//签名验证
,getTicket (wechatShareConfig.link) (res =祝辞,{//才能,初始化,“jssdk”
initSdk({才能
,,,appid: res.appid,
,,,时间戳:res.timestamp,
,,,noncestr: res.noncestr,
,,,签名:res.signature,
,,jsApiList: JS_API_LIST
,,});
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要为大家详细介绍了如何在vue中使用微信jssdk逻辑,文中示例代码介绍的非常详细,具有一定的参考价值,发现的小伙伴们可以参考一下:
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
<强>微信jssdk在vue中的简单使用
以上是微信官方给出的示例代码,但是对于实际项目使用,还需要进一步对代码进行封装。本文基于vue进行示范,其余类框架同理。
在微信公众平台的官方文档中已经指出,由于安全性考虑,需要将签名逻辑放在后端处理,所以签名原理不在此赘述,主要讲讲如何使用后端返回后的签名调用jssdk。在逻辑层面,由于天气。配置方法是调用任何接口前所必须的,所以我们可以尽可能将其抽离出来单独放置。
这样就可以完成对jssdk的初始化,之后可以进行分享接口的初始化。最初的时候我想分享接口既然是可能对应每一个url页面(SPA应用中的视图),那么就应该在视图中使用混合混入来书写,所以产生了第一版实现。
