uniapp前端页面
uniapp前端页面开发基础
uniapp是一个使用Vue.js开发跨平台应用的前端框架，支持编译到iOS、Android、H5及小程序等多个平台。以下是uniapp前端页面开发的核心要点：
页面结构
每个页面由三个文件组成：.vue（Vue组件）、.js（逻辑）、.json（配置）。典型结构如下：
<template>
<view class="container">
<text>{{message}}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello uniapp'
}
}
}
</script>
<style>
.container {
padding: 20px;
}
</style>路由与导航
通过pages.json配置路由，使用API进行导航跳转：
// pages.json
{
"pages": [
{"path": "pages/index/index", "style": {}},
{"path": "pages/detail/detail", "style": {}}
]
}// 页面跳转
uni.navigateTo({
url: '/pages/detail/detail'
});组件与API使用
基础组件
uniapp提供跨平台组件如<view>、<text>、<button>等，替代HTML标签：
<template>
<button @click="handleClick">提交</button>
</template>扩展组件
通过uni-ui或第三方组件库扩展功能：
<uni-badge text="123"></uni-badge>平台API调用
使用uni.前缀调用设备功能：
uni.getLocation({
type: 'wgs84',
success: res => console.log(res)
});样式与适配方案
响应式单位
使用upx或rpx实现自适应布局：
.view {
width: 750rpx; /* 满屏宽度 */
height: 200rpx;
}条件编译 通过注释实现多平台差异化代码：
// #ifdef H5
console.log('仅在H5平台执行');
// #endif性能优化技巧
图片处理
使用压缩工具减小图片体积，推荐格式为webp。通过image组件懒加载：
<image lazy-load src="/static/logo.png"></image>数据缓存
合理使用uni.setStorage和uni.getStorage减少网络请求：
uni.setStorageSync('key', 'value');
const data = uni.getStorageSync('key');分包加载
在pages.json中配置分包，减少主包体积：
{
"subPackages": [
{
"root": "packageA",
"pages": []
}
]
}调试与发布
真机调试
通过HBuilderX连接设备，使用console.log输出日志，或调用uni.showToast显示调试信息。
多平台编译 在HBuilderX中选择发行菜单，可一键打包为各平台应用。需注意不同平台的 manifest 配置差异。
注意事项
- 避免使用DOM操作，改用数据驱动
- 小程序平台有路径深度限制
- 部分CSS属性需要加前缀（如
-webkit-）
