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 官网查看