1. Em uma frase, descreva brevemente as semelhanças e diferenças entre os miniaplicativos uniapp, vue e WeChat.
Simplificando, o Uni-app usa instruções vue e pequenos componentes de programa e APIs.
2. Como configurar a barra de abas no Uniapp
Veja o artigo separado anterior -
https://blog.csdn.net/gkx19898993699/article/details/127559442?spm=1001.2014 .3001.55023. Componentes comuns no Uniapp
texto
| selecionável | boleano | falso | não | O texto é opcional? |
| espaço | corda | . | não | Exibir espaços contínuos, parâmetros opcionais: ensp, emsp,nbsp |
| decodificar | boleano | falso | não | Quer decodificar |
visualizar
Visualize o contêiner de visualização, semelhante ao div em HTML
botão
| tamanho | Corda | padrão | tamanho do botão |
| tipo | Corda | padrão | Tipo de estilo de botão |
| simples | boleano | falso | Se o botão é vazio e a cor de fundo é transparente |
| desabilitado | boleano | falso | Se botão |
| carregando | boleano | falso | Se o nome tem um ícone de carregamento t |
imagem
| Nome do Atributo | tipo | valor padrão | ilustrar | Diferenças de plataforma explicadas |
|---|---|---|---|---|
| fonte | Corda | Endereço do recurso de imagem | ||
| modo | Corda | 'escalaToFill' | Modos de corte e zoom de imagem |
4. Instruções de comando comumente usadas no Uniapp
v-for: renderização em loop (nota: chave)
v-if: Controla a exclusão e adição de elementos
v-show: Controla a exibição e ocultação de elementos
modelo v: ligação de dados bidirecional
v-on: vinculação de evento (abreviado como @)
v-bind: vinculação de atributos (abreviatura:)
5. Ciclo de vida do aplicativo Uniapp, ciclo de vida da página e ciclo de vida do componente
Veja meu artigo separado para detalhes -
6. Preste atenção ao uso de atualização suspensa e carregamento inferior
1. Monitore a atualização suspensa
Você pode monitorar a ação de atualização suspensa por meio de onPullDownRefresh
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
console.log('触发下拉刷新了')
}
}
2. Desative a atualização suspensa
uni.stopPullDownRefresh()
Pare a atualização suspensa da página atual.
Apresentação do caso
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据']
}
},
methods: {
startPull () {
uni.startPullDownRefresh()
}
},
onPullDownRefresh () {
this.arr = []
setTimeout(()=> {
this.arr = ['前端','java','ui','大数据']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>3. Carregamento pull-up
Ao configurar onReachBottomDistance no estilo sob o nó de páginas da página atual no arquivo pages.json, você pode definir a distância da parte inferior para iniciar o carregamento. O padrão é 50px.
Monitore o comportamento de fundo por meio do onReachBottom
<template>
<view>
<button type="primary" @click="startPull">开启下拉刷新</button>
杭州学科
<view v-for="(item,index) in arr" :key="index">
{
{item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
}
},
onReachBottom () {
console.log('触底了')
}
}
</script>
<style>
view{
height: 100px;
line-height: 100px;
}
</style>
7. Comentários condicionais no Uniapp (diferentes plataformas)
Veja meu artigo separado para detalhes -
8. Uso e encapsulamento de uni.request
No uni, você pode chamar o método uni.request para solicitar solicitações de rede.
Deve-se observar que as APIs relacionadas à rede no miniprograma precisam ser configuradas com uma lista de permissões de nomes de domínio antes do uso.
Exemplo:
<template>
<view>
<button @click="sendGet">发送请求</button>
</view>
</template>
<script>
export default {
methods: {
sendGet () {
uni.request({
url: 'http://localhost:8082/api/getlunbo',
success(res) {
console.log(res)
}
})
}
}
}
</script>Descrição do parâmetro OBJETO
| nome do parâmetro | tipo | Obrigatório | valor padrão | ilustrar | Diferenças de plataforma explicadas |
|---|---|---|---|---|---|
| url | Corda | sim | Endereço da interface do servidor do desenvolvedor | ||
| dados | Objeto/String/ArrayBuffer | não | Parâmetros de solicitação | O aplicativo 3.3.7 e anteriores não suportam o tipo ArrayBuffer | |
| cabeçalho | Objeto | não | Defina o cabeçalho da solicitação. O referenciador não pode ser definido no cabeçalho. | O aplicativo e o lado H5 trarão cookies automaticamente, e o lado H5 não pode ser modificado manualmente. | |
| método | Corda | não | PEGAR | Consulte a descrição abaixo para valores válidos. | |
| tempo esgotado | Número | não | 60.000 | Tempo limite, unidade ms | H5 (HBuilderX 2.9.9+), APP (HBuilderX 2.9.9+), miniaplicativo WeChat (2.10.0), miniaplicativo Alipay |
| tipo de dados | Corda | não | JSON | Se definido como json, ele tentará fazer JSON.parse nos dados retornados. | |
| tipo de resposta | Corda | não | texto | Defina o tipo de dados da resposta. Valores legais: texto, arraybuffer | O miniprograma Alipay não suporta |
| SSLVerificar | boleano | não | verdadeiro | Verifique o certificado SSL | Compatível apenas com a versão Android do aplicativo (HBuilderX 2.3.3+), o empacotamento offline não é compatível |
| com credenciais | boleano | não | falso | Se deve transportar credenciais (cookies) ao fazer solicitações entre domínios | Compatível apenas com H5 (HBuilderX 2.6.15+) |
| primeiroIpv4 | boleano | não | falso | Priorize o ipv4 durante a resolução de DNS | Compatível apenas com App-Android (HBuilderX 2.8.0+) |
| sucesso | Função | não | Receba a função de retorno de chamada retornada com sucesso do servidor do desenvolvedor | ||
| falhar | Função | não | Função de retorno de chamada para falha de chamada de interface | ||
| completo | Função | não | A função de retorno de chamada no final da chamada de interface (executada independentemente de a chamada ser bem-sucedida ou falhar) |
Para mais detalhes, verifique o site oficial——
9. Cache local no Uniapp
(1) Sincronização
1. Armazenamento: uni.setStorageSync
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorageSync('id',100)
}
}
}
</script>
<style>
</style>
2. Obtenha: uni.getStorageSync
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
methods: {
getStorage () {
const id = uni.getStorageSync('id')
console.log(id)
}
}
}
</script>
(2) Assíncrono
1. Armazenamento: uni.setStorage
<template>
<view>
<button type="primary" @click="setStor">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setStor () {
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
}
}
}
</script>
<style>
</style>
2. Obtenha: uni.getStorage
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success: res=>{
this.id = res.data
}
})
}
}
}
</script>
(3) Excluir
uni.removeStorageSync
Remova de forma síncrona a chave especificada do cache local.
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorageSync('id')
}
}
}
</script>
10. Métodos de salto (tag navegador, método uni.navigateTo) e passagem de parâmetros no Uniapp
1. Use a tag do navegador para pular
Documentação detalhada do Navigator: Endereço do documento
Ir para a página normal
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="default">跳转到关于页面</button>
</navigator>
Ir para a página da barra de guias
<navigator url="/pages/message/message" open-type="switchTab">
<button type="default">跳转到message页面</button>
</navigator>
2. Use navigationTo para saltos de navegação
Mantenha a página atual, vá para uma página no aplicativo e use-a uni.navigateBackpara retornar à página original.
<button type="primary" @click="goAbout">跳转到关于页面</button>
Ir para uma página normal através do método navigationTo
goAbout () {
uni.navigateTo({
url: '/pages/about/about',
})
}
3. Vá para a página da barra de guias através do switchTab
Ir para a página da barra de guias
<button type="primary" @click="goMessage">跳转到message页面</button>
Passar pelo método switchTab
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
4. redirecione para pular
Feche a página atual e vá para uma página do aplicativo.
<!-- template -->
<button type="primary" @click="goMessage">跳转到message页面</button>
<!-- js -->
goMessage () {
uni.switchTab({
url: '/pages/message/message'
})
}
Método de transferência de parâmetros
Ao navegar para a próxima página, você pode passar os parâmetros correspondentes para a próxima página. A página que recebe os parâmetros pode recebê-los através do ciclo de vida onLoad.
Passar página de parâmetro
goAbout () {
uni.navigateTo({
url: '/pages/about/about?id=80',
});
}
A página que recebe os parâmetros
<script>
export default {
onLoad (options) {
console.log(options)
}
}
</script>
11. Métodos de criação, utilização e passagem de parâmetros de componentes no Uniapp
(1) Criação de componentes
No uni-app, você pode criar um arquivo com o nome de sufixo vue, ou seja, criar um componente com sucesso. Outros componentes podem importar o componente por meio de importação e registrá-lo por meio de componentes.
1. Crie o componente de login, crie o diretório de login no componente e, em seguida, crie um novo arquivo login.vue
<template>
<view>
这是一个自定义组件
</view>
</template>
<script>
</script>
<style>
</style>
2. Importe o componente em outros componentes e registre-o
import login from "@/components/test/test.vue"
3. Cadastre componentes
components: {test}
4. Use componentes
<test></test>
(2) Comunicação entre componentes
1. De pai para filho
Em subcomponentes: aceita valores passados de fora para dentro do componente através de props
<template>
<view>
这是一个自定义组件 {
{msg}}
</view>
</template>
<script>
export default {
props: ['msg']
}
</script>
<style>
</style>
No componente pai: passe o valor ao usar o componente de login
<template>
<view>
<test :msg="msg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
components: {test}
}
</script>
2. Filho Pai
(1) O componente pai define eventos personalizados e recebe parâmetros
<template>
<view>
<test :msg="msg" @myEvent="getMsg"></test>
</view>
</template>
<script>
import test from "@/components/test/test.vue"
export default {
data () {
return {
msg: 'hello'
}
},
methods: {
getMsg (res) {
console.log(res)
}
},
components: {test}
}
</script>
(2) Passar parâmetros através do evento de gatilho $emit
<template>
<view>
这是一个自定义组件 {
{msg}}
<button type="primary" @click="sendMsg">给父组件传值</button>
</view>
</template>
<script>
export default {
data () {
return {
status: '打篮球'
}
},
props: {
msg: {
type: String,
value: ''
}
},
methods: {
sendMsg () {
this.$emit('myEvent',this.status)
}
}
}
</script>
12. Ônibus de eventos no Uniapp
Veja meu artigo separado para detalhes -