Recentemente, a empresa criou uma página H5 para os alunos votarem. Ela é usada principalmente no WeChat e precisa adicionar a função de compartilhamento do WeChat;
Este artigo registra principalmente os assuntos que precisam de atenção ao chamar a interface de compartilhamento do WeChat;
1. Para a estrutura angular1 usada no front-end, primeiro você precisa introduzir o arquivo de interface do WeChat na página de índice;
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2. Escreva a função de compartilhamento WeChat no arquivo myApp.run. Observe que esta função precisa obter e analisar a URL da página atual e, em seguida, enviá-la ao back-end para gerar a assinatura correspondente e fazer upload do código diretamente;
// Função de compartilhamento do WeChat function wxShare() { var url = $location.absUrl().split('#')[0]; código == 0) { var respanse = res.data.data; Quando o modo de depuração está ativado, os valores de retorno de todas as chamadas de API serão alertados no lado do cliente. Se desejar visualizar os parâmetros recebidos, você pode abri-los no lado do PC. log e appId serão impressos apenas no lado do PC respanse.appId, timestamp: respanse.timestamp, // Obrigatório, gere o carimbo de data e hora da assinatura nonceStr: respanse.nonceStr, // Obrigatório, gere a assinatura da string aleatória do assinatura: respanse.signature,// Obrigatório, assinatura jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// Obrigatório, lista de interfaces JS que precisam ser usadas} } }); ) }Depois de analisar o URL atual, envie-o para a interface de back-end. O back-end precisa retornar o appId, carimbo de data / hora, string aleatória e assinatura e, em seguida, adicionar a lista de interfaces (jsApiList) manualmente, conforme necessário. a forma de um array só uso aqui.
Ao depurar, você pode alterar a depuração para verdadeiro, de modo que toda vez que a interface do WeChat for chamada, as informações da interface serão alertadas, facilitando a verificação se a chamada da interface está normal;
3. Após esta função, personalize o conteúdo de compartilhamento, o código é o seguinte;
wx.ready(function () { var obj = { title: 'A competição por equipes do SPBCN começou a votar!', // Compartilhe o título desc: 'A competição por equipes do SPBCN começou a votar, venha torcer por nós!', // Descrição do compartilhamento link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // Compartilhar link, o nome de domínio ou caminho do link deve ser consistente com o nome de domínio de segurança JS da conta pública correspondente ao atual página // Este link é um link de redirecionamento porque é necessário obter o código do usuário, mas este link não pode escrever diretamente o link para o WeChat para obter o código // Portanto, você precisa clicar e recarregar a nova página para implementar o redirecionamento e reabrir o. Link WeChat para obter o código, para implementar a função de obtenção de informações do usuário; imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // Falha no ícone de compartilhamento: function (res) { alerta(JSON.stringify(res)) } }; // 2.1 Monitore o compartilhamento com amigos, cliques em botões, compartilhamento de conteúdo personalizado e interface de resultados de compartilhamento wx.onMenuShareAppMessage(obj); // 2.2 Monitore cliques em botões de compartilhamento com amigos, compartilhamento de conteúdo personalizado e interface de resultados de compartilhamento wx.onMenuShareTimeline (obj) ; // 2.3 Monitore o compartilhamento para cliques no botão QQ, personalize o compartilhamento de conteúdo e a interface de compartilhamento de resultados wx.onMenuShareQQ(obj); 2.4 Monitore o clique do botão de compartilhamento no Weibo, personalize o conteúdo de compartilhamento e a interface de resultados de compartilhamento wx.onMenuShareWeibo(obj); // 2.5 Monitore o clique do botão de compartilhamento no QZone, personalize o conteúdo de compartilhamento e a interface de compartilhamento wx. onMenuShareQZone(obj });wx.ready é executado automaticamente após wx.config Eu defino um objeto geral para compartilhar conteúdo e, em seguida, chame-o diretamente. Você também pode definir conteúdo diferente para compartilhar amigos, círculo de amigos, Weibo, etc., conforme necessário. Documentação da interface WeChat para detalhes;
A ênfase principal está no link de compartilhamento. O link deve estar no nome de domínio seguro JS definido por sua conta oficial, caso contrário o compartilhamento não será bem-sucedido;
Os sintomas de falha no compartilhamento são que a imagem do link de compartilhamento não consegue carregar sua imagem personalizada e o título de compartilhamento está incorreto;
5. Meu projeto é para votação, então preciso obter o código do usuário toda vez que clico nele. Se você acabou de compartilhar um artigo e não precisa de informações do usuário, basta alterar o link para o link do seu artigo;
6. Para a categoria de votação, fiz um tratamento especial aqui, ou seja, redirecionando o link. Todos sabem que existem duas formas de o H5 obter informações do usuário do WeChat. usuário para obter informações públicas do usuário. O usuário clica em OK. No entanto, ambos precisam ser unidos em um link especial do WeChat de acordo com os requisitos do WeChat. Portanto, o nome de domínio vem com o WeChat e não é o nome de domínio seguro JS de nossa própria conta oficial;
7. Portanto, para o link compartilhado, se você ainda precisar obter o código do usuário, deverá usar outros métodos para obtê-lo. O que usei foi adicionar uma página em branco e, após o carregamento da página, pular para o WeChat para obtê-lo. o link do código, http://dev.spbcn.org/wechat-vote-phone/redirect.html Este link é uma página em branco. O código desta página é o seguinte;
janela.onload = function () { // Link de redirecionamento, que é igual ao link para obter o código do usuário na conta oficial do WeChat window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=public account appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8. Este método tem desvantagens, ou seja, adiciona uma página extra em branco. Ainda não pensei em uma boa maneira.
9. Se esta etapa não for adicionada, o link compartilhado será exibido normalmente, mas o código não poderá ser obtido e o backend não poderá determinar o usuário, resultando na incapacidade de restringir a votação dos usuários;
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.