微信小程序通过api接口将json数据展现到小程序

介绍

微信小程序是一款基于微信官方开发平台的快捷应用开发方式，它能够帮助开发者快速搭建一个完整的应用平台。微信小程序不仅具有小巧、便捷等特性，在使用上也非常的简单易懂。

本文介绍了通过API接口将JSON数据展现到小程序的方法，实现了小程序与API服务之间的数据共享。

API接口

API接口是对系统或者一个程序提供的一组操作和调用入口，通过API接口，我们能够将需要的数据通过网络和服务器传输到我们的客户端，从而实现数据共享和交互。

API接口访问方式

API接口的访问方式主要有两种，即GET请求和POST请求。

在GET请求中，通过URL地址传递参数，需要将参数附加到URL地址的后面，使用"?"分割URL和参数，使用"&"分割多个参数。这种方式访问数据相对简单，但是安全性较低。

在POST请求中，参数以表单形式提交到服务器，请求参数不会暴露在URL地址上，相对安全。如果需要访问安全性较高的数据，建议使用POST请求方式。

API接口Demo

以下是一个模拟的API接口的Demo，包括了GET请求和POST请求。

首先，我们需要定义一个数据模型，并将数据存储在数组中，用于模拟后台服务数据的返回。

let books = [{
  id: 1,
  name: 'JavaScript高级程序设计',
  author: 'Nicholas C.Zakas',
  price: 45.00
}, {
  id: 2,
  name: 'Head First HTML与CSS',
  author: 'Freeman & Freeman',
  price: 38.00
}, {
  id: 3,
  name: '深入理解ES6',
  author: 'Nicholas C.Zakas',
  price: 69.00
}, {
  id: 4,
  name: 'jQuery权威指南',
  author: 'Karl Swedberg & Jonathan Chaffer',
  price: 49.00
}];

然后，我们要分别定义GET请求和POST请求的处理逻辑，并将处理后的数据返回给客户端。在这个例子中，我们使用了ES6的语法来定义异步函数，通过await关键字等待数据查询结果的返回，从而简化了代码的编写。

const API_BOOKS = '/api/books';
async function getBooks(ctx) {
  ctx.response.type = 'application/json';
  ctx.response.body = books;
}
async function addBook(ctx) {
  let book = ctx.request.body;
  books.push(book);
  ctx.response.type = 'application/json';
  ctx.response.body = book;
}

最后，我们需要将定义好的API接口绑定到路由上，供客户端调用。

const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();
app.use(koaBody());
app.use(async (ctx, next) => {
  if (ctx.url.startsWith(API_BOOKS)) {
    if (ctx.method === 'GET') {
      await getBooks(ctx);
    } else if (ctx.method === 'POST') {
      await addBook(ctx);
    }
  } else {
    await next();
  }
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));

小程序

在小程序中，我们可以使用wx.request函数发起网络请求，获取API接口返回的数据，并将数据展现在小程序中。

发起请求

在小程序中，我们可以通过wx.request函数发起网络请求。它接受一个对象参数，包括请求地址、请求方式、请求数据等信息。

以下是一个发起GET请求的例子，获取API接口返回的图书信息。

wx.request({
  url: 'https://example.com/api/books',
  success: (res) => {
    let books = res.data;
    console.log(books);
  }
});

以下是一个发起POST请求的例子，添加一个新的图书信息。

wx.request({
  url: 'https://example.com/api/books',
  method: 'POST',
  data: {
    id: 5,
    name: '小程序开发实战',
    author: '张三',
    price: 59.00
  },
  success: (res) => {
    let book = res.data;
    console.log(book);
  }
});

展现数据

通过wx.request函数获取到API接口返回的数据后，我们需要将数据展现到小程序中。小程序提供了一系列UI组件，用于展现各种数据类型。

以下是一个展现图书信息的例子，我们使用scroll-view组件将图书列表呈现出来。

<scroll-view>
  <block wx:for="{{books}}" wx:key="id">
    <view class="book">
      <text>{{item.name}}</text>
      <text>{{item.author}}</text>
      <text>{{item.price}}元</text>
    </view>
  </block>
</scroll-view>

以上代码中，我们使用了wx:for指令来遍历books数组，使用block包含每一个book元素，使用view包含每一个book属性，最后使用scroll-view包含所有book元素，实现滚动查看效果。

总结

通过API接口将JSON数据展现到小程序，是一种非常实用的应用开发方式，它可以实现小程序与API服务之间的数据共享，提高了开发效率和应用维护性。

如果您想要体验更多精彩的小程序开发，可以移步微信小程序开发文档，了解更多小程序应用开发技巧。