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）。
