Este artigo compartilhou uma versão detalhada da interface JS WeChat para sua referência. O conteúdo específico é o seguinte
Instruções básicas
Instruções para uso
1.Introduzir arquivos 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
Nota: Carregamento de suporte usando o método de carregamento de módulo padrão AMD/CMD
2. Injete e configure a interface de configuração
Todas as páginas que precisam usar o JSSDK devem primeiro injetar informações de configuração; caso contrário, elas não serão chamadas (o mesmo URL precisa ser chamado apenas uma vez e o aplicativo da web do spa que altera o URL pode ser chamado sempre que o URL muda).
wx.config({ debug: true, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side, the parameter information will be printed through the log and will only be printed on the PC side. appId: '', // Required, the unique identifier of the official account timestamp: , // Required, the timestamp generated for the signature NON -CEST: '', // Necessário, a sequência aleatória gerada para a assinatura da assinatura: '', // Necessário, a assinatura é mostrada no Apêndice 1 JSapilist: [] // Necessário, a lista de interfaces JS a serem usadas e todas as interfaces JS estão listadas no Apêndice 2});3. Verifique através da interface pronta
wx.ready (function () {// Depois que as informações de configuração são verificadas, 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 de que você seja necessário para garantir a interface relevante. chamado diretamente e não precisa ser colocado na função pronta.4. Interface de erro com falha de verificação
wx.error (function (res) {// Se as informações de configuração não conseguirem verificar, a função de erro será executada. 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 para visualizar ou você pode visualizá -lo no parâmetro retornado.Instruções de chamada de interface
Todas as interfaces são chamadas através de objetos WX (também podem ser usados com objetos JWEixin). Os parâmetros são um objeto. Além dos parâmetros que cada interface precisa passar, há também os seguintes parâmetros gerais:
1. Sucesso: a função de retorno de chamada executada quando a interface é chamada com sucesso.
2. Falha: uma função de retorno de chamada executada quando as chamadas da interface falham.
3. Completo: a função de retorno de chamada executada quando a chamada da interface for concluída e será executada independentemente do sucesso ou falha.
4. Cancelar: a função de retorno de chamada quando o usuário clicar para cancelar, apenas algumas APIs que têm os usuários cancelam as operações serão usadas.
5. Trigger: Um método que ouve o gatilho quando um botão é clicado no menu. Este método suporta apenas interfaces relacionadas no menu.
Todas as funções acima têm um parâmetro, objeto de tipo, além dos dados retornados por cada interface, também existe uma propriedade comum errmsg, cujo formato de valor é o seguinte:
1. Quando a chamada é bem -sucedida: "xxx: ok", onde xxx é o nome da interface da chamada
2. Quando o usuário cancela: "xxx: cancelar", onde xxx é o nome de interface chamado
3. Quando a chamada falha: seu valor é uma mensagem de erro específica
Interface básica
Determine se a versão atual do cliente suporta a interface JS especificada
wx.checkjsapi ({jsapilist: ['escolhaImage'] // A lista de interfaces JS que precisam ser detectadas, todas as interfaces JS estão listadas no apêndice 2, sucesso: função (res) {// retornam como pares de chaves, o valor da API disponível é verdadeiro e não disponível como falsa // para o exemplo: por exemplo: por exemplo: por exemplo: por exemplo: por exemplo: o valor de chaves: {"checkResult": {"CHOLHEIMAGE": true}, "errmsg": "checkjsapi: ok"}});Interface de compartilhamento
Obtenha o status de clique do botão "Compartilhe para momentos" e personalize a interface de conteúdo de compartilhamento
wx.onmenusharetimeline ({title: '', // Compartilhe o link do título: '', // Compartilhe o link imgul: '', // Compartilhe o sucesso do ícone: function () {// Função de retorno executada após o usuário confirma compartilhamento},, cancel: function () {// função de retornoObtenha o status de clique do botão "Compartilhe para amigos" e personalize a interface de conteúdo de compartilhamento
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 linkdataUrl: '', // 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}});Obtenha o status de clique do botão "Compartilhe para QQ" e personalize a interface de conteúdo de compartilhamento
wx.onmenushareqq ({title: '', // Compartilhe o título DESc: '', // Share Descrição Link: '', // Compartilhe o link imgurl: '' // Compartilhe o icon Sucesso: function () {// Função de chamada executada após o usuário confirmar a lata de compartilhamento}, a função da função:) {//}}};Obtenha o status de clique do botão "Compartilhe com Tencent Weibo" e personalize a interface de conteúdo de compartilhamento
wx.onmenushareweibo ({title: '', // Compartilhe o título Desc: '', // Share Descrição Link: '', // Compartilhe o link iMgurl: '' // Compartilhe o sucesso do ícone: function () {/} Função de chamada executada após o usuário confirmar o compartilhamento}, cancelada: funccene () {/ //Interface de imagem
Tire uma foto ou selecione uma foto da interface do álbum de celular
WX.CHOOSEIMAGE ({sucessão: function (res) {var localIds = res.localids; // retorna a lista de identificação local da foto selecionada. O localId pode exibir imagens como o atributo src da tag iMg}});Visualizar interface de imagem
wx.previewImage ({current: '', // Os URLs de link de imagem atualmente exibidos: [] // A lista de links de imagem que precisam ser visualizados});Carregue a interface da imagem
WX.UPLOADIMAGE ({LOCALID: '', // O ID local da imagem a ser carregado, obtido na interface ChoiceImage isShowProgressTips: 1 // O padrão é 1 e o prompt de progresso é exibido sucesso: função (res) {var ServerId = Res.erverId; // Return the Server ID do servidor da imagem} {var ServerId = Res.erverId; // Return the Server Id of the Funge}}}}}}}}}}}}}}}};Nota: Você pode baixar a imagem enviada pelo WeChat usando a interface do arquivo multimídia. O ServerID obtido aqui é media_id. Documento de referência ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
Baixe a interface da imagem
wx.DownloadImage ({serverId: '', // O ID do lado do servidor da imagem a ser baixado, obtido na interface de uploadimage isShowProgressTips: 1 // o padrão é 1 e o prompt de progresso é exibido após o sucesso após a imagem (res) {var localId = res.localid; // retorno para o ID da identificação após a imagem, a imagem {var localId = res.localid; // retorna ao IDs local após a imagem (var localId = res.localid; // Return toInterface de áudio
Comece a gravar interface
wx.startrecord ();
Pare de gravar interface
wx.stoprecord ({success: function (res) {var localId = res.localid;}});Interface de parada automática para monitoramento de gravação
WX.ONVOICERECORDEND ({// Retorno de chamada completo será executado quando o tempo de gravação exceder um minuto e não parar. Complete: function (res) {var localId = res.localid;}});Jogue interface de voz
wx.playvoice ({localId: '' // O ID local do áudio a ser reproduzido, obtido pela interface StopRecord});Pause a interface de reprodução
wx.pausevoice ({localId: '' // O ID local do áudio que precisa ser pausado, obtido pela interface StopRecord});Pare a interface de reprodução
wx.stopvoice ({localId: '' // O ID local do áudio que precisa ser interrompido, obtido pela interface StopRecord});Monitorando a interface de reprodução de voz
wx.onvoicePlayend ({ServerId: '', // O ID do lado do servidor do áudio que precisa ser baixado, obtenha sucesso: function (res) {var locid = res.localid; // retorna o ID local do áudio}});Carregue a interface de voz
wx.uploadvoice ({localId: '', // O ID local do áudio que precisa ser carregado, obtido da interface StopRecord isShowProgressTips: 1 // o padrão é 1, exibindo o sucesso do prompt: function (res) {var ServerId = »» »»}}}}} »odio;Nota: Você pode baixar a voz carregada pela interface de arquivo multimídia do WeChat. O ServerID obtido aqui é media_id. Documento de referência ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
Baixe a interface de voz
wx.downloadVoice ({serverId: '', // O ID do lado do servidor do áudio que precisa ser baixado, obtido na interface do uploadVoice isShowProgressTips: 1 // o padrão é 1 e o prompt de progresso é exibido o sucesso: função (res) {var localId =)Interface inteligente
Identifique o áudio e retorne à interface do resultado do reconhecimento
wx.TranslateVoice ({localId: '', // O ID local do áudio que precisa ser reconhecido, isShowProgressTips: 1, // O padrão é 1, exibindo o prompt de progresso Sucesso: function (res) {alert (res.Translateresult); // o resultado do reconhecimento de voz}});Informações do equipamento
Obtenha a interface de status da rede
wx.getNetworkType ({success: function (res) {var redeType = res.NetworkType; // Retorno tipos de rede 2G, 3G, 4G, WiFi}});Localização geográfica
Use o mapa interno do WeChat para visualizar a interface de localização
wx.openlocation ({latitude: 0, // latitude, número do ponto flutuante, o intervalo é de 90 ~ -90 longitude: 0, // longitude, número do ponto flutuante, o intervalo é de 180 ~ -180. Nome: '', // Endereço de nomes de localização: '', // Endereço Scale: 1, // mapa de nível de zoom, alcance da moda, alcance de 1 28 ~ hen '', //, a escala de 1 ~ //s a menor do zoom, a moda, a forma de 1. exibido na parte inferior da interface da posição de visualização, você pode clicar para pular});Obtenha a interface de geolocalização
wx.getLocation ({Timestamp: 0, // Posicione Timestamp de assinatura, fornecido não -REST: '', // Posicione a sequência aleatória de assinatura, fornecida apenas quando compatível com a versão 6.0.2, addrsign: '', // Position Signature, fornecido apenas quando compatível com a versão 6.0.2, consulte o Apêndice 4 para detalhes. 90 ~ -90 Var Latitude = Res.Latitude;Operação da interface
Ocultar a interface do menu wx.hideoptionMenu () no canto superior direito;
Mostre a interface do menu wx.showOptionMenu () no canto superior direito;
Feche a interface da janela da web atual wx.closewindow ();
Interface do botão de função de oculto em lote
wx.hidemenuitems ({Menulist: [] // Para ocultar itens de menu, consulte o Apêndice 3});Interface do botão de função de exibição em lote
wx.showMenuitems ({Menulist: [] // Todos os itens de menu a serem exibidos são mostrados no Apêndice 3});Ocultar todas as interfaces de botão que não são da base wx.HideallnonBaseMenuitem ();
Mostrar toda a interface do botão de função wx.showallnonBaseMenuitem ();
Digitalize o WeChat
Clique na interface do WeChat Scan
wx.scanqrcode ({desc: 'scanqrcode desc', needResult: 0, // o padrão é 0, o resultado da varredura é processado pelo weChat e 1 retorna diretamente o resultado da scan, scyType: ["qrcode", "barcode"], // você pode especificar se é necessário para a interrupção do QR o QR o QR o QR ou o código QR ou o código qr ou o qr ou o código QR. res.ResultStr;Endereço de colheita
Editar interface de endereço de entrega
wx.editAddress (Timestamp: 0, // Timestamp de assinatura da localização, somente se precisar ser compatível com a versão 6.0.2, não -cesto: '', // String aleatória de assinatura de localização, apenas se precisar ser compatível com a versão 6.0.2, addrsign: '', // Location Signature, apenas se necessário Nome de usuário = res. Username; Endereço de nível VAR Endereço var = res.Address;
Obtenha a interface de endereço de entrega mais próxima
wx.getLatestAddress ({Timestamp: 0, // Timestamp de assinatura de localização, somente se precisar ser compatível com a versão 6.0.2, não -REST: '', // String aleatória de localização. (res) {var username = res.username; // Endereço de entrega padrão nacional Terceiro Endereço Var VAR Endereço = Res.Address;WeChat Store
Salte para a interface da página do produto WeChat
wx.openProductSpecificView ({ProductId: '', // Produto IDVIEWTYPE: '' // 0. Valor padrão, detalhes ordinários do produto Página 1. Declare os detalhes do produto Página 2. Página de detalhes do produto});Cupom do cartão WeChat
Libere a lista de cupons de cartão para lojas e obtenha a lista de seleção de usuários
WX.CHOOSECARD ({SHOPID: '', // armazenar ID CardType: '', // Tipo de cartão CardId: '', // Card Timestamp: 0, // Timestamp de identificação do cartão: (não -fest), // // Card VoCher Signature Random String Cards: '' Fun, // Voucher Signature, consulte o AppendX 6 SUCTERMIX 6 // Informações da lista de comprovantes de cartão selecionadas pelo usuário}});Adicionar interface de cupom de cartão em lotes
wx.addcard ({CardList: [{CardId: '', CardExt: ''}], // A lista de cupom do cartão que precisa ser adicionada ao sucesso: function (res) {var carardlist = res.cardList; // a informação da lista de cupom do cartão}});Verifique a interface do cupom do cartão no pacote do cartão WeChat
WX.OPENCARD ({Cardlist: [{CardId: '', Code: ''}] // Lista de cupons de cartão a ser aberto});Pagamento do WeChat
Iniciar uma solicitação de pagamento do WeChat
WX.CHOOSEWXPAY ({Timestamp: 0, // Timestamp de assinatura de pagamento Non -Cest: '', // Pacote de string aleatório de assinatura de pagamento: '', // Os detalhes do pedido são estendidos, consulte o Apêndice 5, PaySign: '', // As assinaturas de pagamento são para obter detalhes, consulte o Apêndice 5});Apêndice 1 - Algoritmo de assinatura de permissão JSSDK
JSAPI_TICKET
Antes de gerar uma assinatura, você deve primeiro entender o JSAPI_TICKET. JSAPI_TICKET é um ticket temporário usado pela conta oficial para ligar para a interface WeChat JS. Em circunstâncias normais, o período de validade do JSAPI_Ticket é de 7200 segundos, o que é obtido através do Access_Token. Como o número de chamadas de API para obter JSAPI_Ticket é muito limitado, a atualização frequente do JSAPI_Ticket fará com que as chamadas da API sejam limitadas e afetem seus próprios negócios. Os desenvolvedores devem armazenar em cache jsapi_ticket globalmente em seus serviços.
1. Consulte o documento a seguir para obter access_token (válido por 7200 segundos, os desenvolvedores devem cache o access_token globalmente em seu serviço): ../12/4b08382e91217687730a2dfc71e9218c.html
2. Use o Access_token obtido na primeira etapa para solicitar o JSAPI_TICKET (válido por 7200 segundos, o desenvolvedor deve armazenar em cache jsapi_ticket globalmente em seu serviço): https://api.weixin.qq.com/cgi-bin/Ticket/GetTicket)
Retorna com sucesso o seguinte JSON:
{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}Depois de obter o JSAPI_TICKET, você pode gerar uma assinatura para a verificação de permissão do JSSDK.
Algoritmo de assinatura
As regras de geração de assinatura são as seguintes: Os campos que participam da assinatura incluem não -CEST (string aleatória), JSAPI_TICKET válido, Timestamp (Timestamp), URL (o URL da página da web atual, sem incluir # e suas peças subsequentes). Depois de classificar todos os parâmetros a serem assinados de pequeno a grande (ordem do dicionário) de acordo com o código ASCII do nome do campo, o formato do par de valores de chave URL (ou seja, key1 = value1 e key2 = value2…) é usado para se unir em uma string string1. Deve -se notar aqui que todos os nomes de parâmetros são caracteres minúsculos. String1 é criptografado e o nome do campo e o valor do campo são valores originais e nenhuma escape de URL é executada.
Isto é, assinatura = sha1 (string1). Exemplo:
• NON -CEST = WM3WZYTPZ0WZCCNW
• jsapi_ticket = sm4aovdwfpe4dxkxges8vmcpggvi4c3vm0p37wvucfvkvay_90u5h9nbslyy3-sl-hhtdfl2fzfzfffffffzy1aochkp7qg
• Timestamp = 1414587457
• url = http: //mp.weixin.qq.com
Etapa 1. Depois de classificar todos os parâmetros a serem assinados de pequeno a grande (ordem do dicionário) de acordo com o código ASCII do nome do campo, gole-os em string string1 usando o formato do par de valores-chave URL (ou seja, key1 = value1 e key2 = value2…):
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL 2fzfy1aochkp7qg & não -cest = wm3wzytpz0wzccnw × tamp = 1414587457 & url = http: //mp.weixin.qq.com
Etapa 2. Sign String1 com SHA1 e obtenha assinatura:
F4D90DAF4B3BCA3078AB155816175BA34C443A7B
Coisas a serem observadas
1. O não -CEST e o registro de data e hora usados para assinatura devem ser os mesmos que o não -CEST e o registro de data e hora no WX.Config.
2. O URL usado para assinatura deve ser o URL completo da página chamando a interface JS.
3. Por motivos de segurança, os desenvolvedores devem implementar a lógica de assinatura no lado do servidor.
Apêndice 2 - Lista de todas as interfaces JS
• OnMenusharetimeline
• OnMenusharAppMessage
• OnMenushareqq
• Onmenushareweibo
• Startrecord
• StopRecord
• OnVoicerCordend
• PlayVoice
• PausevOice
• Stopvoice
• onvoiceplayend
• CarregarvOice
• DownloadVoice
• ChoiceImage
• VisualizeImage
• UploadImage
• DownloadImage
• TradlateVoice
• GetNetworkType
• OpenLocation
• getLocation
• HideOptionMenu
• ShowOptionMenu
• Hidemenuitems
• ShowMenuitems
• HideallnonBaseMenuitem
• ShowallNonBaseMenuitem
• CloseWindow
• scanqrcode
• Escolha owxpay
• GetLatestAddress
• EditAddress
• OpenProductSpecificView
• addcard
• Choosecard
• OpenCard
Apêndice 3 - Lista de todos os botões
Categorias básicas
• Relatório: "Menuitem: Exposearticle"
• Ajustar a fonte: "Menuitem: setFont"
• Modo diurno: "Menuitem: Daymode"
• Modo noturno: "Menuitem: Nightmode"
• Atualizar: "Menuitem: atualizar"
• Veja a conta oficial (adicionada): "Menuitem: perfil"
• Veja a conta oficial (não adicionada): "Menuitem: addContact"
Categoria de comunicação
• Enviar a um amigo: "Menuitem: Compartilhar: AppMessage"
• Compartilhe com momentos: "Menuitem: compartilhe: linha do tempo"
• Compartilhe com QQ: "Menuitem: Compartilhar: QQ"
• Compartilhe com Weibo: "Menuitem: Compartilhar: Weiboapp"
• Coleção: "Menuitem: Favorito"
• Compartilhe com FB: "Menuitem: Compartilhar: Facebook"
Classe de proteção
• Debug: "Menuitem: JSdebug"
• Editar tag: "Menuitem: Edittag"
• Excluir: "Menuitem: excluir"
• Link para copiar: "Menuitem: copyurl"
• Página original da Web: "Menuitem: OriginPage"
• Modo de leitura: "Menuitem: ReadMode"
• Aberto no navegador QQ: "Menuitem: OpenWithQQBrowser"
• Aberto no Safari: "Menuitem: OpenWithsafari"
• Email: "Menuitem: compartilhar: email"
• Algumas contas públicas especiais: "Menuitem: compartilhar: marca"
Apêndice 4 - Algoritmo de geração de localização e assinatura de endereço
As regras de geração do AddRSign são as mesmas da verificação de permissão JSSDK (consulte o Apêndice 1), mas os parâmetros de assinatura participantes são diferentes. Os parâmetros de assinatura que participam do ADDRSign são: APPID, URL (URL da Web atual), registro de data e hora, não -CEST, Accessoken (Credenciais de autorização do usuário, consulte o protocolo OAuth2.0 para obter).
Apêndice 5 - Campo de extensão de pagamento e algoritmo de geração de assinatura
Detalhes do pedido (pacote) Extensão Definição da String
Quando o comerciante redirecionar a API JS, o comerciante precisa determinar os detalhes do pedido no momento e combinar os detalhes do pedido no pacote de uma certa maneira. Depois que a API JS for chamada, o WeChat gerará uma ordem de pré -pagamento através do conteúdo do pacote. A seguir, definirá a lista de campo necessária e o método de assinatura para o pacote. Interface precisa ser observada: todos os parâmetros recebidos são tipos de string!
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.