Este artigo resume o uso do WeChat JSSDK e o compartilha com você para sua referência. O conteúdo específico é o seguinte
1. Ligue o nome do domínio
2.Introduzir o arquivo JS
Apresente o seguinte arquivo JS na página que precisa ligar para a interface JS (suporte https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Observe que, se a sua página tiver HTTPS ativada, certifique-se de apresentar https://res.wx.qq.com/open/js/jweixin-1.0.0.js, caso contrário, você não poderá usar com sucesso o JSSDK em sistemas iOS9.0 ou acima.
3. Verifique a configuração através da interface de configuração
Esta etapa é obter uma série de parâmetros enviando uma solicitação para o plano de fundo usando o URL atual. Ou seja, o plano de fundo usará meu URL para verificar no WeChat. As coisas a serem observadas aqui são usadas para verificar o método atual de escrita de URL.
Seja url = local.href.split ('#') [0];
Certifique -se de escrever a situação acima. Caso contrário, a assinatura inválida do tempo de configuração será executada.
Confirme que o URL é o URL completo da página (confirme na página atual Alert (location.href.split ('#') [0])), incluindo a parte 'http (s): //' e '? 'A parte do parâmetro GET depois dela, mas não inclui a peça após o hash'#'.
Verifique se o URL que você se acostuma a assinar é obtido dinamicamente. Você pode consultar o método de implementação do PHP no código de exemplo para a página dinâmica. If the static page of html is passed to the backend to the signature of the URL through ajax on the front end, the front end needs to use js to get the current page and remove the link to the '#'hash part (you can get the location.href.split('#')[0], and encodeURIComponent is required), because once the page is shared, the WeChat client will add other parameters at the end of your link. Se o link atual não for obtido dinamicamente, a assinatura da página após o compartilhamento falhará.
Preste atenção à dinâmica aqui, não a coloque sozinha e codifique o Uricomponent ao mesmo tempo.
$ .ajax ({type: 'get', url: url, datatype: 'jsonp'}). Então ((dados) => {wx.config ({{Debug: true, // LIGUE o modo de depuração, os valores de retorno de todos os APIs chamados serão alertados no cliente. PC Lado.4. Verificado com sucesso através do processamento de interface pronto
Após a verificação das informações de configuração, o método pronto será executado. Todas as chamadas de interface devem ser obtidas após a interface de configuração obter o resultado. Config é uma operação assíncrona de um cliente. Portanto, se você precisar chamar a interface relevante quando a página for carregada, você deverá colocar a interface relevante na função pronta para ser chamada para garantir a execução correta. Para interfaces chamadas apenas quando o usuário acionar, eles podem ser chamados diretamente sem colocá -los na função pronta.
wx.ready (() => {// alert ('pronto'); //$('#onMenushareAppMessage').on('Click ', () => {// Compartilhe com amigos wx.onmenusharepMessage ({title:' ', descre,', link: shareurl, imgul: '{{title:' ',', '', link: shareurl, imgul: para amigos '); // Compartilhe com momentos wx.onmenusharetimeline ({title: '', // Compartilhe o link do título: shareurl, // Compartilhe link iMgurl: '', // Share Icon sucem: function () {alert ('shared'); // alert ($ ('. Funclum).). Html ()); executado após cancelar o usuário compartilhando // alert ('cancelado'); });5. Falha na verificação através da interface de erro
A função de erro será executada se as informações de configuração falharem. Se a assinatura expirar, a verificação falhará. Para mensagens de erro específicas, você pode abrir o modo de depuração da configuração ou pode visualizá -lo no parâmetro REST REST.
wx.error ((res) => {alert (res.errmsg);})6. Interface básica
• Compartilhe para momentos interface
WX.onMenusharetimeline ({Title: '', // Compartilhe o link do título: '', // Compartilhe o link imgul: '', // Compartilhe o sucesso do ícone: function () {// Função de retorno de chamada executada após o usuário confirmar o compartilhamento}, cancel: function () {// Função de retorno• Interfaces para compartilhar com os amigos
wx.onMenuShareAppMessage({ title: '', // Share title desc: '', // Share description link: '', // Share link imgUrl: '', // Share icon type: '', // Share type, music, video or link, do not fill in the default link dataUrl: '', // If the type is music or video, you need to provide a data link, the default is empty success: function () { // Função de retorno de chamada executada após o usuário confirmar o compartilhamento}, cancel: function () {// Função de retorno de chamada executada após o usuário cancelar o compartilhamento}});Se você precisar adicionar conteúdo obtido com a solicitação assíncrona do AJAX ao conteúdo compartilhado aqui, a interface de compartilhamento deve ser chamada novamente na função bem -sucedida após a queda do AJAX, mas a interface de compartilhamento deve ser colocada na função wx.ready e não puder ser chamada separadamente. Como a operação de compartilhamento de clientes é uma operação síncrona, os dados usando o AJAX ainda não foram retornados.
7. Essas etapas parecem simples, mas há inevitavelmente muitos problemas durante a depuração , porque a interface JSSDK ainda tem muitas restrições. Eu acidentalmente pisei no poço.
8. Finalmente, encapsinei essa interface .
'use strict';let wxDefaultOptions = { debug: true, appId: '', timestamp: 0, nonceStr: '', signature: '', jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'ShowMenuitems', 'HideallnonBaseMenuitems', 'ShowallnonBaseMenuitems', 'ShowallNonBaseMenuitems', 'ShowallnonBaseMenuitems', 'TranslateVoice', 'Startrecord', 'Stoprecord', 'Recordend', 'Recordend', 'Starrecord', 'Stoprecord', 'Ondrecorden' 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'OpenProductSpecificView', 'Addcard', 'Choosecard', 'OpenCard']}; // Deixe Shareurl = 'http: // xxx' + location.pathname; deixe getwxparam = (url, wxOptions) => {let url = location.href.split (''#') ['; url = codeuricomponent (url); Let Promise = New Promise ((resolver, rejeitar) => {$ .ajax ({type: 'get', url: 'http: // xxx/xxx? param ='+url, datatype: 'jsonp'}) .Then ((dados) => {let WxParam =; Data; 'WXEB5C3F4A03B880F0'; resolve (); Return Promise;} // Compartilhe com momentos Deixe o Sharesocial = (param) => {wx.onmenusharetimeline ({title: param.title, // Compartilhe o link do título: param.link, // compartilhe link iMgurl: param.imgul, // compartilhe icon succcess: function () {// Função de chamada da função do param.suclall {// Função de chamada param.failCalback () executada após o usuário cancelar o compartilhamento; Sucesso: função (res) {param.sucallback (); wx.ready (() => {// Compartilhe para momentos compartilhe (param); sharetofriends (param);})} função callwx (param, wxOptions) {getwxparam (param.url, wxOptions) .then () => {jssdk (); Título: '', Desc: '', link: '', imgurl: '', sucallback: func, falhecalback: func} module.exports = {wxDefaultOptions, // Altere a configuração Callwx, // Configuração padrão, personalize o conteúdo do Wechat após a configuração e a configuração e pronta,}Este artigo foi compilado em "Resumo das Habilidades de Desenvolvimento do Javascript WeChat", e todos são bem -vindos para aprender e ler.
Gostaria de recomendar um tutorial sobre o WeChat Mini Program, que está muito preocupado: "O tutorial de desenvolvimento de programas do WeChat Mini" foi cuidadosamente compilado pelo editor de todos, espero que gostem.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.