微信小程序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项目微信小程序SDK使用实例_第1张图片

微信开发者工具

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等。微信小程序SDK使用实例_第2张图片

选择 “工具” => “构建npm” 来让微信小程序支持npm。

微信小程序SDK使用实例_第3张图片

部署完成了。以下是商品列表的演示画面:

微信小程序SDK使用实例_第4张图片

代码解析

库存管理

在库存管理应用里实现了

  • 商品列表

  • 商品入库

  • 商品添加

  • 商品出库

  • 商品检索

这几个基本的演示功能。

目录结构

以下是此商品库存管理的微信小程序的目录结构:

微信小程序SDK使用实例_第5张图片

 

其中:

  • common:

    放置静态资源和公用的函数。

    kintoneConfig.js定义了kintone的配置信息,kintone的字段代码等。

    utility.js定义了一些公用的kintone的连接函数、数据初始化、数据校验等函数。

  • miniprogram_npm:

    微信小程序自动编译的npm第三方库。

  • pages:

    库存管理具体的代码及页面。

  • components:

    检索页面的部件。

添加商品代码

以下是以具体添加商品作为范例来说明SDK的使用方法。

首先了解一下添加商品功能的页面的目录结构。

微信小程序SDK使用实例_第6张图片

 

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

 注意事项

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

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

 

 

 

你可能感兴趣的:(kintone,PaaS平台,微信小程序,小程序,微信)