微信的API到底是什麼?

公眾號的H5網頁,裡面跑的語言是JS,本質是指令碼語言.是沒有能力呼叫硬體的API的.
微信這個是本地APP,本身就有很多呼叫硬體的能力,比如拍照,掃碼,速度計,GPS定義等等.
那就我們就可以在微信裡面開啟公眾號的網頁,這個網頁呼叫微信,微信呼叫硬體不就可以了.能做的事情就很多了.

於是把微信的各種能力封裝成API(JSSDK)給Js呼叫,後來在這個基礎上更進一步,誕生了小程式.

我們來開發一個掃碼程式吧

1. 公眾號後臺配置 配置好允許呼叫JSSDK的域名

正式號也需要配置的

VFP新建一個ctl_bm3類

Define Class ctl_bm3 As weixinfsp Of Locfile("weixinfsp.prg")


Enddefine
 

這個類派生於weixinfsp（框架專用於公眾號的父類）

新建一個HTML檔案並引用如下JS SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="zepto.min.js"></script>

jweixin-1.0.0.js這是微信的官方JSSDK專門用來和微信本身互動的。
zepto.min.js是一個類似於Jquery的前端庫，但體積小，適合移動端。

新增一個getsign函式做JSSDK初始化工作

這個程式碼的作用是從VFP後端獲取到驗證引數，有了這些驗證引數方能夠呼叫JSSDK的各項微信硬能力。

wx.config這個函式配置可以呼叫的API，微信有很多API，需要呼叫再引入。
wx.checkJsApi 是檢查引用的API是否可用
有一個debug模式，如果出錯了，可以檢視錯誤原因。

正式的掃碼程式碼

function scan() {
wx.scanQRCode({
needResult: 1,
scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，預設二者都有
desc: 'scanQRCode desc',
success: function(res) {
var lcBarCode=res.resultStr;
document.getElementById("test").innerText="123456"
alert(lcBarCode);
},
fail:function(err){
alert(err.errMsg);
}
});
}
 

掃碼程式碼繫結到頁面按鈕

<input type="button" value="掃碼" id="btnscan" onclick="scan()" >

執行效果

其它的API都是同樣的做法

更方便的除錯

這種網頁必須在微信環境能開啟，但是在手機微信開啟是沒有除錯環境了,出了問題只能靠猜哪裡程式碼出了問題，太難了。

請出微信開發者工具 切換到公眾號開發模式

注意
正式公眾號是要開許可權的
微信公眾號的開發許可權是需要管理員來進行授權的，
公眾號官方的後臺的左側
【開發】---【開發者工具】---【web開發者工具】進行新增授權。
如果是新增公眾號的運營人員則需要在【設定】---【人員設定】進行繫結新增。

寫在後面的話

掃碼搞定了，其它JSSDK也容易，照著操作就行了。

現在手機前端頁面傾向於單頁面應用
我推薦用
Vue.js ,也有人喜歡用AngularJS

手機頁面互動就用zepto.min.js
不要用Jquery 太重了

Vue.js+ zepto.min.js
或Vue全家桶

更多資訊請訪問http://www.sn58.cn