Desarrollo uniapp (de superficial a profundo)

1. Construcción del proyecto

1.1 Construcción de andamios

• Instalar andamios a nivel mundial

• npm install -g @vue/cli@4 ( recuerde instalar la versión 4.xx )

• Crear proyecto

vue crear -p dcloudio/uni-preset-vue mi-proyecto

• Plantilla predeterminada
• Referencia del comando de ejecuciónpackage.json

1.2 Pasos de HBuilderX para crear un proyecto uni-app:

• Haga clic en Archivo->Nuevo->Proyecto en la barra de herramientas
  

2. Dependencias del paquete

2.1 uVer

1. Instalar dependencias ( nota: el nombre del proyecto no puede tener caracteres chinos )

   // 安装sass
   npm i sass -D
   
   // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
   npm i sass-loader@10 -D
   
   // 安装uview-ui
   npm install uview-ui@2.0.31

2. Introducir globalmente la biblioteca uview jsmain.js

   import uView from "uview-ui";
   Vue.use(uView);

3. Presentar globalmente el archivo de tema SCSS global de uView

   /* uni.scss */
   @import 'uview-ui/theme.scss';

4. Introducir globalmente los estilos básicos de uview

   // 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
   <style lang="scss">
   	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
   	@import "uview-ui/index.scss";
   </style>

5. Configurar el modo easycom para introducir el componente uview

   // pages.json
   {
    
    
   	"easycom": {
    
    
   		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   	},
   	// 此为本身已有的内容
   	"pages": [
   		// ......
   	]
   }

6. Configurar el archivo vue.config.js

   // vue.config.js，如没有此文件则手动创建 放入项目根目录下
   module.exports = {
    
    
       transpileDependencies: ['uview-ui']
   }

7. Usar el componente uview

   <u-button type="primary" :disabled="disabled" text="禁用"></u-button>
   <u-button type="primary" loading loadingText="加载中"></u-button>
   <u-button type="primary" icon="map" text="图标按钮"></u-button>
   <u-button type="primary" shape="circle" text="按钮形状"></u-button>
   <u-button type="primary" size="small" text="大小尺寸"></u-button>

8. Referencia de documentos y manejo de errores.

   
   Referencia de proyecto de ejemplo de referencia de configuración de documento oficial
   注意点 : la instalación de cnpm provocará errores de configuración del paquete

2.2 Utilice el complemento de interfaz de usuario nativo uni

• Instalar sass y sass-loader

npm i sass -D
npm i sass-loader@10.1.1 -D

• Ansou uni-ui

npm install @dcloudio/uni-ui

• usar

<script>
   import  {
    
    uniBadge}  from  '@dcloudio/uni-ui'
   export default  {
    
    
				components:   {
    
    uniBadge}
   }
</script>

2.3 uni-módulos

• Instale los componentes individualmente a través de uni_modules (especificación modular de complemento) o instale un componente a pedido a través de uni_modules

• La diferencia entre node_modules y uni_modules
  
• Introducción de referencia específica

2.4 uso de vuex

• vuex es una biblioteca de gestión estatal basada en el marco vue. Puede gestionar el estado de los datos de aplicaciones complejas, como la comunicación entre componentes hermanos, la transferencia de valores entre componentes anidados de múltiples capas, etc. Conceptos básicos Estado, Getter, Mutación, Acción, Módulo.
  
• Instalar

npm install vuex --save 先安装依赖

• Crear nueva tienda/index.js

// 导入 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 以插件形式使用 vuex
Vue.use(Vuex)

// Vuex.Store 构造器选项
const store = new Vuex.Store({
    
    
  state: {
    
    
    username: 'foo',
    age: 18,
  },
})

export default store

• introducción a main.js

import store from './store';
Vue.config.productionTip = false
Vue.use(uView);
App.mpType = 'app'

const app = new Vue({
    
    
  // 把 store 的实例注入所有的子组件
  store,
  ...App
})
app.$mount()

• Para obtener instrucciones específicas, consulte vuex

