Áreas de preenchimento do WeChat: o processo de desenvolvimento e as técnicas de preenchimento do pagamento na Web do WeChat

GitChat Autor: Pólo Norte caneta fora do
original: preencher o buraco como o desenvolvimento de micro-canal: micro-letra de desenvolvimento web pagamentos e habilidades de processo para preencher o buraco
número público preocupação micro-channel: "tópicos de tecnologia GitChat para" seriedade sobre a tecnologia

[Não perca o ovo no final do artigo]

Como pai do WeChat, Zhang Xiaolong escolheu o pequeno programa e promoveu publicamente seus produtos por muitas vezes, e foi o único após o WeChat. Por causa desse tratamento preferencial especial, diz-se que a qualificação do teste interno foi disparada de 100 para 300 w após o lançamento do miniprograma.É verdade ou não, as expectativas da equipe e do mercado apenas para o miniprograma são suficientes para atrair nossa atenção. Como desenvolvedor, também é muito necessário aprender e entender os princípios e processos de desenvolvimento de pequenos programas.

Se você estiver pronto para desenvolver pequenos programas, este artigo está chegando a tempo. Se sua empresa não precisar se envolver com miniaplicativos, você também pode usar este artigo para obter um entendimento básico do desenvolvimento de miniaplicativos, em caso de necessidades inesperadas.

Este artigo explicará o processo de desenvolvimento de applets a partir dos três aspectos do desenvolvimento front-end de applet, desenvolvimento de servidor de applet e liberação e revisão de applet.

1. Introdução e desenvolvimento de front-end para pequenos programas

O desenvolvimento de pequenos programas envolve desenvolvimento front-end e back-end. O front-end refere-se à parte que pode ser vista no telefone móvel. É o principal responsável pelo layout e exibição da página. O back-end fornece recursos de processamento de dados e negócios, que se referem ao que escrevemos para Interface da API chamada pelo front-end.

Registar uma conta

O registro do miniaplicativo é relativamente simples: primeiro, faça login na plataforma de contas públicas do WeChat: http://mp.weixin.qq.com e clique no botão "Registrar-se agora" no canto superior direito.

insira a descrição da imagem aqui

Escolha o applet

insira a descrição da imagem aqui

Registrar o applet

insira a descrição da imagem aqui

Ao registrar o applet, a caixa de correio inserida aqui deve ser uma caixa de correio não utilizada na plataforma Tencent, caso contrário, solicitará que a caixa de correio tenha sido usada. Observe que a plataforma Tencent mencionada aqui, como a caixa de correio usada para registrar a conta pública WeChat e a caixa de correio usada para registrar a conta Penguin, não estão disponíveis.

Após o registro bem-sucedido, você precisa entrar na caixa de correio para ativar. Após a ativação, de acordo com os requisitos, selecione o tipo de aplicativo a ser registrado e aberto.

Criar projeto

Para apoiar o desenvolvimento de pequenos programas, o WeChat desenvolveu oficialmente uma ferramenta chamada WeChat Developer Tool. Essa ferramenta foi originalmente usada para ajudar os desenvolvedores de contas oficiais do WeChat no desenvolvimento.Quando o lançamento do WeChat Mini Program, o WeChat Mini Tools é atualizado , Também suporta o desenvolvimento de pequenos programas. Como as páginas e parte da sintaxe no miniaplicativo são completamente empacotadas pelo WeChat, e a compilação e liberação do miniaplicativo só podem ser concluídas na ferramenta de desenvolvedor WeChat, portanto, a ferramenta de desenvolvedor WeChat se tornou a maioria dos desenvolvedores de miniaplicativos Ferramentas de desenvolvimento utilizadas. Em comparação com outras ferramentas de desenvolvimento, a facilidade de uso das ferramentas de desenvolvedor do WeChat ainda é relativamente baixa; portanto, algumas pessoas usam outras ferramentas de desenvolvimento para desenvolvimento, usam apenas as ferramentas de desenvolvedor do WeChat para compilar e publicar, embora sejam mais problemáticas, mas a eficiência melhorou bastante A ferramenta recomendada para comparação de preços é o EgretWing doméstico.

Endereço de download da ferramenta de desenvolvedor WeChat:

https: //mp.weixin.qq.com/debu ...

Basta clicar na fonte azul "Developer Tools".

insira a descrição da imagem aqui

