uni-app基础篇

对vue的学习，通过这个会更好一些

首先来说，为什么会出现uni-app呢？

就要从当前平台开发存在的的问题说起了，第一，多端泛滥，端很多，用户被分散，工程师需要适配的更多。第二，体验不好。第三，生态不丰富。

uni-app的产品特征

1.跨平台更多

并行的维护和升级，通过条件编译，跨端的过程中并不牺牲平台的特色。

2.运行体验更好

体验和小程序相同，引入了week原生渲染，效率高，使用局部渲染优化，其他部分还是用uni-app

3.通用的技术栈，学习成本低

使用的是微信小程序的api，以及vue的语法，内嵌mpvue开源框架

4.开放生态，组件丰富

支持npm安装第三方包

支持微信小程序自定义组件及SDK

兼容mpvue组件及项目

App端支持

uni-app搭建

uni-app官网 (dcloud.io)https://uniapp.dcloud.io/我这里准备的工具是HBuilder和微信开发者工具

在HBuilder中创建uni-app项目

为什么创建的uniapp没有components

结构简介

1.  components文件夹
2. 用于放置可复用的自定义组件
3.  pages用于存放页面
4. static用于放置图片等静态资源
5. app.vue全局的生命周期，或者全局的样式
6. main.js项目的入口文件
7. manifest.json配置中心,比如图标配置，启动图配置，SDK配置，权限配置，微信小程序配置
8. pages.json记录页面的路由关系,导航条，选项卡，等文件，应用的启动页与微信开发者工具中相同，第一个为启动页。

   "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
   		{
   			"path": "pages/index/index",
   			"style": {
   				"navigationBarTitleText": "uni-app"
   			}
   		}
   	],

9. index         模板层，脚本层，样式层

   uni-app 支持的通用 css 单位包括 px、rpx

---

uni-app项目启动时出现无法启动的问题

 在HBuilder中启动，而在微信开发者工具中不显示问题

点击设置-安全-打开

 就会显示出页面了

 

也可以对项目进行打包操作。可以下载到手机中。