uniapp步骤(语法简单就是结合了微信小程序和vue)_uniapp是vue的语法小程序的文档

​ 4、数据绑定及事件处理同 Vue.js 规范，比如 @click=“btnClick” :num=“num”，同时补充了App及页面的生命周期

​ 5、为兼容多端运行，建议使用flex布局进行开发

二、目录结构

https://uniapp.dcloud.net.cn/frame?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84

• components：存放自定义组件

• pages：业务页面文件存放的目录，通过路由导航的页面

• static：存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此

• App.vue：应用配置，用来配置App全局样式以及监听 应用生命周期

  • App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
  • 这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
  • 应用生命周期仅可在App.vue中监听，在页面监听无效
  • 详见：https://uniapp.dcloud.io/collocation/App

• main.js:Vue初始化入口文件

  • main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。
  • 详见：https://uniapp.dcloud.io/collocation/main

• pages.json:配置页面路由、导航条、选项卡等页面类信息，详见

  • pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
  • 它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置
  • 详见：https://uniapp.dcloud.io/collocation/pages

• manifest.json:配置应用名称、appid、logo、版本等打包信息

  • manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
  • 详见：https://uniapp.dcloud.io/collocation/manifest

• uni.scss

  • uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
  • 详见：https://uniapp.dcloud.io/collocation/uni-scss

三、资源路径说明

• 详见：https://uniapp.dcloud.net.cn/tutorial/page-static-assets.html

四、生命周期

• 1、应用生命周期函数

  • 使用 小程序页面的 生命周期函数 如：onLaunch/onShow/onHide/onError 等
  • 注意：应用生命周期仅可在App.vue中监听，在其它页面监听无效。
  • 详见：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e5%ba%94%e7%94%a8%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

• 2、页面生命周期

  • 使用 小程序页面的 生命周期函数，如 onLoad/onShow/onHide/onReady/onReachBottom 等
  • 写在pages下的vue文件中
  • 详见：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

• 3、组件生命周期

  • uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周。如：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed
  • 写在components下的vue文件中
  • 详见：https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e7%bb%84%e4%bb%b6%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

五、路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同
路由跳转
uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转—与微信小程序用法相似

六、页面样式与布局

​ 1、尺寸单位：uni-app 支持的通用 css 单位包括 px、rpx
​ 2、样式导入：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
​ 详见：https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

七、Vue语法

uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但 uni-app 仍是是对vue语法支持度最高的跨端框架。

相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面：
​ 1、新增：uni-app 除了支持Vue实例的生命周期，还支持应用生命周期以及页面生命周期。
​ 2、受限：相比web平台，在小程序和App端部分功能受限：https://uniapp.dcloud.net.cn/vue-api
​ 3、uni-app 完整支持 Vue 模板语法。
​ 4、App端可以使用更多的vue特性：https://ask.dcloud.net.cn/article/36599

Vue2语法详见：https://uniapp.dcloud.net.cn/vue-basics

子组件同样使用vue的单文件组件

• 传值: 页面间传值与小程序相同， 父子组件传值与vue相同
  下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。