Depois de instalar a ferramenta de desenvolvedor WeChat, na primeira vez em que você a abrir, você será solicitado a digitalizar o código QR. Esta é apenas uma autorização de desenvolvimento. Desde que o WeChat esteja vinculado ao WeChat do desenvolvedor no plano de fundo do applet, a digitalização é possível. Efetue login na ferramenta de desenvolvimento após a digitalização.

Após o login bem-sucedido, digite a página da lista de projetos. Se o applet já tiver sido aberto antes, ele será exibido em uma lista.

insira a descrição da imagem aqui

Clique em "Adicionar item" para acessar a página Criar Mini Programa.

insira a descrição da imagem aqui

O APPID aqui é a autenticação da autoridade de desenvolvimento do applet.Se não for preenchido, selecione "No APPID" para desenvolver, mas o applet não poderá ser liberado normalmente. O APPID pode ser obtido em segundo plano do applet, como mostra a figura:

insira a descrição da imagem aqui

O nome do projeto do applet pode ser preenchido de acordo com o seu projeto real e suporta chinês e inglês.

O diretório do projeto se refere ao diretório de desenvolvimento, basta apontar para o diretório do applet a ser desenvolvido. Clique em OK e um novo projeto de applet é criado com sucesso.

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Estrutura de engenharia

O projeto de applet recém-criado é mostrado na figura:

insira a descrição da imagem aqui

Na figura acima, o bloco 1 é a barra de menus e os menus de operação dos applets estão aqui.

Editar: também é o modo padrão; nesse modo, você pode editar o código fonte do miniaplicativo;

Compilar: nesse modo, você pode compilar e depurar o applet, e a saída do log do applet será impressa na área de log;

Projeto: Nesse modo, pequenos programas que foram desenvolvidos ou podem ser testados podem ser empacotados e liberados.

O bloco 2 é a área de visualização.A exibição da página do miniaplicativo e a interação entre as páginas estão todas aqui.Este miniaplicativo é exatamente o mesmo que o miniaplicativo exibido no telefone celular quando ele é lançado.

O bloco 3 é a estrutura do código de engenharia, mostrando todos os arquivos no projeto e o relacionamento entre os arquivos.

O bloco 4 é a área de código, e o desenvolvimento codifica principalmente nessa área.

Cada miniaplicativo WeChat terá três arquivos de entrada pública:

app.json: arquivo de configuração, lista de roteamento de configuração, informações sobre o programa etc.

app.js: arquivo de entrada público, lógica Init quando o applet é iniciado.

app.wxss: arquivo de estilo público, estilo público é usado em cada modo de exibição.

Ao mesmo tempo, também haverá uma pasta chamada pages, que contém todos os arquivos de página do front-end.

Arquivo principal

Existem quatro tipos de arquivos no front end do applet, js, json, wxml, wxss.

js: Principal responsável por chamar a interface de back-end para interação de dados e processamento lógico da página;

json: usado principalmente para armazenar conteúdo de dados, geralmente usado menos;

wxml: equivalente ao html, usado principalmente para exibir informações da página;

wxss: equivalente a css, basicamente consistente com a sintaxe css;

Como mostrado:

insira a descrição da imagem aqui

No applet, cada página precisa criar uma pasta, como a lista na figura acima, os quatro arquivos acima precisam ser criados nessa pasta. Observe que os nomes dos quatro arquivos devem ser consistentes com a pasta.

Métodos comuns

O próprio applet WeChat não criou uma nova linguagem de programação, sua essência ainda é h5, css, js, é a tecnologia front-end mais básica. Portanto, o limite técnico dos applets é baixo e muitos applets são desenvolvidos e lançados em uma semana.

No entanto, o WeChat fez um certo encapsulamento das três tecnologias front-end acima, usando wxml em vez de h5, e as tags continham muito encapsulamento, conforme mostrado na figura:

insira a descrição da imagem aqui

Ao mesmo tempo, encapsular css como wxss tem poucas alterações.

Além de js, muitos js dentro do WeChat são encapsulados.Em programas pequenos, esses métodos js encapsulados são chamados de componentes. Os mais usados ​​são:

wx.request: usado para fazer solicitações de rede, o front-end do applet interage com a API de back-end; esse componente é usado;

wx.navigateTo: mantém a página atual, pula para uma página no aplicativo, use wx.navigateBack para retornar à página original;

wx.pageScrollTo: role a página para a posição de destino;

