uniapp教程

uniapp 基础介绍

uniapp 是一个基于 Vue.js 的跨平台开发框架，支持一次开发，多端发布（如微信小程序、H5、App、快应用等）。其核心优势在于代码复用率高，学习成本低，适合快速构建多端应用。

环境搭建

1. 安装 HBuilderX
   官方推荐使用 HBuilderX 作为开发工具，下载地址：HBuilderX 官网。选择适合操作系统的版本安装。
2. 创建项目
   打开 HBuilderX，选择「新建项目」→「uni-app」，填写项目名称和模板（默认模板或官方示例）。

项目结构

• pages：存放页面文件，每个页面为一个文件夹，包含 .vue、.js、.json 文件。
• static：存放静态资源（如图片）。
• App.vue：应用入口文件。
• main.js：全局配置和初始化文件。

基础语法与 Vue.js 对比

uniapp 的语法与 Vue.js 高度一致，但扩展了多端能力：

1. 模板语法

   <template>
     <view class="container">
       <text>{{ message }}</text>
     </view>
   </template>

2. 生命周期
   支持 Vue 生命周期（如 created、mounted），同时新增应用级生命周期（如 onLaunch）。

跨端适配

1. 条件编译
   通过注释语法实现多端代码差异化：

   // #ifdef H5
   console.log('仅在 H5 平台生效');
   // #endif

2. API 调用
   使用 uni 对象调用跨端 API，如 uni.request、uni.showToast。

常用组件

uniapp 提供了一系列跨端组件：

• <view>：视图容器，类似 HTML 的 <div>。
• <text>：文本组件。
• <button>：按钮，支持开放能力（如微信小程序授权）。

路由与导航

1. 页面跳转

   uni.navigateTo({
     url: '/pages/detail/detail'
   });

2. 路由配置
   在 pages.json 中配置页面路径和样式：

   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": { "navigationBarTitleText": "首页" }
       }
     ]
   }

数据请求

使用 uni.request 发起网络请求：

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

发布与打包

1. H5 发布
   在 HBuilderX 中选择「发行」→「网站-H5」。
2. 小程序发布
   选择「发行」→「微信小程序」，生成代码后通过微信开发者工具上传。

学习资源推荐

1. 官方文档：uniapp 官网
2. 社区：DCloud 论坛、GitHub 开源项目。
3. 实战课程：慕课网、B 站等平台的 uniapp 教程。

通过以上步骤，可以快速入门 uniapp 开发并实现多端发布。