物联网解决方案
返回列表 发新帖

[开源教程] 【跟我学】微信控制硬件之二:微信官方Demo开发环境搭建

[复制链接]
  • TA的每日心情
    开心
    2017-3-17 14:19
  • 签到天数: 2 天

    [LV.1]初来乍到

    12

    主题

    81

    帖子

    488

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    488
    QQ
    发表在  2017-3-8 11:31:35  | 显示全部楼层 | 阅读模式

    公开设备实时看 这是什么->

    20:57
    匿名用户
    通过微信查询温湿度
    20:52
    匿名用户
    通过微信控制多彩灯光
    20:52
    匿名用户
    通过微信控制多彩灯光
    20:52
    匿名用户
    通过微信控制多彩灯光
    20:52
    匿名用户
    通过微信控制多彩灯光
    20:52
    匿名用户
    通过微信控制多彩灯光
    20:52
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信查询温湿度
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:51
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
    20:50
    匿名用户
    通过微信控制多彩灯光
     

    马上注册,免费领取开发板,一周变智能硬件开发达人!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    安装工具下载地址:               可以参考官方开发快官方提供的相关开发工具包。
    参见百度网盘下载地址:https://pan.baidu.com/s/1jHBvUqq,密码: b77a
    如下图所示:找到“微信开发环境搭建工具”项下的压缩包进行下载即可

    _Y9Z4B[0PB6TO1]F${E7.png


    安装JDK提示:请使用jdk1.7以上的版本,推荐使用推荐的jdk1.7.0_80版本,附带的下载地址由于网速等其他原因下载不了时,请到Oracle官网进行下载http://www.oracle.com/technetwork/java/javase/archive-139210.html

    解压jdk安装包jdk1.7.0_80.zip压缩包解压到任意的盘符目录

    配置JDK环境变量找到 计算机→属性→高级系统设置→高级→环境变量

    7{}[I@S}A)]$XG%%WCVKOVL.png

    系统变量新建 JAVA_HOME 变量(配置到bin目录上一层即可)
      变量值填写jdk的安装目录(本人是 D:\jdk1.7.0_80)

    NNZS526HT_X(3M8}[X917[Y.png

    系统变量寻找 Path 变量编辑
    在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;(注意:原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码,分号是半角下的英文分号
    Q3%IQO(D]J9V808UXM9XP`B.png
    检验配置状态检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格)若如图所示 显示版本信息 则说明安装和配置成功。
    }QKG4X@3%7(45O170SBF}Y7.png
    安装Mysql注意:请选择mysql5.1及以上的版本。请先检测服务器是否已安装Mysql,如已安装可以采用之前的Mysql版本无需再装,如想重新安装,请确保之前的Mysql版本卸载干净,否则会安装不成功。我司附带的地址mysql工具下载不来时,请到mysql官网下载http://downloads.mysql.com/archives/community/
    解压Mysql安装包mysql-5.1.73-winx64.msi文件放置在任意盘符目录中 安装Mysql鼠标选中解压的mysql文件,然后双击运行,按照提示选择默认“Next”执行,当出现下图窗口时,请将字符集修改成“utf-8”
    }7NPY9L0D[%DM[XWSQSAQWG.png
    出现设置“密码”的窗口时,
         设置Mysql超级账户“root”的密码,用于后期连接Mysql数据库进行DB操作,也可以勾选下面的选项卡,创建来宾账户,此处跳过,开发者可以自行设置,密码设置完后,点击“Next”,继续相关操作
    {8_C`JYQXGVN~{E{[S53(3C.png
    等出现下图所示的窗口时,Mysql安装成功 00}L$@X{N3BF7GVA%1%%[J8.png
    检验安装状态在电脑运行中输入“cmd”,然后数据Mysql数据库连接命令,并输入密码则可以使用了

    {C[JX13PQ$WMIM2BFZOD8JJ.png


    安装Tomcat提示:建议使用Tomcat7.0x及以上版本,此处推荐使用apache-tomcat-7.0.69版本。解压Tomcat7.x解压apache-tomcat-7.0.69.zip到任意安装盘符,如下图D盘,然后双击startup.bat出现如下图所示的窗口,则代表安装成功:

    }E5MSZ5K36`2O@C]I$FG5L7.jpg

    注意:依据上面步骤,启动Tomcat肯定是没有问题,如果出现和上图不相同的界面,可能因素是当前Tomcat采用的端口号可能被其他软件所占用,请停掉其他占用端口的软件,特别说明是80端口
    检验安装状态在浏览器中访问,并出现如下图所示页面,表示安装成功 (XOR][R76QQJ[F}%~GXFUM9.png

    然后双击bin目录中的shutdown.bat文件即可停止。

    Tomcat端口的更改注意:此处的压缩包给Tomcat配置的端口号为:80,如需修改,则在其config目录文件中的server.xml中进行修改即可,然后重新启动Tomcat P67BCWT7U94O0MZKCF2X_%X.jpg
    安装开发工具Eclipse 解压eclipseeclipse.zip解压到任意盘符目录,此处以D盘为例: 运行eclipse双击压缩包中的eclipse.exe
    出现下图所示的界面,则Eclipse安装成功(个别机器安装的时候没有出现下图中的Servers项,不要紧,直接过)。 @53N`B%AUZVDO%$HP1}`TST.png

    集成Tomcat7.xEclipse配置ServerEclipse中,菜单栏中的,Window→Perferences→Server→Runtime Environment J7)SZB[H%BO8D)34)3AU5UA.png
    然后点击Add按钮添加已安装好的Tomcat,配置Tomcat7.x,如下图所示选择:

    YA{PL1S(7_1TI(@DXZW79PA.jpg


    点击“Next”,然后在下图所示界面,配置之前已配置好的apache-tomcat-7.0.69,点击“Browse”按钮找到其安装目录(tomcat目录下的bin目录的上一层目录),然后选中即可,然后选择JRE环境,点击下拉箭头,选择之前安装好的JDK版本jdk1.7.0_80,然后点击“Finish”按钮即可
    L4D23OFTO0A2UAMROQ]Y%PB.jpg

    然后在下图所示界面移除之前的服务器配置,保留刚才配置的Tomcat7.x
        显示Server中的Tomcat7.x窗口.在下图“Server”窗口中点击蓝色链接
    VZ5$V1O46_{XY1`90@MVPAN.png

    如果在Eclipse中找不到上图“Server”窗口,请按照如下步骤找到:Eclipse菜单栏,Window→Show View→Other...在弹出的窗口中输入server查询显示Servers,双击,就会出现。
           9PIM2Q433RC1G)[}YIOA@WY.png

    弹出如下图所示窗口,点击“Finish”即可
    FF])MB9@{OVBNOK%S6WRS.jpg

    直至出现图下图所示的界面,Tomcat即集成到了Eclipse
    `{2KY4UYQR5G4}MMD[I[7L0.png



    导入Demo源码到Eclipse


    解压kfk_wechat解压下载的demo源码,请依据下图截图步骤导入:File→Import

    点击Eclipse中的Existing Projects into Workspace(此项在Import窗口中的General项下,如果找寻不到可以在Import中的“type filter text”搜索框中进行搜索即可)按钮,选择本地的Demo源码包进行导入
    选中源码后的界面如下,点击Finish即可。 2NK7L{BKOZO@7PIP(LKM@3I.png

    导入后,将依赖jar包的加入class path.
    添加依赖jar注意:默认开源的Demo已将所依赖的jar包配置全部加入到了classPath中,直接导入就无需添加依赖jar如果未将jar包配置加入classPath则进行添加依赖jar包步骤:找到kfk_wechat\src\main\webapp\WEB-INF\lib选中lib包下的所有jar包(必须是所有的jar包)
    然后鼠标右键,Build PathAdd to Build Path(出现不了此选项时,代表jar包已加入classPath 6856KQ6H)C_[A~JWXEYTFBQ.png



    则会出现如下所示的界面,多了一个Referenced Libraries的项 _1UB%~UZ~]RUZC{1`RMVD(U.jpg

    提示:如果eclipse中有js文件坐上角有红叉,不影响使用,这个是eclipse对js等文件的验证,如不想看到红叉,如下图所示,去除验证即可:
    0@@FE98`59ZL%E@CXE[1U53.jpg

    工程config.properties设置文件路径:/kfk_wechat/src/main/resources/META-INF/config.properties此处只挑重点需要注意的几项配置说明,其他请参考工程config.propertiesdomain:kfk_wechat项目部署的服务器域名,需外网能访问得到(二次开发时,需设置一个域名能映射到自己的开发机器)app_key、secret_key:用户向开发快iLink平台申请的应用Key、秘钥(步骤1.3点中申请的AppKey、SercretKey)app_id、app_secret:用户向微信公众平台申请的appID、appsecret如下图所示:(此处以测试号为例,正式服务号一样)
    }R65E1XXQDMX{6EASQ6I.png


    base_path:微信留言的语音文件的存储路径ffmpeg_path:Ffmpeg音视频转换工具安装路径及命令lb_domian:开发快负载均衡地址(未做变动时保留原工程的配置)lb_port:开发快负载均衡端口(未做变动时保留原工程的配置)user_id:链接iLink平台的用户账号(步骤1.3申请的UID)jdbc_url:数据库连接url,如下图示例所示,第1个红圈代表Mysql数据库安装的服务器地址;第2个红圈为数据库端口号,即安装Mysql时设置的端口号;第3个红圈为数据库名称,3个红圈的信息依据实际情况作出相应的改动,此处只做示例。file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps8143.tmp.jpgjdbc_username、jdbc_password:Mysql数据库连接的用户名和密码,请依据实际情况作出相应的修改,本文之前安装设置成root/123456cachePath:设置缓存目录msgUrl:查询用户使用开发板的接口url(开源Demo直接设置成空即可,但是请保留msgUrl这项)smsUser、smsPwd:工程项目短信接口用户名和密码(开源Demo设置成空即可,同时请保留这两项)wechat_template_id:模板消息ID(此处需在微信公众平台后台进行添加并需通过腾讯公司审核,需2-3天)具体设置请参考此处链接http://jingyan.baidu.com/article/d621e8da3341602864913f63.html
    注意:kfk_wechat demo已内置一个模板消息示例,请参考如下的模板内容配置,如二次开发无需遵循这一点
    1.12工程kfk-config.js设置路径:/kfk_wechat/src/main/webapp/js/kfk-config.jshttp_server:HTTP web服务器地址,此处主要用于绑定开发板的时候调用的请求urlbalance_server:用于注册开发快JSSDK的服务器地址注意:(开发者拿到工程没有上述两项配置时,请向开发快说明,有则保持默认即可)
    数据库脚本初始化

      此处以数据库工具navicat_premium示例,开发者可以考虑用其他的数据库进行操作,当前版本是试用版本。
    1、找到压缩包中的navicat_premium_cs_x64.exe双击安装,点击下一步即可。2、打开navicat工具,连接→MySQL然后输入相关的参数,如下图所示: 2O`KF6`NL}CJ]%4G$C}$AXJ.png



    注意:连接名:可以自由设置主机名:因为我是安装在本机就设置成localhost即可,如果你安装在其他远程机器,则设置远程机器IP即可3、如图所示连接成功后,点击“确定”按钮,然后选中创建的“开发快DB”连接,双击,如下图所示:
    E)1[A7TW7CLV0{08(L)NFEA.png
    4、鼠标右键,点击“运行SQL文件...”
    5、选择sql脚本初始化文件
    路径:/kfk_wechat/src/main/resources/sql/kfk_db_open.sql如果给定的附件压缩包中有此初始化脚本,就使用附件的sql脚本文件
    6、然后点击开始,等待执行,脚本导入完成。
    7、最终效果如下: `646FCAH37Z7)AQGQ6[G[N3.png
    运行Demo工程

    1、在Eclipse中找到Server窗口,然后选中之前配置的Tomcat,右键 KH$[LJY_QDB}JH6X2@O71TC.png

    2、点击“Add and Remove...”:并添加项目到Tomcat
    3、选中kfk_wechat→Add→然后Finish即可。
    QT$KT_[NI790VM3L$S~`8JO.png

    4、点击上图红圈中的debug即运行。5、Console控制台出现一系列的下图信息时表示启动成功 5_%EV)5E
    此时可以通过浏览器访问:http://localhost/kfk_wechat/(因浏览器兼容性问题,建议用火狐浏览器访问)
    I`EH`{`B3F4$KLRNJ91EK8X.png


    域名申请搭建本项目需要一个域名,请到万网或者其他域名供应商进行申请,此处不做描述。微信服务器配置注意:只有启用并设置服务器配置后,用户发给公众号的消息以及开发者需要的事件推送,将被微信转发到我们自己的系统平台的URL中
    1、正式服务号参见如下配置 `D$QA5~`0007}5~XQ{M8769.png
    URL:http://域名/kfk_wechat/wechat需开发支持80端口Token:任意3-32字符EncodingAESKey:配置时有按钮随机生成。消息加密方式:kfk_wechat demo采用的明文模式,开发者后期可以自行定义。2、获取用户信息的接口配置(OAuth2.0配置)微信公众平台管理界面找到,如下图所示的界面: DKYK]97XQR`O0`JA]}6A_LR.png

    点击修改,填写部署服务器的域名。

    Eclipse下工程war包导出war包是我们java web项目导出的部署到TomcatWeblogic等应用服务器的压缩包。温馨提示:导出war包前,可以先将config.properties和kfk_config.js相关配置进行修改,然后在打war包,避免部署到服务器时再修改的步骤。1、选中kfk_wechat demo工程,鼠标右键,找到所示的“Export...”,并点击
    2、弹出窗口中双击Web下的WAR file
    3、如下图所示,点击Browse...”按钮,选择导出位置,并点击Finish 9S%N[XLR4_G%Z)7XTOS0P.jpg
    4、当下图所示的界面消失时,即导出war包完成,此时去对应的路径下就能找到导出的war
          N_0)I]6PV`TVLW5%YP(LP.png

    部署war包到Tomcat找到服务器上的Tomcat安装路径下的webapps目录
    将之前导出的war包,此处以kfk_wechat.war为例,将其放入Tomcat webapps目录,然后启动Tomcat应用服务器即可(Windows下运行tomcat安装目录bin目录下的startup.bat,Linux下运行startup.sh

    温馨提示:如果在导出war包时忘记修改相应的配置信息时,可以用压缩工具打开,并找到相应的文件进行修改即可,然后在浏览器地址,访问我们刚才部署的kfk_wechat项目既可,出现下图所示页面即部署成功。温馨提示:下图抹掉的即刚才部署kfk_wechat war包对应服务器的域名,此处以我自己服务器域名xx.com示例,开发者将其改成自己对应的服务器域名即可 K2Z36N`[0@PTUS{3`61MZ3L.png


    修改菜单参数配置用户使用缺省的admin/kaifakuai登陆到kfk管理后台。菜单管理微信菜单设置
    注意:数据库初始脚本保留的微信菜单是为了给开发者直观展示的菜单数据,开发者无需的话可以删除;直观展示时,请更改菜单的相关数据信息1、如动作类型为view时的菜单时,需修改appid(即config.properties配置文件中的app_id)和对应的服务器域名(config.properties配置文件中的domain    (N``943BG@I{]5SK_P6}@]D.png

    然后点击“同步到微信”按钮,然后系统就会将菜单数据发送到微信服务器进行公众号的自定义菜单生成: 8AO03L7ELJ[2FO[CT~O8PTX.png
    同步成功后,根据腾讯公司公众平台的自定义菜单规则,重新生成的数据可能有些许延迟,稍等一两分钟去微信的公众号查看即可,即创建的菜单就会生成,
    到此,用户进行二次开发时就可以按照以上的步骤进行配置,然后配置属于自己定义的菜单然后进行相应的功能开发即可。ps:demo现在只支持三种菜单类型于后台配置,开发者可以自行定制扩展





    回复

    使用道具 举报

  • TA的每日心情
    开心
    2017-3-9 11:01
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    24

    帖子

    59

    积分

    冉冉新星

    Rank: 2

    积分
    59
    发表于 2017-3-9 11:09:54  | 显示全部楼层
    感谢楼主分享!!!刚才码了第一篇文章
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    4

    主题

    5

    帖子

    186

    积分

    冉冉新星

    Rank: 2

    积分
    186
    发表于 2017-3-10 16:38:36  | 显示全部楼层
    期待更新
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2017-5-21 00:02
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    23

    主题

    99

    帖子

    1048

    积分

    意见领袖

    Rank: 6Rank: 6

    积分
    1048
    QQ
    发表于 2017-3-10 21:49:25  | 显示全部楼层
    楼主好6,赞一下!
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2017-3-11 13:26
  • 签到天数: 2 天

    [LV.1]初来乍到

    3

    主题

    37

    帖子

    280

    积分

    知识达人

    Rank: 3Rank: 3

    积分
    280
    发表于 2017-3-11 13:53:57  | 显示全部楼层
    标记下等待学习
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2017-3-24 14:14
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    35

    帖子

    219

    积分

    知识达人

    Rank: 3Rank: 3

    积分
    219
    发表于 2017-3-15 17:13:03  | 显示全部楼层
    期待继续更新
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2017-8-21 12:53
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    10

    主题

    104

    帖子

    828

    积分

    行业精英

    杰杰

    Rank: 4

    积分
    828
    QQ
    发表于 2017-8-27 15:11:16  | 显示全部楼层
    那个域名怎么获得啊?随便搞一个?打不开的域名
    看帖回复是一种美德。广交电子发烧友。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2017-6-9 08:25
  • 签到天数: 2 天

    [LV.1]初来乍到

    0

    主题

    5

    帖子

    52

    积分

    冉冉新星

    Rank: 2

    积分
    52
    发表于 2017-9-5 12:26:14  | 显示全部楼层
    感觉挺复杂的,对我这样的初学者有相当的难度
    回复 支持 反对

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关于我们
    开发快官网
    关于我们
    联系我们
    帮助中心
    开发者中心
    快速入门
    视频教程
    社区活动
    免费开发板
    开发者大赛
    关注我们
    官方微博
    官方空间
    快速回复 返回顶部 返回列表

    湘公网安备 43019002000310号