在1.2.3 IoT Studio移动端温湿度远程监控中,我们通过IoT Studio平台创建了一个可以远程监控的Html5监控网页,本小节借助阿里云小程序开发工具,把该网页嵌入钉钉小程序。
我们可以从支付宝开放平台、钉钉开放平台或阿里体系其他开发平台下载小程序开发工具。下载对应平台版本的安装包后,可以一键安装,安装完毕后运行的界面如图1.4.14所示,可以看出这是小程序开发矩阵,涵盖了阿里旗下所有主流App。
● 图1.4.14 阿里体系小程序开发者工具
1.云端钉钉小程序创建和配置
第一步我们需要做的是绑定公共域名,把1.2.3节IoT Studio移动端温湿度远程监控做的IoT Studio移动页面发布出去。
在IoT Studio移动应用的应用设置页面添加域名列表,比如“http://iotstudio.yfiot.com”(如图1.4.15所示)。CNAME解析这步比较关键,需要把iotstudio.yfiot.com和IoT Studio为本应用生成的“a121rpyjc5vgykit.vapp.cloudhost.link”链接建立绑定关系。
登录所属的域名管理的后台,进行域名设置(如图1.4.16所示)。
第二步,登录钉钉开放平台,创建企业内的一个小程序应用(无须审核,上传后企业内部人员即可使用,比较方便),比如创建一个“IoTStudioTest”的应用。创建完毕后,进入这个应用的配置页面,单击进入“安全中心”选项卡,设定Webview安全域名(如图1.4.17所示)。
● 图1.4.15 添加域名列表
● 图1.4.16 CNAME记录填写
● 图1.4.17 设定Webview安全域名
2.本地钉钉小程序开发
我们用图1.4.13所示的小程序开发者工具,创建一个钉钉小程序应用,并修改入口index.axml文件,填入相应域名(如图1.4.18所示)。
● 图1.4.18 设定Webview安全域名
Webview中的源地址有一个需要特别注意的地方,直接填写“http://iotstudio.yfiot.com”,在IDE环境中可以正常访问,但是真机调试环节或者发布后,在钉钉中查看,会有页面访问受限的提示(如图1.4.19所示)。
● 图1.4.19 页面访问受限
有一个小技巧,先用浏览器输入“http://iotstudio.yfiot.com”,浏览器经过解析后,URL地址栏会自动出现类似这样的URL链接名称“http://iotstudio.yfiot.com/page/614384”,我们在Webview的源地址中填写这个URL即可。
程序编写完毕并编译后,单击“发布”按钮(需要绑定已经创建好的小程序IoTStudioTest)发布该小程序(如图1.4.20所示)。
钉钉平台里的小程序入口比较深,企业内小程序可以这样进入,打开钉钉,进入“通信录”页面,找到对应的公司,单击“管理”按钮,进入企业管理页面,在“应用管理”栏中单击“应用&模板”按钮,然后切换进入“自建应用”页面,就可以看到已经发布的小程序了,然后单击运行即可(如图1.4.21所示)。
● 图1.4.20 发布小程序
● 图1.4.21 打开小程序