字典App（uniapp开发）

最新推荐文章于 2025-09-01 14:54:15 发布

原创

最新推荐文章于 2025-09-01 14:54:15 发布 · 796 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #移动开发 #App #Gpt #前端 #js #api

我踏马直接放代码

目录

1、html代码（本示例代码仅适用于uniapp开发）

2、JavaScript代码

3、Css样式代码

4、运行效果图：（额....忽略下面区域做的ChatGpt小应用）（示例字：程序员的程）

1、html代码（本示例代码仅适用于uniapp开发）

<template>
  <view >
    <!-- 第一个机器人，字典 -->
    <view class="first">
      <view class="titleone">
        新华字典
      </view>
      <!-- 输入框 -->
      <view class="searchbox">
        <input type="text" placeholder="请输入要查询的字" v-model="inputText">
        <button @click="dictionary">查询</button>
      </view>
      <!-- 查询结果  基本信息 -->
      <view class="topbox">
        <ul>
          <li>汉字：{
  
  {hanzi}}</li>
          <li>拼音：{
  
  {pinyin}}</li>
        </ul>
        <ul>
          <li>笔画：{
  
  {bihua}}</li>
          <li>部首：{
  
  {bushou}}</li>
        </ul>
      </view>
      <!-- 查询结果  详细信息 -->
      <view class="bottombox">
        <view style="border: 1px solid seagreen;border-radius: 10px;padding:8px;margin: 5px 0;">
          【基本解释】：{
  
  {basic}}
        </view>
        <view style="border: 1px solid seagreen;border-radius: 10px;padding: