Desenvolvimento de applet WeChat
Preparação ambiental
Primeiro, você precisa preparar uma conta de desenvolvedor WeChat.
Se você ainda não tem uma conta de desenvolvedor, precisa se inscrever para uma conta na plataforma pública WeChat. Site: plataforma pública WeChat
Registre uma conta de desenvolvedor para um pequeno programa
Preencha o endereço de e-mail que não foi registrado na conta oficial do WeChat.
A caixa de correio preenchida receberá um e-mail de ativação, seguirá a ativação do miniaplicativo WeChat indicada no e-mail e retornará à plataforma oficial do WeChat.
Registro de informações: Para escolher o corpo principal do mini programa, se for uma empresa ou outro corpo principal, outras informações devem ser fornecidas. Portanto, aqui estou escolhendo indivíduos. Em seguida, preencha algumas informações do assunto e informações do administrador.
Depois de preenchê-los, uma conta de desenvolvedor é registrada.
Após o registro, você precisa escanear o código do WeChat para fazer login neste miniaplicativo WeChat e obter um ID de desenvolvedor. Este é muito importante e você precisará dele para desenvolvimento posterior.
Em segundo lugar, instale as ferramentas de desenvolvedor WeChat. (Software desenvolvido por WeChat Mini Program)
O URL é: WeChat Open Document
Terceiro, baixe uma ferramenta de desenvolvimento front-end (HBuilderX, VSCode, Webstorm).
(Opcional ou não) Porque embora você também possa escrever código no WeChat Developer Tools, não é conveniente, então é melhor baixar um software para escrever pequenos programas. HBuilderX é usado aqui. Abaixo estão as etapas de download.
Baixe e instale as etapas aqui sem tirar capturas de tela. Basta descompactá-lo e abri-lo. Observe que na primeira vez que abrir o HBuilderX, você precisará se conectar à Internet. É necessário baixar alguns plug-ins para que haja avisos ao escrever o código posteriormente. Somente na primeira vez que você abrir, o download será feito automaticamente. Se você esquecer, basta excluí-lo e descompactá-lo novamente.
Crie um pequeno programa
1) Crie um novo projeto
Abra o HBuilderX, selecione Arquivo-> Novo-> Projeto.
Selecione o miniaplicativo e preencha o nome do projeto. Você pode gerar um modelo padrão.
2) Para modificar o ID do desenvolvedor
no modelo padrão, primeiro você precisa modificar o "appid" nas 15 linhas a seguir no arquivo "project.config.json". Este é o ID do desenvolvedor no desenvolvedor WeChat.
O miniaplicativo escrito precisa ser executado na ferramenta de desenvolvedor WeChat do miniaplicativo WeChat. Como mostrado abaixo.
Se a conexão for bem-sucedida, a ferramenta de desenvolvedor WeChat será aberta, e você poderá digitalizar e fazer login com o WeChat que você conectou originalmente na plataforma pública WeChat.
Após a digitalização, você entrará na ferramenta de desenvolvedor WeChat. À esquerda está o simulador, que simula o efeito de exibição no WeChat, o canto superior direito é o editor para escrever o código e o canto inferior direito é o depurador.
Mini página inicial do programa
O conhecimento gramatical de escrever pequenos programas pode ser visto abrindo o documento aberto do WeChat .
A estrutura do miniaplicativo.
O idioma do miniaplicativo é semelhante ao da página da Web, mas as palavras são diferentes.
A composição de cada página do
miniaplicativo : arquivo xxx.json: configurar título da página e outras informações
arquivo xxx.wxml: html (visualizar substitui div, texto substitui span, imagem substitui img)
arquivo xxx.wxss: css (layout, miniaplicativo recomenda layout flex, unidade px é alterada para rpx 100rpx = 50px)
arquivo xxx.js: js (formato json, ideia vuejs)
Três arquivos de configuração global para o
miniaplicativo : app.json (configure o título global, a barra de menu inferior)
app.js (arquivo js global)
app.wxss (arquivo de estilo global)
A seguir está a produção da barra de menu na parte inferior do WeChat:
página: lista de caminhos de páginas, usada para especificar em quais páginas o miniaplicativo consiste, cada item corresponde às informações de caminho (incluindo o nome do arquivo) de uma página.
janela: Usado para definir a barra de status, barra de navegação, título, cor de fundo da janela do miniaplicativo.
tabBar: Se o miniaplicativo for um aplicativo com várias guias (há uma barra de guias na parte inferior ou superior da janela do cliente para alternar as páginas), você pode especificar o desempenho da barra de guias através do item de configuração tabBar e a página correspondente exibido quando a guia é alternada.
Para funções específicas, consulte os documentos abertos do WeChat
O código a seguir pode ser copiado e modificado.
{
"pages": [
"pages/ai/ai",
"pages/yq/yq"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "实训",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#ff8124",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/ai/ai",
"text": "人脸识别",
"selectedIconPath": "image/ai-active.png",
"iconPath": "image/ai.png"
},
{
"pagePath": "pages/yq/yq",
"text": "疫情地图",
"selectedIconPath": "image/map-active.png",
"iconPath": "image/map.png"
}
]
}
}