uni-app的基本使用
一、什么是 uni-app ?
官方文档
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app同时也是更好的小程序开发框架。
DCloud公司拥有350万开发者用户,旗下uni-app有5万+案例、600+插件、50+微信/qq群、更高的百度指数,可以放心选择,快速体验
二、为什么要使用 uni-app ?
使用 uni-app 解决了跨平台开发存在的问题
1. 跨平台更多
真正做到 “一套代码、多端发行”!
条件编译 : 优雅的在一个项目里面调用不同平台的特色功能!
2. 运行体验更好
组件、api 与 微信小程序一致
兼容 weex 原生渲染
3. 通用技术栈,学习成本更低
vue 的语法、微信小程序的api
内嵌 mpvue
4. 开放生态,组件更丰富
支持通过 npm 安装第三方包
支持微信小程序自定义组件及SDK
兼容 mpvue 组件及项目
App 端支持和原生混合编码
DCloud 将发布插件市场
三、uni-app 功能框架图
四、安装
我们需要安装两个工具 :
1. HBuilderX是通用的前端开发工具,但为 uni-app 做了特别强化。
下载地址 : HBuilderX官网
![]() |
![]() |
我们点击图1 download下载,就会弹出一个图2的窗口,选择你的系统,下载 App 开发版.下载成功后这是一个压缩包,解压完成我们点击 HBuilderX.exe 文件就成功打开了 HBuilderx
2. 安装微信开发者工具
下载地址 : 微信开发者工具
我们根据自己的系统配置下载稳定版的,成功之后一直点击 next 下一步即可
五、初始化项目和运行项目
1. 初始化项目
1.1 用 HBuilder 创建
打开 HBuilder,点击左上角的"文件",点击"新建",再点击"项目",就会弹出一个项目窗口. 然后进行选择 uni-app 及创建项目和位置
1.2 用 微信开发者工具 创建
这里就不再一一叙述了,可以去我的主页中找到微信小程序的基本使用就可以看到,就正常创建项目即可.运行的时候就会实现uni-app
2. 运行
2.1 用 HBuilder 运行
打开 HBuilder,点击左上角的"运行",点击"运行到浏览器",接着选择你想用什么浏览器打开,点击一下就成功打开了
2.2 用 微信开发者工具 运行
如果是第一次使用微信小程序打开创建的 uni-app 项目,需要以下两点:
- 先在微信开发者工具中,在最上面找到"设置",点击"安全设置".然后把"服务器端口"这一项打开
- 复制 微信开发者工具的路径,然后点击 HBuilderx ,在最上面的"运行"中,找到"运行到小程序的模拟器",然后复制 微信开发者工具 的路径,就配置好了.下次在点击这样的操作,直接会在 微信开发者工具中转为小程序的文件格式
六、项目目录和文件作用
文件夹 :
pages 所有的页面存放目录
static 静态资源目录,例如图片等
unpackage 就是打包目录,在这里有各个平台的打包文件
components 组件存放目录
文件夹 :
App.vue 是我们的跟组件,所有页面都