Json模块

前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》

《使用 “apifm-wxapi” 快速开发小程序》

《免费注册开通后台，获得专属域名》

功能说明

让你快速理解 apifm-wxapi 的json模块的使用，利用该模块简单实现一个“每日动弹”的小程序；

类似说说的功能，每天可以写一句话、感慨；

本例旨在以一个浅显易懂的使用场景来描述json模块的使用，并不探讨本案例实际应用场景；

启用 “Json数据存储接口” 模块

找到 “Json数据存储接口” 模块，点击 “启用模块” ，然后 F5 刷新一下后台界面，你将可以看到新的菜单：

“系统设置” --> “Json数据管理” ；

小程序实现

效果演示

wxml代码

 1<button type="primary" bindtap="goRegist"> 注册 / 登录 </button>
 2<text class="trip">利用 json 接口，制作一个每日说说的案例</text>
 3<view class="page">
 4  <view class="page__bd">
 5    <view class="weui-cells weui-cells_after-title">
 6      <view class="weui-cell ">
 7        <view class="weui-cell__bd">
 8          <input class="weui-input" value="{{inputvalue}}" placeholder="今日你想说点什么" bindinput="inputChange" />
 9        </view>
10      </view>
11    </view>
12
13    <view class="weui-btn-area">
14      <button class="weui-btn" type="warn" bindtap="jsonSet">提交</button>
15    </view>
16
17    <view class="weui-cells__title">往日动弹:</view>
18    <view wx:if="{{jsonList}}" class="weui-cells weui-cells_after-title">
19      <view wx:for="{{jsonList}}" wx:key="*this" class="weui-cell">
20        <view class="weui-cell__bd">
21        {{ item.jsonData.msg }}
22        <view class="weui-badge" style="margin-left: 5px;">{{ item.dateAdd }}</view>
23        </view>
24        <view class="weui-cell__ft" bindtap="jsonDelete" data-id="{{ item.id }}">删除</view>
25      </view>
26    </view>
27
28  </view>
29</view>

js代码

  1const WXAPI = require('apifm-wxapi')
  2WXAPI.init('gooking')
  3
  4Page({
  5  data: {
  6    inputvalue: undefined,
  7    jsonList: undefined,
  8  },
  9  onLoad: function (options) {
 10
 11  },
 12  onShow: function () {
 13    this.jsonList()
 14  },
 15  goRegist() {
 16    wx.navigateTo({
 17      url: '/pages/auth/index'
 18    })
 19  },
 20  inputChange(e) {
 21    this.data.inputvalue = e.detail.value
 22  },
 23  jsonList(){
 24    const loginToken = wx.getStorageSync('loginToken')
 25    if (!loginToken) {
 26      wx.showToast({
 27        title: '请先登录',
 28        icon: 'none'
 29      })
 30      return
 31    }
 32    WXAPI.jsonList({
 33      token: loginToken.token,
 34      type: 'apifm-wxapi-test'
 35    }).then(res => {
 36      console.log(res)
 37      if (res.code == 0) {
 38        this.setData({
 39          jsonList: res.data
 40        })
 41      } else {
 42        this.setData({
 43          jsonList: null
 44        })
 45        wx.showToast({
 46          title: res.msg,
 47          icon: 'none'
 48        })
 49      }
 50    })
 51  },
 52  jsonSet() {
 53    const loginToken = wx.getStorageSync('loginToken')
 54    if (!loginToken) {
 55      wx.showToast({
 56        title: '请先登录',
 57        icon: 'none'
 58      })
 59      return
 60    }
 61    if (!this.data.inputvalue) {
 62      wx.showToast({
 63        title: '内容不能为空',
 64        icon: 'none'
 65      })
 66      return
 67    }
 68    WXAPI.jsonSet({
 69      type: 'apifm-wxapi-test',
 70      token: loginToken.token,
 71      content: '{"msg": "' + this.data.inputvalue +'"}'
 72    }).then(res => {
 73      console.log(res)
 74      if (res.code == 0) {
 75        wx.showToast({
 76          title: '添加成功',
 77          icon: 'success'
 78        })
 79        this.setData({
 80          inputvalue: null
 81        })
 82        this.jsonList()
 83      } else {
 84        wx.showToast({
 85          title: res.msg,
 86          icon: 'none'
 87        })
 88      }
 89    })
 90  },
 91  jsonDelete(e){
 92    const loginToken = wx.getStorageSync('loginToken')
 93    const id = e.currentTarget.dataset.id
 94    WXAPI.jsonDelete(loginToken.token, id).then(res => {
 95      console.log(res)
 96      wx.showToast({
 97        title: '删除成功',
 98        icon: 'success'
 99      })
100      this.jsonList()
101    })
102  }
103})

WXAPI.init('gooking') 这句代码是将你的小程序链接到你的后台，其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

总结

本案例主要使用了 apifm-wxapi 的以下3个方法：

1WXAPI.jsonSet(Object)
2WXAPI.jsonList(Object)
3WXAPI.jsonDelete(token, id)

关于更加详细的参数使用，以及更加高级的进阶使用方法，可以参考api接口文档说明：

《api接口文档》

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！

感谢！

"api工厂" 使用手册