支付宝小程序面向个人开放了！我将以一个Demo为例讲解整个流程。

Hello&＃xff0c;我是犯迷糊的小 K。目前是 ifanr 的一只前端攻城狮&＃xff0c;同时也是知晓云团队的一员。

3 月伊始&＃xff0c;ifanr 旗下品牌——知晓云 3.0 版本正式上线。此次更新得到业内许多开发者的密切关注和积极支持&＃xff0c;在此&＃xff0c;我代表知晓云团队表示万分感谢哈。(&＃xffe3;▽&＃xffe3;)~*

知晓云是业界第一个支持多平台小程序开发的后端云服务&＃xff0c;它免去了小程序开发中服务器搭建、域名备案、数据接口开发、线上运维等繁琐流程&＃xff0c;让开发者更快、更低成本地做出优质的小程序。

言归正传。和许多童鞋一样&＃xff0c;小 K 使用知晓云时&＃xff0c;也是第一次开发小程序&＃xff0c;开发过程也是百转曲折。因此&＃xff0c;小 K 希望通过这篇文章&＃xff0c;和各位童鞋进行交流。毕竟&＃xff0c;大家的学习历程是相似的&＃xff0c;遇到的困惑也应该差不多。

本文结构大致如下&＃xff1a;

谈谈如何成为支付宝小程序开发者。
聊聊如何创建我的第一个支付宝小程序。
以一个 Demo 为例&＃xff0c;详细讲讲如何在支付宝小程序中接入和使用知晓云 SDK。

如何成为一名支付宝小程序开发者&＃xff1f;

申请成为支付宝小程序开发者&＃xff0c;是一件再简单不过的事儿&＃xff0c;仅需 2 步&＃xff0c;比把大象放进冰箱还简单。

第一步&＃xff0c;登录蚂蚁金服开放平台&＃xff0c;注册成为小程序开发用户。此过程需要你依次完成账号信息、邮箱激活和信息登记等流程。

第二步&＃xff0c;完成上述操作后&＃xff0c;就能进入小程序管理后台&＃xff0c;点击创建应用并填写信息&＃xff0c;创建成功后即可获取开发小程序的 AppID。 嗯&＃xff0c;现在小 K 已经是一枚准小程序开发者啦。&＃xff08;后续请进入小程序配置-设置-开发设置&＃xff0c;根据平台的设置方式教程&＃xff0c;配置接口加签方式&＃xff0c;获得支付宝公钥和密钥文件&＃xff09;

如何创建我的第一个小程序&＃xff1f;

获得了「准入资格」后&＃xff0c;小 K 开始参照小程序官方文档&＃xff0c;下载官方的开发者工具并创建了一个初始化的小程序。

Well done&＃xff01;小 K 的第一个初始化小程序诞生了&＃xff5e;

接下来&＃xff0c;可以看看支付宝小程序官方的体验小程序 Demo 教程文档&＃xff0c;熟悉一下小程序代码组织方式和开发特性。

现在&＃xff0c;有了开发工具和基础知识积累&＃xff0c;可以试试 freestyle 咯。

唯一的问题是&＃xff1a;小 K 应该选择什么类型的小程序作为 Demo 呢&＃xff1f;

对于 Demo 选择&＃xff0c;唯一的原则就是精简

「简」是像小 K 这样的小白开发者一看就懂。
「精」是尽可能在有限的代码中&＃xff0c;体现知晓云功能的强大性。

于是&＃xff0c;我选择了个经典的 TodoMVC 的小程序——「我的书架」作为示例。

由于「我的书架」 Demo 将知晓云的核心模块之一——数据管理的 CRUD 操作很好地展示了出来&＃xff0c;所以&＃xff0c;我们希望通过这个 Demo 让各位童鞋学会利用知晓云&＃xff0c;完成常见的数据增删改查功能。

如何在小程序中调用知晓云 SDK&＃xff1f;

准备工作

在正式使用知晓云的 SDK 前&＃xff0c;首先确保走完以下 2 个流程&＃xff1a;

第一&＃xff0c;完成小程序的授权。目前&＃xff0c;知晓云在注册模块和设置模块都有提供小程序授权操作&＃xff0c;二者的授权流程大体一致。在这里&＃xff0c;我们演示设置模块的小程序操作。

