WeChat ポータルおよびアプリケーションの C# 開発 -- WeChat H5 ページ開発の経験の概要

    //判断是否在微信中打开
    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);   //请在微信中打开该页面                     }            var display = "是否在微信浏览器中打开：";
            display += isWeixin ? "是" : "否";
            $("#isWeixin").html(display);
        });

        /// <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 = "请在微信中打开该页面";                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");
        },
      });

    $("#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);
        }
      });

            //绑定字典内容到指定的控件
            function BindDictItem(ctrlName, dictTypeName, onChange, onClose, onOpen) {                var url = '/h5/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);                //获取Ajax的内容，并放到items集合
                var control = $('#' + ctrlName);                var items = [];
                $.ajax({
                    type: 'GET',
                    url: url,                    //async: false, //同步
                    dataType: 'json',
                    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", "特殊情况");
            });

    <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>

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

        wx.config({
            debug: false,
            appId: appid, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1            jsApiList: [               'checkJsApi',               'chooseImage',               'previewImage',               'uploadImage',               'downloadImage'
            ]
        });        //所有准备好后
        wx.ready(function () {
        });

        <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>

        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>
    }

        var urls = [];
        urls.push('http://www.iqidi.com/UploadFiles/设备铭牌图片/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/设备铭牌图片/lJk_LNwxTGfL5SNpmJwWyfyBONa2JRO7uzu3PJV3aGsrilPPHY2r-ymU00.jpg');
                
        document.querySelector('#otherPic_0').onclick = function () {
            wx.previewImage({
                current: $(this).attr("src"),//urls[0],                urls: urlsOther
            });
        };