O resumo de conhecimento mais abrangente do uniapp

Introdução ao aplicativo uni

uni-appA estrutura de fusão multiterminal desenvolvida pela empresa dcloud, um desenvolvimento e operação multiterminal é um uso.
Usando Vue.js+ 小程序的apipara desenvolver a estrutura de todos os aplicativos front-end, os desenvolvedores escrevem um conjunto de códigos para realizar o desenvolvimento misto multiterminal Híbrido: pode ser
publicado para iOS, Android, Web (responsivo) e vários pequenos programas (WeChat/ Alipay/Baidu/ Toutiao/QQ/DingTalk/Taobao), aplicativos rápidos e outras plataformas

Saiba mais sobre o site oficial do uni-app

ferramenta de preparação

Antes de usar o desenvolvimento uni, você precisa instalar:

• Hbuilderx (ferramentas de desenvolvimento e compilação)
• WeChat Mini Program Development Tool (teste de visualização do programa WeChat Mini)
• Emulador Android/máquina real (existem muitos simuladores no mercado)

Precauções:

Para a primeira execução do hbuilder, você precisa baixar o plug-in correspondente.
Execute para o emulador do Android, há uma diferença na visualização.
Pode levar um certo tempo para executar
. Às vezes, você precisa atualizar a página ou re -correr.

introdução à interface uni-app

1. Crie um projeto

2. Como executar o projeto em vários terminais

h52.1 Executando no hbuilderx

dica: Você precisa instalar o plug-
in para a primeira execução. Depois que o plug-in for instalado com sucesso, feche a operação integrada e abra-a novamente.

2.2 Pequeno programa em execução

dica: Ele precisa ser configurado para
a primeira execução e, em seguida, você pode executá-lo diretamente
. 04 Executar (você pode executar após as configurações acima serem concluídas)

01 Configuração na ferramenta de desenvolvimento WeChat - porta do servidor

02 HBuilderx configura o endereço das ferramentas de desenvolvimento do WeChat

03 Configurações de execução

03.1 Configurar ID do miniaplicativo WeChat

04 correr

Casos de execução bem-sucedida de applets

2.3 app || Simulador rodando

Nota: Simuladores diferentes têm números de porta diferentes:
Número da porta do simulador Yeshen: 62001
Número da porta do simulador Haima
: 26944 Número da porta do simulador Xiaoyao: 21503
Número da porta do simulador MuMu: 7555
Número da porta do simulador Tiantian: 6555
Simulação Thunderbolt Número da porta do emulador: 5554
dica:
A maioria dos os motivos pelos quais o aplicativo não fica sem dados não são gravados o suficiente. A primeira execução precisa configurar
o número da porta do emulador.

01 Abra o emulador ou celular
02 Configure a porta do emulador
03 Execute para o emulador

01 Abra o emulador ou celular

02 Configure a porta do emulador


03 correr para o emulador
03.1 O plug-in precisa ser baixado para a primeira execução

03.2 O plug-in foi instalado com sucesso e começa a funcionar

3. Sintaxe Vue

3.1 Sintaxe do Modelo

3.1.1. Renderização de texto

{
    
    {
    
    表达式}}
v-text=“表达式”

//简单的js运算
{
    
    {
    
    2+3}}

//js方法调用
{
    
    {
    
    title.length}}
{
    
    {
    
    title.split("").reverse().join("")}}

//3元运算符
<view>{
    
    {
    
    title.length>15?'长度很长':'字少事大'}}</view>

v-html 富文本

3.1.2. Renderização condicional

v-if
v-else-if
v-else
v-show
三元运算符

3.1.3. Listar opções

1. Strings, números, listas e objetos podem ser percorridos
2. < view v-for=“(item,index) in list” ：key=“index”>{ {index+1}} { {item}} < /view>
3. Certifique-se de garantir que o valor da chave entre os elementos irmãos seja exclusivo

3.1.4. Vinculação de propriedade

<button v-bind:disabled=“true”>
<button :disabled="true"> 

3.1.5. Encadernação de formulário

01 默认
:value="单向绑定"

02 input
v-model=“双向绑定”

03 
@change=“$event.detail.value”
事件，事件的值$event.detail.value

3.1.6. Eventos

01 Vinculação de Evento

<button v-on:click="响应"></button>
 简写绑定
