支付宝小程序物联网开发

支付宝小程序开发

现在我国主流的小程序分别是腾讯的微信小程序，以及阿里的小程序,抖音和快手现在也有自己的小程序系统。

在阿里的小程序中又分：支付宝小程序，香港版支付宝小程序，淘宝小程序，钉钉小程序，高德小程序，mpaas小程序，天猫小程序，支付宝iot小程序。在阿里个小程序中这些分类只是应用平台以及场景的不同，开发方式基本一致。

在进行支付宝小程序开发时，首先要进入支付宝小程序开放平台创建小程序

https://mini.open.alipay.com/channel/miniIndex.htm

 

点击立即进入后会看到两种小程序摸索，免研发，与自主研发，我们需要选择自主研发

此时会进入一个新的页面，在这个页面中点击最右边的创建按钮在平台中创建一个小程序应用。

创建并进入应用后可以看到下载开发工具按钮，下载并安装开发工具，安装好后打开

点击支付宝，选择小程序，然后点击右侧的带加号的空白项创建小程序项目

项目名称自定义，可以使用中文，然后选择项目创建的路径，后端服用暂时不需要选择不启用云服务，如果需要小程序的后端服务的话需要购买小程序的服务器。然后点击完成进入项目中，此时就可以进行开发了。

app.acss是全局作用样式，再有两个页面需要的样式相同时可以使用，app.js是全局作用的功能代码文件，package.json用于声明个页面文件的路径  

首先打开pages文件下的index文件选择选择并双击打开index.axml文件，在这个文件中编写要展示给用户的内容，注意只有写在view标签中的内容才能展示出来，如：

<view class="tit">

叶帆科技

</view>

显示效果

其中Class是显示内容效果样式的引用，也就是class="tit" 其中tit是指向样式文件中的具体内容，index.acss就是样式文件。下面是指向的样式文件tit中的内容

.tit{

width: 100%;

height: 40px;

font: bolder 24px "黑体";

color: azure;

text-align: center;

line-height: 40px;

background-color: blueviolet

}

在样式文件中，以“.”开头的的类样式，也就是通过class=””来引用的，而以#号开头的则的id样式，需要id=””来引用，类样式可以被多次引用，而id样式只可以被引用一次。

下面是以及编写好的index.axml内容

<view style="width: 100%">

<view class="tit">

叶帆科技

</view>

<view>

<form onSubmit="onSubmit">

<view class="viInp">

<view class="wen">产品名：</view>

<view class="inVal">

<input placeholder="请输入产品名" class="inp" name="productName"/>

</view>

</view>

<view class="viInp">

<view class="wen">设备名：</view>

<view class="inVal">

<input placeholder="请输入设备名" class="inp" name="deviceName"/>

</view>

<view>

<view class="viInp">

<view class="wen">标识符：</view>

<view class="inVal">

<input placeholder="请输入所需设备属性标识符" class="inp" name="identifier"/>

</view>

<view>

<button size="default" type="primary" form-type="submit" class="but">提交设备信息</button>

<button size="default" type="ghost" form-type="reset" class="but">重置</button>

</form>

</view>

<view>

<view class="read">

<view class="readInfo">

设备当前读数:

</view>

<view class="con ma">

<view>

{{deNa}}

</view>

<view>

{{deValue}}

</view>

</view>

</view>

<view class="cont">

<view class="conterl">

设备控制:

</view>

<!-- <view class="tishi">

请输入设备信息并点击查询数据后在进行设备控制

</view> -->

<view class="con ma1">

<view class="switch-item">

开<switch checked onChange="switch1Change" aria-label="{{true}}" />关

</view>

<view class="tex">

设备状态：{{st}}

</view>

</view>

</view>

</view>

 

</view>

 

然后是index.acss内容：

.tit{

width: 100%;

height: 40px;

font: bolder 24px "黑体";

color: azure;

text-align: center;

line-height: 40px;

background-color: blueviolet

}

.inp{

width: 95%;

height: 40px;

border-bottom:solid lightsteelblue 2px;

background-color: #f7f7f7

}

.but{

margin-top: 10px;

}

.con{

text-align: center;

font: bolder 24px "黑体";

color: black;

height: 100px;

}

.ma{

padding-top: 10%;

}

.ma1{

padding-top: 5%;

}

.wen{

font: bolder 22px "黑体";

width: 90px;

display: inline-block;

height: 50px;

line-height: 50px;

vertical-align: middle

}

