微信开发的一些问题

1、Android微信不支持flex布局：

参考：http://segmentfault.com/q/1010000003409405

提供的解决办法无非两种：

a)新版webkit和旧版webkit混合flex写法；

b)flex子元素需要displ:block;

本人使用第二种办法：给子元素添加display:block;解决问题，第一种感觉很麻烦，没有试；以后如果有时间在仔细研究一下。

在此提供两段新版webkit和旧版webkit混合flex写法的代码：更新于（2016/03/25）

//父容器
.items{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}

//子模块
.item{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}

2、Android下微信浏览网站有缓存：

IOS彻底关闭应用后清除浏览器缓存（双击home键，上划应用），所以不存在此问题。

参考：https://www.zhihu.com/question/22471239

https://segmentfault.com/q/1010000002599890

看过解决方案是：URL后面添加一些参数。（本人亲测无效）

Android的解决办法本人试了有效的只有：卸载微信，重新安装。

更新：终于找到一个很靠谱的解决方案了，O(∩_∩)O哈哈~ 解决方案如下：安装一款app---TBS工具集，点击“安装本地TBS内核”，点击“快速杀死App（强制停止）”，点击“清除缓存”。

现在来说说这个TBS工具集，本来就是用来在线调试微信辅助工具，全称“Tencent Browser Service”

3、微信JSSDK定位功能只能获取经纬度，如果需要获取详细的地理位置需要借助于百度地图SDK：

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getLocation()">试一下</button>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script>
var x=document.getElementById("demo");
function getLocation(){
    if(navigator.geolocation){
       navigator.geolocation.getCurrentPosition(showPosition);
      }else{
       alert("您的浏览器不支持地理定位");
      }
   }
 
function showPosition(position){
    lat=position.coords.latitude;
    lon=position.coords.longitude;
    //var map = new BMap.Map("container");            // 创建Map实例
    var point = new BMap.Point(lon, lat);    // 创建点坐标
    //map.centerAndZoom(point,15);                     // 
    //map.enableScrollWheelZoom(); 
    var gc = new BMap.Geocoder();    
    gc.getLocation(point, function(rs){
       var addComp = rs.addressComponents;
       alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street);
      });
   }
</script>
</body>
</html>

4、微信上touchend事件不触发：

参考：http://www.hui52.com/archives/944.html

解决方案：在touchstart的时候调用event.preventDefault()，即可以让其它事件都正常被触发！

5、关于数据存储使用localStorage还是cookie：

参考：http://zccst.iteye.com/blog/2194344

解决方案：重要敏感信息（比如账号密码）还是使用cookie存储，其他的信息可以使用localStorage存储。

6、控制微信的“返回”操作：

做微信公众号开发有一个问题是，页面跳转多，如果执行返回操作，避免不了返回多次；同时因为微信和客户端的体验不同，在客户端，用户很容易点击返回回到上一个页面。也就是用户对返回操作的依赖性还是很强的。所以就想模拟客户端，控制微信的“返回”操作。方法如下：

在需要控制的页面，添加history.pushState，然后设置popstate监听事件进行“返回”操作的监听。之所以会对该事件设置setTimeout，是因为有个bug，当页面加载完成的时候就会执行popstate。

参考：http://blog.csdn.net/rilyu/article/details/37742595

(function backHistory(){
	var state = {
    	title: "title",
   		url: "#"
	};
	 window.history.pushState(state, "title", "#");
         setTimeout(function () {
             window.addEventListener("popstate", function(e) {
            	 window.location.href = '/web/user/infos';
             }, false);
         }, 300);
}());

7、对图片进行base64编码：

参考：http://www.cnblogs.com/tugenhua0707/p/4666076.html

(function imageUpload(){
	var img = "http://10.0.0.95:8080/images/web/test/image.png";
	var image = new Image();
	image.src = img ;
	alert(image.width);
	function getBase64Image(img) {
	    var canvas = document.createElement("canvas");
	    canvas.width = img.width;
	    canvas.height = img.height;
	    
	    var ctx = canvas.getContext("2d");
	    ctx.drawImage(img, 0, 0, img.width, img.height);
	    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
	    var dataURL = canvas.toDataURL("image/"+ext);
	    return dataURL;
	}
	
	var base64 = getBase64Image(image);
	alert(base64);
}());

8、微信JSSDK的图片上传功能：

微信JSSDK对于图片总共提供了4个接口：上传图片（本地上传 or 拍照上传），预览图片、上传图片、下载图片。如果想通过微信上传图片到自己的服务器，只能通过如下方法：

首先上传图片到微信服务器，上传成功会返回一个serverId ；然后根据返回的serverId，从微信服务器下载图片到自己的服务器。

下载自己进行了一个简单的模拟：

wx.ready(function(){
        var imgSrc ;
        var serverI;
        wx.chooseImage({
	    count: 1, // 默认9
	    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有---在此处只需要使用camera
	    success: function (res) {
	        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
	        imgSrc = localIds[0] ;
	        $(".identity").eq(_index).find("img").attr("src",localIds[0]);
	        alert("1:"+imgSrc);
	        wx.uploadImage({
			    localId: imgSrc, // 需要上传的图片的本地ID，由chooseImage接口获得
			    isShowProgressTips: 1, // 默认为1，显示进度提示
			    success: function (res) {
			        var serverId = res.serverId; // 返回图片的服务器端ID
			        serverI = serverId ;
			        alert("2:"+serverI);
			        alert("上传成功");
			        wx.downloadImage({
					    serverId: serverI, // 需要下载的图片的服务器端ID，由uploadImage接口获得
					    isShowProgressTips: 1, // 默认为1，显示进度提示
					    success: function (res) {
					    	alert("下载成功");
					        var localId = res.localId; // 返回图片下载后的本地ID
					        var img = res.localIds[0] ;
							var image = new Image();
							image.src = img ;
							$(document.body).append(image);
					    }
					});
			    }
			});
	    }
	});
});

来源：oschina

链接：https://my.oschina.net/u/1250113/blog/599088

标签

微信开发

FLEX

缓存

tbs

TBS工具集