プロジェクトでJS-SDKを使用する手順
デマンドバックグラウンド：WeChatブラウザーでWebサイトページを開き、WeChatブラウザーに付属の共有ボタンを使用して友達や友達のサークルと共有します。共有する画像、説明、その他の関連情報をカスタマイズできます。
実装：JS-SDKを使用し、WeChatが提供するAPIを使用してパラメーターを構成します。実際、主にこのxiaobaiがJS-SDKを使用したことがないため、プロセス全体が非常に単純なので、使用方法を調査するのに少し時間がかかりました。JS-SDK公式ドキュメント
ステップ紹介：
- ドメイン名をバインドします。ドキュメントの説明を以下に示します。
ドメイン名はICPレコードで確認する必要がある ことに注意してください。さらに、証明書ファイルをダウンロードした後、ファイルをサーバーにアップロードします。サーバーにアクセスできる限り、ファイルをフロントエンドサーバーまたはバックエンドサーバーにアップロードできます。次に、対応するアップロードパスを入力します。
2. JSファイルを紹介します。JSファイルを導入するには2つの方法があります。
方法1：公式ドキュメントに示されているように、スクリプトタグを作成してから、対応する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);
}
});
}
}
}方法2：js-sdkをカプセル化するサードパーティライブラリを使用します。
//安装
npm install weixin-js-sdk
//使用
const wx = require("weixin-js-sdk");3.インターフェース許可認証を実行します。公式文書の説明を次の図に示します。
署名アルゴリズムの詳細な手順。インターフェース許可認証は最初に署名を取得する必要があり、署名を取得するプロセスにはaccess_tokenなどの機密情報の取得が含まれるため、このプロセスはバックエンドで実行され、バックエンドのクラスメートはタイムスタンプを返すインターフェースnonceStrを提供します署名、jsapi_ticketおよびその他のフィールドを使用して、フロントエンドの学生が認証できます。
4.確認後、WeChatの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.使用方法：WeChatの共有が必要なページで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>
)
}
}効果画像：
ここで成功！実際、ロジックとコードのこの部分は非常に単純です。主にそれを使用する方法を探求するのに時間がかかるため、この投稿がみんなの探査時間を短縮し、あなたと一緒に進歩することを願っています！
