常見的移動端H5頁面開發遇到的坑和解決辦法

来源:https://www.cnblogs.com/ruruo/archive/2019/08/09/11325479.html
-Advertisement-
Play Games

轉過來，平時看看。雖然還有很多問題至今無解。比如：華為麒麟950的P8和meta打開我們的應用首頁經常偶發白屏。！！ 1、安卓瀏覽器看背景圖片，有些設備會模糊。 用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？ 經過研究，是devicePixelRatio作怪，因為手機解析度太小， ...


 

轉過來，平時看看。雖然還有很多問題至今無解。比如：華為麒麟950的P8和meta打開我們的應用首頁經常偶發白屏。！！

1、安卓瀏覽器看背景圖片，有些設備會模糊。

 

用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什麼呢？

 

經過研究，是devicePixelRatio作怪，因為手機解析度太小，如果按照解析度來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640解析度，在網頁里只顯示了480320，這樣devicePixelRatio＝2。現在android比較亂，有1.5的，有2的也有3的。

 

想讓圖片在手機里顯示更為清晰，必須使用2x的背景圖來代替img標簽（一般情況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，然後background-size:contain;，這樣顯示出來的圖片就比較清晰了。

 

代碼如下：

 

background:url(../images/icon/all.png) no-repeat center center;

-webkit-background-size:50px 50px;

background-size: 50px 50px;display:inline-block; width:100%; height:50px;

 

或者指定 background-size:contain;都可以，大家試試！

 

2、圖片載入

 

若您遇到圖片載入很慢的問題，對這種情況，手機開發一般用canvas方法載入：

 

具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html

 

下麵舉例說明一個canvas的例子：

 

<li><canvas></canvas></li>

 

js動態載入圖片和li 總共舉例17張圖片！

 

var total=17;

var zWin=$(window);

var render=function(){

 var padding=2;

 var winWidth=zWin.width();

 var picWidth=Math.floor((winWidth-padding*3)/4);

 var tmpl ='';

 for (var i=1;i<=totla;i++){

 var p=padding;

 var imgSrc='img/'+i+'.jpg';

 if(i%4==1){

  p=0;

 }

 tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

 var imageObj = new Image();

 imageObj.index = i;

 imageObj.onload = function(){

   var cvs =$('#cvs_'+this.index)[0].getContext('2d');

   cvs.width = this.width;

   cvs.height=this.height;

   cvs.drawImage(this,0,0);

 }

 imageObj.src=imgSrc;

 }

 

}

render();

 

 

3、假如手機網站不用相容IE瀏覽器，一般我們會使用zeptojs。

 

zeptojs內置Touch events方法，具體可以看http://zeptojs.com/#Touch events

 

看了一下zeptio新版的API，已經支持IE10以上瀏覽器，對zeptojs可以選擇使用！

 

4、防止手機中網頁放大和縮小。

 

這點是最基本的，最為手機網站開發者來說應該都知道的，就是設置meta中的viewport

 

還有就是，有些手機網站我們看到如下聲明：

 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

 

設置了DTD的方式是XHTML的寫法，假如我們頁面運用的是html5，可以不用設置DTD,直接聲明<!DOCTYPE html>。

 

使用viewport使頁面禁止縮放。 通常把user-scalable設置為0來關閉用戶對頁面視圖縮放的行為

 

<meta name="viewport" content="user-scalable=0" />

 

但是為了更好的相容，我們會使用完整的viewport設置。

 

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

 

當然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。

 

5、apple-mobile-web-app-capable

 

apple-mobile-web-app-capable是設置Web應用是否以全屏模式運行。

 

語法：

 

<meta name="apple-mobile-web-app-capable" content="yes">

 

說明：

如果content設置為yes，Web應用會以全屏模式運行，反之，則不會。content的預設值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。

 

6、format-detection

 

format-detection 啟動或禁用自動識別頁面中的電話號碼。

語法：

 

<meta name="format-detection" content="telephone=no">

 

說明：

預設情況下，設備會自動識別任何可能是電話號碼的字元串。設置telephone=no可以禁用這項功能。

 

7、html5調用安卓或者ios的撥號功能

 

html5提供了自動調用撥號的標簽，只要在a標簽的href中添加tel:就可以了。

如下：

 

<a href="tel:10010">10010</a>

 

8、html5GPS定位功能

 

具體請看：http://www.w3school.com.cn/html5/html_5_geolocation.asp

 

9、上下拉動滾動條時卡頓、慢

 

body {

 -webkit-overflow-scrolling: touch;

 overflow-scrolling: touch;

}

 

 

10、禁止複製、選中文本

 

