Agile Lite微信JS SDK接口封装

fiberlezp
   2015-07-10 17:01:00发布 2收藏, 6096浏览
WebAPP技术
已关闭
1

Agile Lite开发的微信微应用上线喽
欢迎大家扫码围观:


这个演示是围绕微信提供的JS-API(http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)编写的,大部分都有自己的演示。
注意:图片和语音上传是上传到微信服务的,请大家不要上传太多次,达到上限的话,别人就不能试试这个功能了。

这个演示应用最大的工作量在后台jsp的编写,前台因为主要依赖Agile Lite所以工作量不是很大,下面讲讲用jsp的时候的注意项吧。


应用中有5个jsp页面,分别是:

  • weixinconfig.jsp
  • weixinimage.jsp
  • weixinpay.jsp
  • weixinpaynotify.jsp
  • weixinupload.jsp


这里首先说两个特别的jsp页面:weixinpaynotify.jsp 和 weixinupload.jsp:


    weixinpaynotify.jsp是用来做微信支付回调页面的,就是用户支付成功后,微信服务端访问此页面,让商户知道支付已经成功。
    weixinupload.jsp是用来统一ExMobi和微信JS-API的上传功能的,用户手里没有微信客户端,也可以借助这个功能上传自己的媒体文件到微信的服务端,在这个应用里没有用到,留着下次用吧。


下面我们来看看这个应用里经常访问的jsp页面:


    weixinconfig.jsp:微信JSP-API鉴权页面,需要用户的appID和secretID
    weixinimage.jsp:用来显示用户上传到微信服务器的图片,需要用户提供图片标识(media_id)。
    weixinpay.jsp:支付页面,需要用户获得微信支付的一系列认证之后才能用,需要提供appID和secretID外,还要商户号和对应支付API的key值(至少32位)。


static/image/hrline/line3.png

代码更新了 2015-12-24

此次更新以本地能力工具为主,更新了一个桥接对象$bridge。该对象在两个js文件中分别实现
general.js
weixin.js
其中,general.js实现的$bridge对象(简称$bridge(general.js))支持ExMobi和微信两个平台的api,weixin.js的$bridge对象(简称$bridge(weixin.js))只支撑微信的api,对应支持的api见下面的文档:


桥接对象.pdf(0.21M 下载次数:96)

从文当中可以看出,$bridge(weixin.js)支持全部微信的JS API,而$bridge(general.js)支持的是部分。
在开发时的区别就是:


    $bridge(general.js)可以在ExMobi中开发好之后,直接把页面工程复制到为微信公众号提供的服务端(简称微信服务端)直接可用,调用本地能力的代码不需要修改。
    $bridge(weixin.js)只可以在微信服务端使用,但是如果代码中使用$bridge(general.js)调用api的代码也不需要修改,而且可以使用更多的微信能力。
另外在服务端增加了ExMobi上传图片文件至ExMobi服务器目录的功能:
这样再查看图片时,就可以直接从ExMobi服务器下载,而不再只能通过微信服务了。

static/image/hrline/line3.png


具体实现,大家来看看代码吧

演示源代码:


bridge.zip(3.28M 下载次数:152)

演示配置指南:


微信支付演示配置指南- 烽火.pdf(0.61M 下载次数:159)

下面是截图,api太多,就不一一截图了,只放出一个支付演示页面吧(支付页面这么简单,谁给你付款啊)。

weixinlite.png  (0.00M  下载次数:46次)

Screenshot_2015-07-10-16-41-52.png  (0.05M  下载次数:44次)

Screenshot_2015-07-10-16-42-37.png  (0.03M  下载次数:47次)

Screenshot_2015-07-10-16-42-52.png  (0.05M  下载次数:44次)

Screenshot_2015-07-10-16-41-39.png  (0.08M  下载次数:45次)

weixinlite.zip  (1.72M  下载次数:5524次)

90个回答

0

这么好的帖子,不顶没有道理

yy80832476
    2015-07-14 08:55:21回答
0

我想看源代码

hcc656
    2015-07-14 16:49:08回答
0

谢谢分享 学习

wanggn
    2015-07-15 23:59:17回答
0

不错的帖子,感觉跟Jingle很像的设计,不知道是不是参考了Jingle

dongtest
    2015-07-18 14:04:29回答
0

基本上目前h5的框架展现的组件外貌都是类似的,关键还是设计理念和代码实现方式
感兴趣的话可以看下相关文档http://www.exmobi.cn/agile-lite/index.html

nandy007
    2015-07-19 00:10:09回答
0

:):lol学习下

houjun11@fiberhome
    2015-07-21 13:52:24回答
0

看看学习学习

iceeer
    2015-07-22 10:11:40回答
0

需要学习

sunyc
    2015-07-27 15:34:11回答
0

顶一顶呀

foxgame
    2015-08-02 23:49:42回答

我要回答