2017-02-23 14:06:25 gizwits_csdn 阅读数 9430
智能硬件APP开发,通常分三种形式, Andriod、ios、H5,而常见的H5开发常见的又属 APICloud SDK、微信应用开发。有的开发者,本身擅长移动端语言开发、或者是会使用常见的开源框架,便选择写原生APP或者是混合APP

下面带大家来看看,如何为智能硬件写微信应用开发。
1、需准备的工具:
  • 公众号的原始ID
  • 设备的二维码
  • 一台设备

注意,不能申请订阅号(不支持微信认证)。我们将申请一个服务号,并且完成认证操作,然后才能开启“设备功能”模块,最后添加一个产品。

2、设备绑定

3、业务服务器的搭建

——————详细概述————————

1、准备好工具后:
  • 公众号的原始ID
  • 设备的二维码
  • 一台设备


你得有台设备吧?

微信接入前,需保证,设备能正常地与机智云进行通讯,设备的具体开发流程如下。

Alt text

注意,在WIFI模块中,写入AirKiss时,需要配置公众号的原始ID。也就说,除了将机智云的product_key写入MCU以外,还需要将公众号原始ID写入WIFI固件中。关于固件的烧录,厂商或者小伙伴们如有困难,可以寻求机智云 · 客服MM的帮助。

设备二维码

微信客户端APP可以通过扫描二维码添加设备。设备二维码相关信息请点击这里。设置内容如下:

Alt text

设备授权

设备不但要在WIFI固件中写入公众号原始ID(注意,不是APPID),还要将所有设备的Mac地址,登记到微信服务器上。一开始,微信只给你100个配额,也就是说,你只能授权100个设备。

授权的方法,就是向微信的接口,发送一次请求,具体请看微信文档-设备授权。

很多小伙伴反应,授权经常失败,我们这里给出一组基于WIFI通讯的示例,大家可以参考:

Alt text

注意:12位xxxxxxxxxxxx,代表设备的Mac地址,id是指设备ID,也就是机智云的did。但因为设备必须在上线后,机智云才会分配一个did,所以,我们并无法预知did是什么。通常的做法是:将id和mac,都设置为设备的Mac值。

auth_key可以不填,设置为空字符串,但不能没有这个字段。

op_type为0时,表示添加一台设备,后面需要跟着product_id字段(产品ID,在公众号的“设备功能”中,添加产品后,会有这个id)。op_type为1时,表示更新一台设备,此时不需要product_id字段。

批量授权时,记得更新顶部的:device_num。

这样,我们硬件(设备)层面的准备工作,就完成啦。

阶段性成果

好了,到这步,你可以稍微的奖励一下自己,享受一下阶段性的成果啦!

打开你的微信(确保是wifi链接状态),扫一扫你的产品二维码。

Alt text

下面有两个按钮,绿色的按钮,是启动微信的AirKiss,将WIFI的账号密码,发送给设备的WIFI模块。

部分设备需要启动匹配模式,才能配置上网。一般先启动设备的匹配模式,再使用微信的配置功能。配置完成后,会自动跳转到设备搜索界面。

在搜索界面,如果前面准备工作到位了,你一定能发现设备(不管是否绑定过)。点击发现的设备,然后绑定。微信会自动跳转到公众号页面。然后,你可以在微信的设置页面中,发现多了一个项目:设备。

当然,上面的操作,只是实现绑定操作。下面的教程将介绍如何监控设备的数据点。

简化操作的SDK

为了简化开发者的操作,我们将一些必要的API封装成了两个SDK: java-SDK 以及 js-SDK。它们分别用于后台和前端页面,各自封装了机智云的OpenAPI 以及 WebSocket。

这两个SDK,将大大的简化了API的操作,帮我们接管了token和用户管理,我们只需要调用相关方法,即可实现设备的绑定和解绑。

SDK,可以在本文的附件中下载。

业务服务器的搭建

设备没问题了,我们现在需要的是,操控设备本身的功能。

由于设备已经与机智云正常的通讯,因此,对设备的操作,其实就是如何与机智云交互。

机智云设备绑定

现在,用户已经在微信中绑定了设备,他希望看到,设备在线状态。怎么办?

