1) JSSDK
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
目前JSSDK支持的接口分类包括下面几类：基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付，随着微信功能的全部整合，估计更多的接口会陆续开放出来。
2）WeUI和Jquery WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：
同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站
便捷获取快速使用，降低开发和设计成本
微信设计团队精心打造，清晰明确，简洁大方
该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已经在 GitHub上开源。访问 http://www.php.cn/ 或微信扫码即可预览。
jQuery WeUI 中使用的是官方 WeUI 的 CSS 代码，并提供了 jQuery/Zepto 版本的 API 实现。JQuery WeUI相对于在官方WeUI的基础上做了一些功能扩展，已丰富界面设计和相关功能，因此我们可以考虑直接基于JQuery WeUI的基础上进行页面开发即可。
在我前面的一些案例中，都利用了We UI样式来进行很多微信H5页面的功能设计，包括微信支付页面、签到页面等等。
如微信支付页面如下所示：
//判断是否在微信中打开
function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == &＃39;micromessenger&＃39;) { return true;
} else { return false;
}
}在页面输出处理如下所示。
$(function () { var isWeixin = isWeiXin(); if (isWeixin) {
$("#weixin").html(window.navigator.userAgent); //请在微信中打开该页面 } var display = "是否在微信浏览器中打开：";
display += isWeixin ? "是" : "否";
$("#isWeixin").html(display);
});////// 检查是否微信中打开，否则重定向 /// ///protected string CheckBrowser() { bool passed = false; string userAgent = Request.UserAgent; passed = userAgent.ToLower().Contains("micromessenger"); if (!passed) { var type = "warn"; var message = "请在微信中打开该页面"; var url = string.Format("{0}/H5/info?type={1}&message={2}", ConfigData.WebsiteDomain, type, message); return url; } return null; }
我们就可以在函数开始部分进行判断即可。
//如果不是微信浏览器，则返回错误页面
var checkUrl = CheckBrowser(); if (!string.IsNullOrEmpty(checkUrl)) return Redirect(checkUrl);如果非微信浏览器打开页面链接，重定向的页面效果如下所示。
$("#job").select({
title: "选择职业",
items: ["法官", "医生", "猎人", "学生", "记者", "其他"],
onChange: function(d) {
console.log(this, d);
},
onClose: function() {
console.log("close");
},
onOpen: function() {
console.log("open");
},
});也可以使用集合对象进行赋值处理，如下JS代码所示。
$("#in").select({
title: "您的爱好",
multi: true,
min: 2,
max: 3,
items: [
{
title: "画画",
value: 1,
description: "额外的数据1"
},
{
title: "打球",
value: 2,
description: "额外的数据2"
}
],
beforeClose: function(values, titles) { if(values.indexOf("6") !== -1) {
$.toast("不能选打球", "cancel"); return false;
} return true;
},
onChange: function(d) {
console.log(this, d);
}
});基于上面的JS脚本，我们选择后者，使用Ajax技术来填充数据，这样可以动态获取后台的字典数据，并进行页面的绑定操作。
为了方便，我们可以设计一个公共函数，用于数据字典的绑定处理，如下所示。
//绑定字典内容到指定的控件
function BindDictItem(ctrlName, dictTypeName, onChange, onClose, onOpen) { var url = &＃39;/h5/GetDictJson?dictTypeName=&＃39; + encodeURI(dictTypeName); //获取Ajax的内容，并放到items集合
var cOntrol= $(&＃39;#&＃39; + ctrlName); var items = [];
$.ajax({
type: &＃39;GET&＃39;,
url: url, //async: false, //同步
dataType: &＃39;json&＃39;,
success: function (data) {
control.empty();//清空下拉框
//把JSON集合加到数组里面
$.each(data, function (i, item) {
items.push({
title: item.Text, value: item.Value
});
}); //设置显示列表 control.select({
title: "选择" + dictTypeName,
items: items,
onChange: onChange,
onClose: onClose,
onOpen: onOpen
});
},
error: function (xhr, status, error) {
$.toast("操作失败" + xhr.responseText); //xhr.responseText }
});
}那么我们绑定字典数据，就只需要调用这个函数就可以很简单实现数据字典的绑定操作了。
$(function () {
BindDictItem("Status", "设备状态");
BindDictItem("Dept", "科室");
BindDictItem("Building", "建筑物");
BindDictItem("Floor", "楼层");
BindDictItem("Special", "特殊情况");
});我们看具体在微信中打开对应连接，字典绑定的效果如下所示。
然后在页面初始化JSSDK的API脚本，如下代码所示。
var appid = &＃39;@ViewBag.appid&＃39;; var nOncestr= &＃39;@ViewBag.noncestr&＃39;; var signature = &＃39;@ViewBag.signature&＃39;; var timestamp = &＃39;@ViewBag.timestamp&＃39;;
wx.config({
debug: false,
appId: appid, // 必填，公众号的唯一标识
timestamp: timestamp, // 必填，生成签名的时间戳
nonceStr: noncestr, // 必填，生成签名的随机串
signature: signature, // 必填，签名，见附录1 jsApiList: [ &＃39;checkJsApi&＃39;, &＃39;chooseImage&＃39;, &＃39;previewImage&＃39;, &＃39;uploadImage&＃39;, &＃39;downloadImage&＃39;
]
}); //所有准备好后
wx.ready(function () {
});加入我们页面里面包含有两部分的图片，一个是设备铭牌图片，一个是其他附属图片，我们分别展示，如下HTML代码所示。
京公网安备 11010802041100号