此笔记需要熟悉Vue3语法
一、下载开发工具HBuilderX
HBuilderX是专用于开发UniApp的开发工具
进入官方后，直接下载（压缩包）
解压后打开exe应用程序即可（可右键发送快捷到桌面）
新手不要升级版本！下载什么版就用什么版
二、创建项目
1.HB右上角【文件】【新建】【项目】【uniapp】
2.输入项目名（不可中文/不可大写/不可留空格/多单词用-符号分隔）
3.选择Vue3版本（建议）
4.创建
三、开发
UniApp官网（教程、配置文件、组件、API、插件）
文件格式
┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录，详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ └─android Android原生资源目录 详见
├─hybrid App端存放本地html文件的目录，详见
├─wxcomponents 存放小程序组件的目录，详见
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss 这里是uni-app内置的常用样式变量
配置pages.json
新人提示所有资源路径不可中文名
导航栏：新手无美化要求可用、精通者可用，Vue3熟悉者建议自己做
tabbar：建议使用自带的，性能高，虽美化程度有限，但不影响开发复杂度
（vue3熟悉者配合v-show自制tabbar）
{
"pages": [
/* 独立页面路由加载 */
{
/* 主页 */
"path": "pages/index",
"style": {
/* 隐藏导航栏：新手不建议隐藏 */
"navigationStyle": "custom",
"app-plus": {
/* 隐藏滚动条：建议隐藏 */
"scrollIndicator": "none",
"compatible": {
/* 忽略版本检查提示框：可删除 */
"ignoreVersion": true
}
}
}
}，
{
/* 登录页 */
"path": "pages/login/IndexLogin",
"style": {
"navigationStyle": "custom",
"app-plus": {
"scrollIndicator": "none",
"compatible": {
"ignoreVersion": true
}
}
}
}
]
}
全局背景色
注：仅限pages中的路由页面
当前页面的style标签中使用
<style>
/* 全局默认背景色 */
page {
background-color: #F3F3F3;
}
</style>
独立页面用scoped的话page将失效
如下用法
<style scoped>
page {
background-color: #F3F3F3;
}
</style>
以下是页面开发模板（Status自制）
<script setup>
/* 组件内返回控制方法 */
const onBackPage = (data) => {
if (data == "back") {
/* 返回上一层页面 */
uni.navigateBack()
} else {
/* 关闭所有,回到首页 */
uni.reLaunch({
url: '/pages/index'
});
}
}
</script>
<template>
<!--必须用view包裹-->
<view>
<!--导航栏-->
<view>
<!--导航栏-->
<view class="status-tabbar">
<!-- 这里是app状态栏 -->
<view class="status-bar">
</view>
<!-- 这里是浮动状态栏 -->
<view class="status-body">
<view class="status-left" @click='onBackPage("back")'>
左按钮
</view>
<view class="status-top">
中按钮
</view>
<view class="status-right">
右按钮
</view>
</view>
</view>
<!-- 这里是app状态栏 -->
<view class="status-bar">
</view>
<!-- 这里是内容状态栏 -->
<view class="status-title">
</view>
</view>
<!--内容栏-->
<view class="content">
<!--内容1-->
<view class="content-body">
<view style="display: grid;grid-template-columns: repeat(3,33% 33% 33%); ">
<view style="width: 90%;padding: 10px;text-align: center;">
标题1
</view>
<view style="width: 90%;padding: 10px;text-align: center;">
标题2
</view>
<view style="width: 90%;padding: 10px;text-align: center;">
标题3
</view>
</view>
</view>
<!--内容2-->
<view class="content-body">
<view style="width: 90%;margin: auto;margin: 10px;padding: 10px;">
暂无最新内容
</view>
</view>
</view>
</view>
</template>
<style>
/* 独立页面用scoped的话page将失效 */
/* 全局默认背景色 */
page {
background-color: #F3F3F3;
}
/* 这里是导航栏 */
.status-tabbar {
position: fixed;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
top: 0px;
right: 0px;
left: 0px;
background-color: #F3F3F3;
}
/* 这里是App状态栏高度 */
.status-bar {
height: var(--status-bar-height);
background-color: #F3F3F3;
}
/* 这里是页面状态栏高度 */
.status-title {
height: 80px;
background-color: #F3F3F3;
}
/* 状态内容 */
.status-body {
display: grid;
grid-template-columns: repeat(3, 10% 80% 10%);
}
/* 状态左边样式 */
.status-left {
margin-top: auto;
margin-bottom: auto;
}
/* 状态中间样式 */
.status-top {
margin: auto;
font-size: 27px;
}
/* 状态右边样式 */
.status-right {
margin-top: auto;
margin-bottom: auto;
}
/* 主要内容 */
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 30rpx;
width: 100%;
}
/* 主要内容 */
.content-body {
width: 90%;
box-shadow: 0px 1px 10px 2px #a5a5a54f;
border-radius: 10px;
background: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
自制tabbar
<script setup>
/* 页面组件 */
import IndexHome from './home/IndexHome.vue'
import IndexCourse from './course/IndexCourse.vue'
import IndexBox from './box/IndexBox.vue'
import IndexMy from './my/IndexMy.vue'
import {ref} from 'vue'
/* 默认显示页 */
const crrtent = ref("IndexHome")
/* 扫码 */
const openImg = () => {
uni.scanCode({
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
}
/* 页面选择控制 */
const onSelect = (data) => {
crrtent.value = data
}
/* 页面显示控制 */
const showSelect = (data) => {
if (data == crrtent.value) {
return true
}
return false
}
</script>
<template>
<view>
<!--导航栏必须先加载-->
<view class="app-tabbar">
<image class="app-tabbar-icon" @click='onSelect("IndexHome")' src='../static/icon/tabbar/homepage.png'></image>
<image class="app-tabbar-icon" @click='onSelect("IndexCourse")' src='../static/icon/tabbar/timetable.png'></image>
<image class="app-tabbar-icon-centre" @click='openImg()' src='../static/icon/tabbar/scan.png'></image>
<image class="app-tabbar-icon" @click='onSelect("IndexBox")' src='../static/icon/tabbar/apply.png'></image>
<image class="app-tabbar-icon" @click='onSelect("IndexMy")' src='../static/icon/tabbar/my.png'></image>
</view>
<!--内容切换-->
<view>
<view v-show='showSelect("IndexHome")'>
<!--响应子组件内onSelect事件，并触发父组件onSelect事件-->
<IndexHome @onSelect='onSelect' />
</view>
<view v-show='showSelect("IndexCourse")'>
<IndexCourse />
</view>
<view v-show='showSelect("IndexBox")'>
<IndexBox />
</view>
<view v-show='showSelect("IndexMy")'>
<IndexMy />
</view>
</view>
</view>
</template>
<style>
/* 全局默认背景色 */
page {
background-color: #F3F3F3;
}
.app-tabbar {
display: grid;
grid-template-columns: auto auto auto auto auto;
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
text-align: center;
font-size: 10px;
background-color: #FFFFFF;
border-radius: 30px 30px 0 0;
height: 70px;
box-shadow: 0px 1px 10px 2px #a5a5a54f;
/* 默认导航99层 */
z-index: 99;
}
.app-tabbar-icon {
margin: auto;
width: 22px;
height: 22px;
}
.app-tabbar-icon-centre {
margin: auto;
width: 33px;
height: 33px;
}
</style>
四、云打包
对manifest.json进行配置
#图标配置
#启动界面配置
#模块配置(可忽视)
(选push需要进行配置)
dev.dcloud.net.cn/pages/app/l…
点应用名进入应用管理，并申请云端证书
选择uniPush的消息推送，
根据云端证书填入信息，
并购买云数据服务器(云端时间推送消息)
2.打包的地址变量不可使用中文（静态资源等等）
3.原生App云打包（不推荐本地打包，配置繁琐）
五、本地打包（不建议:需熟悉其他工具）
