uniapp 用法
uniapp 基本概念
uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次编写代码，同时发布到 iOS、Android、H5 及小程序等多个平台。核心特点包括：
- 使用 Vue 语法，学习成本低。
- 通过条件编译实现多平台差异化代码。
- 提供丰富的内置组件和 API，兼容各平台特性。
开发环境搭建
- 安装 HBuilderX：官方推荐的 IDE，内置 uniapp 开发支持，下载地址为 HBuilderX 官网。
- 创建项目：在 HBuilderX 中选择
文件 -> 新建 -> 项目，选择 uniapp 模板。 - 运行调试：通过工具栏的运行按钮，选择目标平台（如 Chrome、微信开发者工具等）进行预览。
项目目录结构
典型 uniapp 项目目录如下：
├── pages // 页面目录
├── static // 静态资源
├── components // 自定义组件
├── App.vue // 应用入口
├── main.js // 项目配置
├── manifest.json // 应用配置（如包名、权限）
└── pages.json // 页面路由与样式配置 页面开发示例
在 pages/index/index.vue 中编写页面代码：
<template>
<view class="container">
<text>{{ message }}</text>
<button @click="handleClick">点击</button>
</view>
</template>
<script>
export default {
data() {
return {
message: "Hello uniapp"
};
},
methods: {
handleClick() {
uni.showToast({ title: "点击事件触发" });
}
}
};
</script>
<style>
.container {
padding: 20px;
}
</style> 跨平台兼容处理
通过条件编译实现不同平台逻辑：
// #ifdef H5
console.log("仅在 H5 平台生效");
// #endif
// #ifdef MP-WEIXIN
console.log("仅在微信小程序生效");
// #endif 常用 API
- 路由跳转：
uni.navigateTo({ url: '/pages/detail/detail' }) - 网络请求：
uni.request({ url: 'https://example.com' }) - 本地存储：
uni.setStorageSync('key', 'value')
发布流程
- 打包 H5：在 HBuilderX 中选择
发行 -> 网站-H5。 - 打包小程序：配置
manifest.json中的微信小程序 AppID，选择发行 -> 小程序-微信。 - 打包 App：生成原生应用需使用云打包或本地打包。
注意事项
- 避免使用平台特有 API 时未做条件编译。
- 多端样式差异需通过适配解决，推荐使用 Flex 布局。
- 调试时优先使用各平台官方工具（如微信开发者工具）。
通过以上步骤可快速上手 uniapp 开发，更多细节参考 uniapp 官方文档。
