微信小項目回顧

時間 2019-11-08

標籤微信小項目回顧简体版

原文原文鏈接

前幾天又搞了一個微信小項目，來把，仍是來記錄一下，做爲一個歷程，總結仍是要的，萬一有同窗須要呢！javascript

微信版本判斷

固然了，如今土豪都比較多，都是Iphone大大的有，都會自動更新軟件，可是仍是有不少的安卓用戶或者未開啓自動更新的，微信新開放的JSSDK只支持6.0.1以上的，因此對於低版本的用戶咱們仍是要提醒一下啊。html

在網上查了一下，下面是個比較好的判斷方法：java

JavaScriptvar wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;  
if( !wechatInfo ) {  
    alert("本活動僅支持微信");  
} else if ( wechatInfo[1] < "6.0" ) {  
    alert("本活動僅支持微信6.0以上版本");
}

微信開發的步驟

首先微信有各類號，什麼訂閱號，公衆號，認證號。亂七八糟的，我也不搞不清楚具體區別，反正認證號要花300大洋去認證，這點我卻是記得蠻熟。。。首先你要有個號，而後你要去填一下服務器地址。詳情見微信開發者文檔jquery

步驟一：綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。web

備註：登陸後可在「開發者中心」查看對應的接口權限。chrome

步驟二：引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.jscanvas

備註：支持使用 AMD/CMD 標準模塊加載方法加載segmentfault

步驟三：經過config接口注入權限驗證配置

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）。api

javascriptwx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識，我的設置中得到
    timestamp: , // 必填，生成簽名的時間戳，我的設置中得到
    nonceStr: '', // 必填，生成簽名的隨機串，我的設置中得到
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

步驟四：經過ready接口處理成功驗證

javascriptwx.ready(function(){

    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});

接口調用說明

全部接口經過wx對象(也可以使用jWeixin對象)來調用，參數是一個對象，除了每一個接口自己須要傳的參數以外，還有如下通用參數：安全

success：接口調用成功時執行的回調函數。
fail：接口調用失敗時執行的回調函數。
complete：接口調用完成時執行的回調函數，不管成功或失敗都會執行。
cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操做的api纔會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

遇到的一些坑

都放在wx.ready(function(){})裏面去執行。否則你會遇到分享中的設置無效的問題
微信有個uploadImage接口，用於上傳圖片到微信服務器的，可是有時候在安卓下你會發現選擇圖片之後怎麼都沒有反應的狀況，這時候，不妨試試用setTimeout()來包裹這個函數。可能你就會解決掉你的問題。感謝segmentfault，感謝@Dali，我當時被這個問題糾結了很久很久。。。

溫習了一下生成指定範圍隨機數

window.ranNum = parseInt(Math.random() * (max - min + 1) - min, 10);

溫習了一下圖片轉base編碼

html<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>htdocs</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content=""/>
    <meta name="description" content="hockor"/>
</head>
<body>
<img id="he" src="logo.png" alt=""/>
<input type="button" value="yes" id="go">
<div></div>
<img id="hehe" src="" alt=""/>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    "use strict";
    function img2code(url, callback) {
        var img = new Image();
        img.src = url;
        var cvs = document.createElement("canvas");
        cvs.width = img.width;
        cvs.height = img.height;
        var ctx = cvs.getContext("2d");
        img.crossOrigin = "Anonymous";
            ctx.drawImage(img, 0, 0);
            window.imgData = cvs.toDataURL();
            callback(imgData)
    }
    $("#go").click(function(){
        img2code($("#he").attr("src"), function (imgData) {
            imgData = imgData.substr(22);
            $("div").html(imgData)
            $("#hehe").attr("src","data:image/png;base64,"+imgData)
        })
    })
</script>
</body>
</html>

另外在學習中也能夠參考一下微信的demo http://demo.open.weixin.qq.com/jssdk，蠻實用的！

我的原創，轉載請註明

相關標籤/搜索

每日一句

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