基於Jquery WeUI的微信開發H5頁面控制項的經驗總結(2)

来源:https://www.cnblogs.com/wuhuacong/archive/2020/03/25/12558852.html
-Advertisement-
Play Games

在微信開發H5頁面的時候，往往藉助於WeUI或者Jquery WeUI等基礎上進行界面效果的開發，由於本人喜歡在Asp.net的Web界面上使用JQuery，因此比較傾向於使用 jQuery WeUI，本篇隨筆結合官方案例和自己的項目實際開發過程的經驗總結，對在H5頁面開發過程中設計到的界面控制項進行... ...


在微信開發H5頁面的時候，往往藉助於WeUI或者Jquery WeUI等基礎上進行界面效果的開發，由於本人喜歡在Asp.net的Web界面上使用JQuery，因此比較傾向於使用 jQuery WeUI，本篇隨筆結合官方案例和自己的項目實際開發過程的經驗總結，對在H5頁面開發過程中設計到的界面控制項進行逐一的分析和總結，以期能夠給大家在H5頁面開發過程中提供有用的參考。

本篇隨筆繼續上篇隨筆《基於Jquery WeUI的微信開發H5頁面控制項的經驗總結（1）》進行介紹其他部分的內容。

7）條碼、二維碼生成

 在我們做一些掃碼操作的時候，我們可能需要根據一些參數生成一些URL，然後生成一個二維碼的方式，方便手機掃碼直接查看，或者給一些條碼設備進行條碼的讀取，那麼這兩種情況結合起來就是二維碼和條碼的處理場景。

例如下麵的處方信息展示裡面，就需要這樣的場景。

二維碼QRCode使用的地址是：https://github.com/davidshimjs/qrcodejs 

條碼JsBarcode使用的地址是：https://github.com/lindell/JsBarcode

使用前，我們引入所需要的qrcodejs和JsBarcode的JS庫文件。

<script src="~/Content/JQueryTools/qrcodejs/qrcode.min.js"></script>
<script src="~/Content/JQueryTools/JsBarcode/dist/JsBarcode.all.min.js"></script>

二維碼和條碼的處理腳本很簡單，如下JS代碼所示。

//條碼
JsBarcode("#barcode", "@ViewBag.Info.PrescriptionNo", {
  format: "CODE128",
  lineColor: "#0aa",
  height: 50,
  displayValue: false
});

//二維碼
var url = '@ViewBag.WebsiteDomain/h5/[email protected]';
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: url, //"@ViewBag.Info.PrescriptionNo",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

使用腳本處理的方式非常不錯。

 

8）JQuery的Ajax/Post/Get等相關處理

 在我們前面很多案例代碼裡面，都採用了JQuery的Ajax/Post/Get/getJSON等函數，它們之間很多時候可以相互替代，差異只是很少的部分。

$.get()方法使用GET方式來進行非同步請求，它的語法結構為：$.get( url [, data] [, callback] )。如下代碼所示。

$.getJSON()是專門為ajax獲取json數據而設置的，並且支持跨域調用，其語法的格式為：getJSON(url,[data],[callback])。

var flowUsers = [];
var url = '/qyh5flow/GetCorpUser';
$.getJSON(url, function (data) {
    $.each(data, function (i, item) {
        flowUsers.push({
            title: item.name, value: item.userid
        });
    });
    $("#txtSelectSignUser").select({
        title: "選擇會簽人員",
        items: flowUsers,
        multi: true,
        //min: 2,
        //max: 3,
    });
});

$.get()和$.getJSON()兩種方法，後者比前者多了一個對返回數據進行JSON轉換對象的處理，$.get()方法需要使用下麵代碼進行JSON的轉換。

 var data = $.parseJSON(json);

$.post()方法使用POST方式來進行非同步請求，它的語法結構為：$.post(url,[data],[callback],[type])，這個相對於$.get()的操作，使用POST方式提交。

其中的type：type為請求的數據類型，可以是html,xml,json等類型，如果我們設置這個參數為：json，那麼返回的格式則是json格式的，如果沒有設置，就和$.get()返回的格式一樣，都是字元串的。

如下代碼是我們使用$.post()的函數進行數據的提交，註意我們也需要使用$.parseJSON進行返回值JSON轉換對象的處理。

$.post(url, postData, function (json) {
    //轉義JSON為對象
    var data = $.parseJSON(json);
    if (data.Success) {
        $.toptip("刪除成功！", 'success');

        //在界面上找到對應控制項ID，移除控制項
        RemoveImg();
    }
    else {
        $.toast("操作失敗:" + data.ErrorMessage, "forbidden");
    }
});

