[入门]微信小程序如何写一个最简单的API， 和调用API写一个小小的页面

大佬留言怎么使用API接口写个小小的页面。这块内容说起来设计的内容是有点多的，简单版就有网络请求，for循环，条件渲染....

自学且垃圾的我不敢对说教程是否有营养，但可以提供小小入门接触，文章分为2个部分：上部分如果写一个简单的API，下部分调用API

简单API

微信小程序 API是啥概念，可以理解为它从数据库中读取的数据转为json格式返回给我们；因此我们去写一个最简单的接口，可以直接写json文件；最早星宿UI的友情链接就是采用该形式

JSON格式的基本结构‌对象‌：由大括号{}包围，包含一系列的键值对。键（key）和值（value）之间用冒号:分隔，多个键值对之间用逗号,分隔。‌数组‌：由方括号[]包围，包含一系列的值，可以是字符串、数字、布尔值、对象或数组

示例

{
    "title":"是yinfengrui啦",
    "age":18,
    "hobby":[{
        "type":"3A",
        "title":"游戏"
    },{
        "type":"日漫",
        "title":"动漫"
    }],
​
    "hobby2":["游戏","动漫"]
}

这里示例前2个是最简单的键（key）和值（value）示例，后面的hobby是数组

新建一个json文件，复制以上代码，一个简单的接口；

如何使用

我们保存好的json格式文件，上传到我们服务器中，能访问到就OK；

(例如：https://docs.frbkw.com/new_file.json)

如果成功页面出现你的数据

小程序如何调用

需要有一点点html，css，js(vue)的知识

操作可分为：程序启动自动执行API函数----请求接口存data----页面渲染

执行函数

页面打开就需要执行函数用到小程序生命周期

在js页面的onLoad周期中写一个函数，并打印11看是否执行

// index.js
Page({
  data: {
  },
  onLoad(){
    this.getAPI();
  },
  getAPI(){
    console.log(111)
  }
})
​

请求接口

request网络请求

请求接口---保存字段，可按步骤阅读

// index.js
Page({
  data: {
    // 步骤2.4 保存数据
    newDa: '',
  },
  onLoad() {
    // 步骤1 页面打开执行函数
    this.getAPI();
  },
  // 步骤1.1 页面打开执行函数
  getAPI() {
    // 步骤2 网络请求
    wx.request({
      url: 'https://docs.frbkw.com/new_file.json', // 步骤2.2 接口地址
      success: (res) => {
        console.log(res.data) //打印数据
        // 步骤2.3 保存数据
        this.setData({
          newDa: res.data
        })
      }
    })
  },
​
})

页面渲染

​
<!-- 步骤3.1 基础字段 -->
<view>{{ newDa.title }}</view>
<view>{{ newDa.age }}</view>
​
​
<!-- 步骤3.2 for循环字段  -->
<block wx:for="{{newDa.hobby}}" wx:key="index">
  <view>{{ item.title }}--{{ item.type }}</view>
</block>
​
​

最后

引用大佬名言
文章知识上限是来自我这位垃圾博主，官方文档知识下限来自官方团队的文笔因此深度内容需查阅专业或官方的文档，保持随时学习状态，避免给我这半桶水带歪可以使用一言官方接口做学习 

https://v1.hitokoto.cn