• 微信小程序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

      callWxAPI(requestConfig) {

        switch (requestConfig.fileMethod) {

          case 'download': {

            return wx.downloadFile(requestConfig);

          }

          case 'upload': {

            return wx.uploadFile(requestConfig);

          }

          case 'read':

            return wx.getFileSystemManager().readFileSync(requestConfig.tempFilePath, 'utf8');

          default: {

            return wx.request(requestConfig);

          }

        }

      }

      wxSendRequest(requestConfig) {

        // Execute request

        return new Promise((resolve, reject) => {

          requestConfig.fail = err => {

            reject(err);

          };

          switch (requestConfig.fileMethod) {

            case 'download': {

              requestConfig.success = res => {

                if (res.statusCode === 200) {

                  resolve({tempFilePath: res.tempFilePath});

                } else {

                  reject({

                    ...res,

                    data: JSON.parse(this.callWxAPI({fileMethod: 'read', tempFilePath: res.tempFilePath}))

                  });

                }

              };

              break;

            }

            case 'upload': {

              requestConfig.success = res => {

                if (res.statusCode === 200) {

                  resolve(JSON.parse(res.data));

                } else {

                  reject({...res, data: JSON.parse(res.data)});

                }

              };

              break;

            }

            default: {

              requestConfig.success = res => {

                if (res.statusCode === 200) {

                  resolve(res.data);

                } else {

                  reject(res);

                }

              };

            }

          }

          this.callWxAPI(requestConfig);

        });

      }

    范例

    以下是利用这个SDK做的库存管理的微信小程序的范例。在手机端添加数据后，小程序和kintone的PC端都得到了同步更新。

    部署

    Step 1

    首先，需要下载好微信开发者工具，并且创建一个JavaScript项目

    微信开发者工具

    Step 2

    通过npm导入@kintone/rest-api-client-wechat-mp库。

    1

    2

    3

    cd your-project-directory 

    npm init 

    npm install @kintone/rest-api-client-wechat-mp

    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的微信小程序的时候带来帮助，如果有什么疑问或者建议，可以在下面留言哦。

     注意事项

    • 本示例代码不保证其运行。

    • 我们不为本示例代码提供技术支持。

     

     

     

  • 相关阅读:
    182：vue+openlayers 使用d3实现地图区块呈现不同颜色的效果
    4.1 设计模式_单例模式
    spark向hadoop写入文件后，查路径为目录，无法查值
    全网都在用的英语配音软件～
    cmake 多线程编译 指定 Visual Studio 编译器 命令行
    java面试题记录
    MySQL的缓冲池（buffer pool）及 LRU算法
    SpringBoot 整和 Netty 并监听多端口
    ＜C++＞模板
    LCR 176.判断是否为平衡二叉树
  • 原文地址：https://blog.csdn.net/cybozu/article/details/126965978