uniapp 简易框架

uniapp 简易框架搭建方法

环境准备
安装 HBuilderX 作为开发工具，确保已配置 Node.js 环境。通过 HBuilderX 创建 uni-app 项目时选择默认模板或自定义模板。

项目结构说明

• pages 目录存放页面文件，每个页面包含 .vue 文件。
• static 目录存放静态资源如图片、字体。
• App.vue 是应用入口文件，全局样式和逻辑在此定义。
• main.js 是应用主脚本，初始化 Vue 实例并引入插件。

核心配置步骤

页面路由配置
在 pages.json 中定义页面路径和窗口样式。例如：

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

全局样式管理
在 App.vue 中通过 <style> 标签定义全局 CSS，或通过 uni.scss 文件使用 SCSS 变量。例如：

/* uni.scss */
$primary-color: #007AFF;

基础组件使用

内置组件示例
使用 uni-button 和 uni-input 等内置组件快速构建界面：

<template>
  <view>
    <uni-button type="primary" @click="handleClick">按钮</uni-button>
    <uni-input v-model="inputValue" placeholder="请输入内容" />
  </view>
</template>

API 调用示例
通过 uni.request 发起网络请求：

uni.request({
  url: 'https://api.example.com/data',
  success: (res) => {
    console.log(res.data);
  }
});

状态管理方案

Vuex 集成
在 store 目录下创建 Vuex 模块，通过 main.js 注入 store 实例：

// store/index.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

跨端适配技巧

条件编译
使用 #ifdef 和 #ifndef 区分不同平台代码：

// #ifdef H5
console.log('仅在 H5 平台生效');
// #endif

注意事项

• 使用 rpx 单位适配不同屏幕尺寸。
• 测试时需覆盖目标平台（iOS、Android、H5）。