WeChat ???? ??? ? ??? ?????? ??? ?? ???? ???. ????? Boosttrap ??? ???? ??? ???? ???? ? ????. ??? WeChat ?? JSSDK ?????? ???? ? ????? ?? ???? ?????. Weui? ??? ???? ?? ?? ???? ?? ?? ?? H5 WeChat ?????? ???? ?? ??? ??? ????.

1. WeChat ? ??

1) JSSDK

WeChat JS-SDK? WeChat Web Development? ???? ? ???? ?? WeChat ?? ????? ?????. ??. WeChat JS-SDK? ???? ? ???? WeChat? ???? ?? ??, ?? ??, ?? ??, ?? ? ??? ???? ??? ????? ??? ? ??? ??? ??, ?? ? WeChat ??? ??? ?? ??? ? ????. ??, ?? ? ??? ?? WeChat ????? ? ?? ? ??? ?????.

?? JSSDK?? ???? ????? ?????? ?? ?????, ?? ?????, ??? ?????, ??? ?????, ??? ?????, ?? ??, ??? ??, ???? ???, ????? ??, WeChat ??, WeChat ??? ?? ????. , WeChat ??, WeChat ?? ? ?? WeChat ??? ???? ? ?? ?????? ??? ?? ??? ?????.

2) WeUI? Jquery WeUI

WeUI? WeChat? ?? ??? ??? ???? ?? ??? ??????, WeChat ?? ??? ? WeChat ? ? ??? ?? ??? ???? ???? ?? ??? ?? ???? ? ????. WeChat ? ???? WeUI? ???? ??? ?? ??? ????.

• WeChat ?????? ??? ??? ??? ?? ?? WeChat ???? ? ???? ? ?? ??? ? ????.

• ??? ???? ?? ??, ?? ? ?? ?? ??

• WeChat ??? ?? ???? ???, ????, ????, ???? ??????

??? ??????? ?? ??, ?, ?? ??, ?? ??, ???, ??, ??? ? ??? ??? ???? ??? GitHub?? ?? ??? ?????. ?? ??? http://www.miracleart.cn/? ????? WeChat?? QR ??? ?????.

jQuery WeUI? ?? WeUI CSS ??? ???? jQuery/Zepto ??? API ??? ?????. ?? WeUI? ?? JQuery WeUI? ?? ??? ???? ????? ??? ? ?? ??? ???? ?? ??? JQuery WeUI? ???? ?? ???? ???? ?? ??? ? ????.

??? ?? ????? WeChat ?? ???, ??? ??? ? ??? WeChat H5 ??? ??? ????? ? We UI ???? ???????.

?? ?? ?? ?? ????

??, ??? ??? ??? ??? ????.

?? ???? ??? ?? WeChat ?? ? ???? ???? ???? ?? ??? ? ????. ?? ?????? ???? ???? ?????. WeUI ???? ??? ??.

? ???? ?? WeChat H5 ??? ?? ?? ??? ?????. ???? WeChat ??????? H5 ??? ??? JSSDK? WeUI? ????? ?????? ??? ??? ???? ??? ?? ?? ??? ?????.

2. WeChat ???? ??

??? ?? ????? WeChat ??????? ??? ?? ?? ????? ???? ??? ?? ??? ??? ? ????. ?? ?? ??? ?? ?? ??? WeChat ????? ?? ?????? ???. ??? ??? ?? ????? ??? ? ??? ????? ??? WeChat ?????? ???? ?? ??????.

WeChat ?????? ???? ???? ? ??? ????. ??? ??? ???? JS ????? ???? ???? ???, ?? ??? ????? C# ??? ???? ???? ???? ????.

JS ??? ???? ??? ?? ??? ??? ?? ? ????.

????//判斷是否在微信中打開
????function?isWeiXin()?{????????var?ua?=?window.navigator.userAgent.toLowerCase();????????if?(ua.match(/MicroMessenger/i)?==?'micromessenger')?{????????????return?true;
????????}?else?{????????????return?false;
????????}
????}

??? ?? ??? ??? ????.

