万万没想到VFP也可以这样硬，调用微信的硬能力，扫码、上报位置、支付都可以

微信的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.
<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);
}
});
}

　扫码代码绑定到页面按钮

运行效果


其它的API都是同样的做法



更方便的调试
这种网页必须在微信环境能打开，但是在手机微信打开是没有调试环境了,出了问题只能靠猜哪里代码出了问题，太难了。

请出微信开发者工具 切换到公众号开发模式

公众号开发模式

注意
正式公众号是要开权限的
微信公众号的开发权限是需要管理员来进行授权的，
公众号官方的后台的左侧
【开发】---【开发者工具】---【web开发者工具】进行添加授权。
如果是添加公众号的运营人员则需要在【设置】---【人员设置】进行绑定添加。



写在后面的话
现在手机前端页面倾向于单页面应用
我推荐用
Vue.js ,也有人喜欢用AngularJS

手机页面交互就用zepto.min.js
不要用Jquery 太重了

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