点击应用标签&＃xff0c;进入应用的管理面板&＃xff1b;

进入管理面板后&＃xff0c;切换到设置模块并进入应用设置 tab 页&＃xff0c;点击平台设置-支付宝小程序-立即开通&＃xff0c;点击编辑并填写相关配置信息后即可完成授权。

第二&＃xff0c;在「小程序后台」配置安全域名。

装载 SDK

接下来&＃xff0c;看看知晓云的 SDK 的使用说明文档。老夫掐指一算&＃xff0c;将 SDK 的接入小程序的方法和数据表操作看了一遍&＃xff0c;约莫花费 10 分钟。

毕竟 Demo 只涉及数据操作嘛&＃xff0c;所以要做到有的放矢&＃xff0c;要啥看啥。

下载知晓云提供的 SDK 后&＃xff0c;将其引入小程序的 app.js 中&＃xff0c;并通过在前面的设置模块的小程序设置 tab 页中获取当前应用的 ClientID。

设计数据结构和创建数据表

完成上述操作后&＃xff0c;小 K 就可以使用 SDK 提供的各种接口&＃xff0c;接下来思考一下「我的书架」将用到什么数据及其结构。

由于是第一个 Demo &＃xff0c;本着精简的原则&＃xff0c;小 K 在此就只设计了一个 bookName 的字段

Tips&＃xff1a;知晓云的数据管理模块会为每张数据表自动创建 id&＃xff0c;create_by&＃xff0c;create_at&＃xff0c;update_at 和 acl 等字段。

根据文档提示&＃xff0c;在使用知晓云的数据管理模块时&＃xff0c;需要首先提供存放数据的 tableName。因此&＃xff0c;首先要在知晓云开发者平台创建数据表从而获取 tableName。

获取 tableName 后&＃xff0c;小 K 将其放在了 app.js 文件的 globalData 对象上&＃xff0c;以供后面各种数据操作接口的参数调用。

开始使用知晓云的 SDK

小 K 在这里不会细谈「我的书架」是如何编写的&＃xff0c;因为不同的童鞋的对这个功能的实现方式可能不一样。 小 K 只会谈在哪些控件中使用知晓云提供的接口&＃xff0c;来实现小 K 的需求——添加一本书。

创建书目记录

翻查了文档&＃xff0c;发现创建一条记录很简单&＃xff0c;只需要调用 create 创建一条空记录&＃xff0c;然后调用 set 为上面创建的空记录赋值&＃xff0c;最后调用 save 将创建的记录保存到服务器即可。

更新一条记录

有时&＃xff0c;小 K 手抖&＃xff0c;在输入书目的时候填写了错别字&＃xff0c;那么理应提供一个更新记录的功能吧&＃xff1b;

知晓云提供了 update 接口&＃xff0c;让更新数据 so easy。

删除一条记录

最后&＃xff0c;当小K的书架不再存在某本书时&＃xff0c;必然需要一个删除操作。通过调用 delete 接口就可以实现一条记录的删除操作。

最后的话

以上就是小 K 用知晓云烹调出的第一个支付宝小程序——「我的书架」&＃xff0c;最主要就是用到了知晓云的数据管理功能模块。

当然&＃xff0c;知晓云还提供作为 BaaS 产品的基础文件上传和数据统计功能等&＃xff0c;同时具备贴切小程序的特性功能&＃xff0c;譬如支付宝支付和富文本编辑功能。

除了「我的书架」 Demo 外&＃xff0c;知晓云官方还提供了知晓云 SDK 官方示例小程序&＃xff0c;用于演示 SDK 更丰富的接口使用方法。代码已开源在 ifanrX 的 GitHub 上&＃xff0c;链接&＃xff1a;https://github.com/ifanrx/hydrogen-demo 有兴趣的童鞋可以 star 或是 fork 一下。

本文首发于「知晓云」公众号&＃xff1a;https://mp.weixin.qq.com/s/VkIIWltlaCZcbTN5dp2aCg

知晓云是国内首家专注于小程序开发的后端云服务。使用知晓云&＃xff0c;小程序开发快人一步。