字典App（uniapp开发）

我踏马直接放代码

目录

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:8px;margin: 5px 0;">
          【详细解释】：{{detail}}
        </view>
      </view>
      <!-- 可组成的词 -->
      <view class="zuci">
        <span>【组词】：{{words}}</span>
      </view>
    </view>
  </view>
</template>

2、JavaScript代码 

<script>
  export default {
    data() {
      return {
        // 字典参数
        inputText:'',
        hanzi:'',
        pinyin:'',
        bihua:'',
        bushou:'',
        basic:'',
        detail:'',
        words:'',
      }
    },
    methods: {
      // 字典方法
      dictionary(){
        console.log(this.inputText),
        uni.request({
          url:'https://api.oioweb.cn/api/txt/dict',
          method:'GET',
          data:{
            text:this.inputText,
          },
          success:(res)=>{
            console.log(res.data);
            console.log(res.data.code);
            if(res.data.code == 200){
              let info = res.data.result;
              this.hanzi = info.hanzi;
              this.pinyin = info.pinyin;
              this.bihua = info.bihua;
              this.bushou = info.bushou;
              this.basic = info.basic_explain;
              this.detail = info.detail_explain;
              this.words = info.words
            }
            else if(res.data.code == 400){
              uni.showToast({
                title:'未查询到该汉字，请检查是否输入正确！',
                icon:'error'
              })
            }
            else if(res.data.code == 500){
              uni.showToast({
                title:'请输入后再点击查询！',
                icon:'error'
              }),
              this.hanzi = '';
              this.pinyin = '';
              this.bihua = '';
              this.bushou = '';
              this.basic = '';
              this.detail = '';
              this.words = ''
            }
          }
        })
      },
      
    }
  }
</script>

3、Css样式代码 

<style>
  .first{
    background-color: antiquewhite;
    border: 1px solid #000;
    margin: 10px;
    box-shadow: 10px 10px 10px #888888;
    border-radius: 20px;
  }
  .titleone{
        margin: 10px;
        border: 1px solid blue;
        border-radius: 30px;
        text-indent: 1em;
        width: 100px;
        font-family: cursive;
        background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  }
  .topbox{
    display: flex;
  }
  .topbox ul{
    width: 50%;
  }
 .searchbox{
    height: 30px;
    margin: 10px 0px 10px 20px;
    display: flex;
 }
 .searchbox input{
   border: 2px solid rgb(193,193,193);
   border-radius: 10px;
   height: 100%;
   text-indent: 1em;
 }
 .searchbox button{
   font-size: 14px;
   line-height: 30px;
   height: 100%;
 }
 
 .bottombox{
   margin: 10px;
 }
 .zuci{
   margin: -5px 10px 10px;
   border: 1px solid seagreen;
   border-radius: 10px;
   padding:8px;
 }

.second ul{
  width: 100%;
}
.second ul li{
  list-style:none;
  width: 20%;
}
.second ul li img{
  width: 100%;
}

</style>

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