《uni-app 从入门到入土》之一 uni-app基础

uni-app学习之路

持续更新中 ，记录uniapp的学习之路，包括知识点记录以及踩坑

一、入门介绍

uni-app 基于vue 和小程序规范的跨端框架，在已经学会vue和小程序有更低的学习成本，由于公司原来的小程序架构是mpvue 已经停止维护，于是自己转战uni-app 去学习目前市面上普及比较广，社区较为丰富的的uni-app框架，个人的学习方式比较喜欢记录笔记，所以通过记录笔记和看视频来巩固自己的知识点

1.1 uni-app安装

1、uni-app官方推荐是Hbuilder X的编译器官方地址为 Hbuilder X的下载地址
傻瓜式安装完后，点击HbuilderX菜单栏文件>项目>新建 输入项目名创建即可
2、如果使用其他编译器如Vscode、Sublime Text，则需要通过命令行创建项目 vue create -p dcloudio/uni-preset-vue projectName

1.2 uni-app目录介绍

下方是创建出来的基础结构

• pages： 业务页面文件存放的目录
• static：静态资源存放
• App.vue：是uni-app的主组件，所有页面都是在App.vue下进行切换的
• main.js：是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。
• manifest.json： 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
• index.html：基础模板入口文件
• pages.json：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
• uni.scss：文件的用途是为了控制全局样式
• vue.config.js ：是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack
  等编译选项

1.3 uni-app配置学习

1、page.json 所有的页面都要在page.json 进注册访问才能访问

• pages：== 设置不同样式下打包下的样式== path： ‘页面路径style： 可通过 h5 、mp-mp-weixin 等配置不同打包下的样式
• globalStyle： 页面所有默认的属性配置，会被pages 进行覆盖
• tabBar：底部操作栏 最少两个 最多五个
  

1.4 uni-app启动方式

1、在点开manifest.json 的时候 需要设置 AppID这个是 uni-app的唯一标识，需要设置这个才能运行到各个平台，获取的办法需要进行注册 Hbuilder X账号

2、启动小程序特别注意！！！

需要将微信开发者工具将小程序工具的安全服务端口打开 手动打开工具 -> 设置 -> 安全设置，将服务端口开启。

二、uni-app 组件学习

uni-app 的语法还是与vue的语法相似 都是template 语法，即一个页面由三分部份组成

2.1 view 容器

view 相当于html里的div标签

2.2 text 文本

text 相当于html的span 行内样式标签

image 图片

image 相当于html里的img 标签