项目中使用JS-SDK步骤介绍

 

项目中使用JS-SDK步骤介绍

需求背景：在微信浏览器中打开网站页面，通过微信浏览器自带的分享按钮分享给朋友或者是朋友圈之后能够自定义分享的图片、描述等相关信息。

实现：使用JS-SDK，利用微信提供的API进行参数配置即可。其实整个过程非常简单，主要是本小白之前没有用过JS-SDK，所以摸索使用方式花费了一些时间。JS-SDK官方文档

步骤介绍 ：

1. 绑定域名，文档说明如下图所示。

     需要注意的一点是：填写的域名必须通过ICP备案验证。另外，下载证书文件后，将文件上传到服务器上，这里文件上传到前端服务器或者是后端服务器都可以，只要可以访问到即可，然后填写相应的上传路径即可。

    2.引入JS文件。引入JS文件有两种方法：

        方法一：如官方文档中所示，创建一个script标签，然后引用相应的JS文件。在使用时可以写一个函数专门用于引入JS文件。

function importWx(callback) {
    if (window.wx) {
        callback && callback()
    } else {        
        var url = "/static/js/utils/jweixin-1.4.0.js";
        var script = document.createElement("script");
        script.src = url
        document.body.appendChild(script);
        if(script.addEventListener){
        　　script.addEventListener("load", callback, false);
        } else if (script.attachEvent){
        　　script.attachEvent("onreadystatechange", function(){
        
        　　　　var target = window.event.srcElement;
        
        　　　　 if(target.readyState == "loaded" || target.readyState == "complete"){
        　　　　　　callback && callback.call(target);
        　　　　}
        
        　　});
        }
    }
}

        方法二：使用封装js-sdk的第三方库。

       

//安装
npm install weixin-js-sdk

//使用
const wx = require("weixin-js-sdk");

    3. 进行接口权限认证，官方文档描述如下图所示：

签名算法详细步骤。由于进行接口权限认证需要先获取到签名，而获取签名的过程中涉及到获取access_token等敏感信息，所以这个过程放在后端进行，然后由后端同学提供一个接口，用于返回timestamp、nonceStr、signature、jsapi_ticket等字段让前端同学进行认证。

    4. 验证通过之后就可以调用微信的API接口了。

//wx-share.js
export const initWx = (wxConfig, shareConfig, cb) => {
  if (typeof window != "undefined") {
    const wx = require("weixin-js-sdk");
    wx.config(
      Object.assign(
        {
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "", // 必填，公众号的唯一标识
          timestamp: "", // 必填，生成签名的时间戳
          nonceStr: "", // 必填，生成签名的随机串
          signature: "", // 必填，签名
          jsApiList: [
            "updateTimelineShareData",
            "onMenuShareTimeline",
            "updateAppMessageShareData",
            "onMenuShareAppMessage"
          ] // 必填，需要使用的JS接口列表
        },
        wxConfig
      )
    );

    wx.ready(function() {
      //需在用户可能点击分享按钮前就先调用
      //分享到朋友圈
      wx.updateTimelineShareData &&
        wx.updateTimelineShareData(
          Object.assign(
            {
              title: "", // 分享标题
              link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "" // 分享图标
            },
            shareConfig
          ),
          function(res) {
            //这里是回调函数
            cb && cb(res);
          }
        );
      wx.onMenuShareTimeline &&
        wx.onMenuShareTimeline(
          Object.assign(
            {
              title: "", // 分享标题
              link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "", // 分享图标
              success: function() {
                // 用户点击了分享后执行的回调函数
              }
            },
            shareConfig
          )
        );
      //分享给朋友
      wx.updateAppMessageShareData &&
        wx.updateAppMessageShareData(
          Object.assign(
            {
              title: "", // 分享标题
              desc: "", // 分享描述
              link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "", // 分享图标
              success: function() {
                // 设置成功
              }
            },
            shareConfig
          )
        );
      wx.onMenuShareAppMessage &&
        wx.onMenuShareAppMessage(
          Object.assign(
            {
              title: "", // 分享标题
              desc: "", // 分享描述
              link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: "", // 分享图标
              type: "", // 分享类型,music、video或link，不填默认为link
              dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
              success: function() {
                // 用户点击了分享后执行的回调函数
              }
            },
            shareConfig
          )
        );
    });

    wx.error(function(res) {
      console.log(res);
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
  }
};

    5.使用方式：在需要进行微信分享的页面引入initWx即可。例如：

import React, { Component } from "react";
import axios from 'axios';
import { initWx } from "../../../../utils/wx-share";

class NewsArticleComponent extends Component {
    componentDidMount() {
        axios({
        	method: 'get',
       		url: "后端提供的返回签名接口"
    	}).then(res => {
            if(res && res.code === 0 && res.data){
                initWx({
                    ...res.data
                },{
                    title:"自定义title",
                    keywords:"自定义keywords",
            	    desc: "自定义描述内容",
            	    imgUrl: "自定义图片"
                })
            }
        });
    }
    render() {
        return (
        	<div>我要分享啦~~~</div>
        )
    }
}

效果图：

        到这里就成功啦！其实，这部分逻辑和代码都很简单，主要是摸索如何使用需要花费时间，所以希望通过这篇贴子来减少大家的摸索时间，与大家共同进步！