我们使用微信的OpenId,作为唯一标识,生成匿名用户。什么时候注册匿名用户呢?微信绑定设备时候,将推送一条设备绑定事件消息到我们的业务服务器。我们在这个时候,将同时完成注册匿名用户,以及绑定用户/设备的操作。

Alt text

微信在绑定时,发送这么一条事件消息:

Alt text

我们需要的是其中的OpenID和Mac,然后我们调用机智云的Java-SDK:

DeviceInfo deviceInfo = OpenApi.bindDevice(
wechatOpenId,
gizwitsAppId,
gizwitsProductKey,
gizwitsProductSecret,
mac,
deviceAlias,
deviceRemark)
参数名 类型 说明
wechatOpenId String 微信中的OpenId,也就是机智云中注册的匿名用户
gizwitsAppId String 机智云产品所绑定的APP的id
gizwitsProductKey String 机智云的产品key
gizwitsProductSecret String 机智云的产品Secret
mac String 设备的Mac地址
deviceAlias String 设备的别名
deviceRemark String 设备的备注

这个方法,一次性解决了两个问题:注册匿名用户,绑定用户/设备。相对的,也要设定很多参数。所有的参数都是String类型。

其中deviceAlias(设备别名)以及deviceRemark(设备备注)都可以填空字符串“”。gizwitsProductKey就是你在开发者中心创建的产品。

Alt text

而gizwitsProductSecret,则是该产品对应的密匙,在产品的详细信息中可以找到。

Alt text

gizwitsAppId是机智云中,APP的Id。由于一个产品,可能是多个APP操作的,比如IOS的APP,Android的APP,网站Web应用,甚至微信这样的轻应用,都算是一个APP。因此,在创建产品后,你还可以在为产品绑定一个或多个APP。这里的gizwitsAppId就是我们所绑定APP的Id了。注意,APP必须绑定在产品上,才能使用。

当你调用该方法,就能实现注册匿名用户,已经将用户/设备绑定的操作了。是不是很方便呢?当然,为了方便起见,你还可以进一步封装这个SDK。这里就不展开了。

机智云设备解绑

解绑操作也是类似的逻辑。当微信推送一条解绑事件消息,我们就会进行解绑操作。同样调用SDK:

Boolean isSuccess = OpenApi.unbindDevice(wechatOpenId, gizwitsAppId, gizwitsDid);
参数名 属性 说明
WechatOpenId String 微信中的OpenId,也就是机智云中注册的匿名用户
gizwitsAppId String 机智云产品所绑定的APP的id

获知设备的在线状态

Boolean isOnline = OpenApi.getDeviceOnlineStatus(wechatOpenId, gizwitsAppId, gizwitsDid);
参数名 属性 说明
wechatOpenId String 微信中的OpenId,也就是机智云中注册的匿名用户
gizwitsAppId String 机智云产品所绑定的APP的id
gizwitsDid String 机智云中的设备ID,对应Mac,设备重置时会重新注册

代码样例

Alt text

请注意,在服务器部署的时候,部分开发者会发现部署失败。tomcat中的catalina日志会报错:

javax.net.ssl.SSLException:java.security.ProviderException:java.security.KeyException

这是因为SDK中采用了Https的方式进行访问。

解决方法是:升级服务器环境中的库:nss。

微信页面操作设备

好了,我们现在已经绑定了设备,并且也能知道设备的在线的状态了。但是具体如何操作我们的设备?一个良好的体验,当然是具有交互页面的。
下面我们就一步步的搭建一个交互页面,来监控我们的设备吧!

获取OpenId

用户点击页面,我们如何知道是哪个用户呢?我们需要获取当前用户的OpenId来识别时哪个用户。如何获取呢?详细可以看微信的官方文档。

简单的来说,我们向微信的服务器发送授权请求,微信会判断我们请求的URL,是否是授权的域名,如果验证通过,就会转发到我们的URL,并且带上几个参数。

其中最重要的参数,是code,我们通过Code可以获取OpenId。然后,我们再将OpenId返回到页面中。

Alt text

连接机智云的WebSocket

对于访问机智云的WebSocket,我们已经封装成了一个JS-SDK。大家只需要引入到页面即可。

