一、什么是uin-app（uniapp.dcloud.io/）
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
开发环境：HBuilder。 官网下载地址：www.dcloud.io/hbuilderx.h… （下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。）
二、新建项目
1. 点击左上角文件 -> 新建 -> 项目
2. 弹窗中填写创建的项目名称、项目路径，选择模板，选择vue版本，点击创建即可
三、运行
点击运行，uniapp会编译成不同终端的代码，运行到不同的终端（h5、小程序等）
运行到小程序模拟器之前，要进行一个运行配置，因为小程序模拟器是在微信开发者工具里面的
1. 点击运行 -> 运行到小程序模拟器 -> 运行设置
2. 找到小程序运行配置，配置微信开发者工具在你电脑中的路径
四、基本目录结构介绍
main.js 是uniapp的入口文件（初始化vue实例、定义全局组件、使用需要的插件如 pinia）
import App from './App'
import * as Pinia from 'pinia';
// #ifndef VUE3 //不是vue3应用
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3 //是vue3应用
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(Pinia.createPinia()); // 集成状态管理pinia
return {
app,
Pinia, // 此处必须将 Pinia 返回
}
}
// #endif
App.vue是uniapp的根组件（根应用）,监听应用生命周期、配置全局样式、配置全局的存储globalData。
注：应用生命周期仅可在App.vue中监听，在页面监听无效
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
pages.json 全局配置文件（决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等，类似微信小程序中app.json的页面管理部分）
navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色（ black/white）
navigationBarTitleText：导航栏标题文字内容
navigationStyle：导航栏样式（default/custom取消默认的原生导航栏）
更多配置学习详见官网：uniapp.dcloud.net.cn/collocation…
五、基础语法（开发规范）
uni-app开发可以理解为vue和小程序的混合开发，如果掌握了vue和小程序开发，那么uni-app开发也会变得非常简单。
1.页面文件遵循vue的单文件组件规范（index.vue）
2.组件标签靠近小程序规范(view)
uniapp.dcloud.net.cn/component/
scroll-view定义可滚动视图区域，上拉刷新下拉加载更多
属性：
scroll-x：允许横向滚动
scroll-y：允许纵向滚动
show-scrollbar：控制是否出现滚动条
@scrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower：滚动到底部/右边，会触发 scrolltolower 事件
@refresherpulling：自定义下拉刷新控件被下拉
@refresherrefresh：自定义下拉刷新被触发
@refresherrestore： 自定义下拉刷新被复位
@refresherabort：自定义下拉刷新被中止
3.接口能力（API）靠近小程序规范，但需将前缀 wx 替换为 uni（如路由跳转）uniapp.dcloud.net.cn/api/
uni.getSystemInfo({//异步获取系统信息
success: function (res) {
console.log(res.windowHeight)//可使用窗口高度
}
});
uni.createSelectorQuery().select(".test")//获取节点信息
.boundingClientRect((data) => {//节点的布局位置的查询请求
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.height);
})
.exec();
4.数据绑定及事件处理同vue规范(v-for=”” :key=”” @click=””)，同时补充了App及页面的生命周期
5.为兼容多端运行，建议使用flex布局进行开发
6.样式穿透: /deep/ .btn{}
下面是一个简单的demo示范：(.vue文件)
<template>
<view class="g-container">
<!-- 标签 小程序 -->
<input type="text" placeholder="请输入内容" v-model="inputValue"><button @click="onConfirm">确定</button>
</view>
<view class="g-list">
<view v-for="item in list" :key="item.id" ">
<text @click="onDelete(item.id)">{{item.id}} - {{item.name}} - {{item.price}} - {{item.num}}</text>
</view>
</view>
</template>
<script setup>
import {ref} from 'vue'
const list = ref([
{id:1001,name:'javascript高级编程',price:88.89,num:1},
{id:1002,name:'vue高级编程',price:188.89,num:1},
])
const inputValue = ref('')
// 确定
const onConfirm = ()=>{
const good = {
id:Math.floor(Math.random()*(9999-1000)+1000),
name:inputValue.value,
price:Math.floor(Math.random()*(999-100)+100),
num:Math.floor(Math.random()*10)
}
list.value.push(good)
inputValue.value = '' // 清除数据
}
// 删除
const onDelete = (id)=>{
const index = list.value.findIndex(item=>item.id===id)
list.value.splice(index,1) //
}
</script>
<style scoped lang="scss">
.g-container{
margin: 5px;
display: flex;
input{
border: 1px solid gray;
height: 40px;
flex: 1;
}
button{
width: 100px;
}
}
</style>
六、混入封装
1. 什么是混入
类似于全局方法(工具类:utils)，但是混入的this是可以使用的(指向组件this:vueComponent)。
比如某一个功能在很多组件和很多页面都会使用，那么就可以用混入封装起来
2.在mixins文件夹下创建mixins.js文件
export function mixin() {
const courseType = ( courseLevel )=>{
let value = ''
switch( courseLevel ){
case 1:
value ='初级'
break;
case 2:
value ='中级'
break;
case 3:
value ='高级
break;
}
return value;
}
return courseType
}
3.在.vue文件中使用
<script setup>
import {ref,computed,watch} from 'vue'
import {mixin} from './mixins/mixins.js'
const {courseType} = mixin()
</script>
