uniapp快速学习法
核心概念速记
- 跨平台特性：基于Vue.js语法，一套代码可编译至iOS、Android、H5及小程序（微信/支付宝等）。
- 组件与API：使用
<view>替代<div>，调用uni.request等统一API，兼容多端差异。
- 条件编译：通过
#ifdef APP-PLUS等注释实现平台专属代码，解决兼容性问题。
开发环境搭建
- 安装HBuilderX（官方IDE），内置uni-app模板和调试工具。
- 创建项目选择“uni-app”模板，或通过CLI命令：
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project
基础模板解析
<template>
<view class="container">
<text>{{message}}</text>
<button @click="changeText">点击修改</button>
</view>
</template>
<script>
export default {
data() {
return { message: "Hello UniApp" }
},
methods: {
changeText() { this.message = "Text Changed!" }
}
}
</script>
<style>
.container { padding: 20px; }
</style>
多端适配技巧
- 样式适配：使用
rpx单位（1rpx≈0.5px），自动根据屏幕宽度缩放。
- 图片路径：推荐
/static目录存放资源，绝对路径如/static/logo.png。
- 导航差异：小程序用
uni.navigateTo，H5可用window.location，通过条件编译区分。
调试与发布
- 真机调试：HBuilderX连接手机，或使用“运行到内置浏览器”。
- 打包发布：云打包（免费）或本地生成证书（iOS需Apple开发者账号）。
- 性能优化：避免大图加载，使用
v-for时添加:key，减少setData频率。
进阶资源推荐
- 官方文档：uniapp.dcloud.io
- 示例项目：GitHub搜索“uni-app模板”获取完整案例。
- 社区问答：DCloud论坛或Stack Overflow标签
uni-app。