初始化gizwits服务

首先是,构建一个gizwits服务:

Alt text

这个gizwits服务,会负责接下来所有的操作,包括:连接设备,读取设备的数据点,操作设备等。

参数名 属性 说明
ApiHost String websocket的目标API域名
CommType String 协议格式:custom(自定义协议); attrs_v4(标准数据点协议)
wechatOpenId String 当前访问的微信用户OpenId
GizwitsAppId String 机智云产品所绑定的APP的id

当然,此时gizwits服务,并没有运行起来,我们还需要初始化操作。但在操作之前,我们可以选择配置一个回调函数,它会在初始化结束后,自动运行。

Alt text

当执行gizwits.init()的时候,就会初始化gizwits服务,并且将匿名用户OpenId绑定的所有设备,放置在回调函数的devices中。

而我们要做的操作,都应该写在回调函数gizwits.onInit里面。

devices列表中的每个设备,都会有六个属性,分别是product_key(产品的Key), dev_alias(设备别名),did(设备ID),mac,is_online(在线状态), remark(设备备注)。我们可以根据情况来使用。

设备列表

Alt text

上面的操作中,我们已经获取到了设备列表。一般来说,客户可能拥有多个设备,因此,我们在这一步,就可以罗列一个设备列表,由用户自己决定,来操作哪台设备。

连接设备

想要操作具体哪台设备,我们就去连接哪台设备:gizwits.connect(did)。当然连接成功后,也有一个回调函数:gizwits.onConnected。此回调函数没有传入值。

注意,连接设备之前,必须先初始化。

初始化和连接设备,并非同步操作,因此,如果只是简单的先后执行,可能会出错。因此,建议可以将连接设备的操作,放在初始化的回调函数中,保证执行的先后关系。

连接成功后,我们就可以收到设备上报的数据了。上报的数据通过回调函数:gizwits.onReceivedAttrs。该回调函数会有一个回调值(参数),这个回调值的格式如下:

Alt text

上面的操作中,我们已经获取到了设备列表。一般来说,客户可能拥有多个设备,因此,我们在这一步,就可以罗列一个设备列表,由用户自己决定,来操作哪台设备。

连接设备

想要操作具体哪台设备,我们就去连接哪台设备:gizwits.connect(did)。当然连接成功后,也有一个回调函数:gizwits.onConnected。此回调函数没有传入值。

注意,连接设备之前,必须先初始化。

初始化和连接设备,并非同步操作,因此,如果只是简单的先后执行,可能会出错。因此,建议可以将连接设备的操作,放在初始化的回调函数中,保证执行的先后关系。

连接成功后,我们就可以收到设备上报的数据了。上报的数据通过回调函数:gizwits.onReceivedAttrs。该回调函数会有一个回调值(参数),这个回调值的格式如下:

Alt text

手动读取:设备数据点

获取设备的数据点,也很简单,只需调用gizwits.read()方法,不需要任何参数。调用此方法,可以马上获取一次,同样,数据也是通过回调函数 gizwits.onReceivedAttrs,或者gizwits.onReceivedRaw来获取。

连接错误

当websocket连接错误时,会调用gizwits.onError函数,如有需要,可以重写该函数;回调值是错误信息:

gizwits.onError = function(value){
console.log("error!!!!:::::", value.toString());
}

设备上下线

当设备发生上线,或者下线的事件时,gizwits服务,会调用gizwits.onOnlineStatusChanged 回调函数.

回调值有两个参数:did和在线状态(is_online)。

gizwits.onOnlineStatusChanged = function(value) {
alert("设备上下线通知,did=", value.did);
alert("设备上下线通知,is_online=", value.is_online);
}

控制设备

最后是,设备的远程控制。

远程控制的调用方法,如果commType=custom,则使用gizwitsws.send(command)方法,如果commType=attrs_v4,则使用gizwitsws.write(command)方法。

远程控制的值,如果commType=custom,请输入p0,例如[,,…];如果commType=attrs_v4,请输入datapoints,例如{“power”:true}。

下面是远程控制RBG灯的代码样例:

var command = '{"LED_R": 0, "LED_G": 0, "LED_B": 0}';
gizwits.write(did, JSON.parse(command));

