概述
近期由於產品快速原型開發的需要，不想用原聲的方式開發App兩端一起搞時間來不及，目前產品處於大量上feature的階段，採用混合開發是最合適的選擇，所以花了3天的時間研究怎麼去實現移動端，拖拽，長按，讀取手機相冊並做本地預覽。
想要實現的效果就是：
- 上傳一張圖片作爲背景圖片，能夠在圖片位置上打點相當於打tag
- 在手機屏幕上長按在事件發生的中心位置創建一個tag
- 這個tag能夠響應touch事件實現上下左右位置的移動
核心問題點：
- 手機端的觸控實現方案實現，view移動時要動態改變元素的top和left並有回調函數方便接入業務邏輯
- 背景圖上tag點位置的存儲，動態獲取element style 中 top 和 left 值通過記錄這兩個值實現定位及存
H5拖拽實現方案：draggable 與 touchpunch
由於之前簡單瞭解過一些h5移動端開發和響應式前端的東西, 不算太陌生，我直接搜索了 jquery h5 dragable 結果是找到了jquery的draggable，https://jqueryui.com/draggable 但是這個庫的話只支持鼠標事件在pc端ok但是移動端沒法用，所以繼續搜索在 github 一個問題 draggable don't support mobile 得知 touchpunch http://touchpunch.furf.com/ 這個庫實現了鼠標事件到touch事件的適配，可以很好的
在移動端實現拖拽效果
touchpunch 的文檔不是很多，只有簡單的使用和介紹由於是適配的draggable所以事件和回調參數都是和draggable一樣的詳細的api文檔在這裏：
🌰官網有demo大家可以細細的體會：
🌰：我自己的demo在這裏：https://codepen.io/buoge/pen/EpyGMX
h5 Touch事件
h5原生是支持touch事件的：
1.touchstart: //觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
2.touchmove: //在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。
3.touchend: //從屏幕上移開時觸發。
4.touchcancel: //系統取消touch事件的時候觸發
這裏我就不展開了，如果上述拖拽不能達到你想要的效果，可以不適用第三方庫，自己去實現touch事件的處理
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events
長按實現方案
Touchpuch 不支持長按事件，屏幕觸控方案備選的有2個
- Hammer.js https://hammerjs.github.io
- AlloyTouch https://github.com/AlloyTeam/AlloyTouch
補充知識點：iOS 點擊事件有300毫秒的延遲
https://thx.github.io/mobile/300ms-click-delay
https://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari
我這邊最終方案是使用的 Hammer.js ,一來是首先研究的hammer發現api簡單易用，文檔健全，兼容性也不錯，
https://hammerjs.github.io/browser-support
🌰：本次的demo 在這裏：https://codepen.io/buoge/pen/NBrEYY
可以拖動頁面上的元素，在屏幕任意位置長按可以出發事件添加新元素
屏幕滾動滑屏
這塊緣起是之前在移動端有一個首頁滑屏展示的需求，我的最終選用方案是swiper，對比過這幾個之後發現就這個交互效果比較符合需求的預期,
在滾動的內容區域之內可以很方面的添加自己的子view
🌰最終的實現效果是這個樣子： http://itsme.net.cn/
這個網頁在github網速關係加載可能有些慢，加載出來之後可以看到滑屏的效果
代碼在這裏，有興趣可以參考下：
https://github.com/itsmestu/itsmestu.github.io/blob/master/index.html
關於這塊輪子有很多下面我列舉幾個：
- swiper
http://3.swiper.com.cn/
http://idangero.us/swiper/demos/
- zepto.fullpage
https://github.com/yanhaijing/zepto.fullpage
- PageSlider 效果也很不錯
https://github.com/weixin/PageSlider
- iSlider
http://be-fe.github.io/iSlider/
- onepage-scroll
https://github.com/peachananr/onepage-scroll
- fullpage.js
https://github.com/powy1993/fullpage
http://www.dowebok.com/143.html
https://github.com/AlloyTeam/AlloyTouch/tree/master/full_page
- iscrolljs
http://iscrolljs.com
- PagePiling
https://f2ex.github.io/Frontend-Library/packages/pagePiling.js/#page1
http://www.yyyweb.com/demo/inner-show/page-piling.html
- SmartPhoto,iOS類似的交互的圖片查看器
https://appleple.github.io/SmartPhoto/
如果以上輪子沒有滿意的你可以自己實現一個，實現思路：
- 京東凹凸技術實驗室，swiper 技術設計思路及代碼
https://aotu.io/notes/2017/07/17/design-a-swiper/
- baidu 滑屏技術實現及原理講解
http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library
- 基於淘寶適配方案flexible + 翻屏h5 適配方案adaptive
https://github.com/chesscai/flexible-adaptive
以上這些就是這兩天和前端時間關於移動端和混合app開發的一些總結，其實還有好些細節問題需要去探索，祝大家玩的開心😊！