????????$(function?()?{????????????var?isWeixin?=?isWeiXin();????????????if?(isWeixin)?{
????????????????$("#weixin").html(window.navigator.userAgent);???//請?jiān)谖⑿胖写蜷_該頁面?????????????????????}????????????var?display?=?"是否在微信瀏覽器中打開：";
????????????display?+=?isWeixin???"是"?:?"否";
????????????$("#isWeixin").html(display);
????????});

????? WeChat? ???? ?????? ??? ???? ??? ?? ???????:yes.

?? ??? ??? C# ?? ??? ???? ????? ??? ??? ?? ????. ???? ????? ???? ????? ??? ?? ???? ??? WeChat ????? ?? ????? ? ????. ?? ??? ?????. ??? ??? ???? ???? ???? ???????.

????????///?<summary>
????????///?檢查是否微信中打開，否則重定向????????///?</summary>
????????///?<returns></returns>
????????protected?string?CheckBrowser()
????????{????????????bool?passed?=?false;????????????string?userAgent?=?Request.UserAgent;

????????????passed?=?userAgent.ToLower().Contains("micromessenger");????????????if?(!passed)
????????????{????????????????var?type?=?"warn";????????????????var?message?=?"請?jiān)谖⑿胖写蜷_該頁面";????????????????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);

WeChat? ?? ?????? ??? ??? ? ?? ????? ??? ??? ??? ????.

3. ?? ??? ???

?? ? ??? ??? ???? WeChat ??? ??????? ???? ? ?? ???? ?? ?? ????? ??? ???? ???? ?????? ???. WeChat ???? JQuery WeUI? ??? ?? ?? ?? ???? ?? ?? ??? ?????.

? ?? ??? ???? ?? JS ??? ?? ??? ????.

$("#job").select({
????????title:?"選擇職業(yè)",
????????items:?["法官",?"醫(yī)生",?"獵人",?"學(xué)生",?"記者",?"其他"],
????????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:?"額外的數(shù)據(jù)1"
??????????},
??????????{
????????????title:?"打球",
????????????value:?2,
????????????description:?"額外的數(shù)據(jù)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 ??? ???? ???? ??? ??? ??? ???? ???? ?? ??? ??? ??? ??? ? ????.

??? ?? ??? ?? ??? ?? ??? ??? ?? ?? ??? ??? ? ????.

????????????//綁定字典內(nèi)容到指定的控件
????????????function?BindDictItem(ctrlName,?dictTypeName,?onChange,?onClose,?onOpen)?{????????????????var?url?=?'/h5/GetDictJson?dictTypeName='?+?encodeURI(dictTypeName);????????????????//獲取Ajax的內(nèi)容，并放到items集合
????????????????var?control?=?$('#'?+?ctrlName);????????????????var?items?=?[];
????????????????$.ajax({
????????????????????type:?'GET',
????????????????????url:?url,????????????????????//async:?false,?//同步
????????????????????dataType:?'json',
????????????????????success:?function?(data)?{
????????????????????????control.empty();//清空下拉框
????????????????????????//把JSON集合加到數(shù)組里面
????????????????????????$.each(data,?function?(i,?item)?{
????????????????????????????items.push({
????????????????????????????????title:?item.Text,?value:?item.Value
????????????????????????????});
????????????????????????});????????????????????????//設(shè)置顯示列表????????????????????????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",?"設(shè)備狀態(tài)");
????????????????BindDictItem("Dept",?"科室");
????????????????BindDictItem("Building",?"建筑物");
????????????????BindDictItem("Floor",?"樓層");
????????????????BindDictItem("Special",?"特殊情況");
????????????});

???? ?? ??? ?? ??? ???????. ?? ???? ??? ??? ????.

WeChat ??????? ??? ??? ???? ??? ??? ????? ??? ? ????.

4. ?? ?? ???? ??

?? ???? ??? ??? ???? ??, ?? ???? ???. WeChat ??? ???? ?? ?????? ???? ???? ?? ??/?? ?? ??? ??? ? ????. ??? WeChat JSSDK? ??? ???? ?????? ??? ??? ? ?????

?? ??? ?? Jquery WeUI? ??? ??? ?????? JSSDK? ??? JS ??? ???? ???.

????<script src="~/Content/wechat/jquery-weui/lib/jquery-2.1.4.js"></script>
????<script src="~/Content/wechat/jquery-weui/js/jquery-weui.js"></script>
????<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

?? ?? ?? ??? ?? ????? JSSDK API ????? ??????.

????????var?appid?=?'@ViewBag.appid';????????var?noncestr?=?'@ViewBag.noncestr';????????var?signature?=?'@ViewBag.signature';????????var?timestamp?=?'@ViewBag.timestamp';

????????wx.config({
????????????debug:?false,
????????????appId:?appid,?//?必填，公眾號的唯一標(biāo)識
????????????timestamp:?timestamp,?//?必填，生成簽名的時間戳
????????????nonceStr:?noncestr,?//?必填，生成簽名的隨機(jī)串
????????????signature:?signature,?//?必填，簽名，見附錄1????????????jsApiList:?[???????????????'checkJsApi',???????????????'chooseImage',???????????????'previewImage',???????????????'uploadImage',???????????????'downloadImage'
????????????]
????????});????????//所有準(zhǔn)備好后
????????wx.ready(function?()?{
????????});

Join us ????? ? ??? ??? ???? ????. ??? ?? ?? ???? ?? ??? ??? ?????. ?? HTML ??? ?? ?? ?????.

????????<p class="weui_cells_title"><h3>銘牌圖片</h3></p>
????????<p class="weui_cells">
????????????<p class="weui_cell">
????????????????<p id="previewImage">
????????????????????@for?(var?i?=?0;?i?< ViewBag.mainList.Count; i++)
                    {
                        <img id=&#39;mainPic_@i&#39; src=&#39;@ViewBag.mainList[i]&#39; alt="銘牌圖片" style="height:auto;width:100%" />
????????????????????}????????????????</p>
????????????</p>
????????</p>

????????<p class="weui_cells_title"><h3>其他圖片</h3></p>
????????<p class="weui_cells">
????????????<p class="weui_cell">
????????????????<p id="previewImage2">
????????????????????<p class="weui-row">
????????????????????????@for?(var?i?=?0;?i?< ViewBag.otherList.Count; i++)
                        {
                            <p class="weui-col-50">
????????????????????????????????<img id=&#39;otherPic_@i&#39; src=&#39;@ViewBag.otherList[i]&#39; alt="其他圖片" style="height:auto;width:100%" />
????????????????????????????</p>
????????????????????????}????????????????????</p>
????????????????</p>
????????????</p>
????????</p>

? ??? ?? HTML ?? ???? ?? ?? ???? ?????. ? ??? ??? ??? ? ??? WeChat ????? ???? ??? ?? ? ? ??? ?? ? ??? ? ????.

??? ????? ??? ??? ????? ?? ??? ?????. ??? ??? JS ??? ??? ?? JS ??? ???? WeChat ???? ??? ??? ???? ????. ??? ????.

???

這個函數(shù)的做法，是參考網(wǎng)上一個大牛的做法，不過這樣做存在一個問題，圖片如果有多張的話，那么需要點(diǎn)擊第一張圖片才能開始預(yù)覽，不能點(diǎn)擊其他幾張開始。

為了改進(jìn)這個缺點(diǎn)，我們可以可以利用Razor的模板實(shí)現(xiàn)我們需要的代碼生成，如下所示集合了Razor模板生成JS代碼，實(shí)現(xiàn)了我們所需要JS代碼的生成。

????????var?urls?=?[];
????????@foreach?(var?url?in?ViewBag.mainList)
????{????????<text>urls.push('@url');</text>????}
????????@for?(var?i?=?0;?i?<?ViewBag.mainList.Count;?i++)
????{????????<text>
????????document.querySelector('#mainPic_@i').onclick?=?function?()?{
????????????wx.previewImage({
????????????????current:?$(this).attr("src"),//urls[@i],????????????????urls:?urls
????????????});
????????};????????</text>????}????????var?urlsOther?=?[];
????????@foreach?(var?url?in?ViewBag.otherList)
????{????????<text>urlsOther.push('@url');</text>????}
????????@for?(var?i?=?0;?i?<?ViewBag.otherList.Count;?i++)
????{????????<text>
????????document.querySelector('#otherPic_@i').onclick?=?function?()?{
????????????wx.previewImage({
????????????????current:?$(this).attr("src"),//urls[@i],????????????????urls:?urlsOther
????????????});
????????};????????</text>
????}

JS代碼的生成后的代碼如下所示.

????????var?urls?=?[];
????????urls.push('http://www.iqidi.com/UploadFiles/設(shè)備銘牌圖片/TIzMZl04X1iqkHMP44hXFHjQ-yyvrxS-tgwgzMGfwe9AUMTxKohcVC6w6O.jpg');
????????????????
????????document.querySelector('#mainPic_0').onclick?=?function?()?{
????????????wx.previewImage({
????????????????current:?$(this).attr("src"),//urls[0],????????????????urls:?urls
????????????});
????????};????????

????????var?urlsOther?=?[];
????????urlsOther.push('http://www.iqidi.com/UploadFiles/設(shè)備銘牌圖片/lJk_LNwxTGfL5SNpmJwWyfyBONa2JRO7uzu3PJV3aGsrilPPHY2r-ymU00.jpg');
????????????????
????????document.querySelector('#otherPic_0').onclick?=?function?()?{
????????????wx.previewImage({
????????????????current:?$(this).attr("src"),//urls[0],????????????????urls:?urlsOther
????????????});
????????};

這樣最終就可以實(shí)現(xiàn)我們所需要的效果了，當(dāng)然多張圖片也不會有任何的問題。

?

?更多C#開發(fā)微信門戶及應(yīng)用--微信H5頁面開發(fā)的經(jīng)驗(yàn)總結(jié)?相關(guān)文章請關(guān)注PHP中文網(wǎng)！