Element {

 -webkit-user-select: none;

 -moz-user-select: none;

 -khtml-user-select: none;

  user-select: none;

}

 

解決移動設備可選中頁面文本(視產品需要而定)

 

11、長時間按住頁面出現閃退

 

element {

 -webkit-touch-callout: none;

}

 

 

12、iphone及ipad下輸入框預設內陰影

 

Element{

 -webkit-appearance: none;

}

 

 

13、ios和android下觸摸元素時出現半透明灰色遮罩

 

Element {

 -webkit-tap-highlight-color:rgba(255,255,255,0)

}

 

 

14、active相容處理 即 偽類 :active 失效

 

方法一：body添加ontouchstart

 

<body ontouchstart="">

 

方法二：js給 document 綁定 touchstart 或 touchend 事件

 

<style>

a {

color: #000;

}

a:active {

color: #fff;

}

</style>

<a herf=foo >bar</a>

<script>

document.addEventListener('touchstart',function(){},false);

</script>

 

15、動畫定義3D啟用硬體加速

 

Element {

 -webkit-transform:translate3d(0, 0, 0)

 transform: translate3d(0, 0, 0);

}

 

 

16、Retina屏的1px邊框

 

具體請百度谷歌關鍵字，解決方案有很多

 

17、webkit mask 相容處理

 

某些低端手機不支持css3 mask，可以選擇性的降級處理。

比如可以使用js判斷來引用不同class：

 

if( 'WebkitMask' in document.documentElement.style){

 alert('支持mask');

} else {

 alert('不支持mask');

}

 

 

18、旋轉屏幕時，字體大小調整的問題

 

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

 -webkit-text-size-adjust:100%;

}

 

 

19、transition閃屏

 

/設置內嵌的元素在 3D 空間如何呈現：保留3D /

-webkit-transform-style: preserve-3d;

/ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 /

-webkit-backface-visibility:hidden;

 

20、圓角bug

 

某些Android手機圓角失效

 

background-clip: padding-box;

 

 

21、頂部狀態欄背景色

 

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

 

說明：

除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta標簽不會起任何作用。

 

如果content設置為default，則狀態欄正常顯示。如果設置為blank，則狀態欄會有一個黑色的背景。如果設置為blank-translucent，則狀態欄顯示為黑色半透明。

 

如果設置為default或blank，則頁面顯示在狀態欄的下方，即狀態欄占據上方部分，頁面占據下方部分，二者沒有遮擋對方或被遮擋。

 

如果設置為blank-translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕為40px）。

 

預設值是default。

 

22、設置緩存

 

<meta http-equiv="Cache-Control" content="no-cache" />

 

手機頁面通常在第一次載入後會進行緩存，然後每次刷新會使用緩存而不是去重新向伺服器發送請求。如果不希望使用緩存可以設置no-cache。

 

23、桌面圖標

 

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

 

iOS下針對不同設備定義不同的桌面圖標。如果不定義則以當前屏幕截圖作為圖標。

 

上面的寫法可能大家會覺得會有預設光澤，下麵這種設置方法可以去掉光澤效果，還原設計圖的效果！

 

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />

 

圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px)

 

24、啟動畫面

 

<link rel="apple-touch-startup-image" href="start.png"/>

 

iOS下頁面啟動載入時顯示的畫面圖片，避免載入時的白屏。

可以通過madia來指定不同的大小：

 

<!--iPhone-->

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />

 

<!-- iPhone Retina -->

<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

 

<!-- iPhone 5 -->

<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

 

<!-- iPad portrait -->

<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

 

<!-- iPad landscape -->

<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

 

<!-- iPad Retina portrait -->

<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

 

<!-- iPad Retina landscape -->

<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

 

25、瀏覽器私有及其它meta

 

以下屬性在項目中沒有應用過，可以寫一個demo測試以下！

 

<!-- QQ瀏覽器私有 -->

<!-- 全屏模式 -->

<meta name="x5-fullscreen" content="true">

<!-- 強制豎屏 -->

<meta name="x5-orientation" content="portrait">

<!-- 強制橫屏 -->

<meta name="x5-orientation" content="landscape">

<!-- 應用模式 -->

<meta name="x5-page-mode" content="app">

 

<!-- UC瀏覽器私有 -->

<!-- 全屏模式 -->

<meta name="full-screen" content="yes">

<!-- 強制豎屏 -->

<meta name="screen-orientation" content="portrait">

<!-- 強制橫屏 -->

<meta name="screen-orientation" content="landscape">

<!-- 應用模式 -->

<meta name="browsermode" content="application">

 