$.ajax()是jquery中通用的一個ajax封裝，其語法的格式為：$.ajax(options)，其中options是一個object類型，它指明瞭本次ajax調用的具體參數。

一般在使用FormData對象的時候，我傾向於使用$.ajax進行處理，以便更多的彈性化設置。

//提交表單數據和文件
var url = "/qyH5Flow/[email protected]";
$.ajax({
    url: url,
    type: 'post',
    processData: false,
    contentType: false,
    data: formData,
    success: function (json) {
        //轉義JSON為對象
        var data = $.parseJSON(json);
        if (data.Success) {
            $.toast("保存成功，稍後請到列表界面查看。");
        }
        else {
            $.toast("保存失敗:" + data.ErrorMessage, "forbidden");
        }
    }
});

以上就我進行在案例裡面使用的各種操作，有時候可以相互替換，根據需要選擇不同的操作方式即可。

 

9）JS腳本的數組對象處理

上面我們使用了各種非同步的操作，如JQuery的Ajax/Post/Get/getJSON等函數操作，經常會涉及對數組的遍歷處理或者插入處理。

JS數組是一個很的強大的數組對象，支持很多複雜的操作，對數組的操作也是我們經常處理的方式之一。

例如對於返回的數據，我們一般需要進行數組的遍歷，然後逐一追加到界面顯示，這裡就需要使用$.each()函數。

//動態處理圖片綁定
$.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {
    $.each(data, function (i, item) {
        $("#imgAttach").append(`<img class='weui-uploader__file' src='${item.Text}' id='img_${item.Value}'/>`);
    });
});

$.each()函數另一個經常使用的場景就是根據JQuery選擇器進行元素集合的遍歷處理。

var itemCount = 0;
//計算單選框的選中數量
$("input[type='radio']:checked").each(function(){
    itemCount += 1;
});
//覆選框選中算一個
var chkName = []
$("input[type='checkbox']:checked").each(function () {
    var name = $(this).attr('name');
    if (chkName.indexOf(name) < 0) {
        itemCount += 1;
        chkName.push(name);
    }
});

我們在需要加入對象的時候，就需要使用push()函數操作了，有時候往往和$.each()函數配合使用。

var items = [];
$.each(data, function (i, item) {
    items.push({
        title: item.Text, value: item.Value
    });
});

或者進行元素遍歷查詢的時候，如下代碼所示。

//構建選中的列表內容
var list = [];
//計算單選框
$("input[type='radio']:checked").each(function () {
    list.push($(this).val());
});
//計算覆選框
$("input[type='checkbox']:checked").each(function () {
    list.push($(this).val());
});

如果我們需要判斷某個對象是否在集合裡面，我們就會用到$.inArray() 函數進行判斷，如下代碼所示。

if ($.inArray(key, addKeyList) == -1) {
    addKeyList.push(key);
    addValueList.push(value);
    sendList.push({ key: key, value: value});

    $('#tagsToSend').addTag(value);
}

另外，我們對數組還需要瞭解，如何移除單個或者所有的集合，這個就用到了splice()函數，如下代碼所示。

addKeyList.splice(i, 1);//移除某個對象
addValueList.splice(i, 1);//移除某個對象
sendList.splice(i, 1);//移除某個對象

如果需要清空數組，常用的做法如下所示，也是使用splice()函數。

//清空用戶選擇
function ClearChoice() {
    $('#tagsToSend').importTags('');

    sendList.splice(0, sendList.length);//待發送的部門、標簽、用戶列表
    addKeyList.splice(0, addKeyList.length);//鍵的集合
    addValueList.splice(0, addValueList.length);//值的集合
}

以上就是我們操作數據的時候，經常使用的一些方法。

 

10）查詢即時列表展示

有時候，我們需要根據查詢的條件，對資料庫的信息進行檢索，然後即時的顯示在列表中，供選擇使用，如下界面所示。

 

上圖是我項目中，根據拼音碼或者名稱對藥品進行檢索，返回的數據進行顯示的處理。

為了使用搜索欄，我們使用了微信WeUI定義的搜索欄樣式，以下是界面定義的搜索欄DIV層，如下代碼。

    <!--搜索欄，類似於微信原生的搜索欄，應用於常見的搜索場景。-->
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" onkeydown="if(event.keyCode==13) return false;">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:clear()" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>請輸入你想要查看的關鍵字</span>
            </label>
        </form>
        <a href="javascript:clear()" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>

我們在JS代碼上執行對應事件的處理，如下所示。

主要就是監控Input控制項的內容變化，進行及時的查詢和內容展示。

