1. Set REM on the mobile terminal

Function (doc, win) {var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (! clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 375) + 'px'; }; if (! doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);Copy the code

2. Load the device from the mobile terminal

window.addEventListener("scroll", function (e) { e = e || window.event; /* Windows. Event */ scrollDown(); }) var page=1; var pageCount=5; function scrollDown(){ var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //clientHeight is the height of the content viewable area. //scrollHeight is the height of the viewable area of the content plus the overflow (scroll) distance. / / so, Scroll to the bottom of condition is the scrollTop + clientHeight = = scrollHeight if (document. DocumentElement. ScrollHeight = = Document. The documentElement. ClientHeight + scrollTop) {/ / add data if (page < pageCount) {page++; Console. log(" page "+" page "); } else {the console. The log (' one touch the bottom line) alert (' has been at the bottom of the touch ')}}} var scrol = function (e) {e = e | | window. The event; If (e.weaver >0){alert(" swipe up ")}else{if(e.weaver >0){alert(" swipe up ")}else{ Alert (" scrollDown ") scrollDown(); }else{/* firefox */ if(e.dial <0){alert(" swipe up ")}else{alert(" swipe down ") scrollDown(); } / * is up to 3 * 3 * /}} is a down / / if (document. AddEventListener) {/ / document addEventListener (" DOMMouseScroll scrol) / /}  // window.onmousewheel=document.onmousewheel=scrol;Copy the code

3. Encapsulate and intercept URL address parameters

function urlintercept(name) {
        var search = location.search.slice(1);
        var arr = search.split("&");
        for (var i = 0; i < arr.length; i++) {
            var ar = arr[i].split("=");
            if (ar[0] == name) {
                if (unescape(ar[1]) == 'undefined') {
                    return "";
                } else {
                    return unescape(ar[1]);
                }
            }
        }
        return "";
    }
Copy the code

4. Successful error message pop-up window

function alertstyle(e) { var Ahtml = '<div class="popubg">' +'<div>' +'<p>'+ e +'</p>' +'</div>' +'</div>'; $("body").append(Ahtml); var time_y = setTimeout(function () { $(".popubg").remove(); clearTimeout(time_y); }, 3000); }Copy the code

5. Applet updates automatically

update() { console.log('---update----', typeof wx.canIUse('getUpdateManager')) if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() UpdateManager. OnCheckForUpdate (function (res) {/ / request of the new version information callback console. The log (res, '-- checkout -'. Res. HasUpdate) if (res) hasUpdate) {the console. The log (' has asked the new version) updateManager. OnUpdateReady (function () { Console. log('-------update-----') wx.showModal({title: 'Update prompt ', Content:' New version is ready, do you want to restart the application? ', showCancel: showCancel, success: Function (res) {if (res.confirm) { Call applyUpdate use new version and restart updateManager. ApplyUpdate ()}}})}) updateManager. OnUpdateFailed (function () { Console. log('---- failed to download --') // New version failed to download wx.showModal({title: 'New version already exists ~', content: })}else{console.log(' no new version ') wx.showmodal ({title: 'prompt ', content: 'No new version'})}})} else {// If you want users to experience your applet on the latest version of the client, you can prompt wx.showmodal ({title: 'prompt ', content: 'The current wechat version is too early to use this function. Please upgrade to the latest wechat version and try again. '})}}})Copy the code

6. Do not open the console

<script type='text/javascript'> // Disable right-click (prevent right-click view source code) window.ο NC ο ntextMenu =function(){return false; }} window.onkeyDown = window.onkeyup = window.onKeyPress = function () {window.onkeyDown = window.onkeyup = window.onkeyPress = function () { window.event.returnValue = false; return false; Var h = window.innerheight,w=window.innerWidth; var h = window.innerheight,w=window.innerWidth; window.onresize = function () { if (h! = window.innerHeight||w! =window.innerWidth){ window.close(); window.location = "about:blank"; } } </script>Copy the code

7. Mobile compatibility problems

1). Ios on binding event click does not work use touchStart 2). Event delegate ios wechat click does not work: can not use doucument delegate solution: 1. 3). The ios soft keyboard does not return the page when it is pressed; $("input").focus(function() { this.scrollTop = $(window).scrollTop() }); $("input").blur(function() { $(window).scrollTop(this.scrollTop) }) 4). Limit input integer six The decimal two and only a decimal point The first input to get zero var reg = / ^ (\ -) * (\ d +) \. (\ d \ d). * $/; Replace (/^\./g,'0.'); newstr=newstr.replace(/^\./g,'0.'); Newstr =newstr.replace(/\.{2,}/g,'.'); / / ensure that only one point newstr = newstr. Replace (". ", "$# $"). The replace (/ \. J/g," "). The replace (" $# $", ""); newstr = newstr.replace(reg,'$1$2.$3'); If (newstr >= 1000000){newstr = newstr.substr(0,6)}Copy the code

8. MAC Nginx configuration steps

First in/usr/local/etc/nginx/servers/directory under a new name extension. The conf file command to touch the file name. The conf configuration of the domain name and file path Second open/etc/hosts file to add the domain name Nginx -s reload nginx (Windows configuration) C:\Windows\System32\drivers\etc hosts file Add 127.0.0.1 ecsc.meishijia.com in the last lineCopy the code

9. Applets

WxParse rich text, Feel no small program to provide rich-text components with live-player-plugin live program plug-in Painter small program drawing, TWO-DIMENSIONAL code WXPayMpActionReporter data reporting plug-in Calendar calendar plug-in Wechat simultaneous interpretation through access to the global unique voice recognition manager recordRecoManager to achieve Tencent video plug-in advertising can be paid to advertising Tencent map plug-in OCR support plug-in (support ID card recognition, We-cropper, image-Cropper (preferably) image clipping plug-inCopy the code

10. Resolve browser cache issues

<script> document.write("<script type='text/javascript' src='/web/js/shopCart/walletShopTypePayType.js? time=" + Date.now() + "'><\/script>"); < / script > method more sortie 👉 https://www.cnblogs.com/wangyongx/p/10278520.html mate method, clear from the form of a temporary cache, jq Ajax clear browser cache (① With Ajax request server latest file, If (" modified-since ", "Cache ", "false", "random", "random", "random", "cache-control"); No - the cache, and must - revalidate))"Copy the code

11. Compression tools

Tinypng.com/ Image compression

www.shipinyasuo.com/ Video compression

www.shipinyasuo.com/ online CSS/HT…

Tool.css-js.com/ JS…

12. Generate an SSH key

2. Open git bash, enter ssh-keygen three times, then press Enter to complete.Copy the code

13. Improve the speed with which Webpack builds vUE projects

DllPlugin and DllReferencePlugin found that we can use the webPack plug-in DllPlugin and DllReferencePlugin to implement the function we want. DllPlugin can package the third-party libraries we need to package into a JS file and a JSON file. This JSON file will map the address and ID of each packaged module. DllReferencePlugin can use the packaged modules by reading this JSON file. For details, please visit 👉 https://github.com/lin-xin/blog/issues/10Copy the code

14. Determine the device (mobile terminal or PC terminal)

if(/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|Web OS|Symbian|Windows Phone/i.test(window.navigator.userAgent.toLowerCase())){ window.location.href = ''; }Copy the code

15. Flexible. Js for mobile terminal adaptation

Taobao rem adapter DPR configuration at https://www.jianshu.com/p/04efb4a1d2f8Copy the code

16. Point to taobao mirror

npm --registry https://registry.npm.taobao.org install
Copy the code

17. Thousands separator

"12345678".replace(/(\d)(? = (? :\d{3})+$)/g, '$1,') output is 12,345,678Copy the code

18. Import and export of forms

1) Import of form 1.1 El-upload component, <el-upload class="upload-demo" :action="importUrl"// Upload path :name ="name"// Upload file field name :headers="importHeaders"// request header format :on-preview="handlePreview"// File :on-remove="handleRemove"// File removal :before-upload="beforeUpload"// Pre-upload configuration :on-error="uploadFail"// Upload error :on-success="uploadSuccess"// uploadSuccess :file-list="fileList"// list of uploaded files :with-credentials="withCredentials">// whether cookie information can be sent </el-upload>2) export 2.1 Export get method // declare file name const fileNames={1:' template 1 ', 2:' template 2 ', 3:' template 3 ', 4:' template 4 ', } export const downloadTemplate = function (scheduleType) { axios.get('/demo/template', { params: { "demoType": demoType }, responseType: 'arrayBuffer'}). Then ((response) => {// Create a blob object, let blob = new blob ([response.data], {type: 'application/x-xls'}) // type = application/x-xls or application/vnd.ms-excel let link = Document. The createElement method (' a '). The link href = window. The URL. CreateObjectURL (blob) / / configuration download file name link. Download = FileNames [scheduleType] + '_' + Response.headers. Datestr + '.xls' link.click()}) listExport(params) { const res = await axios({ url: `${javaHost}/company-center/platform/store/list/export`, method: 'POST', data: params, headers: { 'Content-Type': 'application/json; Charset =utf-8'}, responseType: 'blob', // response formatting blob}); return res.data; }Copy the code

19. Front-end engineering construction tools (mobile debugging pain point)

Fis3 (mobile terminal operation, display) the mobile end debug (sortie 👉 https://juejin.cn/post/6844903656895021063Copy the code