微信开发的一些问题

时间 2019-11-08

标签微信开发一些问题繁體版

原文原文链接

一、Android微信不支持flex布局：javascript

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

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

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

b)flex子元素须要displ:block;
web

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

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

//父容器
.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;
}

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

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”

三、微信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>

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

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

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

五、关于数据存储使用localStorage仍是cookie：

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

解决方案：重要敏感信息（好比帐号密码）仍是使用cookie存储，其余的信息可使用localStorage存储。

六、控制微信的“返回”操做：

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

在须要控制的页面，添加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);
}());

八、微信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);
					    }
					});
			    }
			});
	    }
	});
});