当然,使用控制设备的前提是,我们已经连接上了一台设备。

结语

至此,我们已经实现了微信接入的核心部分。在此教程中,Java-SDK与js-SDK为我们带来了很大的,我们几乎不用关心如何调用机智云的API和websocket,而是直接调用SDK的方法就可以了。

最后,希望大家能多多反馈意见,为更加便捷的开发贡献一份力量。


2016-11-01 16:29:23 herion_liu 阅读数 0

一直想着将自己在开发APP微信支付的经验写出来,最近一直忙着项目就搁置了。今天先把微信支付的接口步骤梳理了一下,供大家参考。

APP的微信支付接入主要有以下几个步骤:

  1. 注册并认证

    注册开放平台(open.weixin.qq.com)账号,通过开发者资质认证;提交APP基本信息,通过开放平台应用审核

  2. 填写资料

    商户需提供以下4项资料

    1. 经营类目以及对应经营资质

    2. 企业联系信息

    3. 企业银行账户等信息

    4. APP下载地址或页面截图

    其他信息诸如企业法人信息、营业执照、组织机构代码证等将直接从微信开发者认证资料中获取,无需重新填写

  3. 商户验证

    在资料提交后,微信支付会向您的结算账户中打一笔数额随机的验证款。待资料审核通过后,查收款项,登录商户平台(pay.weixin.qq.com),填写款项数额,数额正确即可通过验证

  4. 签署协议

    验证通过后,在线签署线上协议

  5.  功能发布

    开发完成之后,APP内即可调用微信支付模块,发起支付

具体的微信接口开发,后面我会逐一进行分享

