分分钟制作微信朋友圈页面

微信朋友圈内嵌WebView，可以理解成一个浏览器。

所以，任何可访问网页都能在朋友圈打开、分享，就非常容易理解了。

 

• 微信的WebView内有一些自带特性，如WeixinJSBridge对象，可以定制一些特性。

 

最简单的情况，我们写一个可以访问的网页（带服务器的），把url复制到微信中发送给任何人，点击url就可以打开这个网页。但是url如果不是域名是ip地址会提示是否继续访问。

 

通过微信打开的网页，头部会带有分享等功能。分享到朋友圈，发送给特定人后，url变好看了，微信做了处理和提取。

• 最重要的，图片和文字是怎么来的？

微信的提取机制

图片：从body开始找到第一个像素大于300x300，显示着的图片。

文字：html中title里内容。

 

为了让图片更符合微信气息，专门为微信准备一个图片更好，又不能隐藏，聪明的你早就想到了，把图片这样设置：

<img style="height: 0;width: 0;" src="wechatIcon.jpg">

 

• 开发调试

开发微信网页可以使用微信web开发者工具来调试，看效果。开发者工具主要继承了Chrome开发者工具，加微信自有特性。

但微信有个限制：地址要使用域名而不能使用ip。开发者工具不识别ip地址，微信的webView也不识别，只能查看静态效果。