微信小程序SDK使用实例
介绍
大家在做移动端应用开发的时候都会不满足于APP客户端,小程序的应用也越来越广泛了。
现在我们开发了一套kintone在微信小程序上的SDK。基于这个SDK大家就可以做适用于自己的微信小程序了。
SDK做了些什么
这里不得不提到kintone的JS Client (@kintone/rest-api-client),既可以支持Commonjs规范服务端nodejs开发,也可以支持AMD规范的浏览器端的js开发。
此微信小程序SDK就是基于kintone的JS Client (@kintone/rest-api-client)改造而得。使用过JS Client (@kintone/rest-api-client)的开发者相信很快就能上手。
这里面已经封装好了kintone的大部分REST-API,包括上传下载文件,并调用了wx.request,wx.uploadFile,wx.downloadFile来发送请求到kintone。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
|
范例
以下是利用这个SDK做的库存管理的微信小程序的范例。在手机端添加数据后,小程序和kintone的PC端都得到了同步更新。
部署
Step 1
首先,需要下载好微信开发者工具,并且创建一个JavaScript项目
微信开发者工具
Step 2
通过npm导入@kintone/rest-api-client-wechat-mp库。
1 2 3 |
|
Step 3
启用增强编译和 使用npm模块 选项来支持async等。
选择 “工具” => “构建npm” 来让微信小程序支持npm。
部署完成了。以下是商品列表的演示画面:
代码解析
库存管理
在库存管理应用里实现了
商品列表
商品入库
商品添加
商品出库
商品检索
这几个基本的演示功能。
目录结构
以下是此商品库存管理的微信小程序的目录结构:
其中:
common:
放置静态资源和公用的函数。
kintoneConfig.js定义了kintone的配置信息,kintone的字段代码等。
utility.js定义了一些公用的kintone的连接函数、数据初始化、数据校验等函数。
miniprogram_npm:
微信小程序自动编译的npm第三方库。
pages:
库存管理具体的代码及页面。
components:
检索页面的部件。
添加商品代码
以下是以具体添加商品作为范例来说明SDK的使用方法。
首先了解一下添加商品功能的页面的目录结构。
add.js:逻辑层
写具体的添加商品的逻辑代码。
通过page构造器注册页面
data:初始化数据
onLoad:在页面初始化的时调用uploadFile函数,自动执行文件上传的API并获取file key。
还有其他一些formInputChange、formDateChange等函数与前端add.wxml进行数据绑定,
最后通过在函数submitForm里通过添加记录的API来将数据添加到kintone。
add.wxml:视图层
这是页面模板的页,构建出页面的结构。
这里选择日期,上传图片,提交表单,数据校验这些都是通过微信的WEUI组件库来实现的。他能带给用户类似于原生视觉体验的UI。
add.json:配置
可以写调用的WEUI组件的信息,小程序的页面路径、界面表现、网络超时时间、底部 tab 等
add.wxss:样式
该页面的样式信息
add.js的代码范例请查阅:kintone微信小程序SDK使用实例
资源列表
SDK源码和文档:kintone微信小程序SDK - cybozu - cybozu开发者网站
demo源码:https://github.com/kintone-samples/SAMPLE-rest-api-client-wechat-mp-CN
总结
好了,小程序的SDK和范例就介绍到这里,希望能给大家在开发kintone的微信小程序的时候带来帮助,如果有什么疑问或者建议,可以在下面留言哦。
注意事项
本示例代码不保证其运行。
我们不为本示例代码提供技术支持。
微信小程序SDK使用实例相关推荐
- uniapp使用高德地图微信小程序SDK生成地图轨迹
一文看懂微信小程序生成地图轨迹 一.开发准备 1.下载微信小程序SDK 2.高德控制台申请相关平台key 二.html页面展示地图标签 三.引入sdk及定义数据 四.相关方法(静态生成两个点之间的轨迹 ...
- 使用高德地图微信小程序SDK开发案例-输入提示(附源码)
闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例. 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标. 当然 ...
- python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序 浏览量:1120 时间:2020-04-06
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
- 微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法
微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法 参考文章: (1)微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法 (2)https://www.cnblogs.com/ ...
- 微信小程序制作课程表_微信小程序实现课程表实例
前言 感谢! 承蒙关照~微信小程序实现课程表实例 效果图: 小程序代码如下 wxml: {{bj}} {{name}} 8:00 语文 语文 数学 数学 语文 9:00 语文 语文 数学 数学 语文 ...
- 神策数据微信小程序 SDK 架构解析
一.前言 神策数据微信小程序 SDK[1],是一款轻量级用于微信小程序端的数据采集埋点 SDK,包含代码埋点.全埋点功能.其中,全埋点功能通过代理微信小程序原生 App.Page.Component ...
- 神策数据微信小程序 SDK 功能介绍 | 数据采集
一.前言 神策数据微信小程序 SDK,是一款用于微信小程序端的数据采集埋点 SDK.具体而言,是指开发者将 SDK 集成到开发的微信小程序项目中,通过配置或者在特定时机调用 SDK 提供的接口采集用户 ...
- 微信小程序开发初试实例结算小助手
微信小程序开发初试实例结算小助手 小程序码 创作背景 小程序功能 小程序实现 小程序开发方案(想看源代码,直接看这一项) 本着自己参加过学校组织的微信小程序云开发培训,就抱着尝试的心理去参加今年的高校 ...
最新文章
- java foreach delete_Java CopyOnWriteArrayList forEach()用法及代码示例
- 清华校友三创论坛成功举办,第四届清华校友三创大赛京津冀赛区正式启动
- 阿里达摩院实习生立功!何恺明Mask R-CNN精度提升,一半输入数据量就行 | CVPR2020...
- Got MethodID of ReferenceType that is not a member of the ReferenceType
- AI:IPPR的数学表示-CNN可视化语义分析
- android极光推送声音,android 极光推送 声音与振动 的关闭和开启
- vue 文件转换二进制_Vue利用Blob下载原生二进制数组文件
- access 打印预览 代码_TSC TTP-244条码打印机如何批量打印二维码
- redis多服务器共享_基于redis和shedlock实现分布式锁(超简单)
- aws rds监控慢sql_使用本机备份的AWS RDS SQL Server迁移
- 谷歌员工中位数年薪达 170 万元,却仍买不起房!
- Android Studio 快速实现上传项目到Github(详细步骤)
- hd620显卡驱动 linux,英特尔为Windows 10 推出新显卡驱动 26.20.100.7870
- 汽车信息安全标准ISO/SAE21434与UN/WP.29阅读总结
- ice php 5.6.32,PHP通过ice调用python程序
- Flink整合kafka并基于事件源生成时间戳以及水印
- 卸载office2010安装包时提示语言不受系统支持
- 蓝桥杯2021年第十二届省赛-双向排序
- 用Xposed框架拦截微信、人人、QQ等LBS应用的当前位置
- 达梦数据库-国产的荣光
热门文章
- 【算法】【动态规划】【四边形不等式】画匠问题(附带问题类型总结)
- 2022VR设备里的爆款!Oculus Quest 2 体验:或许是目前综合实力最强的 VR 眼镜
- 玩转Service Mesh微服务熔断、限流骚操作
- C++中的HTTP协议
- Java实现生成二维码(内嵌LOGO和无LOGO均可)扫描进入目标网址
- 为什么我们的电脑/手机越来越卡了
- 如何设置Chrome夜间模式、如何设置Chrome背景色
- VScode Vue项目使用html代码自动补全插件
- 计算机攒机过程,电脑装机一筹莫展?一文看懂攒机全过程
- LabWindows/CVI 调用Microsoft Access Database数据库方法