Um projeto recente precisava de compartilhamento do WeChat e de customização do conteúdo do compartilhamento do WeChat. Como esta foi a primeira vez que fui exposto ao compartilhamento do WeChat, registrei alguns dos problemas encontrados durante o processo, bem como todo o processo. de completar a função.
A seguir está o processo geral (os detalhes são colocados em cada etapa)
npm install weixin-js-sdk --save-dev
Para obter instruções específicas, consulte a documentação oficial do WeChat.
2. Inicialize o compartilhamento do WeChatComo muitos dos projetos em que estou trabalhando exigem o uso da função de compartilhamento do WeChat, o código compartilhado no WeChat será encapsulado aqui.
A API no código abaixo é na verdade uma solicitação de axios
importar wx de 'weixin-js-sdk'importar API de '@/api'const wxApi = { /** * [wxRegister inicialização da API WeChat] * @param {Função} retorno de chamada [função de retorno de chamada pronta] */ wxRegister (retorno de chamada, url) { let query = { // O URL aqui deve ser o URL que corresponde exatamente à página que você deseja compartilhar, e o URL base64 precisa ser convertido: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // Ativa o modo de depuração appId: data.appId, // Obrigatório, o identificador exclusivo do carimbo de data / hora da conta oficial: data.timestamp, // Obrigatório, gera o carimbo de data / hora da assinatura nonceStr: data.nonceStr, // Obrigatório, gera a string aleatória da assinatura assinatura: data.signature, // Obrigatório, assinatura, consulte o Apêndice 1 jsApiList: data.jsApiList // Obrigatório, uma lista de interfaces JS que precisam ser usadas, consulte o Apêndice 2 para uma lista de todas as interfaces JS }) }) wx.ready((res) => { // Se necessário Personalize o método de retorno de chamada pronto if (callback) { callback() } }) },}Nota: Se você precisar converter base64 acima, você pode usar js-base64
3. Configure o WeChat para compartilhar conteúdo personalizado (enviar para amigos, enviar para Moments)
A segunda etapa é inicializar a configuração do pacote para WeChat, mas ainda falta o compartilhamento correspondente e outras funções.
//Adicionar /*** após a função wxRegister [compartilhamento WeChat personalizado do ShareTimeline para Moments]* @param {[type]} opção [compartilhar informações]* @param {[type]} sucesso [retorno de chamada de sucesso]* @param {[ type]} erro [retorno de chamada de falha]*/ShareTimeline (option) {wx.updateTimelineShareData({ title: option.title, // Compartilhar link do título: option.link, // Compartilhar link imgUrl: option.imgUrl, // Ícone de compartilhamento sucesso () { // Configuração bem-sucedida}, cancelar () { // Configuração falhou}})},/*** [ShareAppMessage Compartilhamento WeChat personalizado para amigos]* @ param {[type]} opção [compartilhar informações]* @param {[type]} sucesso [retorno de chamada de sucesso]* @param {[tipo]} erro [retorno de falha com falha]*/ShareAppMessage (opção) {wx.updateAppMessageShareData({ title: option.title, // Compartilhar título desc: option.desc, // Compartilhar link de descrição: option.link, // Compartilhar link imgUrl: option.imgUrl, // Compartilhar ícone sucesso () { // Configuração bem-sucedida}, cancel () { // Configuração falhou}})}4. Ao ligar para a página
// vue como exemplo // Para os seguintes parâmetros de função, consulte o método acima import wx from 'seu arquivo encapsulado' montado(){ let base64 = require('js-base64').Base64 let url = base64. encode( window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ // Retorno de chamada jdk personalizado wxRegCallback () {}, // Função personalizada para compartilhar com amigos wxShareAppMessage(){ let option = { title:'', // Compartilhar título desc: '', // Compartilhar link de descrição: ' ', // Compartilhar link imgUrl: '' // Ícone de compartilhamento } // Injetar o método geral wx.ShareAppMessage(option) }, // Função personalizada para compartilhar com amigos círculo wxShareTimeline(){ let option = { title:'',// Compartilhar título desc: '', // Compartilhar link de descrição: '', // Compartilhar link imgUrl: '' // Ícone de compartilhamento } // Injeta o método geral wx.ShareTimeline(option) }}O texto acima é o processo de compartilhamento no WeChat. Se houver alguma deficiência, indique-a.
Observação:O compartilhamento do WeChat só pode ser testado em dispositivos reais
Nomes de domínio que usam o formato localhost não podem passar na verificação do WeChat
ResumirO texto acima é a implementação HTML5 do compartilhamento do WeChat e do conteúdo personalizado introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo.