在我们开发微信页面的时候，需要大量用到了各种呈现的效果，一般可以使用Boostrap的效果来设计不同的页面，不过微信团队也提供很多这方面的资源，包括JSSDK的接口，以及Weui的页面样式和相关功能页面，给我们提供了很大的便利，本文是在自己做的一些H5微信应用页面上做了一些功能总结，希望能够给大家提供一定的帮助。
1、微信网页开发
1) JSSDK
目前JSSDK支持的接口分类包括下面几类：基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付，随着微信功能的全部整合，估计更多的接口会陆续开放出来。
2）WeUI和Jquery WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：
- 同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站
- 便捷获取快速使用，降低开发和设计成本
- 微信设计团队精心打造，清晰明确，简洁大方
该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已经在 上开源。访问 或微信扫码即可预览。
jQuery WeUI 中使用的是官方 WeUI 的 CSS 代码，并提供了 jQuery/Zepto 版本的 API 实现。JQuery WeUI相对于在官方WeUI的基础上做了一些功能扩展，已丰富界面设计和相关功能，因此我们可以考虑直接基于JQuery WeUI的基础上进行页面开发即可。
在我前面的一些案例中，都利用了We UI样式来进行很多微信H5页面的功能设计，包括微信支付页面、签到页面等等。
如微信支付页面如下所示：
以及签到页面效果如下所示。
当然我们可以根据业务需要，增加很多这样和微信色调样式一致的页面，这个就是利用WeUI样式带来的界面体验一致性的好处。
本篇主要介绍微信H5页面开发的经验总结，上面提到了利用JSSDK和WeUI来对微信应用的H5页面进行开发，因此下面的相关效果也就是利用这些技术进行处理的。
2、判断微信浏览器
有些情况下，我们可能需要用户只能在微信浏览器上打开，不能用其他浏览器去打开连接，还有就是基于一些用户身份信息的获取，也是需要通过微信浏览器才能重定向获取的，否则使用其他浏览器会出错，因此判断是否为微信浏览器有时候也是一个常规的做法。
判断是否为微信浏览器有两种方式可以达到目的，一个是在前端使用JS脚本去处理，一个是采用后台C#代码进行判断处理，两种均可以达到目的。
使用JS代码实现代码和效果如下所示。
在页面输出处理如下所示。
如果是正常使用微信跳转的页面链接，那么上会提示为：是。
刚才提到了，使用C#后台代码也可以判断是否在浏览器内，一般情况下，我们可以 判断用户的浏览器后做重定向，如果用户确实是微信浏览器的，则继续后面处理，否则重定向到提示页面给用户。
passed </span>= userAgent.ToLower().Contains(<span style="color: #800000;">"</span><span style="color: #800000;">micromessenger</span><span style="color: #800000;">"</span><span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span> (!<span style="color: #000000;">passed)
{
</span><span style="color: #0000ff;">var</span> type = <span style="color: #800000;">"</span><span style="color: #800000;">warn</span><span style="color: #800000;">"</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> message = <span style="color: #800000;">"</span><span style="color: #800000;">请在微信中打开该页面</span><span style="color: #800000;">"</span><span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> url = <span style="color: #0000ff;">string</span>.Format(<span style="color: #800000;">"</span><span style="color: #800000;">{0}/H5/info?type={1}&message={2}</span><span style="color: #800000;">"</span><span style="color: #000000;">,ConfigData.WebsiteDomain,type,message);
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> url;
}
</span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">null</span><span style="color: #000000;">;
}</span></pre>
我们就可以在函数开始部分进行判断即可。
如果非微信浏览器打开页面链接，重定向的页面效果如下所示。
3、字典数据的绑定
和常规网页功能一样，我们在设计微信页面应用的时候，很多数据也是来源字典数据的，而且需要把它们动态绑定在页面上，微信页面的JQuery WeUI提供了一些列表字典数据的展示效果如下所示。
这个常规的数据绑定如下所示，如下JS代码所示。
也可以使用集合对象进行赋值处理，如下JS代码所示。
基于上面的JS脚本，我们选择后者，使用Ajax技术来填充数据，这样可以动态获取后台的字典数据，并进行页面的绑定操作。
为了方便，我们可以设计一个公共函数，用于数据字典的绑定处理，如下所示。
</span><span style="color: #008000;">//</span><span style="color: #008000;">获取Ajax的内容，并放到items集合</span>
<span style="color: #0000ff;">var</span> control = $('#' +<span style="color: #000000;"> ctrlName);
</span><span style="color: #0000ff;">var</span> items =<span style="color: #000000;"> [];
$.ajax({
type: </span>'GET'<span style="color: #000000;">,url: url,</span><span style="color: #008000;">//</span><span style="color: #008000;">async: false,//同步</span>
dataType: 'json'<span style="color: #000000;">,success: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (data) {
control.empty();</span><span style="color: #008000;">//</span><span style="color: #008000;">清空下拉框</span>
<span style="color: #008000;">//</span><span style="color: #008000;">把JSON集合加到数组里面</span>
$.each(data,<span style="color: #0000ff;">function</span><span style="color: #000000;"> (i,item) {
items.push({
title: item.Text,value: item.Value
});
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">设置显示列表</span>
<span style="color: #000000;"> control.select({
title:
});
},error: <span style="color: #0000ff;">function<span style="color: #000000;"> (xhr,status,error) {
$.toast("操作失败" + xhr.responseText); <span style="color: #008000;">//<span style="color: #008000;">xhr.responseText
<span style="color: #000000;"> }
});
}
那么我们绑定字典数据，就只需要调用这个函数就可以很简单实现数据字典的绑定操作了。
我们看具体在微信中打开对应连接，字典绑定的效果如下所示。
我们则可以在微信后台对数据字典进行维护即可进行实时的数据更新。
4、微信图片的预览功能
在很多页面里面，我们需要展示丰富的图片，我们需要结合微信的图片预览功能接口，我们才能把图片打开后方便进行缩放处理操作，那么该如何利用微信JSSDK的图片预览接口呢？
首先我们需要引入Jquery WeUI的样式类库，以及JSSDK所需的JS文件，如下所示。
然后在页面初始化JSSDK的API脚本，如下代码所示。
wx.config({
debug: </span><span style="color: #0000ff;">false</span><span style="color: #000000;">,appId: appid,</span><span style="color: #008000;">//</span><span style="color: #008000;"> 必填，公众号的唯一标识</span>
timestamp: timestamp,<span style="color: #008000;">//</span><span style="color: #008000;"> 必填，生成签名的时间戳</span>
nonceStr: noncestr,<span style="color: #008000;">//</span><span style="color: #008000;"> 必填，生成签名的随机串</span>
signature: signature,<span style="color: #008000;">//</span><span style="color: #008000;"> 必填，签名，见附录1</span>
<span style="color: #000000;"> jsApiList: [
]
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">所有准备好后</span>
wx.ready(<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
});</span></pre>加入我们页面里面包含有两部分的图片，一个是设备铭牌图片，一个是其他附属图片，我们分别展示，如下HTML代码所示。
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="weui_cells_title"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>其他图片<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="weui_cells"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="weui_cell"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="previewImage2"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="weui-row"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
@for (var i = 0; i </span><span style="color: #0000ff;"><</span><span style="color: #800000;"> ViewBag</span><span style="color: #ff0000;">.otherList.Count; i++)
{
<div class</span><span style="color: #0000ff;">="weui-col-50"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">='otherPic_@i' </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">='@ViewBag.otherList[i]' </span><span style="color: #ff0000;">alt</span><span style="color: #0000ff;">="其他图片"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="height:auto;width:100%"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">
}
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></pre>这些代码构建了很多个图片控件，也就是原始的HTML图片控件，如果仅仅这样做，那么只能利用网页的效果，而无法利用微信浏览器预览图片，可以放大缩小的丰富功能。
为了实现我们说需要的功能，需要进行一定的处理，简单的方法，可以设计一个JS函数，然后通过JS函数来实现微信预览图片功能，代码如下所示。
wx.previewImage({
current: curImageSrc,urls: imgArray
});
}
}
}
BindClick(</span>'#previewImage img'<span style="color: #000000;">);
BindClick(</span>'#previewImage2 img');</pre>
这个函数的做法，是参考网上一个大牛的做法，不过这样做存在一个问题，图片如果有多张的话，那么需要点击第一张图片才能开始预览，不能点击其他几张开始。
为了改进这个缺点，我们可以可以利用Razor的模板实现我们需要的代码生成，如下所示集合了Razor模板生成JS代码，实现了我们所需要JS代码的生成。
</span><span style="color: #0000ff;">var</span> urlsOther =<span style="color: #000000;"> [];
@foreach (</span><span style="color: #0000ff;">var</span> url <span style="color: #0000ff;">in</span><span style="color: #000000;"> ViewBag.otherList)
{
</span><text>urlsOther.push('@url');</text>
<span style="color: #000000;"> }
@
{
document.querySelector(
wx.previewImage({
current: $(<span style="color: #0000ff;">this).attr("src"),
<span style="color: #000000;"> urls: urlsOther
});
};
}
JS代码的生成后的代码如下所示.
document.querySelector(</span>'#mainPic_0').onclick = <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
wx.previewImage({
current: $(</span><span style="color: #0000ff;">this</span>).attr("src"),<span style="color: #008000;">//</span><span style="color: #008000;">urls[0],</span>
<span style="color: #000000;"> urls: urls
});
};
</span><span style="color: #0000ff;">var</span> urlsOther =<span style="color: #000000;"> [];
urlsOther.push(</span>'http://www.iqidi.com/UploadFiles/设备铭牌图片/lJk_LNwxTGfL5SNpmJwWyfyBONa2JRO7uzu3PJV3aGsrilPPHY2r-ymU00.jpg'<span style="color: #000000;">);
document.querySelector(</span>'#otherPic_0').onclick = <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
wx.previewImage({
current: $(</span><span style="color: #0000ff;">this</span>).attr("src"),</span><span style="color: #000000;"> urls: urlsOther
});
};
这样最终就可以实现我们所需要的效果了，当然多张图片也不会有任何的问题。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。