wx.setNavigationBarTitle: define dinamicamente o título da página atual.

Todos os componentes podem ser vistos aqui:

https: //mp.weixin.qq.com/debu ...

2. Introdução e desenvolvimento de pequeno servidor de programa

A seção frontal do applet é responsável por exibir o conteúdo.Se estivermos desenvolvendo uma página puramente estática, precisamos apenas dominar o que foi dito acima. No entanto, se queremos criar uma página dinâmica, ou seja, o conteúdo da página interage com o banco de dados, precisamos do servidor para fornecer interação de dados. No applet, o servidor é implementado como uma interface e os resultados são retornados no formato de dados json.

Introdução à interface de serviço

O desenvolvimento da interface do servidor é igual à interface geral. Ele pode ser implementado em qualquer linguagem de desenvolvimento de back-end. Após a conclusão do desenvolvimento da interface, o front-end do pequeno programa chama a interface por meio do componente wx.request para implementar a interação com o servidor, conforme mostrado na figura:

insira a descrição da imagem aqui

Todos devem estar familiarizados com esse método, sim, de fato, wx.request é o ajax no jquery, e o método de uso é exatamente o mesmo. Nesta chamada de interface, o front-end do applet chama a interface de back-end para obter a lista de notícias e, em seguida, atribui o conjunto de resultados à variável da lista.

Na página inicial news.wxml correspondente ao miniaplicativo, a lista é percorrida e exibida, conforme mostrado na figura:

insira a descrição da imagem aqui

Dessa forma, concluímos uma página de lista em um pequeno programa. Outras interações do lado do servidor são semelhantes.O desenvolvimento do pequeno programa é realmente aqui.A seguir estão as configurações relacionadas.

Pedido de certificado de segurança

Como mencionado anteriormente, o desenvolvimento da interface do lado do servidor no applet é igual à interface geral.A maioria das interfaces gerais usa o protocolo HTTP, mas o applet exige que seja um protocolo de segurança https, caso contrário, a chamada da interface falhará É obrigatório. Portanto, nosso servidor deve instalar um certificado de segurança e usar o protocolo https para publicar a interface.

Existem muitos provedores de serviços que fornecem certificados de segurança na Internet, como a Symantec.O que são os certificados gratuitos? Se for um aplicativo corporativo, é recomendável comprar um certificado de segurança em nível corporativo.Se for apenas para desenvolvimento e pesquisa pessoal, aqui está um certificado de segurança gratuito e confiável - Alibaba Cloud. O Alibaba Cloud fornece certificados individuais a usuários individuais por um período ilimitado. Observe que ele deve ser um usuário individual.Os usuários corporativos não têm esse benefício. Primeiro, faça logon no Alibaba Cloud com uma conta de usuário pessoal e localize "CA Certificate Service", conforme mostrado na figura:

insira a descrição da imagem aqui

Depois de entrar na página de serviço de certificado, clique em "Comprar agora", como mostra a figura:

insira a descrição da imagem aqui

Escolha um certificado gratuito e compre agora:

insira a descrição da imagem aqui

No console, localize "Serviço de certificado" e preencha as informações conforme necessário para gerar um certificado vinculado ao nome de domínio especificado.

insira a descrição da imagem aqui

Após a geração do certificado, você pode baixá-lo. No arquivo de certificado baixado, existem documentos de instruções detalhadas que informam como instalar e configurar rapidamente o certificado de segurança em diferentes ambientes. Não vou repeti-lo aqui.

Terceiro, o lançamento e a revisão de pequenos programas

Enviar e publicar

Após a conclusão do pequeno programa, você pode enviá-lo na ferramenta de desenvolvedor do WeChat, conforme mostrado na figura:

insira a descrição da imagem aqui

No modo de projeto, clique em upload para concluir o upload do código do applet.Depois que o upload for concluído, você deverá efetuar login no plano de fundo de gerenciamento de applet e definir os itens relevantes, conforme mostrado na figura:

insira a descrição da imagem aqui

Primeiro, configure um nome de domínio legal, ou seja, o endereço de nome de domínio da interface do servidor.Tenha cuidado para não inserir erros aqui.

Segundo, preencha as informações básicas do applet:

insira a descrição da imagem aqui

O que deve ser observado aqui é a escolha da categoria de serviço. Escolha a categoria correspondente ao seu próprio pequeno programa. Se a seleção da categoria não corresponder, ela será rejeitada. Se você a enviar novamente, levará de 3 a 5 dias úteis. As pessoas consomem mais de um mês neste local.

