天行数据土味情话API接口调用接口

Myth丶恋晨 2024-03-31 16:59 71阅读 0赞

### 天行数据土味情话API接口调用 ###

1.  注册天行数据账号
2.  申请"土味情话"接口
3.  下载微信开发工具
4.  创建一个空项目
5.  将下面的key填到是链接上即可请求成功

`https://apis.tianapi.com/topnews/index?key=KEY`  
![在这里插入图片描述][36ceca6cf6424247949a2f206dfa6d87.png]

![在这里插入图片描述][6e56f0bd96bc4591bd4d586035e26ddb.png]

// pages/index/index.js
    Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        // 渲染到视图层
        //返回内容更新到视图层{
        {tianapi_data}}
        tianapi_data: []
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function () {
        
        //微信小程序参考代码，请确保在小程序后台设置了安全域名api.tianapi.com
        wx.request({
        
          url: 'https://apis.tianapi.com/saylove/index',
          method: 'POST',
          data: {
        
            key: '53791645XXXe1ac656e85482f2bf7XXX'
          },
          header: {
        
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
        
            if (res.data.code == 200) {
        
              //1:在控制台打印一下返回的res.data数据
              console.log(res.data)
              //2:在请求接口成功之后，用setData接收数据
              this.setData({
        
                //第一个data为固定用法
                tianapi_data: res.data
              })
            }
          },
          fail: function (err) {
        
            console.log(err)
          }
        })
      }
    })

index.html

<view class="container">
    	<view class="crad">
    			<view wx:for="{
         {tianapi_data}}" class="content">{
       {item.content}}</view>
    		</view>
    		<navigator url="/pages/index/index" hover-class="none">
    		<view class="title">换一句~</view>
    		</navigator>
    </view>

index.wxss

/* pages/index/index.wxss */
    .crad{
        
    	/* 内部边距 */
    	padding: 10px;
    	/* 宽度 */
    	width: 90%;
    	height: 100px;
    	border-radius: 10px;
    	box-shadow: 0 0 5px 5px #e9e9e9;
    	background-color: #f0f0f0;
    }
    .content{
        
    	color: #798586;
    	/* 斜体 */
    	font-style: oblique;
    }
    .title{
        
    	color: rgb(255, 255, 255);
    	text-align: center;
    	padding: 10px;
    	width: 100px;
    	margin: 15px;
    	border-radius: 50px;
    	box-shadow: 0 0 5px 5px #e9e9e9;
    	background-color: rgb(132, 159, 233);
    }

![在这里插入图片描述][b19eee448b4f4a0aa7f23b6c0bea9257.png]

[36ceca6cf6424247949a2f206dfa6d87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/ee39cbe32eef4e5b85356549ce643533.png
[6e56f0bd96bc4591bd4d586035e26ddb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/92aad1ed8ace40cca937bf76f668d860.png
[b19eee448b4f4a0aa7f23b6c0bea9257.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/25cbb06c8c104b55ad83d293b3c39b54.png