一、开发环境搭建
1. 安装HBuilderX
HBuilderX是开发uni-app的官方IDE，有两个版本：
- 标准版：适合Web开发
- App开发版：含有App打包功能，推荐使用
从HBuilderX官网下载并安装。
2. 安装必要的插件
在HBuilderX中，点击菜单栏的"工具" -> “插件安装”，安装以下插件：
- scss/sass编译
- vue.js
- uni-app编译
二、创建uni-app项目
1. 通过HBuilderX创建
- 点击HBuilderX菜单栏的"文件" -> “新建” -> “项目”
- 选择"uni-app"模板
- 填写项目名称，选择默认模板
- 选择Vue版本（Vue2或Vue3）
- 点击"创建"
2. 通过命令行创建（可选）
# 安装Vue CLI
npm install -g @vue/cli
# 安装uni-app模板
vue create -p dcloudio/uni-preset-vue my-project
# 选择模板（默认模板、TypeScript模板等）
三、项目目构架
├─pages // 页面文件夹
│ └─index
│ └─index.vue // index页面
├─static // 存放应用引用的本地静态资源
├─main.js // Vue初始化入口文件
├─App.vue // 应用配置，用来配置App全局样式
├─manifest.json // 配置应用名称、appid、logo等打包信息
├─pages.json // 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss // uni-app内置的常用样式变量
四、基本使用
1. pages.json配置
pages.json用于配置页面路由、导航栏、tabbar等：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png",
"text": "首页"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/tabs/my.png",
"selectedIconPath": "static/tabs/my-active.png",
"text": "我的"
}
]
}
}
2. 创建一个简单的页面
在pages/index/index.vue中：
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{title}}</text>
</view>
<button @click="counter++">计数器: {
{counter}}</button>
<view class="input-area">
<input v-model="inputValue" placeholder="请输入文字" />
<button @click="addItem">添加项目</button>
</view>
<view class="list-area">
<view class="list-item" v-for="(item, index) in items" :key="index">
{
{item}}
<text class="delete-btn" @click="deleteItem(index)">删除</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello uni-app',
counter: 0,
inputValue: '',
items: []
}
},
onLoad() {
console.log('页面加载完成');
},
methods: {
addItem() {
if (this.inputValue.trim()) {
this.items.push(this.inputValue);
this.inputValue = '';
} else {
uni.showToast({
title: '输入不能为空',
icon: 'none'
});
}
},
deleteItem(index) {
this.items.splice(index, 1);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-bottom: 50rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.input-area {
width: 100%;
margin-top: 30rpx;
}
.input-area input {
border: 1px solid #ccc;
padding: 10rpx;
margin-bottom: 10rpx;
border-radius: 5rpx;
}
.list-area {
width: 100%;
margin-top: 30rpx;
}
.list-item {
padding: 20rpx;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
}
.delete-btn {
color: red;
}
</style>
3. 数据请求示例
// 在methods中添加
getData() {
uni.request({
url: 'https://jsonplaceholder.typicode.com/posts',
method: 'GET',
success: (res) => {
console.log(res.data);
// 处理数据
},
fail: (err) => {
console.error(err);
uni.showToast({
title: '请求失败',
icon: 'none'
});
}
});
}
4. 导航跳转
// 跳转到新页面
uni.navigateTo({
url: '/pages/detail/detail?id=1'
});
// 接收参数（在目标页面的onLoad生命周期中）
onLoad(options) {
console.log('接收到的id参数:', options.id);
}
五、常用组件
uni-app支持多种内置组件：
- 视图容器：
<view>,<scroll-view>,<swiper> - 基础内容：
<text>,<rich-text>,<progress> - 表单组件：
<button>,<input>,<checkbox>,<radio> - 导航：
<navigator> - 媒体组件：
<image>,<video>,<audio>
六、条件编译
用于适配不同平台：
<!-- #ifdef MP-WEIXIN -->
<view>只在微信小程序显示</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>只在App中显示</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view>只在H5中显示</view>
<!-- #endif -->
七、使用uni-ui组件库
- 在HBuilderX中点击"插件市场" -> 搜索"uni-ui" -> 安装
- 在页面中使用：
<template>
<view>
<uni-rate v-model="rateValue" />
<uni-calendar :insert="false" @confirm="confirmDate" />
</view>
</template>
<script>
import { uniRate, uniCalendar } from '@dcloudio/uni-ui'
export default {
components: {
uniRate,
uniCalendar
},
data() {
return {
rateValue: 3
}
},
methods: {
confirmDate(e) {
console.log(e);
}
}
}
</script>
八、发布和部署
1. 打包成小程序
- 在HBuilderX中点击"发行" -> “小程序-微信”
- 在微信开发者工具中导入生成的项目
- 在微信开发者工具中上传代码并提交审核
2. 打包成App（Android/iOS）
- 在HBuilderX中点击"发行" -> “原生App-云打包”
- 配置证书和应用信息
- 等待云端打包完成后下载安装包
九、实用技巧
- 使用vuex进行状态管理：在项目根目录创建store文件夹
- 使用uni.storage进行本地存储
- 合理使用条件编译，处理平台差异
- 使用uniCloud可以快速构建云开发应用
- 页面传参方式：url传参、全局变量、本地存储