[TOC] # 功能 ## buffer-queue ``` site/wechat-react/components/tools/buffer-queue.js ``` ## socket-handle ``` site/wechat-react/components/tools/ql-socket-handle.js ``` ## 獲取滑動方向 ```javascript //獲取滑動方向 var getScrollDirection = function() { //返回角度 function GetSlideAngle(dx,dy) { return Math.atan2(dy,dx) * 180 / Math.PI; } //根據起點和終點返回方向 function GetSlideDirection(startX,startY, endX, endY) { var dy = startY - endY; var dx = endX - startX; var result = 0; //如果滑動距離太短 if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } //45到135 向上滑動 -180到0向下滑動 var angle = GetSlideAngle(dx, dy); if (angle >= 45 && angle < 135) { $('.nav').fadeOut(); }else if(angle >= -135 && angle < -45){ $('.nav').fadeIn(); } } //滑動處理 var startX, startY; document.addEventListener('touchstart', function (ev){ startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; }, false); document.addEventListener('touchmove', function (ev){ var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; GetSlideDirection(startX, startY, endX, endY); }, false); } ``` ## 圖片縮放 ```javascript /* * 縮放、居中圖片 * image [dom] jquery元素 * scaleWidth [number] 縮放后的寬 * scaleHeight [number] 縮放后的高 * middle [boolean] 是否居中 * */ function imgScale(image, scaleWidth, scaleHeight, middle) { //獲取圖片的原始寬高和比例 var originWidth = image[0].naturalWidth || image[0].width; var originHeight = image[0].naturalHeight || image[0].height; var ratio = originWidth / originHeight; //如果原圖寬比高大 if(ratio > 1) { //如果縮放后的寬度比要求的寬度要小，把寬度縮放為要求的寬度 if(originWidth/(originHeight/scaleHeight) < scaleWidth) { image.width(scaleWidth); //否則把圖片的高度縮放為要求的高度 }else { image.height(scaleHeight); } } else { if(originHeight/(originWidth/scaleWidth) < scaleHeight) { image.height(scaleHeight); }else { image.width(scaleWidth); } } //判斷是否需要居中 if(middle) { var marginLeft = (originWidth/(originHeight/scaleHeight) - scaleWidth) / 2; var marginTop = (originHeight/(originWidth/scaleWidth) - scaleHeight) / 2; ratio > 1 ? image.css('marginLeft', -marginLeft) : image.css('marginTop', -marginTop); } } ``` ## 實時統計input輸入內容 ```javascript var el = document.getElementById('element') el.addEventListener('compositionstart', onCompositionStart); el.addEventListener('compositionend', onCompositionEnd); function onCompositionStart (e) { e.target.composing = true; } function onCompositionEnd (e) { e.target.composing = false; trigger(e.target, 'input'); } function trigger (el, type) { var e = document.createEvent('HTMLEvents'); e.initEvent(type, true, true); el.dispatchEvent(e); } el.addEventListener('input', function(e){ if(!e.target.composing) { console.log(this.value); } }); ``` ## WAP自動播放音樂 微信通過監聽特定的事件可實現自動播放，UC瀏覽器不支持自動播放，IOS、安卓需要用戶交互后才能播放音樂 ```javascript var music = document.getElementById('audio'); //微信 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //IOS、安卓 $(document).on('touchstart', function() { music.load() music.play(); }) ``` ## 展開收起 ``` // 文本內容 export const ContentText = memo(({ text, maxLine = 3 }) => { if (!text) { return null; } const [showAll, setShowAll] = useState(false); const [showControlBtn, setShowControlBtn] = useState(false); const ctnRef = useRef(); useEffect(() => { if (text && ctnRef.current) { if (ctnRef.current.scrollHeight > ctnRef.current.offsetHeight) { setShowControlBtn(true); } else { setShowControlBtn(false); } } }, [text]); // 展開 const onSpread = useCallback((e) => { e.stopPropagation(); setShowAll(true); }, []); // 收起 const onClose = useCallback((e) => { e.stopPropagation(); setShowAll(false); }, []); return ( <div> <p ref={ctnRef} className={`content-text`} style={!showAll ? { WebkitLineClamp: maxLine } : null} dangerouslySetInnerHTML={{ __html: text }} ></p> {showControlBtn ? ( <div> {showAll ? ( <span onClick={onClose}> 收起 </span> ) : ( <span onClick={onSpread}> 展開 </span> )} </div> ): null} </div> ); }); ``` ```css .content-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-all; } ``` ## 固定按鈕 ~~~ css .fans-intro-distribution-btn { position: absolute; right: 0; bottom: 270px; display: flex; align-items: center; padding: 10px 20px 15px; background-color: #fff7db; border-radius: 100px 0px 0px 100px; transform: translateX(0px); transition: transform 0.3s linear 1s; &.scroll { transition: opacity,transform 0.5s linear; } } ~~~ ~~~ javascript import React, { useEffect, useState, useRef, useCallback } from 'react'; let timer = null; export function DistributionBtn ({ scrollNode, handleClick, }) { const [isScroll, setIsScroll] = useState(false); const [leftValue, setleftValue] = useState(0); const spanRef = useRef(); const btnRef = useRef(); // 監聽滾動條 const handleScroll = useCallback(() => { const node = typeof document != 'undefined' && document.querySelector(`.${scrollNode}`); if (node) { node.addEventListener('scroll', () => { setIsScroll(true); timer && clearTimeout(timer); timer = setTimeout(()=>{ setIsScroll(false); }, 400) }) } }) const setTranslateValue = useCallback(() => { var paddingLeft = Number(window.getComputedStyle(btnRef.current)['padding-right'].replace(/px/, '')); var spanWidth = spanRef.current.clientWidth; setleftValue(paddingLeft + spanWidth); }, [btnRef]) useEffect(() => { if ( !scrollNode) return; handleScroll(); setTranslateValue(); return () => { timer && clearTimeout(timer); } }, [scrollNode]); return ( <div className={`fans-intro-distribution-btn ${isScroll ? 'scroll' : ''}`} style={{ transform: isScroll ? [`translateX(${leftValue}px)`] : 'none', }} ref={btnRef} onClick={handleClick} > <i className="red-packet"></i> <span ref={spanRef}>分享賺0元</span> <i className="distribution-bg"></i> </div> ) } ~~~ ## 獲取上傳視頻封面 ~~~ // 選擇視頻 handleChooseVideo() { //... let file = this.$refs.chooseVideo.files[0] if(!file) return let size = Math.floor(file.size / 1024) if(size > 3*1024) { alert('請選擇3MB以內的視頻') return false } // 獲取視頻地址 let videoUrl if(window.createObjectURL != undefined) { videoUrl = window.createObjectURL(file) } else if (window.URL != undefined) { videoUrl = window.URL.createObjectURL(file) } else if (window.webkitURL != undefined) { videoUrl = window.webkitURL.createObjectURL(file) } let $video = document.createElement('video') $video.src = videoUrl // 防止移動端封面黑屏或透明白屏 $video.play() $video.muted = true $video.addEventListener('timeupdate', () => { if($video.currentTime > .1) { $video.pause() } }) // 截取視頻第一幀作為封面 $video.addEventListener('loadeddata', function() { setTimeout(() => { var canvas = document.createElement('canvas') canvas.width = $video.videoWidth * .8 canvas.height = $video.videoHeight * .8 canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height) let videoThumb = canvas.toDataURL('image/png') console.log(videoThumb) }, 16); }) }, ~~~ ## 讓一個scroll的容器跳轉到底部 ~~~ export const scrollToBottom = function (scrollContainer) { const scrollY = scrollContainer.scrollHeight, scrollX = scrollContainer.scrollLeft; scrollContainer.scroll(scrollX, scrollY); } ~~~ ~~~ const inputRef = React.useRef(null); // 初始化input const initEl = React.useCallback((el) => { if (el) { inputRef.current = el; el.focus(); } }, []); const handleFoucs = React.useCallback(() => { if (inputRef.current) { scrollToBottom(document.documentElement); } }, []); <textarea ref={initEl} onFocus={handleFoucs} /> ~~~ ## iOS、安卓視頻播放 ~~~ <video webkit-playsinline="true" // iOS10 設置視頻在小窗內播放 playsinline="true" // iOS微信瀏覽器支持小窗內播放 x-webkit-airplay="allow" x5-video-player-type="h5" // 啟用H5播放器，wechat安卓版特性 x5-video-player-fullscreen="true" // 全屏設置 x5-video-orientatioon="portraint" // 播放器的方向，landscape橫屏，portraint豎屏，默認值為豎屏 style="object-fit: fill" / > ~~~ ## 打開原生應用 ~~~ <a href="weixin://">打開微信</a> <a href="alipays://">打開支付寶</a> <a href="alipays://platformapi/startapp?saId=10000007">打開支付寶的掃一掃功能</a> <a href="alipays://platformapi/startapp?appId=60000002">打開支付寶的螞蟻森林</a> ~~~ 這種方式叫做`URL Scheme`，是一種協議，一般用來訪問`APP`或者`APP`中的某個功能/頁面（如喚醒`APP`后打開指定頁面或者使用某些功能）?? `URL Scheme`的基本格式如下： ~~~ 行為(應用的某個功能/頁面) | scheme://[path][?query] | | 應用標識 功能需要的參數 復制代碼 ~~~ 一般是由`APP`開發者自己定義，比如規定一些`參數`或者`路徑`讓其他開發者來訪問，就像上面的例子?? 注意事項： * 喚醒`APP`的條件是你的手機已經安裝了該`APP` * 某些瀏覽器會禁用此協議，比如微信內部瀏覽器（除非開了白名單） ## 解決input失焦后頁面沒有回彈  一般出現在`IOS設備中的微信內部瀏覽器`，出現的條件為： * 頁面高度過小 * 聚焦時，頁面需要往上移動的時候 所以一般`input`在頁面上方或者頂部都不會出現無法回彈 解決辦法為，在聚焦時，獲取當前滾動條高度，然后失焦時，賦值之前獲取的高度： ~~~ <template> <input type="text" @focus="focus" @blur="blur"> </template> <script> export default { data() { return { scrollTop: 0 } }, methods: { focus() { this.scrollTop = document.scrollingElement.scrollTop; }, blur() { document.scrollingElement.scrollTo(0, this.scrollTop); } } } </script> ~~~ ## 滑動穿透 ### 方法1 當在`遮罩`上滑動的時候，是會穿透到父節點的，最簡單的辦法就是阻住默認行為： ~~~ document.querySelector(".mask").addEventListener("touchmove", event => { event.preventDefault(); }); ~~~ 如果在`vue`中，你可以這么寫： ~~~ <div class="mask" @touchumove.prevent></div> ~~~ 如果`.content`也有滾動條，那么只要阻止`遮罩`本身就行： ~~~ document.querySelector(".mask").addEventListener("touchmove", event => { if (event.target.classList.contains("mask")) event.preventDefault(); }); ~~~ 或者： ~~~ <div class="mask" @touchumove.self.prevent></div> ~~~ ### 方法2 [參考鏈接（已失效）](https://uedsky.com/2016-06/mobile-modal-scroll/) ~~~javascript ModalHelper: (function(bodyCls) { var scrollTop return { afterOpen: function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop $('body').addClass(bodyCls) document.body.style.top = -scrollTop + 'px' }, beforeClose: function() { $('body').removeClass(bodyCls) // scrollTop lost after set position:fixed, restore it back. if (document.documentElement) { document.documentElement.scrollTop = scrollTop } else { document.body.scrollTop = scrollTop } } } })('modal-open') ~~~