uni-app 从零开发微信小程序新手教程

<view>你好</view>

<view>你好</view>

D:\tools\HBuilderX

文件 → 新建 → 项目

uni-app

todo-miniapp/
├─ pages/
│  └─ index/
│     └─ index.vue       首页
├─ static/               图片、字体等静态资源
├─ App.vue               应用级配置和全局样式
├─ main.js               Vue 应用入口
├─ manifest.json         应用名称、平台配置、AppID 等
├─ pages.json            页面路由、导航栏、TabBar 配置
├─ uni.scss              uni-app 全局样式变量
└─ unpackage/            运行或发行时生成的编译结果

工具 → 设置 → 运行配置 → 微信开发者工具路径

运行 → 运行到小程序模拟器 → 微信开发者工具

todo-miniapp/unpackage/dist/dev/mp-weixin

项目根目录\unpackage\dist\dev\mp-weixin

pages/index/index.vue

<template>
  <view class="page">
    <view class="header">
      <text class="title">我的待办</text>
      <text class="subtitle">把今天要做的事情记下来</text>
    </view>

    <view class="input-row">
      <input
        v-model="inputText"
        class="todo-input"
        placeholder="例如：学习 uni-app"
        confirm-type="done"
        @confirm="addTodo"
      />
      <button class="add-button" type="primary" size="mini" @tap="addTodo">
        添加
      </button>
    </view>

    <view class="summary">
      <text>共 {{ todos.length }} 项</text>
      <text>未完成 {{ unfinishedCount }} 项</text>
    </view>

    <view v-if="todos.length === 0" class="empty">
      <text class="empty-title">还没有待办事项</text>
      <text class="empty-text">在上面输入一件要做的事情吧</text>
    </view>

    <view v-else class="todo-list">
      <view v-for="todo in todos" :key="todo.id" class="todo-item">
        <view
          class="check"
          :class="{ checked: todo.done }"
          @tap="toggleTodo(todo)"
        >
          <text v-if="todo.done">✓</text>
        </view>

        <text class="todo-title" :class="{ done: todo.done }">
          {{ todo.title }}
        </text>

        <text class="delete-button" @tap="removeTodo(todo.id)">删除</text>
      </view>
    </view>

    <button
      v-if="todos.length > unfinishedCount"
      class="clear-button"
      size="mini"
      @tap="clearDone"
    >
      清除已完成
    </button>
  </view>
</template>

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

const inputText = ref('')

const todos = ref([
  {
    id: 1,
    title: '熟悉 uni-app 项目结构',
    done: true,
  },
  {
    id: 2,
    title: '把项目运行到微信开发者工具',
    done: false,
  },
])

const unfinishedCount = computed(() => {
  return todos.value.filter((todo) => !todo.done).length
})

function addTodo() {
  const title = inputText.value.trim()

  if (!title) {
    uni.showToast({
      title: '请输入待办事项',
      icon: 'none',
    })
    return
  }

  todos.value.unshift({
    id: Date.now(),
    title,
    done: false,
  })

  inputText.value = ''
}

function toggleTodo(todo) {
  todo.done = !todo.done
}

function removeTodo(id) {
  todos.value = todos.value.filter((todo) => todo.id !== id)
}

function clearDone() {
  todos.value = todos.value.filter((todo) => !todo.done)
}
</script>

<style>
.page {
  min-height: 100vh;
  padding: 40rpx 32rpx;
  box-sizing: border-box;
  background-color: #f6f7fb;
}

.header {
  margin-bottom: 32rpx;
}

.title {
  display: block;
  color: #1f2937;
  font-size: 56rpx;
  font-weight: 700;
}

.subtitle {
  display: block;
  margin-top: 12rpx;
  color: #9ca3af;
  font-size: 28rpx;
}

.input-row {
  display: flex;
  align-items: center;
}

.todo-input {
  flex: 1;
  height: 84rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  background-color: #ffffff;
  font-size: 30rpx;
}

.add-button {
  margin: 0;
  margin-left: 16rpx;
  padding: 0 28rpx;
  line-height: 84rpx;
  border-radius: 16rpx;
}

.summary {
  display: flex;
  justify-content: space-between;
  margin: 36rpx 4rpx 20rpx;
  color: #6b7280;
  font-size: 26rpx;
}

.todo-list {
  overflow: hidden;
  border-radius: 20rpx;
  background-color: #ffffff;
}

