uni app开发一个子页面

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




在 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>
       </view>
     </template>

保存文件。

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.打开或导入 D:\unibest学习研究\dist\build\app          2.选中项目 app      3.选择“发行 → App-Android/iOS-云打包”