微信開發的一些問題

時間 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);
					    }
					});
			    }
			});
	    }
	});
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。