前言

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

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

功能说明

让你快速理解 apifm-wxapi 的json模块的使用，利用该模块简单实现一个“每日动弹”的小程序；
类似说说的功能，每天可以写一句话、感慨；
本例旨在以一个浅显易懂的使用场景来描述json模块的使用，并不探讨本案例实际应用场景；

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

登录 “第一步” 注册的后台，左侧菜单 —> 工厂设置 —> 模块管理

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

Json模块 - 图1

小程序实现

效果演示

Json模块 - 图2

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>
  13.     <view class="weui-btn-area">
  14.       <button class="weui-btn" type="warn" bindtap="jsonSet">提交</button>
  15.     </view>
  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>
  28.   </view>
  29. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  6.     inputvalue: undefined,
  7.     jsonList: undefined,
  8.   },
  9.   onLoad: function (options) {
  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个方法：

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

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

《api接口文档》

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

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！