其它,針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓

 

<meta name="HandheldFriendly" content="true">

 

微軟的老式瀏覽器

 

<meta name="MobileOptimized" content="320">

 

windows phone 點擊無高光

 

<meta name="msapplication-tap-highlight" content="no">

 

26、 IOS中input鍵盤事件keyup、keydown、keypress支持不是很好

 

問題是這樣的，用input search做模糊搜索的時候，在鍵盤裡面輸入關鍵詞，會通過ajax後臺查詢，然後返回數據，然後再對返回的數據進行關鍵詞標紅。

 

用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才能相應！

 

解決辦法：

可以用html5的oninput事件去代替keyup

 

<input type="text" id="testInput">

<script type="text/javascript">

 document.getElementById('testInput').addEventListener('input', function(e){

   var value = e.target.value;

 });

</script>

 

然後就達到類似keyup的效果！

 

27、h5網站input 設置為type=number的問題

 

h5網頁input 的type設置為number一般會產生三個問題，一個問題是maxlength屬性不好用了。另外一個是form提交的時候，預設給取整了。三是部分安卓手機出現樣式問題。

 

問題一解決，我目前用的是js。如下

 

<input type="number" oninput="checkTextLength(this ,10)">

 

function checkTextLength(obj, length) {

     if(obj.value.length > length)  {    

       obj.value = obj.value.substr(0, length);

     }

}

 

問題二，是因為form提交預設做了表單驗證，step預設是1,要設置step屬性，假如保留2位小數，寫法如下：

 

<input type="number" step="0.01" />

 

關於step，我在這裡做簡單的介紹，input 中type=number，一般會自動生成一個上下箭頭，點擊上箭頭預設增加一個step，點擊下箭頭預設會減少一個step。number中預設step是1。也就是step=0.01,可以允許輸入2位小數，並且點擊上下箭頭分別增加0.01和減少0.01。

 

假如step和min一起使用，那麼數值必須在min和max之間。

 

看下麵的例子：

 

<input type="number" step="3.1" min="1" />

 

輸入框可以輸入哪些數字？

 

首先，最小值是1，那麼可以輸入1.0，第二個是可以輸入（1+3.1）那就是4.1,以此類推，每次點擊上下箭頭都會增加或者減少3.1，輸入其他數字無效。這就是step的簡單介紹。

 

問題三，去除input預設樣式

 

input[type=number] {

 -moz-appearance:textfield;

}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

 -webkit-appearance: none;

 margin: 0;

}

 

 

28、ios 設置input 按鈕樣式會被預設樣式覆蓋

 

解決方式如下：

 

input,

textarea {

 border: 0;

 -webkit-appearance: none;

}

 

設置預設樣式為none

 

29、IOS鍵盤字母輸入，預設首字母大寫

 

解決方案，設置如下屬性

 

<input type="text" autocapitalize="off" />

 

30、select 下拉選擇設置右對齊

 

設置如下：

 

select option {

direction: rtl;

}

 

31、通過transform進行skew變形，rotate旋轉會造成出現鋸齒現象

 

可以設置如下：

 

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);

transform: rotate(-4deg) skew(10deg) translateZ(0);

outline: 1px solid rgba(255,255,255,0)

 

32、移動端點擊300ms延遲

 

300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致用戶體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。

 

推薦兩個js，一個是fastclick，一個是tap.js

 

關於300ms延遲，具體請看：http://thx.github.io/mobile/300ms-click-delay/

 

33、移動端點透問題

 

案例如下：

 

<div id="haorooms">點頭事件測試</div>

<a href="#">www.xxx.com</a>

 

div是絕對定位的蒙層,並且z-index高於a。而a標簽是頁面中的一個鏈接，我們給div綁定tap事件：

 

$('#haorooms').on('tap',function(){

$('#haorooms').hide();

});

 

我們點擊蒙層時 div正常消失，但是當我們在a標簽上點擊蒙層時，發現a鏈接被觸發，這就是所謂的點透事件。

 

原因：

 

touchstart 早於 touchend 早於click。 亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之後蒙層隱藏， 此時 click還沒有觸發，300ms之後由於蒙層隱藏，我們的click觸發到了下麵的a鏈接上。


解決：

（1）儘量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
（2）用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a標簽的click
（4）延遲一定的時間(300ms+)來處理事件 （不推薦）
（5）以上一般都能解決，實在不行就換成click事件。

下麵介紹一下touchend事件，如下：

 

$("#haorooms").on("touchend", function (event) {

  event.preventDefault();

 

});

 

34、消除 IE10 裡面的那個叉號

 

