参考资料：http://strophe.im/strophejs/
https://github.com/strophe/strophejs-plugins
http://amazeui.org/
最近公司要做一个微信关注号，用来推广一个关于收发需求的APP，用到了strophe.js，数据后台是PHP， 服务端使用的是openfire.
直接上图吧：
整个过程就是登录openfire的过程，整个过程的数据交换全部用body包裹起来，在服务端的
org.jivesoftware.openfire.http.HttpBindServlet 为入口进行处理的,
过程就略过了。直接说strophe.js插件了。
var demand = {};
demand.sid = '{$sid}';
demand.remark = '';
demand.latitude = 0;
demand.longitude = 0;
demand.isweixin = 1;
demand.city = '';
demand.location = '';
demand.userid = '{$userid}';
demand.labelid = '{$labelid}';
demand.labelname = '{$labelname}';
demand.token='{$token}';
var domain = '{$domain}';
var source = '{$source}';
$(function () {
$('#top_bar').hide();
getLocation();
if (connection == null && demand.userid != "") {
login(demand.userid);
}
}); /**
* 获取当前位置
*/
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(gpsCallback);
} else {
alert("您的浏览器不支持地理定位,请手动修改位置");
}
}
/**
* 根据位置创建地图
*/
function gpsCallback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var gpsPoint = new BMap.Point(lon, lat);
CreateMap("allmap", lon, lat, 14);
//添加地图控件和事件 }
/**
* 获取位置
* @param point 经纬度
*/
function translateCallback(point) {
demand.longitude = lon = point.lng.toFixed(6);
demand.latitude = lat = point.lat.toFixed(6);
getmerchants(2000);
latlon = lat + ',' + lon;
$.ajax({
dataType: 'jsonp',
url: 'http://api.map.baidu.com/geocoder/v2/',
success: function (result) {
demand.city = result.result.addressComponent.city;
demand.location = result.result.formatted_address;
}
});
}
/**
* 获取附近的商家
*/
function getmerchants(radius) {
$.post("/service/demand/nearmerchant/ran/" + Math.random(),
{
userid: demand.userid,
sid: demand.sid,
longitude: demand.longitude,
latitude: demand.latitude,
radius: radius,
labelid: demand.labelid,
isweixin: '1'
},
function (data) {
if (data.status == 1) {
var result = data.data;
var merchants = result.merchants;
var temp = null;
for (var i = 0, len = merchants.length; i < len; i++) {
//地图标注 }
} else {
alert(data.info);
}
});
}
/**
* 发布需求
*/
function releasedemand() {
if (demand.latitude == 0 || demand.longitude == 0) {
alert('请打开手机定位功能,然后重新进入本页面,再进行需求发布!');
} else {
if ($.trim($('#remark').val()) == '') {
alert('请填写备注!');
} else {
demand.remark = $('#remark').val();
$.ajax({
type: 'POST',
url: "/service/demand/release",
data: demand,
success: function (result) {
//成功处理 }
});
}
}
}
/**
* 返回
*/
function back() {
if (connection.demand.DemandId > 0) {
var htmlStr = [];
htmlStr.push('<div class="am-modal am-modal-no-btn" tabindex="-1" id="cancel-modal">');
htmlStr.push('<img src="__PUBLIC__/web/demand/close_td.png" alt="关闭" style="height:29px;width:29px;"/>');
。。。。。。//组装相关弹框代码
$("#cancelmodal").html(htmlStr.join(''));
$('#cancel-modal').modal({closeViaDimmer: 0});
}
}
/**
* 弹出发出需求的模态窗口
*/
function publishModal() {
if (connection == null) {
login(demand.userid);
return false;
}
var htmlStr = ['<div class="am-modal am-modal-no-btn" tabindex="-1" id="publish-modal">'];
。。。。。。//组装相关弹框代码
htmlStr.push('<button type="button" class="am-btn am-btn-success am-btn-block" data-am-modal-close onclick="releasedemand();" style="margin-top: 10px; border-radius: 10px">');
htmlStr.push('确定发布');
htmlStr.push('</button></div></div>');
$("#modal").html(htmlStr.join(''));
$("#publish-modal").modal({closeViaDimmer: 0});
}
/**
* 滑动
*/
function startSlider() {
mySwiper = new Swiper('.shoplist', {
slideElement: 'li',
onSlideChangeStart: function () {
//滑动触发的事件
}
});
}
/**
* 添加商家选项卡
* @param mid 商家ID
* @param name 商家名称
* @param address 商家地址
* @param tel 电话
* @param grab 已经抢单数
* @param longitude 经度
* @param latitude 纬度
* @param stars 星级
*/
function addShop(mid, name, address, tel, grab, longitude, latitude, stars) {
var distance = getDistance(latitude, longitude, demand.latitude, demand.longitude);
var htmlStr = [];
htmlStr.push('<div class="am-u-sm-11 am-u-sm-centered mask-r-white">');
。。。。。。//组装相关弹框代码
htmlStr.push('</div>');
mySwiper.appendSlide(htmlStr.join(''));
var newSlide = mySwiper.getLastSlide();
newSlide.clone().prepend(); //添加到最前面
mySwiper.removeLastSlide(); //移除最后一个slide
}
/***
* 定它下单
*/
function order(mid, name, address) {
var htmlStr = ['<div class="am-modal am-modal-no-btn" tabindex="-1" id="order-modal">'];
htmlStr.push('确认定TA');
。。。。。。//组装相关弹框代码
htmlStr.push('</button></div></div>');
$("#o-modal").html(htmlStr.join(''));
$("#order-modal").modal({closeViaDimmer: 0});
}页面加载之后获取当然的经纬度，地址，创建地图，顺便组装发布需求时所需要的demand对象，登录openfire，登录的用户名密码，直接从PHP变量分配得来。页面使用的是amazeui框架
demand插件：
Demand = {
NameSpaces: {
Demand: 'jabber:iq:demand'//命名空间
},
Actions: {
confirm: 'confirm',
cancel: 'cancel',
resultdemand: 'resultdemand',
verify: 'verify'
}
};
Strophe.addConnectionPlugin('demand',
{
_connection: null,
count: null,
_feedbackCallback: [],
_grabCallback: [],
_verifyCallback: [],
loadPageB: 0,
Receive: 0,
DemandId: 0,
init: function (conn) {
this._connection = conn;
Strophe.addNamespace('demand', Demand.NameSpaces.Demand);
conn.addHandler(this._onFeedback.bind(this), Demand.NameSpaces.Demand, 'iq', 'result', null, null);
},
/**
* 注册方法
* @param type 类型
* @param call_back 回调
*/
registerCallback: function (type, call_back) {
if (type === 1) {
this._feedbackCallback.push(call_back);
} else if (type === 2) {
this._grabCallback.push(call_back);
} else if (type === 3) {
this._verifyCallback.push(call_back);
}
},
/**
* 回调
*/
_call_backs: function (type, data) {
if (type === 1) {
for (var i = 0; i < this._feedbackCallback.length; i++) {
this._feedbackCallback[i](data);
}
} else if (type === 2) {
for (var i = 0; i < this._grabCallback.length; i++) {
this._grabCallback[i](data);
}
} else if (type === 3) {
for (var i = 0; i < this._verifyCallback.length; i++) {
this._verifyCallback[i](data);
}
}
},
/**
* 处理返回结果
* @param iq
* @returns {null}
* @private
*/
_onFeedback: function (iq) {
log('RECV:' + iq.innerHTML);
var node = iq.getElementsByTagName('demand')[0];
if (node) {
var action = node.getAttribute('action');
switch (action) {
case Demand.Actions.resultdemand:
//解析IQ代码省略
this._call_backs(1, node);
break;
case Demand.Actions.confirm:
//过滤代码省略
var jid = fromJid.split('_')[0];
var self = this;
$.ajax({
type: 'POST',
url: '/service/merchant/merchantInfo',
data: {mid: jid},
success: function (data) {
if (data.status == 1) {
self.loadPageB++;
self._call_backs(2, data.data);
} else {
alert(data.info);
}
}
});
}
break;
case Demand.Actions.verify:
this._call_backs(3, node);
break;
}
}
return true;
}
});