uni-app作为近年异军突起的前端框架,号称兼容10个平台,一套代码多端运行。
官方文档地址:https://uniapp.dcloud.io/
听起来十分的不错,这样可以大大减少公司和开发者的时间和金钱成本。因此很多的公司企业也都把uni-app列入了招聘技术要求。
我从今天开始也入坑一波,把自己学到的和踩的坑和大家分享一下。因为我之前是做微信小程序的,所以我也会把uniapp和微信小程序原生开发的异同点对比一下。
首先,无论是什么语言,什么框架,都需要一个得力的编辑器辅助我们完成代码的编写及调试。
uni-app官方推荐的是HbuilderX作为主要编辑器,Hbuilder和uniapp都是DCloud旗下的产品,它自然会把HbuilderX各种东西调试兼容的很好,所以目前,我打算先用这个。
https://www.dcloud.io/hbuilderx.html这是HbuilderX官方下载地址。
然后我建议再下载一个微信开发者工具,方便调试
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html这是微信开发者工具的下载地址。
然后我们进入HbuilderX的可视化界面,新建一个uniapp项目。
新建完成之后,目录结构如下:
pages文件夹存放的就是我们要编写的所有页面。
static文件夹是我们要上线打包时用到的,在开发中基本不用。
App.vue是设置全局样式的,类似于微信小程序的app.js/app.wxss,manifest.json也是调试上线时需要用到的,比如app的图标等。
pages.json类似于微信小程序的app.json,设置全局的tabbar及页面注册等功能。
uni.scss是官方为我们封装的一些样式库。
ok,然后我们点击运行一下,点顶部的运行之后,可以选择浏览器、手机模拟器、小程序模拟器,大家可以都一一尝试一下,手机模拟器的话,需要在手机上下载对接的软件,插上USB后它会有提示。小程序模拟器必须下载对应的IDE才能打开,而已大部分都需要打开一下端口。
H5端的运行效果如下:
我没有看官方文档,自己敲了一些代码,个人感觉uniapp开发起来像是vue和小程序的结合,搞笑的事情是,我就随便试了一个微信小程序的API,把前缀wx.改成了uni.,然后就可以正常使用,功能一摸一样。哈哈哈。所以,如果有vue和小程序的开发经验的话,uniapp学起来应该比较轻松。
有任何问题都可以联系QQ:505417246
微信小程序云开发零基础QQ交流群:1073011570