uniapp 用法
uniapp 基本用法
开发环境搭建
安装HBuilderX（官方IDE）或配置VSCode插件，确保Node.js环境已安装。通过HBuilderX创建项目时选择uniapp模板，支持vue2/vue3版本。
项目结构
pages：页面目录，需在pages.json中配置路由static：静态资源components：可复用组件manifest.json：应用配置（如AppID、权限）uni.scss：全局样式变量
页面开发规范
创建页面
在pages目录下新建文件夹，包含.vue文件。例如pages/index/index.vue，需同步在pages.json的pages数组中注册路径：
{
"pages": [
{"path": "pages/index/index", "style": { "navigationBarTitleText": "首页" }}
]
}组件使用
内置组件如<view>, <text>, <button>跨端兼容。通过uni.前缀调用API，例如uni.request发起网络请求。自定义组件需在components目录创建，通过import引入。
跨端适配技巧
条件编译
使用// #ifdef H5、// #ifdef MP-WEIXIN等注释实现多端差异化代码：
// #ifdef H5
console.log('仅H5环境执行');
// #endif样式适配
通过uni.upx2px()转换rpx单位，或在uni.scss定义全局变量。使用Flex布局兼容不同屏幕尺寸。
常用API示例
网络请求
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => { console.log(res.data); }
});路由跳转
uni.navigateTo({ url: '/pages/detail/detail?id=1' });数据缓存
uni.setStorageSync('key', 'value');
const data = uni.getStorageSync('key');调试与发布
调试工具
- H5：浏览器开发者工具
- 微信小程序：微信开发者工具
- App：真机调试需连接设备
打包发布
- 通过HBuilderX生成发行包，选择对应平台（如App需云打包或离线打包）。
- 小程序需配置
manifest.json中的AppID并上传代码至后台。
性能优化建议
- 使用
v-for时添加:key - 避免频繁的
setData操作 - 分包加载减少首屏体积（在
pages.json中配置subPackages） - 图片资源压缩并使用CDN
插件生态
- 通过uni-app插件市场安装第三方组件（如uView UI）
- 原生插件需按平台规范开发并集成
以上内容覆盖了uniapp的核心用法，实际开发时可结合官方文档进一步扩展功能。
