1、什么是uni-app?
uni-app ?是一个使用?Vue.js?开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app 同时也是更好的小程序开发框架。
2、uni-app的开发工具
毫无疑问,首选uni-app官方推荐工具:https://www.dcloud.io/hbuilderx.html
3、新建项目
????????1.点击文件>新建>项目
????????2.选择uni-app项目
?
4、文件目录介绍
????????pages 页面文件夹 ????????static 静态资源目录 ????????App.vue vue根文件 ????????main.js vue入口文件 ????????manifest.json 打包配置文件 ????????pages.json 页面配置文件 ????????uni.scss scss全局变量
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
配置文件介绍 pages.json globalStyle: 全局样式配置
pages:所有页面相关配置
page>style 单独页面配置,和globalStyle里面的属性一样 更多api配置相关查看官方文档介绍:https://uniapp.dcloud.io/collocation/pages
manifest.json 基础配置
应用标识:应用唯一标识,需要登录hbuilderx账号进行获取 H5配置
启用https协议:默认勾选,只允许请求https的域名,如果项目中有请求http域名接口需要把这个勾选去掉。 微信小程序配置
配置AppID
?
?
|