• 界面

• 代码

• <template>
    <view >
      <view class="uni-padding-wrap uni-common-mt">
       <view class="text-box" scroll-y="true">
        <text>{{data}}</text>
       </view>
       <view class="uni-btn-v">
        <button style="width: 50%; margin-top: 20%;" type="primary" :disabled="!canAdd" @click="add">换一句</button>
       </view>
      </view>
     </view>
  </template>
  
  <script >
  
  export default {
      data(){
          return{
              data:"",
     canAdd: true,
          }
      },
      methods:{
          getData(){
              uni.request({
                  url:"https://api.uixsj.cn/hitokoto/get",
                  data:{
                      code:"json"
                  },
                  success: (res) => {
                      console.log(res.data);
                      // 将请求到的数据存放放到dataList中
                      this.data = res.data.content;
                  }
              });
          },
     add() {
          this.getData();
        },
        
      },
    mounted() {
       this.getData();
     }
  }
  
  </script>
  
  <style>
  
  </style>

•  总结

        代码基于Vue.js框架，向一言接口发送请求获取数据并渲染到页面中。具体实现过程如下：

1. 页面渲染时，首先调用mounted函数，然后getData函数会被执行。
2. getData函数使用uni.request向指定的URL发送请求，通过传递一个code参数告诉服务器返回JSON格式的数据。
3. 如果请求成功，则服务器返回的数据会存储在res.data中，然后通过将res.data.content赋值给组件的data属性，来更新data变量的值。
4. 将data的值渲染到页面中的文本框中。
5. 点击"换一句"按钮，add方法会被调用，再次调用getData方法来获取新的句子并更新data的值。

        在getData函数中，this.data的值将被更新为从服务器获取的最新数据的content属性，然后将其渲染到页面上。