uni-app 跨平台开发框架技术文档

uni-app 跨平台开发框架技术文档

【免费下载链接】uni-app A cross-platform framework using Vue.js 项目地址: https://gitcode.com/dcloud/uni-app

1. 安装指南

1.1 环境准备

• Node.js 环境（建议使用 LTS 版本）
• 开发工具选择：
  • HBuilderX（官方推荐IDE）
  • VS Code 或 WebStorm（需安装uni-app插件）

1.2 通过vue-cli安装

# 全局安装vue-cli
npm install -g @vue/cli

# 创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-project

# 进入项目目录
cd my-project

# 运行到微信小程序
npm run dev:mp-weixin

1.3 通过HBuilderX安装

1. 下载并安装HBuilderX（官网提供Windows/Mac版本）
2. 新建项目 → 选择uni-app模板
3. 选择默认模板或官方示例模板

2. 项目使用说明

2.1 目录结构

├── pages               // 页面目录
│   └── index.vue       // 首页
├── static              // 静态资源
├── components          // 组件目录
├── manifest.json       // 应用配置
├── pages.json          // 页面路由配置
└── App.vue             // 应用入口

2.2 开发规范

• 使用Vue单文件组件(.vue)开发
• 页面路由需在pages.json中注册
• 组件命名采用kebab-case风格
• 支持条件编译（通过#ifdef MP-WEIXIN等指令）

2.3 运行与调试

# 微信小程序
npm run dev:mp-weixin

# H5
npm run dev:h5

# App
npm run dev:app-plus

3. API使用文档

3.1 基础API

// 页面跳转
uni.navigateTo({
  url: '/pages/detail/detail'
});

// 网络请求
uni.request({
  url: 'https://example.com/api',
  success: (res) => {
    console.log(res.data);
  }
});

// 本地存储
uni.setStorageSync('key', 'value');
const data = uni.getStorageSync('key');

3.2 平台扩展API

// 微信小程序特有API
#ifdef MP-WEIXIN
wx.login({
  success: res => {
    console.log(res.code);
  }
});
#endif

// App端特有API
#ifdef APP-PLUS
plus.device.getInfo({
  success: function(e) {
    console.log(e);
  }
});
#endif

3.3 生命周期

// 页面生命周期
export default {
  onLoad() {},     // 页面加载
  onShow() {},     // 页面显示
  onReady() {},    // 页面初次渲染完成
  onHide() {},     // 页面隐藏
  onUnload() {}    // 页面卸载
}

4. 项目安装方式

4.1 通过npm安装（推荐）

# 创建项目（使用默认模板）
npx degit dcloudio/uni-preset-vue#vite my-project

# 安装依赖
cd my-project
npm install

# 启动开发服务器
npm run dev

4.2 通过HBuilderX模板安装

1. 打开HBuilderX → 文件 → 新建 → 项目
2. 选择uni-app分类下的模板
3. 填写项目名称和路径后创建

4.3 通过Git克隆

# 克隆官方示例项目
git clone https://github.com/dcloudio/uni-app.git

# 进入示例目录
cd uni-app/examples

# 安装依赖
npm install

4.4 注意事项

• 开发微信小程序需配置小程序开发者工具路径
• App开发需配置Android/iOS开发环境
• 首次运行建议从Hello uni-app示例项目开始

【免费下载链接】uni-app A cross-platform framework using Vue.js 项目地址: https://gitcode.com/dcloud/uni-app