.viInp{

text-align: center

}

.inVal{

display: inline-block;

text-align: left;

height: 50px;

vertical-align: middle

}

.tex{

margin-top: 5%

}

.tishi{

text-align: center;

color: lightseagreen;

height: 30px;

line-height: 30px;

background-color: seashell

}

.readInfo{

color: white;

height: 40px;

line-height: 40px;

font: bolder 22px "黑体";

padding: 10px 0px 0px 10px;

}

.conterl{

color: white;

height: 40px;

line-height: 40px;

font: bolder 22px "黑体";

padding: 10px 0px 0px 10px;

}

.cont{

background-color: cornflowerblue

}

.read{

background-color: cadetblue

}

然后进入index.js文件中在page中加入data，并添加一些内容

Page({

data:{

deNa:"无",

deValue:"0",

st:"关",

switch1:false,

},

});

在此处data中的内容可以在index.axml中通过{{}}获取到，如上面我们定义了daNa:”无”,在index.axml中使用{{daNa}}，就可以将无字显示出来，data中的数据可以实现前后数据交互：效果如下

<view>

{{deNa}}

</view>

接下来通过调用阿里云物联网提供的api接口获取设备数据，首先进入如阿里云物联网平台

https://www.aliyun.com/product/iot-deviceconnect?spm=5176.12825654.eofdhaal5.16.71a12c4acRFt4q&aly_as=qjGIfHkD&accounttraceid=dda517e0ab974de48d00c508505513bahmob

登录并进入控制台，在控制台中找到物联网平台进入，点击右侧的设备管理，选择产品，创建一个新产品，在创建好的产品中点击功能定义，选择下方的自定义功能，然后点击添加自定义功能

这里我创建了两个功能，温度1 和风机2。

然后点击最左侧的设备，添加一个新设备与，添加到刚刚创建的产品下。

然后将鼠标移到到右上角，简体中文文字旁边的头像上，在弹出的对话界面中点击accesskeys进入用户信息管理页面，点击继续使用accesskey，然后点击显示

如果没有这一项可以点击右边的创建accesskey创建一个

然后打开切换到小程序开发工具，进入app.js页面添加

getAKSK:{

AccessKeySecret:"****************",

AccessKeyId:"********"

}

*号位置为刚刚在阿里云上看到的accesskey

然后创建两个新文件夹，分别为lib，alibaba，在lib中创建一个core.js的文件，文件中放入HMAC计算方法以及Base64转码方法。在alibaba中放入阿里云接口调用时的签名方法以及相应的公共参数。

将签名文件引入index.js文件中，然后在index.js中写入具体的功能方法

在onload页面加载中放入定时器使设备数据提交后可以没各一段时间自动调用设备信息获取方法获取一次设备数据，将最新的设备数据显示在页面上。

在调用阿里云物联网api接口时需使用my.request方法，类似与jquery中的ajax，目前只支持 https 协议的请求。官方说明链接

https://docs.alipay.com/mini/api/owycmh

示例：

