uniapp 语法分析
uniapp 语法基础
uniapp 基于 Vue.js 语法，同时扩展了跨平台能力。核心语法包括 Vue 的模板、脚本和样式三部分，结合条件编译实现多端适配。
模板语法
使用 Vue 的模板语法，支持指令如 v-if、v-for 和事件绑定 @click。uniapp 扩展了原生组件，例如 <view> 替代 <div>，<text> 替代 <span>。
<template>
<view @click="handleClick">
<text v-if="showText">{{ message }}</text>
</view>
</template>脚本语法
遵循 Vue 的选项式 API 或组合式 API（需搭配 setup）。生命周期钩子与 Vue 一致，新增 onLaunch、onShow 等应用级生命周期。
<script>
export default {
data() {
return { message: 'Hello uniapp', showText: true }
},
methods: {
handleClick() {
console.log('Clicked');
}
}
}
</script>样式语法
支持 CSS 预处理器（如 SCSS、Less），通过 <style> 标签编写。使用 rpx 单位适配不同屏幕。
<style>
view { padding: 20rpx; }
text { color: #007AFF; }
</style>条件编译
通过特殊注释实现多端代码差异化，语法格式为 #ifdef、#ifndef 和 #endif。
// #ifdef H5
console.log('仅在H5平台生效');
// #endif跨端 API 调用
uniapp 提供统一 API 封装原生功能，如网络请求、存储、地理位置等。
uni.request({
url: 'https://example.com/api',
success: (res) => { console.log(res.data); }
});组件与插件
- 内置组件：如
<swiper>、<scroll-view>，直接按文档使用。 - 自定义组件：通过
components目录创建，支持全局或局部注册。 - 插件市场：通过
uni_modules引入第三方插件，扩展功能。
路由与页面跳转
使用 uni.navigateTo、uni.redirectTo 等 API 管理页面栈，路由配置在 pages.json 中定义。
// pages.json
{
"pages": [
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }
]
}状态管理
支持 Vuex 或 Pinia（需手动配置）。Vuex 示例：
import Vuex from 'vuex';
const store = new Vuex.Store({
state: { count: 0 },
mutations: { increment(state) { state.count++ } }
});注意事项
- 避免使用浏览器专属 API（如
document），需替换为 uniapp API。 - 多端适配时，通过
uni.getSystemInfoSync()获取平台信息。 - 调试时使用
HBuilderX或开发者工具，支持真机预览。
通过结合 Vue 语法与 uniapp 扩展能力，可高效开发跨平台应用。
