移动端：开发技巧

Posted 2021-02-11 guisenbin

开发技巧

---

一、基本开发技巧

1. meta相关
• webkit内核中有一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
• 移动端H5开发所遇到的问题与细节,以及ios兼容 https://blog.csdn.net/dwb123456123456/article/details/82663563
• 
2. html5标签的使用
   • 开发移动端页面时，建议前端工程师使用HTML5，HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，减少开发者的工作量
3. 块级化a标签
   • 由产品意识形态决定，在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大
4. 使用弹性盒布局
   • 有助于前端工程师做到盒子模型灵活控制

二、常见问题

1. 安卓手机上点击a标签会有阴影出现
2. ios和android下触摸元素时出现半透明灰色遮罩
• -webkit-tap-highlight-color:rgba(255,255,255,0);
3. iphone及ipad下输入框默认内阴影
• -webkit-appearance: none;  
4. 在iphone长按图片出现保存图片弹窗
• -webkit-touch-callout: none;
5. 在ios中 输入框的光标发生位移，上移或者下移
• 不要设置 line-height 属性
6. 安卓浏览器看背景图片，有些设备会模糊
• 使用2倍大小的背景图来代替

三、点透现象

1 /*   首先通过示例，认识点透问题  */
2 /* 点击第一层第一个,令其消失  */
3 level10.addEventListener(‘touchstart‘, function(e) {
4     level10.style.display = ‘none‘;
5 });
6 level11.onclick = function() {
7     console.log(‘看下会不会被点击到‘);
8 }

1. 点透发生的条件
• A 和 B不是后代继承关系，而是兄弟关系
• A发生touch， A touch后立即消失， B事件绑定click
• A显示在B浮层之上
2. 解决点透问题
• 将click换成移动端事件
• e.preventDefault()
• 

四、 HBuilder

1. HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，而且集成真机测试功能，比较推荐HBuilder开发移动端项目
2. 官方下载
• HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本
• http://www.dcloud.io/
3. 安装HBuilder     解压即可使用
4. 模式
• 开发模式 -------------- 空间最大程度分配给代码编辑区域
• 边改边看模式 --------- 进入边改边看模式,在此模式下,如果当前打开的是HTML文件，每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件，如与当前浏览器视图打开的页面有引用关系，也会刷新)
5. 基本使用
• 边改边看模式 --------- 每次保存均会自动刷新显示效果
• 代码块大量减少重复代码工作量
• 代码块是常用的代码组合，比如在js中输入$，回车，则可以自动输入document.getElementById(id)
• 代码块激活原则 ------------ 连续单词的首字母。比如：vari激活var i=0; dn激活display: none

五、 搭建本地服务器步骤

1. 我们需要在本地搭建一个服务器环境，去网上下载集成开发环境安装即可 wamp xampp .....
2. 开启上步中安装好的服务在地址栏中输入 127.0.0.1 看到 it’s work 或有提示成功的页面打开就表示成功
3. 在cmd命令行中输入 ipconfig 查找本机 ipv4公网地址
4. 将开发好的项目(如project )存放在安装好的 服务器目录下，通过公网地址访问到该页面( index.html )
5. 用本机开启一个 wifi 网络，用测试手机连接上这个wifi
6. 将第四步中的网址生成一个二维码，然后用测试手机扫描访问即可成功
7. 测试相对比较麻烦，不推荐使用

六、 移动端优化

        了解用户 → 让内容更有价值和针对性 → 缩短页面加载时间 → 触摸的设计 → 功能最大化 → 用户体验