Desde que a revisão de informações básicas seja aprovada, você pode publicá-la no programa pequeno progressivo, conforme mostrado na figura:

insira a descrição da imagem aqui

Após a revisão da versão do applet, você pode pesquisar o applet já publicado no WeChat e o processo de desenvolvimento do applet é concluído.

4. Resumo

O desenvolvimento de pequenos programas é um desenvolvimento completamente front-end em termos de habilidades de desenvolvimento. Não envolve novas habilidades. Basicamente, não há dificuldade no desenvolvimento. Desde que seja um desenvolvedor que domine h5, css e js, eles podem ser competentes. O mais problemático é o processo de desenvolvimento de pequenos programas e a revisão de várias qualificações após a conclusão do desenvolvimento. A documentação oficial do WeChat não é clara. Muitas vezes não sei a que tipo de programa meu pequeno programa pertence, tenho que experimentá-lo. Vai perder uma semana, portanto, este artigo não explica em detalhes a parte de desenvolvimento do applet, existem muitos artigos relacionados on-line, mas se concentra no processo de desenvolvimento do applet, na revisão e no lançamento, na esperança de ajudar os amigos que são ou farão o desenvolvimento do applet Se você tiver alguma dúvida, preste atenção à conta pública do WeChat "Jibi Beike" ou Weibo "Jibi Beike".

Transcrição: "Wang Dongqiang: pequeno programa inicia rapidamente o desenvolvimento e a análise"


Ovos de páscoa

Bate-papo pesado Compartilhar:

"Aprendizado eficiente, monetização rápida: cinco estratégias de aprendizado que não desviam"

Participante:
um programador que pode escrever códigos ao vivo na estação B, fazendo malabarismos com bolas, tocando Ukulele, aptidão extrema, corrida, escrevendo parágrafos, desenho, tradução, escrita, fala, treinamento Eu gosto de usar a programação para realizar minhas idéias, ganhar dinheiro no mercado Android e ter muitas experiências empresariais. Bom em aprendizado, desenvolvimento de hábitos, gerenciamento de tempo. Influencie fisicamente os outros para fazer mudanças positivas! Atualmente trabalhando na ThoughtWorks, dedicado a espalhar conceitos de programação felizes e eficientes. CodingStyle.cn, uma comunidade de artesãos de software, foi criada em seu tempo livre e organizou mais de 30 eventos técnicos.

Introdução ao bate-papo:
Quando se trata de aprender, é realmente grande: fragmentado, não há mais tempo contínuo para aprender, é difícil se concentrar, segurando o livro, mas o telefone está chamando: Venha, feliz ~ De qualquer forma, há muito tempo ~ Não, li muitos livros, mas não pude fazê-lo em minha vida. Aprendi métodos e ferramentas. Não consegui encontrar cenários de uso ineficientes. A velocidade do aprendizado não consegue acompanhar a velocidade do conhecimento. Nesta era de conhecimento desenfreado e concorrência transfronteiriça, a capacidade de aprendizado é a principal competitividade. Pense nisso: algum trabalho foi concluído sem aprendizado na semana passada? Apesar de ser tão importante, a maioria das pessoas nunca estudou a questão do aprendizado, pensando que abrir o livro de escuta "obter" no caminho para o trabalho é um aprendiz vitalício de tempo fragmentado.

Sou programador, consultor e instrutor.Essas funções exigem que eu aprenda rapidamente e bem. Nesta sessão, o Chat analisará as "tendências, princípios, estratégias" da aprendizagem, ajudará você a ver a aprendizagem de uma perspectiva mais alta e formulará estratégias a partir de cinco aspectos de "conteúdo, motivação, interação, receita, recursos" para resolver os pontos problemáticos da aprendizagem e ajudá-lo a se tornar um Alunos eficientes!

Deseja participar deste chat de graça ? Muito simples, a conta pública "chat técnico do GitChat" volta para "aprendizado eficiente"

Escreva uma descrição da imagem aqui

Este artigo é reproduzido em: O Ape 2048 preenche o espaço para o desenvolvimento do WeChat: Processo de desenvolvimento de pagamento pela Web do WeChat e habilidades de preenchimento de poço

Acho que você gosta

Origin www.cnblogs.com/10manongit/p/12727722.html
Recomendado
Clasificación