uni app从零开发一个子页面

基础软件

https://hx.dcloud.net.cn/Tutorial/install/windows

https://nodejs.org/zh-cn/download

https://git-scm.com/install/windows

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned 

node --version                          检查 Node.js

corepack --version
npm install --global corepack@latest
corepack enable pnpm
corepack prepare pnpm@10.20.0 --activate
pnpm --version

    pnpm --version                     检查 pnpm
    git --version                                检查 Git
    pnpm view create-unibest version            检查脚手架版本

创建父目录
     New-Item -ItemType Directory -Force -Path 'c:\MESTOOLS从零跟练'
     Set-Location 'c:\MESTOOLS从零跟练'

使用固定版本创建项目
     pnpm create unibest@4.0.16 mestools-from-zero -p "h5,app" -u none

进入项目
     Set-Location 'c:\MESTOOLS从零跟练\mestools-from-zero'

pnpm install

    pnpm dev:h5 --host 127.0.0.1   启动 H5
     http://127.0.0.1:9000/  打开浏览器

此时看到的是 unibest 默认页面。只要页面能打开且终端没有编译错误，本阶段就通过。
   Ctrl+C  停止开发服务

新建页面 → 编写交互 → 注册路由 → 添加首页入口 → H5 验证

在 src/pages 下新建目录：

    src/pages/message

在该目录中新建文件：

    src/pages/message/index.vue

<script lang="ts" setup>
import { ref } from 'vue'

definePage({
  style: {
    navigationBarTitleText: '消息弹窗',
  },
})

const message = ref('')
const number = ref('')

// 处理“显示消息”按钮点击事件。
function handleShowMessage() {
  if (!message.value.trim()) {
    uni.showToast({
      title: '请输入内容',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '消息',
    content: message.value,
    showCancel: false,
  })
}

// 处理“显示数字”按钮点击事件。
function handleShowNumber() {
  if (!number.value.trim()) {
    uni.showToast({
      title: '请输入数字',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '数字',
    content: number.value,
    showCancel: false,
  })
}
</script>

<template>
  <view class="min-h-screen bg-[#F6F8FB] px-5 pt-8">
    <input
      v-model="message"
      class="box-border h-12 w-full rounded-3 bg-white px-4 text-4"
      placeholder="请输入要显示的内容"
    >
    <button
      class="mt-5 bg-[#0789BD] text-white"
      type="primary"
      @click="handleShowMessage"
    >
      显示消息
    </button>
    <input
      :value="number"
      data-testid="number-input"
      class="mt-8 box-border h-12 w-full rounded-3 bg-white px-4 text-4"
      type="number"
      placeholder="请输入数字"
      @input="number = $event.detail.value"
    >
    <button
      data-testid="show-number"
      class="mt-5 bg-[#0789BD] text-white"
      type="primary"
      @click="handleShowNumber"
    >
      显示数字
    </button>
  </view>
</template>

在 src/pages 下新建目录：

    src/pages/text-count

在该目录中新建文件：

    src/pages/text-count/index.vue

这是新文件，从第 1 行开始输入以下完整代码：

<script lang="ts" setup>
     import { ref } from 'vue'

    definePage({
       style: {
         navigationBarTitleText: '字数统计',
       },
     })

    const content = ref('')

    // 统计输入内容的字符数。
     function handleCountText() {
       if (!content.value.trim()) {
         uni.showToast({
           title: '请输入内容',
           icon: 'none',
         })
         return
       }

      uni.showModal({
         title: '统计结果',
         content: '共 ' + content.value.length + ' 个字符',
         showCancel: false,
       })
     }
     </script>

    <template>
       <view class="min-h-screen bg-[#F6F8FB] px-5 pt-8">
         <textarea
           v-model="content"
           class="box-border h-40 w-full rounded-3 bg-white p-4 text-4"
           placeholder="请输入需要统计的内容"
         />
         <button
           class="mt-5 bg-[#0789BD] text-white"
           type="primary"
           @click="handleCountText"
         >
           统计字数
         </button>

<input
   :value="number"
   data-testid="number-input"
   class="mt-8 box-border h-12 w-full rounded-3 bg-white px-4 text-4"
   type="number"
   placeholder="请输入数字"               
 >



       </view>
     </template>

整文件替换：

    src/pages/index/index.vue

<script lang="ts" setup>
defineOptions({
  name: 'Home',
})

definePage({
  type: 'home',
  style: {
    navigationBarTitleText: 'MESTOOLS',
    navigationBarBackgroundColor: '#0789BD',
    navigationBarTextStyle: 'white',
  },
})

// 打开消息弹窗功能页。
function openMessagePage() {
  uni.navigateTo({
    url: '/pages/message/index',
  })
}
// 打开字数统计功能页。
function openTextCountPage() {
      uni.navigateTo({
        url: '/pages/text-count/index',
      })
    }
</script>

<template>
  <view class="min-h-screen bg-white px-3 pt-6">
    <view class="grid grid-cols-4 gap-x-2 gap-y-6">
      <button
        data-testid="message-entry"
        class="feature-entry flex flex-col items-center text-center"
        @click="openMessagePage"
      >
        <view class="h-12 w-12 flex items-center justify-center rounded-3 bg-[#4F8CFF]">
          <text class="i-carbon-chat text-7 text-white" />
        </view>
        <text class="mt-2 text-3 text-[#263238]">
          消息弹窗
        </text>
      </button>
      
    <button
      data-testid="text-count-entry"
      class="feature-entry flex flex-col items-center text-center"
      @click="openTextCountPage"
    >
      <view class="h-12 w-12 flex items-center justify-center rounded-3 bg-[#38A169]">
        <text class="i-carbon-character-whole-number text-7 text-white" />
      </view>
      <text class="mt-2 text-3 text-[#263238]">
        字数统计
      </text>
    </button>
    </view>
  </view>
</template>

<style scoped>
.feature-entry {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: normal;
}

.feature-entry::after {
  border: 0;
}
</style>

cd D:\unibest学习研究
pnpm install
pnpm dev:h5 --host 127.0.0.1

浏览器打开  http://127.0.0.1:9000/#/pages/text-count/index

pnpm build:app

.....................................

DONE  Build complete.
运行方式：打开 HBuilderX, 导入 dist\build\app 运行。

HBuilderX 操作：1.打开或导入 c:\MESTOOLS从零跟练'\dist\build\app          2.选中项目 app      3.选择“发行 → App-Android/iOS-云打包”