Uni-app实战项目开发第一天

hello 大家好，我是IT界老张,程序员一枚。

今天给大家介绍下uni-app uniapp是一个使用了vue.js开发的所有前端应用框架，可以一次开发,发布到多端，适用于那些小型网络开发公司，对要求不高的应用进行使用，节省开发成本。

uniapp 是有DCloud 公司开发，教程呢在腾讯课堂也有,大家可以前往学习，uni-app在手，做啥都不难，哈哈，主要是学习uni-app成本低，会使用VUE 基本都能很快上手使用uni-app开发应用

uni-app优势有哪些呢? uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

目前我也是在学习uni-app 我可是一个PHP程序员奥，目前正在使用uni-app开发第一款应用。

在使用uni-app的过程中可能会碰到很多问题,但是在社区都能得到有效地解决，有挑战才有进步。

如何学习这个uni-app呢

建议第一步，看完uni-app官网的首页介绍。

建议第二步，通过快速上手，亲身体验下uni-app。

建议第三步，看完《uni-app官方教程》，出品人：DCloud，课时：共3节。

三方培训机构视频

如下是三方专业培训机构的视频教程

• 《uni-app 商业级应用实战》，出品人：腾讯课堂NEXT学院。亮点：腾讯课堂官方出品；不懂 vue 的工程师也可快速学习；从入门到实战都包括。
• 《uni-app 跨平台应用开发教程》，出品人：hcoder 刘海君，课时：共25节。亮点：讲师经验丰富，也是graceui框架作者。
• 《uni-app 实战教程 - “悦读”项目实战》，出品人：hcoder 刘海君，点击领取专享优惠劵
• 《uni-app实战社区交友类app开发》，出品人：帝莎IT学院。适用人群：具备Html+Css+Javascript基础知识。
• 《uni-app仿小米商城实战》，出品人：帝莎IT学院。首页使用nvue开发，目前支持app端和小程序端。
• 《uni-app多端调试环境配置》，出品人：帝莎IT学院。
• 《uni-app实战仿微信app全栈开发》，出品人：帝莎IT学院。
• 《uni-app实战视频点播app小程序》，出品人：帝莎IT学院。
• 《0基础学unicloud开发，跨端serverless技术》，出品人：林举
• 《uni-app 5小时快速入门》，出品人：meHaoTian
• 《uni-app 快速入门 从零开始实现新闻资讯类跨端应用》，出品人：meHaoTian
• 《uni-app实战直播app全栈开发》，出品人：帝莎IT学院
• 《uni-app博客实战开发教程》，出品人：卢小兵
• 《uni-app快速入门到社区论坛项目多端开发实战》，出品人：千锋教育

关于各端的管理规则需要耐心学习

uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。

每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：

• 比如H5端的浏览器有跨域限制；
• 比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
• 比如App端，iOS对隐私控制和虚拟支付控制非常严格；
• 比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；
• 如果你的App要使用三方sdk，比如定位、地图、支付、推送...还要遵循他们的规则和限制；

遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。

目录结构

一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

具体的大家可以前往uni-app 官网查看