<button @ click="响应"> </button>

02 Processamento em linha do evento

<view @ click="num++">  </view>

03 Função de resposta do evento (função definida nos métodos)

<view @ click="say">  </view>

04Passagem de parâmetro de evento

//$event 是一个固定写法  代表事件对象

不写参数
<view @ click="say">  </view>  
等同于 
<view @ click="say（）">  </view>  
等同于
<view @ click="say（$event)">  </view>

	say(str = "你好") {
    
    
       // 弹出提示
        uni.showModal({
    
    
         title: str
      })
                        }

3.1.7. página uni-aplicativo

Configuração da página pages.json:

• Estilo global globalStyle: o estilo da página padrão aplicará o
  estilo global. Se a página tiver uma configuração de estilo escrita, use a configuração para substituir a configuração global

• Página pages: pathcaminho da página; styleestilo da página

3.1.8. opções vue

dados
métodos de dados método
cálculo computado
relógio monitoramento
diretiva instrução
filtro filtragem

3.1.9 Ciclo de vida do aplicativo único

applet de ciclo de vida vue

applet de ciclo de vida

método global

app método global

3.1.10. Componentes

4. Roteamento

4.1 Componentes de roteamento

Documentação oficial de componentes de roteamento

Navegação (navegador)

<navigator url="../options/options" open-type="reLauch"></navigator>
//tip：文件名不能加后缀 .vue
//url 跳转的页面
//open-type打开类型：
//navigate跳转
//redirect重定向（当前页面不留历史纪录）；
//navigateBack  返回
//reLauch 重启
//switchTab  跳转底部栏

4.2 Parâmetros de roteamento

gramática:

传递：
<navigator url="../options/options?count=5&title=life">选项</navigator>

接收：
onLoad(option) {
    
          
​    //option的值
    this.count = option.count
    uni.setNavigationBarTitle({
    
    
    title: option.title
                        })
                },

O caso

4.3 APIs de roteamento

4.3.1 Salto de Roteamento

methods: {
    
    
  goOption() {
    
    
              uni.navigateTo({
    
    
               url: "../options/options"
                                })
                        },
}

4.3.2 Redirecionamento

uni.redirect({
    
    
    url: "../options/options?count=100&title=来自js跳转"
                   })

4.3.3 Voltar

 uni.navigateBack({
    
     })

4.3.4 Troca da barra inferior

 uni.switchTab({
    
     })

4.3.5 Reiniciar

 uni.reLunch({
    
     })

4.4 Configuração de roteamento

Documentação oficial de configuração de roteamento:

4.5 Obtenha a página atual getApp

01 Defina globalData:{num:100}
a página a ser usada no app.vue 02 Volte para o app

var app=getApp（）

03 Obtenha o valor de globalData

onShow(){
    
    
this.num=app.globalData.num
​}

04 Atualizar valor globalData

addNm(){
    
    
   app.globalData.num++;
​ this.num=app.globalData.num
​}

O caso

4.6 Obter informações da pilha de páginas getCurrentPages

5. Compilação condicional

Finalidade da compilação condicional: Diferentes plataformas exibem diferentes recursos e funções

5.1 Compilação condicional do modelo:

• APPlado do aplicativo
• H5página da Internet
• MPMiniprograma: MP-WEIXINWeChat Miniprograma
  Sintaxe:

<!-- # ifdef H5 -->
H5：下载app 获取优惠卷
<!-- # endif -->

O caso

5.2 compilação condicional css

/* #ifdef APP */
     .active{
    
    color:red}
/* #endif */

5.3 js compilação condicional

// #ifdef APP-PLUS
uni.showModal({
    
    
        title:"你好App用户"
})
// #endif

caso css+js

5.4 Página de configuração condicional pages.json

5.4.1 Configurar o estilo da barra de navegação da página

“style”:{
    
    
  "h5":{
    
    
      "titleNView":{
    
    
          "titleText":"我是H5"
       }
  },
  "app-plus": {
    
    
      "titleNView":false //隐藏导航栏
  }
}

O caso

5.4.2 Configurar o caminho da página de exibição

        // #ifdef MP-WEIXIN	|| APP	
{
    
    
        "path":"pages/condition/we",
        "style":{
    
    
                "navigationBarTitleText": "小程序专有页面"
        }
},
// #endif

O caso

fim...