Etapas para usar o JS-SDK no projeto
Histórico da demanda: abra a página do site no navegador WeChat e compartilhe-a com amigos ou círculo de amigos através do botão de compartilhamento que acompanha o navegador WeChat.Você pode personalizar as fotos, descrições e outras informações relacionadas.
Implementação: use JS-SDK, use a API fornecida pelo WeChat para configurar os parâmetros. De fato, todo o processo é muito simples, principalmente porque este xiaobai não usou o JS-SDK antes, então demorou algum tempo para explorar como usá-lo. Documentação oficial do JS-SDK
Introdução da etapa:
- Vincule o nome do domínio, a descrição do documento é mostrada abaixo.
Note-se que o nome do domínio deve ser verificado pelo registro ICP . Além disso, após o download do arquivo de certificado, faça o upload do arquivo no servidor, onde o arquivo pode ser carregado no servidor front-end ou no servidor back-end, desde que possa ser acessado e preencha o caminho de upload correspondente.
2. Introduza os arquivos JS. Existem duas maneiras de introduzir arquivos JS:
Método 1: Conforme mostrado na documentação oficial, crie uma tag de script e faça referência ao arquivo JS correspondente. Quando em uso, você pode escrever uma função especificamente para importar arquivos 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);
}
});
}
}
}Método 2: Use uma biblioteca de terceiros que encapsule js-sdk.
//安装
npm install weixin-js-sdk
//使用
const wx = require("weixin-js-sdk");3. Execute a autenticação de permissão de interface, a descrição oficial do documento é mostrada na figura a seguir:
Etapas detalhadas do algoritmo de assinatura . Como a autenticação de permissão da interface precisa obter a assinatura primeiro, e o processo de obtenção da assinatura envolve a obtenção de informações confidenciais, como access_token, esse processo é realizado no back-end e, em seguida, os colegas de classe do back-end fornecem uma interface para retornar o carimbo de data / hora, nonceStr, A assinatura, jsapi_ticket e outros campos permitem que os alunos front-end se autentiquem.
4. Após a verificação, você pode chamar a interface da API do WeChat.
//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. Método de uso: O InitWx pode ser introduzido na página em que o compartilhamento do WeChat é necessário. Por exemplo:
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>
)
}
}Imagem de efeito:
Sucesso aqui! De fato, essa parte da lógica e do código é muito simples, principalmente porque leva tempo para explorar como usá-lo, por isso espero que este post reduza o tempo de exploração de todos e faça progressos junto com você!