input:-ms-clear{display:none;}

 

35、關於 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)

 

iOS 瀏覽器橫屏時會重置字體大小，設置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。

 

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

text-size-adjust: 100%;

 

36、關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

 

可以通過正則去掉

 

this.value = this.value.replace(/\u2006/g, '');

 

37、移動端 HTML5 audio autoplay 失效問題

 

這個不是 BUG，由於自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發才可以播放。

 

解決方法思路：先通過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始載入，後面用 JS 再操作就沒問題了）。

 

解決代碼：

 

document.addEventListener('touchstart', function () {

 document.getElementsByTagName('audio')[0].play();

 document.getElementsByTagName('audio')[0].pause();

});

 

38、移動端 HTML5 input date 不支持 placeholder 問題

 

這個我感覺沒有什麼好的解決方案，用如下方法

 

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

 

有的瀏覽器可能要點擊兩遍！

 

39、部分機型存在type為search的input，自帶close按鈕樣式修改方法

 

有些機型的搜索input控制項會自帶close按鈕（一個偽元素），而通常為了相容所有瀏覽器，我們會自己實現一個，此時去掉原生close按鈕的方法為

 

#Search::-webkit-search-cancel-button{

 display: none;

}

 

如果想使用原生close按鈕，又想使其符合設計風格，可以對這個偽元素的樣式進行修改。

 

40、喚起select的option展開

zepto方式:

 

$(sltElement).trrgger("mousedown");

 

原生js方式:

 

function showDropdown(sltElement) {

 var event;

 event = document.createEvent('MouseEvents');

 event.initMouseEvent('mousedown', true, true, window);

 sltElement.dispatchEvent(event);

};

轉自：https://www.cnblogs.com/LiuJL/p/7744473.html

 


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

-Advertisement-
Play Games
更多相關文章
  • Notification 彈出一個通知在桌面右下角
    ps : 谷歌瀏覽器需要是https的網址,不然會提示不安全, 不能修改通知許可權,無法實現彈框 ...
  • 組件切換方式（Vue.js）
    這裡，我用一個註冊登錄兩組件的切換實例來演示： 切換方式一 這個方式唯一的缺陷就是只能在兩個組件之前切換，當要求需要三個及三個以上的組件切換的時候，這就不行了(原因是 flag 只有 true 和 false 兩個值)，這就要要使用 方式二了。 切換方式二 這裡，我們需要學到一個 Vue 官方 提供 ...
  • JS 的 Document對象
    Document 對象是是window對象的一個屬性，因此可以將document對象作為一個全局對象來訪問。 當瀏覽器載入 HTML 文檔, 它就會成為 Document 對象。 Document對象的 屬性和方法 1.html元素和body對象 document.documentElement 獲 ...
  • 純CSS繪製3D立方體
    本篇記錄的是使用CSS3繪製3D立方體，並旋轉起來。 我的思路： 1️⃣ 首先，用div元素畫6個正方形摞在一起放在畫布中間。為了區分，分別給每個div選擇了不同的顏色，並且設置為半透明方便透視。 2️⃣ 將6個div元素分為三組（上下一組、左右一組、前後一組），想象以畫布中心為圓點，使三組分別沿x ...
  • Sublime安裝插件
    使用ctrl+shift+p快捷鍵，在框中輸入pc，選擇Install Package Control，等待左下角安裝完成。 安裝完成後，再次使用ctrl+shift+p快捷鍵，框中輸入install package回車等待，然後輸入你想要安裝的插件。 常用插件： ChineseLocation 漢 ...
  • 導航菜單的實現
    熟練使用導航欄，對於網站排版非常重要,使用CSS，js，jq等你可以轉換成好看的導航欄而不是枯燥的HTML菜單。 CSS實現： js實現： jq實現： ...
  • 一個手寫的Vue放大鏡，複製即可使用
    一個手寫的vue放大鏡 組件使用less，請確保已安裝loader 本組件為放大鏡組件，傳參列表為: width: 必傳，設置放大鏡的寬高(正方形)，放大區域等同，放大倍數為2倍 picList:必傳，傳入圖片列表 使用示例: script: import mirror from 'xx/mirro ...
  • JavaScript之操作符
    寫在前面：電腦被髮明的初衷僅僅是為了快速實現一些數學計算，然而經過多年發展，電腦已經不單單能實現快速計算這麼簡單的工作了，現代電腦不僅能夠進行數值的計算，還能進行邏輯計算，還具備存儲記憶功能，是能夠按照程式運行，自動、高速處理海量數據的現代智能電子設備，儼然已經成了我們生活的必需品。有興趣的同 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類