my.request({

  url: 'https://gw.alipayobjects.com/mdn/miniapp_de/afts/img/A*G1kWSJbe2zEAAAAAAAAAAABjARQnAQ',

  method: 'GET',

  dataType: 'base64',

  success: (resp) => {

    console.log('resp data length', resp.data.length);

    console.log('resp data', resp.data); // 返回格式类似于：data:image/png;base64,iVBORw0KG...

  },

  fail: (err) => {

    console.log('error', err);

  },

 

通过接口获取数据后使用this.setData({获取到的数据})将数据显示在前端页面中。

在前端通过form表单，将用户输入的设备信息提交到后台中，后台对信息进行暂时存储，并获取一次设备信息，开启定时获取设备信息功能。

index.js代码如下：

var common = require('../../alibaba/aliAPI')

var productName=null;

var deviceName=null;

var identifier=null;

var i=0;

var dn="无";

var dv="0";

//记录this内容，解决方法之间传递this内容时丢失问题

var ts="";

var tag=0;

Page({

data:{

deNa:"无",

deValue:"0",

st:"关",

switch1:false,

},

onLoad(query) {

// 页面加载

console.info(`Page onLoad with query: ${JSON.stringify(query)}`);

var TimerId = setInterval(this.resolve, 3000);//定时任务

},

//解决定时器不能执行带参的问题

resolve:function() {

deviceInfo(ts);

},

 

onShareAppMessage() {

// 返回自定义分享信息

return {

title: 'My App',

desc: 'My App description',

path: 'pages/index/index',

};

},

 

//获取提交的表单信息，并更具信息获取设备数据

onSubmit(e){

productName=e.detail.value.productName;

deviceName=e.detail.value.deviceName;

identifier=e.detail.value.identifier;

i=1;

ts=this;

deviceInfo(ts);

/*productName="a1WTVz5CJ7Z";

deviceName="OkVofuqjWeUI1eGBe8gt";

identifier="feng2";*/

},

 

//重置表单信息

onReset(){

var productName=null;

var deviceName=null;

var identifier=null;

var i=0;

},

 

//开关功能

switch1Change(e){

console.log('switch1 发生 change 事件，携带值为', e.detail.value);

ts=this;

this.setData({

switch1:e.detail.value

})

if(productName!=null){

if(e.detail.value){

deviceSet(ts,1);

}else{

deviceSet(ts,0);

}

}else{

my.alert({

title: '非法操作',

content: '请先输入设备信息,并点击查询数据后,在进行设备控制',

});

}

}

});

//设备信息获取

function deviceInfo(that){

if(i==1){

var da = {

"RegionId": "cn-shanghai",

"ProductKey": productName,

"DeviceName": deviceName

}

//调用接口名

var apiName = "QueryDevicePropertyStatus";

var PostData = common.getApiData(apiName, da);

my.request({

url: 'https://iot.cn-shanghai.aliyuncs.com/',

method: 'GET',

data: PostData,

dataType: 'json',

success: (res) => {

if (res.data.Success) {

for (var i = 0; i < res.data.Data.List.PropertyStatusInfo.length; i++) {

var data = res.data.Data.List.PropertyStatusInfo[i];

if (data.Identifier == identifier) {

var deNa=data.Name;

var deValue=data.Value + data.Unit;

var deValue=data.Value;

var switch1=false;

var st="关";

if(deValue==1){

var st="开";

switch1=true;

that.setData({

st,

switch1

});

}else{

st="关";

switch1=false;

that.setData({

st,

switch1

});

}

that.setData({

deNa:deNa,

deValue:deValue,

st,

switch1

})

}

}

}

},

});

}

}

//向设备发送信息

function deviceSet(that,i1){

var item="{\""+identifier+"\":"+i1+"}";

var da = {

"RegionId": "cn-shanghai",

"ProductKey": productName,

"DeviceName": deviceName,

"Items":item

}

 

//调用接口名

var apiName = "SetDeviceProperty";

var PostData = common.getApiData(apiName, da);

my.request({

url: 'https://iot.cn-shanghai.aliyuncs.com/',

method: 'GET',

data: PostData,

dataType: 'json',

success: (res) => {

console.log(PostData);

console.log(res);

if (res.data.Success) {

var st="关";

var switch1=false;

if(i1==1){

switch1=true;

st="开";

}

that.setData({

st,

switch1

});

ts=that;

my.showToast({

type: 'success',

content: '操作成功',

duration: 3000,

});

}else{

my.showToast({

type: 'fail',

content: '操作失败',

duration: 3000,

});

}

},

fail:(err) => {

console.log(err);

},

});

}

 

阿里云物联网api公共参数：

https://help.aliyun.com/document_detail/30561.html?spm=a2c4g.11174283.6.705.f6b416683ir7s9

阿里云物联网api签名机制：

https://help.aliyun.com/document_detail/30563.html?spm=a2c4g.11186623.6.706.7e8d47cdQREXOk

物联网api列表：

https://help.aliyun.com/document_detail/69893.html?spm=a2c4g.11186623.6.702.77293d29pIn6zK

小程序中使用的设备信息获取的api：

1.设备属性快照：

https://help.aliyun.com/document_detail/69593.html?spm=a2c4g.11186623.2.44.7e8431126PIbQO#reference-rgh-nrz-wdb

小程序中的相关代码

设置设备属性：

https://help.aliyun.com/document_detail/69579.html?spm=a2c4g.11186623.2.45.7e8431128DVaP6#reference-m2h-4rz-wdb

小程序中的代码

代码只是部分，缺少阿里云公签名字符串获取的功能，这个需要自己封装一下，在阿里云公共参数中有说明