手机网页开发:远程控制台调试Javascript

工作中涉及微信和手机端页面开发比较多,手机上调试JS时没法进行控制台输出是一大憾事,还好遇到了jsconsole可以让开发者进行远程调试。加载jsconsole的调试代码后,所有的console.log()输出,都会传回到桌面浏览器中打开的远程控制台界面,你也可以在远程控制台查询页面里存在的DOM元素和JS变量,几乎具备一个完整的浏览器控制台的功能。

使用方法:

打开jsconsole的网页,会看到一个控制台的界面,显示了简单的帮助信息

jsconsole.com

要开始远程调试,首先要获取一个唯一的ID,然后把这段带有唯一标识的远程JS文件加载到你的页面中。

要获取唯一ID,只要在命令行输入:listen命令即可,控制台会返回给你一串HTML标签:

<script src="http://jsconsole.com/remote.js?17D2BF69-38A1-468A-BB96-72BC4A9F3CA0"></script>

把这段代码插入到你的页面<head>部分,然后访问你的页面就可以在远程控制台看到浏览的基础信息了。

iOS系统利用微信判断是否已经安装自家应用

做社交应用的,尤其是图片类应用都会提供把照片分享到新浪微博、微信朋友圈等社区的功能,为了让分享出去的信息不那么单一,通常的做法是分享一个网页地址,网页里会提供一些照片的附属资料,例如地理位置,拍摄时间,海拔等,当然最重要的还要加入应用的下载地址,以达到传播的目的,拍秀既是如此。

本文要表达的主题既是利用微信,利用分享到微信里的网页,实现和自家应用的用户或潜在用户进行更深层次的交互!

为了营销,通常会把自家应用的下载连接放到网页里,因为一个网页在IOS的生态里(其他平台应该也是如此)是没办法获取另一个应用的信息的,所以只能假定浏览者是没有安装自家应用的,如果能知道是否已经安装自家应用,那能做的事情就很多了,例如分享的是一个团购的信息,浏览者就可以通过一个按钮直接调起自家团购应用进行下单,再例如分享的是一个拍秀的个人信息名片,浏览者就可以点击调起拍秀直接加为好友。

回归正题,首先要感谢微信的设计者提供了这个平台级的小功能!(能如此成功的产品不是偶然)要实现上面提到的深层交互,利用微信是必要因素,还有两个技术点:
1、[isappinstalled=1]参数,这个参数,只有在微信里浏览一个网页时会被自动加在地址栏里,一般你的应用都需要通过微信的认证才能通过SDK分享内容,所以微信通过应用级的系统信息访问权限能够获知你的应用是否已经安装在用户的系统内。前端人员通过服务端技术或者客户端技术判断此参数如果是1,就代表浏览者已经安装了你的应用;在Google分析或者Cnzz等网页统计系统里你应该能看到这个参数的身影。

2、iPhone提供的:UIApplication类的openURL方法,这是完成应用间通信的关键,调起自家应用的时候可以传递商品ID,用户ID等。
我搜索的中文参考:http://www.cnblogs.com/zhw511006/archive/2011/11/28/2266587.html,iOS开发不在讨论范畴请自行Google之。

微信公众平台前端开发技巧分享

微信公众平台
微信公众平台

新版微信做了更改,此文提到的部分方法可能已经不再适用,请关注微信官方开放平台:http://open.weixin.qq.com/document/?lang=zh_CN

微信很火,微信推出的公众平台也吸引了一部分市场宣传推广团队,像冷笑话大全这种微博养粉大户在微信的公众平台也是异常火爆。

因工作需求,最近为我们的市场部做了几个微信公共平台下的页面,其中涉及微信公众账号的友情链接,转发一篇文章到微信朋友圈,判断是否转发成功的回调机制,判断是否成功关注微信帐号等的前端代码,我也是通过分析冷笑话大全的页面找到的方法,也google过,但没找到微信官方有公布过相关文档,所以就把自己知道的拿来分享一下。

微信内嵌浏览器:

微信内嵌浏览器有一个私有JS 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现转发链接到微信朋友圈,和判断一个微信号的关注状态,比如在进行转发抽奖的活动时,判断是否转发成功和是否关注成功会很有必要。

转发链接到朋友圈:

//点击事件调用此函数即可激发一次转发到朋友圈操作
function toWexinFriends(){

	WeixinJSBridge.invoke('shareTimeline',{
		"img_url": "http://example.com/example.png",
		//"img_width": "640",
		//"img_height": "640",
		"link": "http://example.com",
		"desc": "描述",
		"title": "标题"
	},function(res){
		// 返回res.err_msg,取值
		// share_timeline:cancel 用户取消
		// share_timeline:fail 发送失败
		// share_timeline:confirm 发送成功
		WeixinJSBridge.log(res.err_msg);

		if(res.err_msg == 'share_timeline:confirm'){
			//转发成功
		};
	});

}

关注微信公众帐号:


function addFirend(){

//gh_122a2ee67fae 为被添加者的微信ID

WeixinJSBridge.invoke("addContact", {webtype: "1",username: 'gh_122a2ee67fae'}, function(e) {
			WeixinJSBridge.log(e.err_msg);
			//e.err_msg:add_contact:added 已经添加
			//e.err_msg:add_contact:cancel 取消添加
			//e.err_msg:add_contact:ok 添加成功
			if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
				//关注成功,或者已经关注过
			}
		})
}

以上都需要在微信内嵌浏览器内才能被识别,通过判断WeixinJSBridge对象是否存在,可以知道是否在微信内浏览的页面。

微信内嵌浏览器还可以识别:

<a href="weixin://profile/gh_122a2ee67fae"></a>

此种类型的链接,此链接在微信内会链接到一个公共帐号的介绍界面。
外部浏览器可以使用:

<a href="weixin://qr/aHUbFAjE_jaFhxl3nyBM"></a>

此种类型的链接在手机的外部浏览器也会被自动识别并跳转到微信,但会进行条码扫描,体验不是很好。

以上分享希望对大家有所帮助,更希望知情人士分享更多技巧,QQ的社交链真的是强大到可怕,微信已经渐渐成长壮大,必会成为网络营销的另一片沃土!

开发 iOS WebApp 入门准备

所谓webapp就是指基于web网页技术的应用,任何精通web开发技术(php,javascript,html,css…..等)的开发人员都可以轻易的制作一款webapp

关于webapp和传统web统网页的区别就在于,app能提供一些特殊功能,比如使用手机访问一个关于订餐的网页,如果在网页中实现了点击一个餐馆的电话号码,立刻能调用拨号程序建立通话,那么这个web网页应该就可以称作 webapp。

本文仅讨论在iOS下创建webapp的入门引导(基于Safari浏览器)。

一切就从‘添加至主屏幕’开始

(此功能在 iPhone 和 iPad 均有提供) 继续阅读“开发 iOS WebApp 入门准备”