uni-app简介

最新推荐文章于 2025-05-27 09:30:41 发布

A~小鲸喜

最新推荐文章于 2025-05-27 09:30:41 发布

阅读量428

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序 vue.js uni-app

本文链接：https://blog.csdn.net/Sun_Maple_jw/article/details/119971081

本文介绍了uni-app的基本概念，它是Vue.js开发的跨端框架，用于构建iOS、Android及各类小程序。主要讲解了如何使用官方工具创建项目，文件目录结构，以及关键配置文件如pages.json和manifest.json的用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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