Como implementar o compartilhamento de páginas HTML5 no WeChat

O compartilhamento do WeChat pode parecer complicado à primeira vista, mas na verdade é muito simples. Você só precisa chamar o WeChat jssdk lançado pelo WeChat e adicionar algumas configurações para realizar o compartilhamento de páginas h5 no WeChat. O endereço oficial do documento é: https://mp.weixin.qq.com/wiki?t=resource/res_main&id. = mp1421141115

Encontre o appid de uma conta oficial existente, faça uma solicitação ao backend com base neste appid e URL e obtenha os parâmetros necessários para configuração: carimbo de data/hora, noncestr e assinatura.

Apresente o arquivo JS-SDK do site oficial do WeChat por meio da tag de script

 <script src=https://res.wx.qq.com/open/js/jweixin-1.2.0.js type=text/javascript></script>

2. Configuração básica

 wx.config({ debug: false, // Se deve ativar o modo de depuração appId: appid, //appid timestamp: timestamp, // timestamp nonceStr: noncestr, // assinatura de string aleatória: assinatura, // assinatura jsApiList: [ ' onMenuShareTimeline ', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] // Lista de interfaces JS a serem usadas})

3. Uso

 wx.ready(function(){ // Compartilhar com amigos wx.onMenuShareAppMessage({ title: title, // Compartilhar título desc: desc, // Compartilhar link de descrição: link, // Compartilhar link imgUrl: imgUrl, // Compartilhar ícone sucesso: function () { doShareDone() }, cancelar: function () { doShareCancel() } }) // Compartilhar no Moments wx.onMenuShareTimeline({ title: title, // Compartilhar link do título: link, // Compartilhar link imgUrl: imgUrl, // Compartilhar ícone sucesso: function () { doShareDone() }, cancelar: function () { doShareCancel () } })}) 

 // Função de retorno de chamada de sucesso do compartilhamento doShareDone () { console.log('Compartilhamento bem-sucedido')} 

 //Cancelar função de retorno de chamada de compartilhamento doShareCancel () { console.log('Compartilhamento cancelado')}

Quando o campo de depuração em wx.config estiver definido como verdadeiro, a depuração poderá ser executada.

Para depuração, você precisa usar as ferramentas de desenvolvedor do WeChat, selecionar o projeto da página da web da conta oficial e inserir o endereço da página.

O Apêndice 5 da documentação do WeChat JS-SDK contém soluções para a maioria dos problemas. Aqui listo alguns que encontrei que não forneceram soluções acima.

1. TypeError não capturado: não é possível ler a propriedade 'config' de indefinido

Solução: A página html introduziu o SDK separadamente, e o componente unificado também introduziu o SDK novamente, causando problemas. Exclua um deles.

2. TypeError não capturado (em promessa): Não é possível ler a propriedade 'pronta' de indefinido

Solução: Igual ao problema 1.

3. assinatura inválida

Solução: Se nenhum dos métodos do documento resolver esse problema, há outra maneira de definir primeiro a configuração mais básica para torná-la correta e, em seguida, configurar a cópia de compartilhamento com vários parâmetros necessários. problema. Após a configuração, ele foi compartilhado com sucesso. Pode ser um pouco confuso dizer, mas um entendimento simples é que, desde que a página tenha uma configuração de configuração bem-sucedida, você poderá continuar a configurar outros compartilhamentos, mesmo que a assinatura dessa configuração de compartilhamento seja inválida.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.