//查詢框輸入內容觸發事件
$('#searchInput').bind('input propertychange', function () {
    var name = $("#searchInput").val();

    //獲取Json對象集合，並生成數據顯示內容
    var url = "/h5/FindDrugWithPager?page=1&rows=5&Name=" + encodeURI(name);
    $.getJSON(url, function (data) {
        $("#searchContent").html("");
        var html = "";
        $.each(data.rows, function (i, item) {
            var background = (i % 2 == 0) ? "background-color:Highlight" : "";
            html += `<li>
               <div class='pic'><img src='@ViewBag.WebsiteDomain/Content/images/drug.png' /></div>
               <div class='text'>
                    <h2><i></i><span>` + item.CommonName + `</span><em>`+ item.Specification +`</em></h2>
                    <p>商品名：` + item.ProductName + `</p>
                    <p>廠  家：`+item.Manufacturer  +`</p>
               </div>
               <a class='ture' href=\"javascript:;\" onclick=\"AddDrug('` + item.ID + `','`+ item.ProductName  +`')\" ><img src='@ViewBag.WebsiteDomain/Content/images/add1-24.png'></a>
            </li>`;
        });
        $("#searchContent").html(html);
    });
});

function cancel() {
    $("#searchContent").empty();
}

function clear() {

    $('#searchInput').val('')
    $("#searchContent").empty();
}

這裡的HTML模板，我們有時候也使用代碼塊的方式，在模板代碼裡面插入變數，如下所示。

$.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {
    $.each(data, function (i, item) {
        $("#previewImage").append(`<img class="weui-preview-box" src='${item.Text}' id='img_${item.Value}'/>`);
    });
});

這裡的代碼塊，開始和結束符使用了 ` ` 符號塊，其中插入了變數${item.Text} 、${item.Value}等變數字元串，並沒有打斷模板的內容，如果多行，我們一樣的處理，非常方便。

$.getJSON(url, function (data) {
    var html = "";
    $.each(data.rows, function (i, item) {
        html += `<div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd">
                <span>${item.FormName}</span>：<span>${item.EditorName}</span>，<span>${item.Edittime}</span>
                <span class="ord-status-txt-ts fr"><b>${GetStatus(item.Status)}</b></span>
            </div>
            <div class="weui-media-box__bd  pd-10">
                <div class="weui-media-box_appmsg ord-pro-list">
                    <div class="weui-media-box__bd">
                        <p class="weui-media-box__desc">標題：<span>${item.Title}</span></p>
                        <div class="clear mg-t-10">
                            <div class="pro-amount fl"><span class="font-13">當前處理類型：<em class="num font-15">${item.Proc_TypeName}</em></span></div>
                            <div class="pro-amount fr"><span class="font-13">當前處理人：<em class="name">${item.Proc_UserName}</em></span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-panel__ft">
                <div class="weui-cell weui-cell_access weui-cell_link oder-opt-btnbox">
                    <a href="${item.ViewUrl}?id=${item.ID}" class="ords-btn-dele">查看詳情</a>
                </div>
            </div>
        </div>`;

    });

    $("#" +divname).html(html);
});

這是我們推薦使用的JS代碼塊，整塊代碼都不影響閱讀，而且可以換行排版，非常直觀。 

 

11）界面彈窗處理

在微信Weui裡面定義了幾種常規的彈窗處理。

對話框只能通過 JavaScript 進行調用，微信WeUI提供了三種常用的對話框 Alert, Confirm, Prompt 和 Login。我們也可以通過 $.modal 來自定義對話框

實際上， Alert, Confirm, Prompt 和 Login 都是 Modal 的一種定製而已。

 

一般的JS調用代碼如下所示。

//常規提示視窗
$.alert("自定義的消息內容", "自定義的標題");

//確認提示視窗
$.confirm("自定義的消息內容", "自定義的標題", function() {
  //點擊確認後的回調函數
  }, function() {
  //點擊取消後的回調函數
  });

例如我們在流程表單處理裡面，會在操作前進行提示用戶是否確認處理。

//退回擬稿人重新處理
function ApplyCancel(opinion) {
    var tipMessage2 = "數據檢查完畢，如確認無誤將【退回擬稿人重新處理】，您確實要提交嗎？";
    $.confirm(tipMessage2, "退回擬稿人重新處理?", function () {
        var userid = "@ViewBag.userid";
        var applyid = "@Request["id"]";
        var url = "/QyH5Flow/SkipFirstApply";
        //構造參數發送給後臺
        var postData = {
            userid: userid,
            applyId: applyid,
            opinion: opinion
        };
        $.post(url, postData, function (json) {
            var data = $.parseJSON(json);
            if (data.Success) {
                //console.log(data);
                //提示處理結果
                $.toast("您已經退回經辦人進行修改。");

                $.closePopup();
                initControls();//重新載入
            }
            else {
                $.toast("操作失敗:" + data.ErrorMessage);
            }
        });

    }, function () {
        //取消操作
    });
}