.todo-item {
  display: flex;
  align-items: center;
  min-height: 112rpx;
  padding: 0 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: 0;
}

.check {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44rpx;
  height: 44rpx;
  margin-right: 20rpx;
  border: 2rpx solid #cbd5e1;
  border-radius: 50%;
  color: #ffffff;
  font-size: 28rpx;
}

.check.checked {
  border-color: #4f46e5;
  background-color: #4f46e5;
}

.todo-title {
  flex: 1;
  color: #374151;
  font-size: 30rpx;
  word-break: break-all;
}

.todo-title.done {
  color: #9ca3af;
  text-decoration: line-through;
}

.delete-button {
  margin-left: 20rpx;
  color: #ef4444;
  font-size: 26rpx;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 140rpx 0;
}

.empty-title {
  color: #6b7280;
  font-size: 32rpx;
}

.empty-text {
  margin-top: 16rpx;
  color: #9ca3af;
  font-size: 26rpx;
}

.clear-button {
  margin-top: 32rpx;
  color: #6b7280;
  background-color: transparent;
  font-size: 26rpx;
}
</style>

const inputText = ref('')

const unfinishedCount = computed(() => {
  return todos.value.filter((todo) => !todo.done).length
})

<input v-model="inputText" />

<view v-if="todos.length === 0">还没有待办事项</view>

<view v-for="todo in todos" :key="todo.id">
  {{ todo.title }}
</view>

<view @tap="toggleTodo(todo)">点击完成</view>

<input @confirm="addTodo" />

import { computed, ref, watch } from 'vue'

const storageKey = 'todo-list'
const savedTodos = uni.getStorageSync(storageKey)

const todos = ref(
  Array.isArray(savedTodos)
    ? savedTodos
    : [
        {
          id: 1,
          title: '熟悉 uni-app 项目结构',
          done: true,
        },
        {
          id: 2,
          title: '把项目运行到微信开发者工具',
          done: false,
        },
      ],
)

watch(
  todos,
  (value) => {
    uni.setStorageSync(storageKey, value)
  },
  { deep: true },
)

新建页面

pages/about/about

pages/about/about.vue

<template>
  <view class="page">
    <text class="title">关于这个小程序</text>
    <text class="text">这是一个用 uni-app 编写的练习项目。</text>
  </view>
</template>

<style>
.page {
  display: flex;
  flex-direction: column;
  padding: 48rpx 32rpx;
}

.title {
  color: #1f2937;
  font-size: 40rpx;
  font-weight: 700;
}

.text {
  margin-top: 24rpx;
  color: #6b7280;
  font-size: 28rpx;
}
</style>

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "我的待办"
      }
    }
  ]
}

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "我的待办"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ]
}

<button size="mini" @tap="goToAbout">关于</button>

function goToAbout() {
  uni.navigateTo({
    url: '/pages/about/about',
  })
}

uni.navigateBack()

{
  "mp-weixin": {
    "appid": "wx1234567890abcdef",
    "setting": {
      "urlCheck": false
    }
  }
}

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "我的待办",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

{
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "待办小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f6f7fb"
  }
}

uni.request({
  url: 'https://api.example.com/todos',
  method: 'GET',
  success: (res) => {
    console.log('接口返回：', res.data)
  },
  fail: (error) => {
    console.error('请求失败：', error)
  },
})

async function loadTodos() {
  try {
    const response = await uni.request({
      url: 'https://api.example.com/todos',
      method: 'GET',
    })

    console.log(response.data)
  } catch (error) {
    console.error('请求失败：', error)
    uni.showToast({
      title: '网络请求失败',
      icon: 'none',
    })
  }
}

static/images/logo.png

<image class="logo" src="/static/images/logo.png" mode="aspectFit" />

.logo {
  width: 160rpx;
  height: 160rpx;
}

发行 → 小程序-微信

项目根目录\unpackage\dist\build\mp-weixin

# 创建 Vue 3 + JavaScript 项目
npx degit dcloudio/uni-preset-vue#vite todo-miniapp

# 进入项目
cd todo-miniapp

# 安装依赖
npm install

# 编译并监听微信小程序开发版本
npm run dev:mp-weixin

# 构建微信小程序正式版本
npm run build:mp-weixin

修改源码 → 保存 → HBuilderX 编译 → 微信开发者工具预览 → 看控制台报错