2014-03-10 15:21:32 u014019422 阅读数 0
         微信已成生态,这早已不是秘密。如何从这个生态上赚到钱,同时又能找到避免被腾讯“微创新”的方法是无数创业者努力的方向。为大家分析盘点十大基于微信开发的火爆应用,让我们一起看看这批创业者是如何追赶这张移动互联网时代的船票的?


  10、微擎——发动微信创业者商业模式的引擎。名思义就是微信引擎的意思。创始团队早早看到了微信应用开发市场的潜力,为了减少开发者的难度,打造了一个微信开发素材与原型平台,用户可以在这里免费下载开发模版和文档。它对于很多创业者来说,就如同汽车的引擎一样,拖着无数微信创业者的商业模式向前奔跑。


  9、微盟——帮助企业实现“傻瓜式”的微信营销。微盟等产品率先看到了这个机会,推出了自有的平台,用户只需要按照指定步骤就可以快速生成规格统一(皮肤可以不同)的微网站。通过自己的后台发起微活动、向粉丝发行或贩卖会员卡,实现微推送(就是向周围特定范围内,一定时间段里出现的人推送信息等。


  8、微信聊天助手——聊天从此不再寂寞。一款集合文字、图片、语音搜索引擎的手机聊天辅助系统,它能实现实时热词24小时动态更新,目前支持微信开放平台,腾讯微博,新浪微博,手机短信,手机邮件,及其他任何手机屏幕上的文本框。


  7、微拍——让用户在移动互联网时代重新发现自己的美丽。它最终成为了具有社交属性的社区,一方面得益于它沉淀了照片和视频,有美女在的地方,必有男性用户。其次,它也可以与附近的人进行聊天,功能同陌陌一样。


  6、微打车——用户通过微信叫车叫出来的独立打车APP。微打车这款应用最早发端于微信,创业团队基于微信的公共账户接口,做了第三方开发,用户在这个平台上叫车不需要下载软件,省时间省流量。其打车的过程和模式酷似嘀嘀打车。该团队如今已经从微信生态外,发展出独立的APP产品,在上海、北京等地谋求发展中。


  5、微信墙——让我们的沟通。参加过不少会务的朋友都有印象,在会议的现场往往安排有一面专门的播放微博的墙,专门供场内外参会的朋友表达意见,参与互动。随着我们进入微信时代,人们往往会在现场的微信群中进行互动,很多时候大家有建立一块大屏幕进行传播的需求,微信墙就是解决这个问题的。


  4、群友通讯录——认识群友,从我开始。可能出现这样的情况,就是大家聊了很久,就是不知道彼此的真实情况,这时候在群内设立一个群友通讯录就很有必要了,用户只需要关注“群友通讯录”的微信公共账户,就能发起这个应用,让群友去填写和交换个人信息。


  3、互动吧——微信上的活动聚合器。人们通过互动吧这款产品,可以轻易地在微信、QQ、微博等社交平台一键发布投票、活动、签名、文章、寻人寻物、我问你答、二手买卖、房屋租赁、招聘求职等互动信息,还可以轻松实现跨平台统一管理,收效回收参与活动的用户信息。


  2、微库——让你的微信互动个性无穷。相比于微盟等产品致力于企业在微信上的营销解决方案,微库这些产品更加注重依托自己的第三方后台技术,帮助委托企业,搞好客户维护和客户互动体验。目前来看潜力巨大,这类产品的未来不是互联网化,而是智能化。


  1、微店——也许我们会引来一个社交网商的时代。微信上如何卖东西曾经是一个一度让人抓狂的问题,很多创业者拥有海量的粉丝和号召力就是无法变现。微店有三大优点。第一,操作简单,无需任何手续费,直接在手机上开店。第二,打通了多种支付工具。第三,基于社交网商的逻辑打造的微店,微店手机店长的营销成本低。
2020-04-29 11:34:46 u013774595 阅读数 710

uni-app开发微信小程序

1. 配置开发环境

uni-app基于Hbuilder、微信开发者工具开发
下载链接: https://www.dcloud.io/
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

全部安装好后,首先配置Hbuilder

文件-新建-项目
3771586942935_.pic_hd.jpg
选择uni-app后填写项目名称,选择文件目录,我这里直接选的默认模版自己开发。
3781586943053_.pic_hd.jpg
填入appid,需要提前在申请好,最好记录在个人电脑内,以免忘记。
3791586943517_.pic_hd.jpg
安装需要的插件 例如编译less、sass、语法校验等,选择工具-插件安装
3871586945792_.pic_hd.jpg

微信开发工具

设置-安全设置
3801586943720_.pic_hd.jpg
开启端口,记录下端口号
3811586943749_.pic.jpg
再转到Hbuilder
选择运行-运行到小程序模拟器-运行设置
3821586943946_.pic_hd.jpg
填写外部web服务器点用URL(端口号是微信开发工具安全设置内的),选择微信开发工具的安装路径
3831586944066_.pic_hd.jpg
全部配置好后,选择运行-运行到小程序模拟器-微信开发者工具,程序会自动调出微信开发工具
3861586944798_.pic_hd.jpg

下篇文章 - 添加路由守卫

2019-10-25 13:38:13 weixin_44670973 阅读数 301

基于UNI-APP开发微信小程序的基本流程

1/申请微信小程序账号

申请微信小程序的两种途径:

  1. 通过公司微信服务号进行申请(推荐)。
    通过公司微信服务号申请微信小程序可免认证,节省费用300元,同时审核周期更短。
    申请地址:进入公司微信服务号(登录时需要管理员认证)点击小程序管理快速注册 并认证小程序根据提示进行后续操作(需要提供未绑定任何微信服务端的邮箱)
    微信公众平台登录地址:微信公众平台入口

  2. 通过个人邮箱申请(不推荐)。
    通过个人邮箱(需提供未绑定任何微信服务的邮箱)申请微信小程序。根据注册提示完成信息录入。通过此种方法注册的微信小程序无法调用微信的高级接口,如微信支付,视频直播等。需要条用此类接口需要进行小程序认证。需提供企业营业执照,对公账号等信息,认证费用300元或企业小额打款验证。
    独立小程序注册地址:小程序申请地址

2/微信小程序开发前准备

获取小程序APPID,APPSERECT

小程序注册成功,通过微信公众平台登录地址:微信小程序入口
进入小程序。在</>开发开发者设置里获取到APPID(小程序ID)以及AppSecret AppID和AppSecret非常重要是后续开发的重要凭证。

配置域名白名单

在开发者设置里完成服务器域名配置(域名白名单)不在域名白名单里的URL资源正式上线后将无法访问。开发时若没有,此配置可展缓设置。
注意:域名必须是HTTPS协议,服务器TLS1.2及以上

基本信息设置

在设置里完成小程序的通用配置,入名称,行业,头像等,按要求配置即可。

开发人员,体验人员配置

在管理成员管理下添加开发人员(主要是协同开发,以及让相关用户可以使用体验版本),权限什么的按要求配置即可。

注意:添加开发者和体验人员需要通过微信号搜索,如果微信号正确,但是搜索不到,则可能是对方关闭了微信的通过微信号添加好友功能。解决办法:联系对方在微信手机端操作:点击我设置隐私添加我的方式开启允许通过微信号添加。设置完成后再次通过微信号搜索添加开发人员或体验人员。

3/微信小程序开发工具

  1. HBUIDER-X (编辑器)下载地址:下载
  2. 微信开发者工具(预览、代码调试)下载地址:下载
  3. 开发工具配置
    将微信开发者工具和HBuiderX绑定,将浏览器与HBuiderX绑定。HBuiderX点击工具设置运行配置对应位置输入浏览器安装路径微信开发者工具安装路径。
    配置

4/微信小程序开发步骤

  1. 新建uni-app项目:HBuiderX 文件新建项目UNI-App项目
  2. 参考uni-app官方文档及相关实例进行程序功能开发
    Uni-app官方文档:uni-app官网
  3. 程序在微信开发者工具运行测试:HBuiderX点击运行运行到小程序模拟器微信开发者工具
    注意:若是程序运行失败,请调试程序,若是无法打开开发者工具请检查是否将微信开发者工具和HBuiderX绑定。此外需要在初次启动微信开发者工具时在设置代理设置里将代理设置为使用系统代理、安全里开启服务端口。配置完成后关闭微信开发者工具,重启HBuiderX再次运行步骤3.
    在这里插入图片描述
  4. 微信小程序调试说明:
    【情形一】如果调试期间后台服务器不是https协议,或者服务器域名不在微信小程序后台域名白名单内,可在微信开发者工具里点击详情本地设置勾选不校验合法域名、web-view(业务域名)、TLS版本以及https证书
    在这里插入图片描述
    【情形二】无法启用预览和真机调试:请在详情基本信息中填入小程序的APPid
    注意:预览和真机测试人员必须在微信小程序的开发者列表内,详情见上文描述。

5/微信小程序版本发布

小程序业务功能开发完毕后可提交发布,发布前需要做如下准备:

  1. 配置域名白名单,参见配置域名白名单
  2. 在HBUIDERX里面完成APPID和APPSERECT绑定(这样在预览或真机调试时无须每次都输入APPID)在HBUIDERX里点击发行小程序(微信)填写小程序名字和小程序APPID,小程序APPID获取参见获取小程序APPId、APPSerect
  3. 将程序运行在微信开发者工具,调试无误后(确保实在未勾选不校验合法域名、WEB-VIEW(业务域名)、TLS版本及HTTPS证书的前提下程序运行正常,参见小程序调试说明)点击上传。
    程序上传完毕后,使用注册微信小程序的邮箱登录到微信小程序管理后台,点击管理版本管理查看刚才上传的版本,可将上传的版本设置为体验版(仅开发人员和体验人员可用,相关人员配置见开发人员,体验人员配置)
    微信小程序入口:小程序登录入口
  4. 发布正式版,选择要发布的版本提交审核,初次提交按照要求填写表单,完成提交。提交后等待微信官方审核。初次提交审核,审核时间较久(3—7个工作日),以后版本更新提交审核则审核相对较快。审核成功后需要进入当前界面手动发布。发布之后社会用户就能在微信上搜索到相关小程序了。

6/学习参考文档

微信小程序开发文档

【参考】主要学习其 API,开发技巧及语法参看uni-app
地址:微信小程序开发文档

UNI-APP开发文档

【重要】主要学习其基础组件的使用,语法,Api及开发规范
地址:UNI_APP开发文档

Vue开发文档

【重要】uni-app基于vue的语法和规范,主要学习vue的指令,组件开发, 组件间通信,动态样式绑定等
地址:Vue.js

扩展

【微信云开发】地址:微信云开发文档
【vuex】地址:vuex