1. Crear un proyecto
Como se muestra, crear un proyecto, escriba el nombre del proyecto, seleccionar el directorio, AppID es un identificador único, podemos primer punto de prueba se muestra en el número de buzón rojo, generar automáticamente un AppID, a continuación, que es completamente nuevo para crear un nuevo proyecto.
2. Cree tres páginas
Asegúrese de que se muestra en la esquina superior izquierda del botón compilador se selecciona, esta vez podemos ver la estructura de archivos del proyecto y el compilador
de archivos app.json abierta. Todas las páginas que necesitan ser declaradas en este JSON en la etiqueta de páginas. Vemos herramienta de desarrollo ha ayudado a crear un índice de dos páginas y los registros, pero no es necesario, se puede ignorar, en páginas, declaramos tres nueva página:
- 首页: Páginas / home / homeMain / homeMain
- 问答: páginas / pregunta / questionMain / questionMain
- I: páginas / mi / mymain / mymain
por el Comando + S (bajo Windows es Reductor + S) para guardar, y luego mirar la estructura de directorios, que se encuentra directorio de más de tres páginas en la carpeta de archivos, que está por encima del 3 que corresponde página.
No hablamos de archivos contenidos en el directorio.
3. Crear Tabbar
Previous've creó tres páginas, se crea una barra de pestañas contiene tres páginas. Después de la etiqueta o en páginas app.json archivo, agregue el código siguiente
"tabBar": {
"color": "#646565",
"selectedColor": "#F55D54",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "images/tab/home_selected.png",
"iconPath": "images/tab/home_unselected.png",
"pagePath": "pages/home/homeMain/homeMain",
"text": "首页"
},
{
"selectedIconPath": "images/tab/message_selected.png",
"iconPath": "images/tab/message_unselected.png",
"pagePath": "pages/question/questionMain/questionMain",
"text": "问答"
},
{
"selectedIconPath": "images/tab/me_selected.png",
"iconPath": "images/tab/me_unselected.png",
"pagePath": "pages/my/myMain/myMain",
"text": "我的"
}
]
},
En este momento, la estructura de archivos mostrada en la figura app.json:
papel de cada campo es el siguiente:
- color: el color cuando no se selecciona TabItem
- selectedColor: TabItem cuando se selecciona el color
- borderStyle: barra de pestañas arriba color de la línea divisoria
- Incluido en la lista de TabItem: lista
- selectedIconPath: Cuadro de TabItem se selecciona
- IconPath: Cuadro de TabItem sin marcar
- pagePath: pestaña Ruta a la página correspondiente (es decir, el último paso para crear una ruta para añadir una página en las páginas de)
- TabItem texto correspondiente a: texto
App.json guardar el archivo, a continuación, lo que se muestra en el siguiente simulador de figura, aunque no he escrito una línea de código, sino que ha creado barra de pestañas, y se puede cambiar en la pestaña múltiple en la siguiente sección, se describe la forma de escribir el contenido de la página.
