uni-app介绍
uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
官网:uni-app官网
两种搭建uni-app项目的方式
两种搭建项目的方式
可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。
开始之前,开发者需先下载安装如下工具:
-
HBuilderX:官方IDE下载地址
也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。
使用vue-cli创建uni-app项目
1.全局安装vue-cli:
npm install -g @vue/cli
2.执行cli
$ vue create -p dcloudio/uni-preset-vue heima-ugo
3.选择默认模版
4.运行项目
npm run dev:%PLATFORM%
%PLATFORM%
可取值如下:
值 | 平台 |
---|---|
h5 | H5 |
mp-alipay | 支付宝小程序 |
mp-baidu | 百度小程序 |
mp-weixin | 微信小程序 |
mp-toutiao | 字节跳动小程序 |
mp-qq | qq 小程序 |
总结
-
运行: npm run dev:mp-weixin开启小程序开发服务器
-
看效果:导入项目下dist\dev\mp-weixin目录到小程序开发者工具
-
在项目src目录修改代码后,会自动重新打包小程序代码,实时查看最新效果