3. Compatibilidad multiplataforma

3.1 Compilación condicional

• Diferentes plataformas muestran diferentes características y funciones
• La compilación condicional utiliza comentarios especiales como marcas. Durante la compilación, el código de los comentarios se compila en diferentes plataformas en función de estos comentarios especiales.
• Referencia de configuración del sitio web oficial

Comienza #ifdef 或 #ifndef 加 %PLATFORM%con y #endiftermina con .
#ifdef: si está definido, solo existe en una determinada plataforma
#ifndef: si no está definido, existe en todas las plataformas excepto en una determinada plataforma
%PLATFORM%: nombre de la plataforma

• uni.getSystemInfo diferencia Androidentre yiOS

<template>
	<!-- 条件编译支持样式，支持js与Ui -->
	<view class="content">
		<!-- #ifdef H5 -->
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{
    
    {
    
    title}}</text>
		</view>
		<!-- 条件编译 -->
		<!-- #endif -->
		<!-- APP-PLUS有 多端用或|| -->
		<!-- #ifndef APP-PLUS || H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				title: 'Hello'
			}
		},
		onLoad() {
    
    
			// 方法里面也一样使用
			// #ifdef APP-PLUS 
			// #endif
		switch(uni.getSystemInfoSync().platform){
    
    
   case 'android' :
  		console.log('运行在Android上')
  		break;
  case 'ios' :
  		console.log('运行在IOS上')
  		break;
  default :
  		console.log('运行在开发者工具上')
  		break;
  		}	  		

		},
	}
</script>

4.Uso de API

4.1 Transferencia de parámetros hacia adelante y hacia atrás

• index.vue

<template>
	<view class="content">
		<navigator url="/pages/home/home?name=admin">跳转</navigator>
		<button @click="hyChange()">事件跳转</button>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				title: 'Hello'
			}
		},
		methods: {
    
    
			hyChange() {
    
    
				uni.navigateTo({
    
    
					url: '/pages/home/home?name=admin&psd=12346678',
					// 触发这个事件成功时的传递参数
					success(res) {
    
    
						res.eventChannel.emit('hyPageHome', {
    
    
							data: '触发成功跳转传递的事件'
						})
					},
					events: {
    
    
						backEvent(data) {
    
    
							console.log('逆序参数', data);
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>

• casa.vue

<template>
	<view>
		<button type="default">home</button>
		<button type="warn" size="mini" @click="hyIndex">逆向传递</button>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    

			}
		},
		// 正向传参
		onLoad(options) {
    
    
			console.log('@参数', options);
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('hyPageHome', res => {
    
    
				console.log(res);
			})
		},

		methods: {
    
    
			// 逆向传参
			hyIndex() {
    
    
				uni.navigateBack()
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('backEvent', {
    
    
					name: 'admin',
					pad: 'password'
				})
			}
		}
	}
</script>

<style>

</style>

5. Encapsulación de interfaz

• referencia

6. Embalaje multiterminal

3.1 Miniprograma WeChat

3.2 Aplicación de paquete

3.2.1 Solicitud de certificado propio

1. Descargue e instale jre y configure las variables de entorno (aquí no se realiza ninguna configuración)

bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre

2. Utilice el comando keytool -genkey para generar un certificado

estaliasEs el alias del certificado que debe completarse más adelante en hbuilder.
test.keystoreEs el archivo del certificado que debe completarse más adelante en hbuilder. La
contraseña del almacén de claves que ingresa es la contraseña de la clave privada del certificado que debe completarse más adelante en hbuilder. (como 123456).

3. Ver certificado

keytool -list -v -keystore test.keystore

4. Configuración注意导入的证书文件是test.keystore

3.2.3 Configuración de empaquetado sin conexión

Consulte el sitio web oficial para conocer la configuración del paquete fuera de línea.

Consulte
la práctica del proyecto uniapp escrita por el autor de christian-dong y
la encapsulación de la interfaz escrita por Zhou_hui