uniapp 简易框架
uniapp 简易框架搭建方法
基础项目初始化
通过HBuilderX或命令行创建uniapp项目，选择默认模板。确保已安装Node.js和HBuilderX工具。
命令行创建示例：
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project 目录结构精简
保留核心目录：pages（页面）、static（静态资源）、components（组件）、common（公共代码）。删除非必要文件如测试目录。
建议目录示例：
├── pages
├── static
├── components
├── common
│ ├── api.js
│ └── utils.js
└── main.js 全局样式配置
在App.vue中引入基础样式文件，定义全局CSS变量。示例：
/* common/global.css */
:root {
--primary-color: #007AFF;
}路由管理简化
利用uniapp原生路由，在pages.json中配置页面路径与样式。无需额外安装路由库。
示例配置：
{
"pages": [
{"path": "pages/index/index", "style": {"navigationBarTitleText": "首页"}}
]
}状态管理方案
小型项目可使用globalData或Vue的响应式API。在App.vue中定义：
export default {
globalData: {
userInfo: null
}
}网络请求封装
在common/api.js中统一封装uni.request。示例：
export const request = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: 'https://api.example.com' + options.url,
method: options.method || 'GET',
success: resolve,
fail: reject
})
})
}组件开发规范
创建可复用组件时遵循props单向数据流原则。示例按钮组件：
<template>
<button @click="$emit('click')">{{ text }}</button>
</template>
<script>
export default {
props: ['text']
}
</script>调试与发布
使用HBuilderX内置调试工具，通过菜单栏「运行」选择目标平台。发布时选择「发行」生成对应平台包。
性能优化建议
分包加载配置
在pages.json中配置分包，减少主包体积：
"subPackages": [
{
"root": "subpackage",
"pages": ["pages/sub/index"]
}
]图片压缩处理
使用在线工具或HBuilderX插件压缩静态图片，推荐格式为WebP。
按需引入组件
非必要组件使用easycom规则自动引入，在pages.json中配置：
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}
