uniapp 用法

uniapp 基本概念

uniapp 是一个基于 Vue.js 的跨平台开发框架，支持编译到 iOS、Android、H5 及小程序等多端。其核心特点是“一次开发，多端发布”，通过条件编译实现平台差异化代码。

开发环境搭建

1. 安装 HBuilderX：官方推荐的 IDE，内置 uniapp 开发支持，可从官网下载。
2. 创建项目：通过 HBuilderX 新建 uniapp 项目，选择默认模板或自定义模板。
3. 安装依赖：若使用 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：路由与页面样式配置。

页面开发示例

1. 创建页面：在 pages 目录下新建文件夹（如 home），并添加 index.vue 文件。
2. 配置路由：在 pages.json 中注册页面路径：

   {
     "pages": [
       {
         "path": "pages/home/index",
         "style": { "navigationBarTitleText": "首页" }
       }
     ]
   }

3. 编写页面逻辑：

   <template>
     <view>
       <text>{{ message }}</text>
     </view>
   </template>
   <script>
   export default {
     data() {
       return { message: "Hello uniapp!" };
     }
   };
   </script>

组件使用

1. 创建组件：在 components 目录下新建 my-component.vue。
2. 引入组件：在页面中通过 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')

调试与发布

1. 调试：通过 HBuilderX 运行到浏览器或真机调试。
2. 打包：在 HBuilderX 中选择“发行”，生成对应平台的安装包或代码。

注意事项

• 样式兼容：部分 CSS 属性需加前缀（如 -webkit-）。
• 平台差异：通过 uni.getSystemInfoSync() 获取设备信息，适配不同平台。
• 性能优化：避免频繁 setData，合理使用虚拟列表组件。

通过以上方法可快速上手 uniapp 开发，具体细节可参考官方文档或社区示例。