怎样进阶QQ小软件开发,
无公测应邀,1个半小时加速构筑QQ小流程 「小流程」那个里程碑式的商品正式发布快两周了,互联网控制技术人都在摩拳擦掌,摩拳擦掌。不过小流程目前还在公测,第一批只派发了 200 个公测资格证书(泣不成声)。本误以为没有 AppID 那个月就与小流程因伤了,遗憾的是QQ这三天正式发布了测试版开发人员辅助工具,无须公测应邀也能品雅版了。 因此也就有了我与「小流程」的初新体验,而我的体会多于一个字——爽! 优先选择别的「小流程」Demo? 在著名女同性恋婚恋中文网站 Github 上,「小流程」的 Demo 许多,但多半而已单纯的 API 模拟,有的是即使间接把网页统计数据写在了 json 文档里(分野有互联网允诺 API)。我想新体验的是能将服务器端和小流程端无缝连接起来(新体验够爽)的工程项目。最后,我优先选择了百度云非官方面世的「小快照」Demo。 「小快照」主要同时实现了下列机能: 效果模拟图(受开发辅助工具的限制,部分机能尚未同时实现) 之所以优先选择百度云的 Demo,一是因为它是百度自家面世的,工程项目的质量有保障;二是因为它是少有的是既讲小流程开发,又介绍云端部署的工程项目。 稍微有点经验的流程员都知道,架构要动静分离,静态文档最好不要放在自己的服务器上,要放在专门用来储存的第一类储存服务器COS上,并且用CDN 加速。「小快照」后端采用的是 Node.js,Nginx作为反向代理。 第一步:搭开发环境 首先,我们需要在邻近地区构筑好QQ「小流程」的开发环境。即下载开发人员辅助工具。QQ非官方已经面世了测试版 IDE,大家没有必要再去下载破解版了。打开「非官方下载地址」,根据自己的操作系统优先选择。我使用的是 Mac 版。 安装好之后打开运行,会要求QQ扫码登陆。之后,就能看到创建工程项目的网页了。 优先选择添加工程项目,没有 AppID 就选无(如果乱写会报错,到时可能无法步入工程项目)。如果你优先选择的工程项目目录为空,请如图所示勾选在当前目录中创建quick start工程项目。 点选添加工程项目之后,我们会步入开发辅助工具的调试网页。 第二步:下载「小快照」源码 接下来,我们下载「小快照」的源码。能优先选择间接从http://imgcache.qq.com/qcloud/la/demo-source/qcloud-applet-album.zip下载,也能从百度云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取,这样能及时获取最新的代码。 git clonehttps://github.com/CFETeam/weapp-demo-album.git 最后,我们会得到类似这样的文档目录。 单纯解释下目录结构: 源码下载完成之后,我们打开QQ web 开发人员辅助工具,新建工程项目「小快照」,优先选择目录applet(或app)。 「小快照」源码分析 在进行部署之前,我们来单纯分析一下「小快照」的具体代码。毕竟只看效果不是我们的目的,我们的目的是以「小快照」为例,了解怎样开发小流程并与服务器端进行交互。 「小快照」包含一个描述整体流程的 app 和多个描述各自网页的 page。主流程 app 主要由三个文档组成,分别是 app.js(小流程逻辑)、app.json(小流程公共设置)和 app.wxss(小流程公共样式表),其中前两个为必备文档。config.js 文档中包含了一些部署域名的设置,现在不用管。 在 pages 目录下,有两个 page 网页,分别是 index 和 album。网页结构算是比较单纯的,其中 index 是小流程启动时默认步入的网页。每个网页下,至少要有 .js(网页逻辑)和 .wxml(网页结构)两个文档,.wxss(网页样式表)和 .json(网页配置)文档为选填。你可能注意到了,这些文档的文档名与父目录的名称相同。这是QQ非官方的规定,目的是减少配置项,方便开发人员。 接下来我们以 index 网页为例做单纯的解释。index.wxml 是那个网页的表现层文档,其中的代码非常单纯,能分为上下两大部分。 网页的模拟效果如下: https://www.qcloud.com/act/event/yingyonghao.html(二维码自动识别) 我们看到,网页上有一个步入快照的按钮。正常理解,点选后该按钮后我们就能步入快照了(这不废话嘛)。那小流程背后是怎样同时实现该操作的呢? 在index.wxml中,我们发现对应的 button 标签上定义了一个 bindtap 属性,绑定了一个叫做gotoAlbum 的方法。而那个方法能在index.js文档中找到。事实上,文档中也只定义了这一个方法,执行的具体动作就是跳转到 album 网页。 album.js 网页中编写了流程的主要逻辑,包括优先选择或拍摄相片、相片自动更新、相片下载和相片删掉;album.wxml 中三种视图容器 view、scroll-view、swiper均有使用,还提供了消息提示框 toast。具体方法和视图的同时实现请查看工程项目源码。所有的是这些机能都写在 Page 类中。 lib 目录下提供了小流程会用的一些辅助函数,包括异步访问和第一类储存 COS 的 API。 总的来说,和QQ非官方宣传的一样,在开发人员辅助工具下进行小流程的开发,效率确实提高了很多,而且有很多QQ提高的组件和 API。所以,在开发速度这点上的新体验还是非常爽的。 另外,由于「小快照」需要使用诸多云端能力,如相片的上载和下载,我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。 第三步:云端部署 server 代码 虽然服务器端的开发不是本文的重点,但为了全面地新体验「小快照」的整个开发部署流程,我们还是有必要了解服务器端的部署,这里我们使用的是百度云。 如果你想更爽一点,那么能优先选择百度云非官方提供的小流程云端镜像。「小快照」的服务器运行代码和配置已经打包成百度云 CVM 镜像,能间接使用。可谓是一键部署好云端。 如果你以前没有使用过百度云,能优先选择免费试用(我已经领取了 8 天的个人版服务器),或者领取礼包以优惠的价格购买所需的服务。 你也能优先选择将「小快照」源码中的server文档夹上载到自己的服务器。 第四步:准备域名和配置证书 如果你已经有百度云的服务器和域名,并配置好了 https,那么能跳过第 4-6 步。 在QQ小流程中,所有的是互联网允诺受到严格限制,不满足条件的域名和协议无法允诺。单纯来说,就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名,请先注册一个。由于我们没有收到公测,也就暂时不用登录QQ公众平台配置通信域名了。 第五步:Nginx 配置 https QQ小流程云端示例镜像中,已经部署好了 Nginx,但还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。 请将红框部分换成自己的域名和证书,并且将 proxy_pass 设置为 Node.js 监听的端口,我的是 9993。 配置完成后,重新加载配置文档并且重启 Nginx。 第六步:域名解析 我们还需要添加域名记录,将域名解析到我们的云服务器上,这样才能使用域名进行 https 服务。在百度云注册的域名,能间接使用云解析控制台来添加主机记录,间接优先选择上面购买的 CVM。 解析生效后,我们的域名就支持 https 访问了。 第七步:开通和配置 COS 由于我们希望同时实现动静分离的架构,所以优先选择把「小快照」的相片资源是储存在 COS 上的。要使用 COS 服务,需要登录COS 管理控制台,然后在其中完成下列操作。 第八步:启动「小快照」的服务器端 在非官方提供的镜像中,小快照示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album下。步入该目录,如果是你自己的服务器,请步入相应的文档夹。 在该目录下,有一个名为config.js的配置文档(如下所示),按注释修改对应的 COS 配置: 另外,cd ./routes/album/handlers,修改 list.js,将 const listPath 的值修改为你的Bucket 下的相片储存路径。如果是根目录,则修改为 /。当前服务器端的代码中将该值设置为了 /photos ,如果你在第七步中没有创建该目录,则无法调试成功。 小快照示例使用 pm2 管理 Node 进程,执行下列命令启动 node 服务: 第九步:配置「小快照」通信域名 接下来,在QQ web 开发人员辅助工具打开「小快照」工程项目,并把源文档config.js中的通讯域名 host 修改成你自己申请的域名。 将蓝色框内的内容修改为自己的域名 然后点选调试,即可打开小快照Demo开始新体验。 最后提示一点,截止目前为止,QQ小流程提供的上载和下载 API 无法在调试辅助工具中正常工作,需要用智能手机QQ扫码自动更新新体验。但由于没有公测资格证书,我们暂时是没办法新体验了。 嗯,就这点不够爽,没有公测应邀。 我的同事还写了另外3个demo的「小流程教程」,大家也能看看。COS第一类储存服务(Cloud Object Service)是百度云面世的面向企业和个人开发人员提供的高可用,高稳定,强安全的云端储存服务。能将任一数量和形式的非结构化统计数据放入COS,并在其中同时实现统计数据的管理和处理。
Page({
// 前往快照页
gotoAlbum() {
wx.navigateTo({ url: ../album/album });
},
});
sudo service nginx reload
sudo service nginx restart
cd /data/release/qcloud-applet-album
module.exports = {
// Node 监听的端口号
port: 9993,
ROUTE_BASE_PATH: /applet,
cosAppId: 填写开通 COS 时分配的 APP ID,
cosSecretId: 填写密钥 SecretID,
cosSecretKey: 填写密钥 SecretKey,
cosFileBucket: 填写创建的公有读私有写的bucket名称,
};
pm2 start process.json
上一篇:云合作开发探析——更方便快捷