初识uni-app

一、初识uni-app

1、uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
2、uni-app特征
①跨屏平台更多:
真正做到“一套代码、多端发行”
条件编译:优雅的在一个项目里调用不同平台的特色功能
②运行体验更好:组件、api与微信小程序一致 兼容weex原生渲染
③通用技术栈,学习成本更低:vue的语法、微信小程序的api 内嵌mpvue
④开放生态,组件更丰富
支持通过npm安装第三方包
支持微信小程序自定义组件及十多块
兼容mpvue组件及项目
APP端支持和原生混合编码
DCloud将发布插件市场
3、
初识uni-app_第1张图片
所有绿色部分表示所有跨平台的功能模块

二、新建项目

打开HbulidX,新建uni-app项目
①项目类型选择uni-app
②输入项目名称
③模板选择默认模板
④创建
初识uni-app_第2张图片
项目目录如下:
初识uni-app_第3张图片

三、运行配置

1、点击运行→运行到小程序模拟器→运行设置

2、在浏览器运行配置和小程序运行配置中的微信开发者工具路径中写入路径

初识uni-app_第4张图片
3、点击运行微信开发者工具
在这里插入图片描述
出现上图所示说明微信开发者工具中的端口没有开启,需要开启端口,步骤如图所示 工具→设置→安全设置→点击开启,如下图所示
初识uni-app_第5张图片
开启端口之后再次运行,出现下图所示则表示运行成功
初识uni-app_第6张图片
自动生成微信小程序文件
初识uni-app_第7张图片
首页文件
在这里插入图片描述

四、scss文件

全局文件,不需要在分页里引入就可以直接用
设置全局样式、常用颜色、字体等

五、pages.json

在pages文件夹中新建页面,选择使用scss页面
初识uni-app_第8张图片
在pages.json中会自动配置
初识uni-app_第9张图片

你可能感兴趣的:(初识uni-app)