uniapp编辑教程
uniapp 基础环境搭建
确保已安装最新版 HBuilderX，这是官方推荐的开发工具，支持 uniapp 项目创建和调试。从官网下载并安装后，启动 HBuilderX。
在 HBuilderX 中新建 uniapp 项目时，选择模板类型（如默认模板、uni-ui 项目等），填写项目名称和存储路径。项目创建完成后，会自动生成基础目录结构，包括 pages、static 等文件夹。
页面创建与路由配置
在 pages 文件夹下新建页面文件夹（如 home），右键选择“新建页面”会自动生成 .vue 文件和相关配置。页面路由通过 pages.json 管理，在此文件中添加页面路径和窗口样式：
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
}
}
]
}组件与模板语法
使用 Vue 的单文件组件（.vue）开发页面，模板部分支持 Vue 指令和 uniapp 扩展的组件。例如，使用 view 替代 HTML 的 div，text 替代 span：
<template>
<view class="container">
<text>{{ message }}</text>
<button @click="changeMessage">点击修改</button>
</view>
</template>脚本部分与 Vue 一致，支持 data、methods 等选项：
<script>
export default {
data() {
return {
message: 'Hello uniapp'
}
},
methods: {
changeMessage() {
this.message = '内容已更新';
}
}
}
</script>样式编写与适配
样式部分支持 CSS 预处理器（如 SCSS），通过 <style> 标签编写。使用 rpx 单位实现自适应布局，750rpx 等于屏幕宽度：
<style>
.container {
padding: 20rpx;
}
button {
margin-top: 30rpx;
}
</style>跨端 API 调用
uniapp 提供统一的 API 跨平台调用，例如网络请求 uni.request：
uni.request({
url: 'https://api.example.com/data',
success: (res) => {
console.log(res.data);
}
});设备相关 API 如获取系统信息：
uni.getSystemInfo({
success: (res) => {
console.log(res.platform);
}
});发布与打包
在 HBuilderX 中选择“发行”菜单，根据目标平台（小程序、App、H5）生成对应包。小程序需填写 AppID；App 打包需配置证书；H5 可直接生成静态文件部署到服务器。
调试时使用内置模拟器或真机调试功能。通过数据线连接手机，开启 USB 调试模式，HBuilderX 会自动检测设备并安装调试基座。
