uni-app微信小程序开发入门教程

1、准备工作

了解 uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。通过编写 Vue 代码，uni-app 可以生成适配多个终端（如 iOS、Android、Web 以及各种小程序）的应用，实现一次开发、多端覆盖。

访问 uni-app 官网：https://uniapp.dcloud.net.cn/ 获取更多信息。

准备开发工具

下载开发工具

1. HBuilder X：uni-app 官方推荐的开发工具，对框架支持度较高。访问官网 https://www.dcloud.io/hbuilderx.html 下载免安装版本，解压后即可使用。

2. 微信开发者工具：用于将 HBuilder X 中的代码构建成微信小程序项目并运行。访问官网 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 下载稳定版。

安装与配置

安装完成后，打开微信开发者工具，使用微信扫码登录。进入后，选择“测试号”以获取 AppID，其他设置可暂不修改。

在微信开发者工具中配置 AppID 和启动地址：

• 在设置中填入获取的 AppID，系统会自动保存。
• 配置启动地址为本地开发服务器地址，确保 HBuilder X 与微信开发者工具能正常连接。

使用 HBuilder X

首次使用 HBuilder X 时，建议安装内置终端插件。如果安装失败，可查看日志信息并根据提示解决问题，例如检查网络或权限设置。安装成功后，可以在工具中打开命令行窗口。

2、初始化一个 demo

创建项目

有两种方式创建 uni-app 项目：

1. 通过 HBuilder X 可视化界面：选择新建项目，然后选择 uni-app 模板，填写项目名称即可。

2. 通过 vue-cli 命令行：

   • 首先确保已全局安装 vue-cli：npm install -g @vue/cli
   • 使用命令创建项目：npx degit dcloudio/uni-preset-vue#vite-ts 项目名

创建成功后，打开项目所在文件夹。

安装依赖

在项目根目录下运行 npm i 安装 node_modules 依赖，安装完成后会自动生成依赖文件夹。

运行初始项目

在 HBuilder X 中点击运行按钮，选择微信小程序作为运行平台。如果出现错误，可能需要打开服务端口。配置成功后，HBuilder X 会自动启动微信开发者工具并加载项目。

在微信开发者工具中，可以看到项目的运行界面，表示环境搭建完成。

3、完善项目

新建页面

在 HBuilder X 中，可以通过右键菜单新建页面文件，系统会自动在 pages.json 中注册页面路由。

安装 Pinia

如果项目需要使用 Pinia 进行状态管理，直接导入可能会报错。解决步骤：

1. 升级 Vue 到指定版本：npm i vue@3.4.31
2. 安装 Pinia：npm i pinia

实现页面跳转

uni-app 提供两种页面跳转方式：

1. 使用 navigator 组件：在模板中添加 <navigator> 标签，通过 url 属性指定跳转路径。
2. 使用 navigateTo 方法：在 JavaScript 中调用 uni.navigateTo 方法，但注意只能在 tabBar 页面之间跳转。

详细用法参考 uni-app 官方路由文档。

登录功能

uni-app 支持微信登录插件，调用 uni.login 方法获取用户 code，然后通过服务器换取 openid 和 session_key。注意：小程序密钥不能直接在前端使用，应通过后端服务器中转。

注册微信小程序

访问微信公众平台 https://mp.weixin.qq.com/ 注册小程序，获取 AppID 和 AppSecret。在 uni-app 项目的 manifest.json 中配置这些信息。

资源推荐

可以使用阿里图标库 https://www.iconfont.cn/ 获取免费图标资源，丰富界面设计。

注意事项

• 在 pages.json 中配置 tabBar 时，至少需要两个项目。
• uni-app 的 pages.json 对应微信小程序的 app.json，需确保配置一致。
• 生命周期函数 onLoad 和 onMounted 的执行顺序：onLoad 先触发，然后 onMounted。
• 用户 openid 是唯一标识，应存储在 Pinia 中供全局使用。

4、新加内容

处理常见错误

在开发过程中，可能会遇到类似 “[plugin:vite:vue] cannot contain ES module exports” 的错误。解决方案是在 <script setup> 中避免使用 ES 模块导出，可参考 Vue RFC 更新。

表单示例

以下是一个简单的表单组件代码，用于收集用户信息：

<template>
  <view>
    <form @submit="formSubmit" @reset="formReset">
      <view class="uni-form-item uni-column">
        <view class="title">姓名：</view>
        <input class="uni-input" name="input" placeholder="请输入姓名" />
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">性别</view>
        <radio-group name="radio">
          <label>
            <radio value="radio1" /><text>男</text>
          </label>
          <label>
            <radio value="radio2" /><text>女</text>
          </label>
        </radio-group>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">爱好</view>
        <checkbox-group name="checkbox">
          <label>
            <checkbox value="checkbox1" /><text>唱歌</text>
          </label>
          <label>
            <checkbox value="checkbox2" /><text>运动</text>
          </label>
        </checkbox-group>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">年龄</view>
        <slider value="50" name="slider" show-value></slider>
      </view>
      <view class="uni-btn-v">
        <button form-type="submit">提交</button>
        <button type="default" form-type="reset">重置</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    formSubmit: function(e) {
      console.log('表单数据：' + JSON.stringify(e.detail.value));
      uni.showModal({
        content: '表单数据内容：' + JSON.stringify(e.detail.value),
        showCancel: false
      });
    },
    formReset: function(e) {
      console.log('清空数据');
    }
  }
}
</script>

<style>
.uni-form-item .title {
  padding: 20rpx 0;
}
</style>

数据流向

表单提交时，数据通过 formSubmit 方法收集，并可在控制台查看或通过弹窗显示。如需将数据发送到服务器，可在该方法中添加 HTTP 请求逻辑，例如使用 fetch 或 axios。