uniapp 用法
uniapp 基本概念
uniapp 是一个基于 Vue.js 的跨平台开发框架，支持编译到 iOS、Android、H5 及小程序等多端。其核心特点是“一次开发，多端发布”，通过条件编译实现平台差异化代码。
开发环境搭建
- 安装 HBuilderX：官方推荐的 IDE，内置 uniapp 开发支持，可从官网下载。
- 创建项目：通过 HBuilderX 新建 uniapp 项目，选择默认模板或自定义模板。
- 安装依赖：若使用 CLI 开发，需全局安装 Vue CLI 和 uniapp 插件：
npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project
目录结构说明
pages：页面目录，每个页面需在pages.json中注册。static：静态资源目录（如图片）。components：可复用组件目录。manifest.json：应用配置（如 AppID、启动图）。pages.json：路由与页面样式配置。
页面开发示例
- 创建页面：在
pages目录下新建文件夹（如home），并添加index.vue文件。 - 配置路由：在
pages.json中注册页面路径：{ "pages": [ { "path": "pages/home/index", "style": { "navigationBarTitleText": "首页" } } ] } - 编写页面逻辑：
<template> <view> <text>{{ message }}</text> </view> </template> <script> export default { data() { return { message: "Hello uniapp!" }; } }; </script>
组件使用
- 创建组件：在
components目录下新建my-component.vue。 - 引入组件：在页面中通过
import导入并注册：<template> <view> <my-component /> </view> </template> <script> import MyComponent from '@/components/my-component.vue'; export default { components: { MyComponent } }; </script>
跨端条件编译
通过注释语法实现不同平台的代码差异化：
// #ifdef H5
console.log("仅在 H5 环境生效");
// #endif
// #ifdef MP-WEIXIN
console.log("仅在小程序环境生效");
// #endif常用 API
- 路由跳转：
uni.navigateTo({ url: '/pages/home/index' }) - 网络请求：
uni.request({ url: 'https://example.com' }) - 本地存储：
uni.setStorageSync('key', 'value')
调试与发布
- 调试：通过 HBuilderX 运行到浏览器或真机调试。
- 打包：在 HBuilderX 中选择“发行”，生成对应平台的安装包或代码。
注意事项
- 样式兼容：部分 CSS 属性需加前缀（如
-webkit-）。 - 平台差异：通过
uni.getSystemInfoSync()获取设备信息，适配不同平台。 - 性能优化：避免频繁
setData，合理使用虚拟列表组件。
通过以上方法可快速上手 uniapp 开发，具体细节可参考官方文档或社区示例。
