vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixinjssdk@1.6.0)

一，安装微信分享用到库:

liuhongdi@lhdpc:/data/vue/guotou$ npm i  weixin-js-sdk --save
 
added 1 package in 3s

liuhongdi@lhdpc:/data/vue/guotou$ npm i --save axios
 
added 5 packages in 6s

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，js代码:

1,引入库:

import axios from 'axios'
import wx from 'weixin-js-sdk’;

2,在mounted中调用:

setup() {
    onMounted(() => {
     //get weixin sdk
      getWxSdk();
    });

 //微信分享的功能
const getWxSdk = () => {
            let wxUrl = location.href.split('#')[0];
            let url = 'https://www.yourdomain.com/guotouapi/wx.php';
 
      let postData = new FormData()
      postData.append('url', wxUrl);
 
            axios({
              method:"post",
              url:url,
              data:postData,
              headers:{'Content-Type': 'multipart/form-data'},
            }).then((res) => {
                  console.log(res.data);
              console.log("appId:"+res.data.appId);
              console.log("signature:"+res.data.signature);
              console.log("nonceStr:"+res.data.nonceStr);
              console.log("timestamp:"+res.data.timestamp);
 
              wx.config({
                debug: true, // 开启调试模式,
                appId: res.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.signature,// 必填，签名，见附录1
                jsApiList: [
                  "checkJsApi",
                  "updateAppMessageShareData",
                  "updateTimelineShareData",
                  "onMenuShareTimeline",
                  "onMenuShareAppMessage",
                  "onMenuShareQQ",
                  "onMenuShareQZone",
                  "onMenuShareWeibo",
                ] // 必填，需要使用的js接口列表，所有js接口列表见附录2
              });
 
                  wx.ready(function () {
                    wx.updateAppMessageShareData({
                      title: "国投",   // 分享时的标题
                      desc: '以投资创造更美好的未来', // 分享描述
                      link: wxUrl,     // 分享时的链接
                      imgUrl: 'https://www.yourdomain.com/guotou2/static/image/logo.png', // 分享图标
                      success: function () {
                        console.log("分享成功");
                      },
                      cancel: function () {
                        console.log("取消分享");
                      }
                    });
 
                    wx.updateTimelineShareData({
                      title: '国投——以投资创造更美好的未来',
                      link: wxUrl,
                      imgUrl:  'https://www.yourdomain.com/guotou2/static/image/logo.png',
                      success: function () {
                      }
                    });
                  });
                }
            );
    }

三，接口的php代码:

<?php
  define("MBLOG_LOCAL_PATH”,"/web/webroot");
 
   require_once MBLOG_LOCAL_PATH."/html/guotouapi/jssdk.php"; //表示主机根目录下jssdk文件夹内jssdk.php文件
 
  if (isset($_POST['url']) && $_POST['url'] != "") {
     $url = $_POST['url'];
  } else {
    $url = '';
  }
  $jssdk = new JSSDK("wxf12a3bcd4e56789", “1f2gh3456i7j89k01lmno2opq34rstu5");//填写开发者中心你的开发者ID,
  $signPackage = $jssdk->GetSignPackage($url);
  echo json_encode($signPackage);
  exit;
?>

四，查看效果

1，分享到朋友圈的界面

2,发送给朋友或群里的效果:

五，查看vue的版本:

liuhongdi@lhdpc:/data/vue/guotou2$ npm list vue
guotou@0.1.0 /data/vue/guotou2
├─┬ @vue/cli-plugin-babel@5.0.4
│ └─┬ @vue/babel-preset-app@5.0.4
│   └── vue@3.2.33 deduped
├─┬ @vueuse/core@8.3.1
│ ├─┬ @vueuse/shared@8.3.1
│ │ └── vue@3.2.33 deduped
│ ├─┬ vue-demi@0.12.5
│ │ └── vue@3.2.33 deduped
│ └── vue@3.2.33 deduped
└─┬ vue@3.2.33
  └─┬ @vue/server-renderer@3.2.33
    └── vue@3.2.33 deduped

查看weixin-js-sdk的版本:

liuhongdi@lhdpc:/data/vue/guotou2$ npm list weixin-js-sdk
guotou@0.1.0 /data/vue/guotou2
└── weixin-js-sdk@1.6.0