Prefácio
Devido às necessidades do projeto, recentemente começamos a aprender o desenvolvimento de applets WeChat, começando com as ferramentas oficiais de desenvolvimento. Os Mini Programas WeChat são boas opções em termos de dificuldade e conveniência de desenvolvimento e não precisam considerar muitas coisas para os alunos. Esta série tem como objetivo escrever notas de estudo, que podem ser referenciadas no futuro, e também é um tipo de memória.Se você pode dar uma pequena ajuda para quem a lê, é realmente uma honra.
Pronto
Ferramentas
A instalação e o estabelecimento do projeto são muito simples: para o APPID, selecione temporariamente o número do teste ou deixe em branco (se precisar ficar on-line, use o ID real) e selecione JavaScript como idioma. Há um código padrão no projeto recém-criado. Comece a aprender e não consegue entender esses códigos, apenas exclua-os. À primeira vista, podemos ver que as ferramentas do desenvolvedor são divididas principalmente em cinco partes : um emulador (emulação de dispositivos móveis), um editor (código de gravação), um depurador, uma árvore de diretórios e uma barra de ferramentas.Os quatro primeiros podem ser encontrados na ferramenta Defina na coluna e desapareça.
Simulador
Há uma escolha de modelo de telefone e barra de status no emulador, o mais importante é o modelo de telefone. Geralmente escolha iphon6 como referência, porque o pequeno programa que desenvolvemos deve ser aplicado a uma variedade de dispositivos móveis, e a resolução da tela do dispositivo é diferente; portanto, se você usar px para escrever um estilo morto, altere o estilo de um dispositivo. Desligado. O applet WeChat usa rpx para resolver esse problema, ou seja, em uma tela com uma largura de 375 pixels físicos, 1rpx = 375/375 = 1px. Para o iPhone6, a largura da tela é de 750 pixels físicos, ainda com 375px, portanto, conclui-se que 1rpx = 375/750 px = 0,5px.
Árvore de diretórios (Árvore do Drectory)
Há um relacionamento de mapeamento entre a árvore de diretórios e o endereço físico, e o acesso ao miniaplicativo usa apenas endereços relativos. Podemos ver que a árvore de diretórios do projeto padrão contém principalmente três partes: diretório de páginas, diretório de utils e alguns arquivos globais. Cada página geralmente é armazenada em páginas, o projeto padrão contém duas páginas, o índice da página inicial e uma página de log, cada página é composta pelo arquivo de estilo de layout correspondente. O utils coloca principalmente algumas funções do tipo ferramenta, como solicitações de rede, implementadas no util.js, depois exportadas e finalmente importadas para a página necessária para usar alguns dos componentes. Ainda podemos usar componentes no futuro, podemos criar um diretório chamado Component para armazenar componentes.
Editor
Se você não gostar da cor do plano de fundo ou do tamanho da fonte, poderá modificá- la em Configurações- > Configurações de aparência.
Estrutura
O código consiste em arquivos .js (a principal linguagem de desenvolvimento de applets é JavaScript, os desenvolvedores usam JavaScript para desenvolver lógica de negócios e chamam as APIs de applets para completar os requisitos de negócios), arquivos .json (JavaScript Object Notation, é um formato de dados e Não é uma linguagem de programação. No programa pequeno, o JSON desempenha o papel de configuração estática. É possível criar o arquivo .wxml (linguagem de marcação WeiXin, um conjunto de linguagens de tags projetadas pela estrutura de pequenos programas, combinada com os componentes básicos do pequeno programa, sistema de eventos). A estrutura da página), arquivo .wxss (WeiXin Style Sheet, é um conjunto de linguagem de estilo usada para pequenos programas, usada para descrever o estilo do componente WXML, ou seja, efeito visual. O WXSS é semelhante ao CSS no desenvolvimento da Web. Para ser mais adequado Pequeno desenvolvimento de programa, o WXSS fez algumas adições e modificações na composição do CSS).
Arquivo de configuração global
- Project.config.json: usado para configurar o ambiente de desenvolvimento.
{
"description": "Project configuration file",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.6.6", //库版本
"appid": "wx866f52f21b24eed3", //appID
"projectname": "miniprogram-test-2",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}- app.wxss: arquivo de estilo geral, a classe de contêiner pode ser usada por todas as páginas do projeto (estilo público).
/**app.wxss**/
.container {
height: 100%; //高度是整个容器高度
display: flex; //布局方式：flex
flex-direction: column; //主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
align-items: center; //非主轴方向居中对齐
justify-content: space-between; //项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
padding: 200rpx 0; //表示一个框内边距--这一层位于内容框的外边缘与边界的内边缘之间
box-sizing: border-box; //用属性box-sizing来调整框模型
background-color: red; //背景颜色
} - app.json: O arquivo no diretório raiz do
app.jsonapplet é usado para a configuração global (estática) do applet WeChat.O conteúdo do arquivo é um objeto JSON, e páginas e janela são dois dos muitos atributos. O primeiro é usado para especificar de quais páginas o applet é composto e cada item corresponde às informações do caminho (incluindo o nome do arquivo) de uma página, e o último é usado para definir a barra de status, barra de navegação, título e cor de segundo plano do applet. ( Nota: o código de gravação real não pode colocar comentários )
{
"pages":[ // 页面路径列表
"pages/index/index",
"pages/logs/logs"
],
"window":{ //全局的默认窗口表现
"backgroundTextStyle":"light", //下拉loading的样式，仅支持 dark/light
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色
"navigationBarTitleText": "WeChat", //导航栏标题文字内容
"navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
}
}- app.js: o processamento lógico de todo o projeto. Incluindo o uso de algumas funções do ciclo de vida, como onLoad, onshow e onReady.
Arquivo de configuração da página
- .json: Cada página do applet também pode usar
.jsonarquivos para configurar o desempenho da janela desta página. Os itens de configuração na página abrangerãoapp.jsonoswindowmesmos itens de configuração na página atual . - .wxml: usado para construir a estrutura de página correspondente
<!--index.wxml--> <!--view:视图容器 类-->
<view class="container"> <!--container：全局的一个容器，样式在app.wxss中-->
<view class="userinfo"> <!--userinfo：存放用户信息的容器，在index.wxss中设置样式-->
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <!--button：表单组件：按钮-->
<block wx:else> <!-- <block/> 标签可将多个组件包装起来-->
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <!-- image 媒体组件：图片-->
<text class="userinfo-nickname">{{userInfo.nickName}}</text> <!-- image 文本组件；userinfo-nickname：昵称容器，在index.wxss中设置样式-->
</block>
</view>
<view class="usermotto"> <!-- image 签名容器，在index.wxss中设置样式-->
<text class="user-motto">{{motto}}</text>
</view>
</view>
- .wxss: de acordo com a classe do contêiner, ajuste o estilo da página para melhorar o efeito visual.
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%; //圆形为50%，小于50%为圆角
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px; //外边框顶部与其他容器外边框间隔200px
}
Olá Mundo!
O mundo hello mais simples pode ser alcançado com apenas uma linha de código: primeiro excluímos o conteúdo de outros arquivos, exceto Project.config.json, incluindo o diretório logs, e depois em app.json, index.js, index.wxml Preencha o código a seguir, você pode obter o hello word.
{"pages":[ "pages/index/index"]}
Page({})<text>hello world!</text>Vamos aumentar a dificuldade aos poucos e concluir uma versão avançada do hello world. Primeiro, introduza a variável, adicione a variável hello no atributo de dados da classe Page e atribua um valor. Então use {{}} para usá-lo.
Page({
/**
* 页面的初始数据
*/
data: {
hello:"hello world!"
}
}<view>{{hello}}</view>Podemos modificar o estilo da palavra hello, como alterar a cor do plano de fundo, modificar a fonte, etc. Primeiro, atribua um nome ao container: hello e, em seguida, defina o estilo.
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
</view>.hello_group{
background: #0c960c; //将鼠标放在#0c960c，会弹出色谱，可以根据这个选择自己喜欢的颜色
width: 750rpx;
height: 750rpx;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}O contêiner de exibição do applet WeChat suporta dois métodos de layout: Block e Flex. Aqui apresentamos o layout Flex para lançar nosso mundo Olá. Aqui, definimos o texto para ser centralizado horizontal e verticalmente e escolhemos a direção horizontal da esquerda para a direita como o eixo principal.
.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}Colocamos o hello world em dois contêineres chamados hello e word e, em seguida, usamos o layout Flex.
Page({
data: {
hello:"你好",
world:"世界"
}
）<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}Em seguida, podemos usar o componente de imagem para dar ao applet uma imagem do mundo, https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= 1879049657,3980794066 & fm = 11 & gp = 0.jpg. Depois, verificou-se que o layout estava bagunçado. Vamos modificá-lo. Embora ainda seja feio, parece muito melhor do que antes.
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap; //换行
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50% //圆形
}Podemos continuar fazendo as coisas, pois muitos espaços em branco abaixo deixam os pacientes com transtorno obsessivo-compulsivo muito desconfortáveis, acrescentam alguma coisa e depois adicionam uma janela deslizante. Vamos adicionar um texto, por exemplo, uma breve introdução ao nosso planeta. Primeiro copie um texto da Baidu Encyclopedia: "A Terra é um dos oito planetas do sistema solar. Está em terceiro lugar na ordem de muito perto do sol. É também o planeta mais terrestre do sistema solar em diâmetro, massa e densidade. Está a 150 milhões de quilômetros do Sol. A Terra gira de oeste para leste enquanto gira em torno do Sol. Atualmente, tem de 4 a 4,6 bilhões de anos. [1] Possui um satélite natural - a lua, e os dois formam um sistema celeste - o sistema terra-lua. Ele se originou na nebulosa solar primitiva há 4,6 bilhões de anos atrás. O raio equatorial da Terra é 6378.137 km, o raio polar é 6536.752 km e o raio médio é de cerca de 6371 km. Esfera elíptica: a área de superfície da Terra é de 510 milhões de quilômetros quadrados, dos quais 71% são oceanos e 29% terrestres. A Terra parece azul no espaço. Existem estruturas de núcleo, manto e concha no interior da Terra, além de hidrosfera, atmosfera e campo magnético fora da Terra Atualmente, a Terra é o único corpo celeste conhecido por ter vida no universo, e é o lar de milhões de seres vivos, incluindo os humanos. " Em seguida, adicione-o. Defina a barra de status novamente.
.hello_group{
background: #0c960c;
width: 750rpx;
height: 700rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50%
}
.brif_group{
margin-top: 20rpx;
margin-bottom: 80rpx;
margin-left: 20rpx;
margin-right: 20rpx;
}
.brif_title{
color: #13b3e4;
margin-bottom: 20rpx;
font-size: 50rpx;
}
.brif_content{
font-size: 25rpx;
}
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>
<view class = "brif_group">
<view class = "brif_title">地球（Earth）</view>
<text class = "brif_content">太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米，极半径6356.752千米，平均半径约6371千米，赤道周长大约为40076千米，呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里，其中71%为海洋，29%为陆地，在太空上看地球呈蓝色。地球内部有核、幔、壳结构，地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体，是包括人类在内上百万种生物的家园。
</text>
</view>app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Hello",
"navigationBarTextStyle": "black"
}
}
Ainda há muita coisa não escrita, continue no próximo artigo, parece muito cansada, comecei a aprender, sinto que a operação básica é escrever muitos contêineres e, em seguida, preencher o contêiner e definir o estilo.
Referência
