uniapp怎么使用
uniapp 的基本使用
安装开发工具
推荐使用 HBuilderX 作为开发工具，它是官方提供的 IDE，内置了 uniapp 的开发环境。下载地址：HBuilderX 官网。
创建项目
在 HBuilderX 中选择「文件」→「新建」→「项目」，选择 uniapp 模板，填写项目名称和路径，选择合适的模板（如默认模板、uni-ui 项目等）。
项目结构
pages：存放页面文件，每个页面由.vue文件、.json配置和样式文件组成。static：存放静态资源，如图片、字体等。App.vue：应用入口文件，可设置全局样式和生命周期。main.js：应用的主逻辑入口，注册全局组件或插件。manifest.json：应用配置，如 AppID、启动图、权限等。pages.json：路由和页面样式配置。
编写页面
页面基本结构
每个页面通常是一个 .vue 文件，包含模板、脚本和样式：
<template>
<view>
<text>Hello uniapp!</text>
</view>
</template>
<script>
export default {
data() {
return {
message: "Welcome to uniapp"
};
},
methods: {
showToast() {
uni.showToast({
title: "提示信息",
icon: "none"
});
}
}
};
</script>
<style>
view {
padding: 20px;
}
</style>路由跳转
在 pages.json 中配置页面路径，使用 uni.navigateTo 或 uni.redirectTo 进行跳转：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
}
]
}// 跳转到详情页
uni.navigateTo({
url: "/pages/detail/detail"
});跨平台适配
条件编译
通过注释实现不同平台的代码适配：
// #ifdef H5
console.log("仅在 H5 平台生效");
// #endif
// #ifdef MP-WEIXIN
console.log("仅在微信小程序生效");
// #endifUI 组件库
推荐使用 uni-ui，它提供了一套跨平台的 UI 组件：
<template>
<uni-card title="卡片标题" extra="额外信息">
卡片内容
</uni-card>
</template>
<script>
import uniCard from "@/components/uni-card/uni-card.vue";
export default {
components: { uniCard }
};
</script>调试与发布
运行到浏览器或模拟器
在 HBuilderX 中点击「运行」→「运行到浏览器」或「运行到手机或模拟器」。
打包发布
- H5：选择「发行」→「网站-H5」。
- 小程序：选择「发行」→「小程序-微信」，生成代码后通过微信开发者工具上传。
- App：选择「发行」→「原生 App-云打包」或「本地打包」。
常用 API
网络请求
uni.request({
url: "https://example.com/api",
method: "GET",
success: (res) => {
console.log(res.data);
}
});本地存储
// 存储数据
uni.setStorageSync("key", "value");
// 读取数据
const value = uni.getStorageSync("key");获取设备信息
uni.getSystemInfo({
success: (res) => {
console.log(res.platform); // 平台信息
}
});
