微信小程序SDK使用实例-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序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。

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端都得到了同步更新。

微信小程序SDK使用实例

部署

Step 1

首先，需要下载好微信开发者工具，并且创建一个JavaScript项目微信小程序SDK使用实例

微信开发者工具

Step 2

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

cd your-project-directory

npm init

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

Step 3

启用增强编译和 使用npm模块 选项来支持async等。微信小程序SDK使用实例

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

微信小程序SDK使用实例

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

微信小程序SDK使用实例

代码解析

库存管理

在库存管理应用里实现了

商品列表
商品入库
商品添加
商品出库
商品检索

这几个基本的演示功能。

目录结构

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

微信小程序SDK使用实例

文章来源地址https://www.toymoban.com/news/detail-483436.html

其中：

common：

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

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

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

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

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

检索页面的部件。

添加商品代码

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

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

微信小程序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：样式

该页面的样式信息