微信小程序开发入门：uni-app跨平台实战

微信小程序已成为移动互联网的重要入口，拥有超过10亿月活用户。使用uni-app框架，你可以用Vue语法开发小程序，一套代码同时编译到微信小程序、H5、APP等多个平台，极大提高开发效率。

一、为什么选择uni-app？

跨平台：一套代码，多端运行（微信小程序、H5、APP、支付宝小程序等）
Vue语法：如果你会Vue，就能直接上手uni-app
生态丰富：插件市场有大量免费组件和模板
性能优秀：编译后的代码接近原生性能

二、环境搭建

方式一：HBuilderX（推荐新手）

下载安装 HBuilderX（DCloud官方IDE）
新建项目 > 选择 uni-app 模板
选择"默认模板"或"Hello uni-app"示例
点击运行 > 运行到微信开发者工具

方式二：Vue CLI命令行

# 使用Vue CLI创建uni-app项目
npx degit dcloudio/uni-preset-vue#vite my-project
cd my-project
npm install

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

# 运行到H5
npm run dev:h5

三、项目结构

my-project/
├── pages/              # 页面目录
│   ├── index/          # 首页
│   │   └── index.vue
│   └── about/          # 关于页
│       └── about.vue
├── components/         # 公共组件
├── static/             # 静态资源
├── utils/              # 工具函数
├── api/                # 接口封装
├── App.vue             # 应用配置
├── main.js             # 入口文件
├── manifest.json       # 应用配置（AppID等）
├── pages.json          # 页面路由配置
└── uni.scss            # 全局样式变量

四、页面开发示例

列表页面

<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input v-model="keyword" placeholder="搜索..." 
             @confirm="handleSearch" />
    </view>
    
    <!-- 列表 -->
    <scroll-view scroll-y class="list-wrap" 
                 @scrolltolower="loadMore">
      <view v-for="item in list" :key="item.id" 
            class="list-item" @click="goDetail(item.id)">
        <image :src="item.cover" mode="aspectFill" />
        <view class="info">
          <text class="title">{{ item.title }}</text>
          <text class="desc">{{ item.description }}</text>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view class="load-status">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMore">没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([])
const keyword = ref('')
const page = ref(1)
const loading = ref(false)
const noMore = ref(false)

async function fetchList() {
  loading.value = true
  try {
    const res = await uni.request({
      url: '/api/list',
      data: { page: page.value, keyword: keyword.value }
    })
    if (res.data.length === 0) {
      noMore.value = true
    } else {
      list.value.push(...res.data)
    }
  } finally {
    loading.value = false
  }
}

function loadMore() {
  if (!loading.value && !noMore.value) {
    page.value++
    fetchList()
  }
}

function goDetail(id) {
  uni.navigateTo({ url: `/pages/detail/detail?id=${id}` })
}

onMounted(() => fetchList())
</script>

五、常用API封装

// utils/request.js - 网络请求封装
const BASE_URL = 'https://your-api.com'

export function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${uni.getStorageSync('token')}`,
        ...options.header
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else if (res.statusCode === 401) {
          uni.navigateTo({ url: '/pages/login/login' })
          reject(new Error('未授权'))
        } else {
          reject(res.data)
        }
      },
      fail: (err) => {
        uni.showToast({ title: '网络错误', icon: 'none' })
        reject(err)
      }
    })
  })
}

六、发布上线

在微信公众平台注册小程序账号
获取AppID，填入 manifest.json
在HBuilderX中点击"发行" > "小程序-微信"
在微信开发者工具中上传代码
登录微信公众平台提交审核，审核通过后即可发布

七、微信登录实战

// 前端：获取登录凭证
async function wxLogin() {
  // 1. 调用微信登录获取code
  const loginRes = await uni.login({ provider: 'weixin' })
  const code = loginRes.code

  // 2. 把code发给后端换取自定义token
  const res = await request({
    url: '/api/wx-login',
    method: 'POST',
    data: { code }
  })

  // 3. 保存token到本地
  uni.setStorageSync('token', res.token)
  uni.setStorageSync('userInfo', res.userInfo)
}

后端流程：接收 code → 调用微信接口换取 openid/session_key → 查找或创建用户 → 生成 JWT Token 返回。

八、小程序性能优化

图片懒加载：列表页图片设置 lazy-load 属性，滑到可视区才加载
分包加载：把不常用页面放在子包里，减少主包体积（主包不能超过2M）
减少 setData：只更新变动的字段，不要每次都传整个对象
使用 CDN：图片、视频等大文件放CDN，不要打包到小程序里

// pages.json 分包配置示例
{
  "pages": [
    { "path": "pages/index/index" },
    { "path": "pages/login/login" }
  ],
  "subPackages": [
    {
      "root": "pagesA",
      "pages": [
        { "path": "detail/detail" },
        { "path": "profile/profile" }
      ]
    }
  ]
}

九、常见问题

“不在以下 request 合法域名列表中”：在微信公众平台 > 开发管理 > 开发设置中添加服务器域名
“页面栈超过10层”：用 uni.redirectTo 代替 uni.navigateTo，避免无限叠加
“真机样式异常”：用 rpx 单位代替 px，并用真机调试检查

总结：uni-app 的优势是一套代码多端运行，但要注意各平台的差异性。开发时多用真机调试，不要只依赖模拟器。