登陸視窗界面效果如下所示。

 

$.login("自定義的消息內容", function(username, password) {
  // 這裡進行登錄操作
}, function() {
});

//如果參數過多，建議通過 object 方式傳入
$.login({
  title: '標題',
  text: '內容文案',
  username: 'tom',  // 預設用戶名
  password: 'tom',  // 預設密碼
  onOK: function (username, password) {
    //點擊確認
  },
  onCancel: function () {
    //點擊取消
  }
});

我們可以利用登錄框進行一個系統賬號的綁定，如下是實際項目的處理代碼。

$(document).on('click', '#btnBind', function() {
    $.login({
      title: '登錄',
      text: '請輸入用戶名和密碼',
      onOK: function (username, password) {
          var url = "/H5/[email protected]";
          var postData = {
              username: username,
              password: password
          };

          $.post(url, postData, function (json) {
              //轉義JSON為對象
              var data = $.parseJSON(json);
              if (data.Success) {
                  $.toptip('登錄成功!');
                  location.reload();//刷新頁面
                  //WeixinJSBridge.call('closeWindow');//關閉視窗
              }
              else {
                  $.toptip("登錄失敗:" + data.ErrorMessage, "forbidden");
              }
          });
      },
      onCancel: function () {
        $.toptip('取消登錄!', 'cancel');
      }
    });
});

上述的幾種對話框都是 $.modal 的一種特殊形式。你可以通過 $.modal 來定製對話框

$.modal({
  title: "Hello",
  text: "我是自定義的modal",
  buttons: [
    { text: "支付寶", onClick: function(){ console.log(1)} },
    { text: "微信支付", onClick: function(){ console.log(2)} },
    { text: "取消", className: "default", onClick: function(){ console.log(3)} },
  ]
});

預設情況下，點擊對話框的按鈕都會先關閉對話框再觸發回調函數。可以通過JS來關閉任何正在顯示的對話框:

$.closeModal();

 

除了上面的幾種情況的模態對話框，還有一種是Popup彈出遮蓋下麵頁面的場景，如常規的購物車的情況。

Popup 是一個覆蓋式的彈出層，可以完全蓋住當前頁面或者遮蓋一半。

例如我在流程處理頁面中，往往需要進行審核、會簽處理的時候，彈出對應的處理內容，這個就是Popup的使用場景。

 

我們通過JS進行調用顯示視窗。

$("#SignAction").popup();//主動彈出視窗

其中SignAction層就是一個popup的視窗層，視圖HTML代碼如下所示。

 

我們只需要註意到 class='weui-popup__container popup-bottom' 的說明，就知道它的樣式了，從底部彈出的Popup視窗。

如果沒有加上Popup-bottom的樣式，那麼就是全屏覆蓋的模式。

關閉 Popup

給任何鏈接加上 class='close-popup' 則點擊之後可以關閉當前打開的 popup. 你也可以通過 $.closePopup() 來關閉。 

 

12）微信JSSDK的整合等處理

 微信JSSDK提供了很多豐富的功能，我們可以利用JSSDK實現圖片的上傳、預覽、掃碼等操作，圖片上傳由於我使用了附件上傳的方式，因此不在介紹較為繁瑣的JSSDK圖片上傳模式，有興趣可以參考我之前隨筆《微信開發中使用微信JSSDK和使用URL.createObjectURL上傳預覽圖片的不同處理對比》瞭解下不同。

a) 圖片預覽

一般我們在一些查看內容的視圖界面裡面，往往對圖片進行預覽操作，這時候可以利用JSSDK的圖片預覽介面，在使用JSSDK介面前，需要進行介面的初始化，然後才能調用，下麵是初始化和調用的案例代碼。

    <!--微信API初始化-->
    <script language="javascript">
        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'
            ]
        });

        //所有準備好後，通過樣式查找的方式，加入對應集合，然後綁定click事件
        wx.ready(function () {
            var $images = $(".preview").find("img");
            var imgPaths = [];
            $images.each(function(){
                imgPaths.push(this.src);
            });

            $images.on("click",function(){
                wx.previewImage({
                    current: this.src,
                    urls: imgPaths
                });
            });
        });
    </script>

而圖片的初始化，我們可以在HTML代碼進行處理即可。

