在我们开发微信页面的时候，需要大量用到了各种呈现的效果，一般可以使用Boostrap的效果来设计不同的页面，不过微信团队也提供很多这方面的资源，包括JSSDK的接口，以及Weui的页面样式和相关功能页面，给我们提供了很大的便利，本文是在自己做的一些H5微信应用页面上做了一些功能总结，希望能够给大家提供一定的帮助。
在我们开发微信页面的时候，需要大量用到了各种呈现的效果，一般可以使用Boostrap的效果来设计不同的页面，不过微信团队也提供很多这方面的资源，包括JSSDK的接口，以及Weui的页面样式和相关功能页面，给我们提供了很大的便利，本文是在自己做的一些H5微信应用页面上做了一些功能总结，希望能够给大家提供一定的帮助。
1、微信网页开发
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代码所示。
铭牌图片
@for (var i = 0; i
}
其他图片
@for (var i = 0; i
}
这些代码构建了很多个图片控件，也就是原始的HTML图片控件，如果仅仅这样做，那么只能利用网页的效果，而无法利用微信浏览器预览图片，可以放大缩小的丰富功能。
为了实现我们说需要的功能，需要进行一定的处理，简单的方法，可以设计一个JS函数，然后通过JS函数来实现微信预览图片功能，代码如下所示。
function BindClick(selector) {
document.querySelector(selector).Onclick= function (event) { var imgArray = []; var curImageSrc = $(this).attr(&＃39;src&＃39;); var oParent = $(this).parent(); if (curImageSrc && !oParent.attr(&＃39;href&＃39;)) {
$(selector).each(function (index, el) { var itemSrc = $(this).attr(&＃39;src&＃39;);
imgArray.push(itemSrc);
});
wx.previewImage({
current: curImageSrc,
urls: imgArray
});
}
}
}
BindClick(&＃39;#previewImage img&＃39;);
BindClick(&＃39;#previewImage2 img&＃39;);
这个函数的做法，是参考网上一个大牛的做法，不过这样做存在一个问题，图片如果有多张的话，那么需要点击第一张图片才能开始预览，不能点击其他几张开始。
为了改进这个缺点，我们可以可以利用Razor的模板实现我们需要的代码生成，如下所示集合了Razor模板生成JS代码，实现了我们所需要JS代码的生成。
var urls = [];
@foreach (var url in ViewBag.mainList)
{ urls.push(&＃39;@url&＃39;); }
@for (var i = 0; i
document.querySelector(&＃39;#mainPic_@i&＃39;).Onclick= function () {
wx.previewImage({
current: $(this).attr("src"),//urls[@i], urls: urls
});
}; } var urlsOther = [];
@foreach (var url in ViewBag.otherList)
{ urlsOther.push(&＃39;@url&＃39;); }
@for (var i = 0; i
document.querySelector(&＃39;#otherPic_@i&＃39;).Onclick= function () {
wx.previewImage({
current: $(this).attr("src"),//urls[@i], urls: urlsOther
});
};
}
JS代码的生成后的代码如下所示.
var urls = [];
urls.push(&＃39;http://www.iqidi.com/UploadFiles/设备铭牌图片/TIzMZl04X1iqkHMP44hXFHjQ-yyvrxS-tgwgzMGfwe9AUMTxKohcVC6w6O.jpg&＃39;);
document.querySelector(&＃39;#mainPic_0&＃39;).Onclick= function () {
wx.previewImage({
current: $(this).attr("src"),//urls[0], urls: urls
});
};
var urlsOther = [];
urlsOther.push(&＃39;http://www.iqidi.com/UploadFiles/设备铭牌图片/lJk_LNwxTGfL5SNpmJwWyfyBONa2JRO7uzu3PJV3aGsrilPPHY2r-ymU00.jpg&＃39;);
document.querySelector(&＃39;#otherPic_0&＃39;).Onclick= function () {
wx.previewImage({
current: $(this).attr("src"),//urls[0], urls: urlsOther
});
};
这样最终就可以实现我们所需要的效果了，当然多张图片也不会有任何的问题。
更多C#开发微信门户及应用--微信H5页面开发的经验总结 相关文章请关注PHP中文网！
京公网安备 11010802041100号