加载中…

Json模块

# 前言 本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: [《创建 HelloWorld 项目》](https://www.yuque.com/apifm/doc/hezlrm) [《使用 “apifm-wxapi” 快速开发小程序》](https://www.yuque.com/apifm/doc/mdldsd) [《免费注册开通后台,获得专属域名》](https://www.yuque.com/apifm/doc/qr6l4m) # 功能说明 让你快速理解 apifm-wxapi 的json模块的使用,利用该模块简单实现一个“每日动弹”的小程序; 类似说说的功能,每天可以写一句话、感慨; 本例旨在以一个浅显易懂的使用场景来描述json模块的使用,并不探讨本案例实际应用场景; # 启用 “Json数据存储接口” 模块 登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理 找到 “Json数据存储接口” 模块,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单: “系统设置” --> “Json数据管理” ; ![](https://dcdn.it120.cc/yuque/0/2019/png/572726/1572848506660-19fa14c8-aa8c-455f-8d78-82c8beb88e5a.png) # 小程序实现 ## 效果演示 ![](https://dcdn.it120.cc/yuque/0/2019/png/572726/1572848505846-1de824c3-f156-453f-a723-1b24133633f5.png) ## wxml代码 ```plain 利用 json 接口,制作一个每日说说的案例 往日动弹: {{ item.jsonData.msg }} {{ item.dateAdd }} 删除 ``` ## js代码 ```plain const WXAPI = require('apifm-wxapi') WXAPI.init('gooking') Page({ data: { inputvalue: undefined, jsonList: undefined, }, onLoad: function (options) { }, onShow: function () { this.jsonList() }, goRegist() { wx.navigateTo({ url: '/pages/auth/index' }) }, inputChange(e) { this.data.inputvalue = e.detail.value }, jsonList(){ const loginToken = wx.getStorageSync('loginToken') if (!loginToken) { wx.showToast({ title: '请先登录', icon: 'none' }) return } WXAPI.jsonList({ token: loginToken.token, type: 'apifm-wxapi-test' }).then(res => { console.log(res) if (res.code == 0) { this.setData({ jsonList: res.data }) } else { this.setData({ jsonList: null }) wx.showToast({ title: res.msg, icon: 'none' }) } }) }, jsonSet() { const loginToken = wx.getStorageSync('loginToken') if (!loginToken) { wx.showToast({ title: '请先登录', icon: 'none' }) return } if (!this.data.inputvalue) { wx.showToast({ title: '内容不能为空', icon: 'none' }) return } WXAPI.jsonSet({ type: 'apifm-wxapi-test', token: loginToken.token, content: '{"msg": "' + this.data.inputvalue +'"}' }).then(res => { console.log(res) if (res.code == 0) { wx.showToast({ title: '添加成功', icon: 'success' }) this.setData({ inputvalue: null }) this.jsonList() } else { wx.showToast({ title: res.msg, icon: 'none' }) } }) }, jsonDelete(e){ const loginToken = wx.getStorageSync('loginToken') const id = e.currentTarget.dataset.id WXAPI.jsonDelete(loginToken.token, id).then(res => { console.log(res) wx.showToast({ title: '删除成功', icon: 'success' }) this.jsonList() }) } }) ``` > WXAPI.init('gooking')  这句代码是将你的小程序链接到你的后台,其中  gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明); > # 总结 本案例主要使用了 apifm-wxapi 的以下3个方法: ```plain WXAPI.jsonSet(Object) WXAPI.jsonList(Object) WXAPI.jsonDelete(token, id) ``` **关于更加详细的参数使用,以及更加高级的进阶使用方法,可以参考api接口文档说明:** [《api接口文档》](https://api.it120.cc/doc.html) _关于  apifm-wxapi 更多的使用方法:_ [《apifm-wxapi使用说明》](https://github.com/gooking/apifm-wxapi/blob/master/instructions.md) _本案例Demo代码下载:_ [《apifm-wxapi使用Demo程序》](https://github.com/gooking/apifm-wxapi-demo) 期待你的进步! 感谢!