<div id="previewImage" class="preview">
    @if (ViewBag.PresImages != null)
    {
        for (var i = 0; i < ViewBag.PresImages.Count; i++)
        {
            <img class="weui-preview-box" src='@ViewBag.PresImages[i]' alt="處方圖片">
        }
    }
</div>

b) 調用掃碼處理

我們可以利用JSSDK調用手機的掃碼操作，讓其進行相應的掃碼處理，如下是使用JSSDK進行掃碼的JS代碼。

    <script language="javascript">
        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',
                'scanQRCode'
            ]
        });

        //所有準備好後
        wx.ready(function () {
            document.querySelector('#scancode').onclick = function () {//調用掃碼事件返回掃碼值
                wx.scanQRCode({
                    needResult: 1,
                    desc: 'scanQRCode desc',
                    success: function (res) {
                        //console.log(res.resultStr);
                        var isUrl = CheckUrl(res.resultStr);
                        if (isUrl) {
                            location.href = res.resultStr;//跳轉頁面
                        }
                    }
                });
            };
        });
        //驗證URL字元串
        function CheckUrl(str) {
            var RegUrl = new RegExp();
            RegUrl.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$");//jihua.cnblogs.com
            if (!RegUrl.test(str)) {
                return false;
            }
            return true;
        }
    </script>

上面掃碼後，識別判斷URL，如果是URL，那麼頁面地址自動調整到相應的界面上去。

以上就是一些實際項目中運用到的各種界面處理和JS處理代碼，拋磚引玉，希望大家多多支持和鼓勵。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C++中 string 中的方法的使用詳解(心得)
    string 字元串在所有的語言中都非常重要，c++也不例外,接下來我們將介紹string中的常用方法 1. size() 和 length() 函數 : 他們返回字元串的真實長度，且不會因為空格而截斷，這兩個方法完全等價，使用及輸出如下： #include<iostream> #include<s ...
  • 這麼理解線程生命周期，是不是很簡單？
    | 好看請贊，養成習慣 你有一個思想，我有一個思想，我們交換後，一個人就有兩個思想 If you can NOT explain it simply, you do NOT understand it well enough 現陸續將Demo代碼和技術文章整理在一起 "Github實踐精選" ，方便 ...
  • python基礎入門之十二 —— lambda表達式
    一、語法 作用：簡化函數代碼 格式：lambda 參數列表 ：表達式 P.s: lambda表達式參數可有可無，參數寫法同函數 lambda函數能接收任何數量的參數但只能返回一個表達式的值 def func0(): return 100 func = lambda: 100 # lambda本質是一 ...
  • Spring01——你應該瞭解的，有關 IOC 容器的一切
    從本文開始，將開始介紹關於 Spring 的一些常見知識點。關註我的公眾號「Java面典」，每天 10：24 和你一起瞭解更多 Java 相關知識點。 在如今的 Java Web 開發中，Spring 生態圈占據著巨大的市場份額。幾乎是每個互聯網公司都在用 Spring 生態圈的東西。所以掌握Spr ...
  • F版本SpringCloud 2—什麼是SpringCloud？SpringCloud版本選擇
    引言：搭建微服務架構就像是買電腦，使用SpringCloud就是在買品牌機。 前言 昂，美好的天氣里，不想直接說技術，給小伙伴萌看看傍晚的天空吧。 —— 能找到天上的北極星嗎？ 上一篇文章中，通過一個簡單的小故事，輕鬆愉快的講解了架構的演變，以及為啥會有微服務，什麼是微服務。不過在最後留下了一個小疑 ...
  • 五分鐘學Java：一篇文章搞懂spring和springMVC
    原創聲明 本文作者：黃小斜 轉載請務必在文章開頭註明出處和作者。 本文思維導圖 什麼是Spring，為什麼你要學習spring？ 你第一次接觸spring框架是在什麼時候？相信很多人和我一樣，第一次瞭解spring都不是做項目的時候用到，而是在網上看到或者是聽到過一個叫做spring的框架，這個框架 ...
  • C++ 虛繼承
    前言 虛繼承 是面向對象編程中的一種技術，是指一個指定的基類，在繼承體繫結構中，將其成員數據實例共用給也從這個基類型直接或間接派生的其它類。 虛擬繼承是多重繼承中特有的概念。虛擬基類是為解決多重繼承而出現的。 虛擬繼承在一般的應用中很少用到，所以也往往被忽視，這也主要是因為在C++中，多重繼承是不推 ...
  • abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之五(四十一)
    在上一篇abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之四(四十)文章中我們已經定義了應用的介面，併在應用層實現了這些介面。接下來我們要在展示層來實現入庫單的列表功能。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類