因工作需求尝试开发了微信小程序，这里总结一下开发经验。

准备工作

根据官方文档，我们首先要申请 AppId，跟着流程走就好了，因为是个人开发所以主体类型就选择个人。

接下来我们要下载 微信开发者工具，它用来创建、调试、发布小程序。

浏览一下官方文档，我们大概知道：

• 小程序的文件类型有四种： .wxml, .wxss, .js, .json

• 小程序的每个页面都要写在 app.json 中的 pages 字段内，且 pages 中的第一个页面是小程序的首页，格式为 路径＋页面，如

1
2
3
4
5
6

// app.json
"pages":[
    "pages/welcome/welcome",
    "pages/index/index",
    "pages/logs/logs"
],

• 每个页面都是由同路径下同名的四个不同后缀文件的组成，如 index 下有 index.js, index.wxml, index.wxss, index.json

• 整个程序不是跑在浏览器下，所以和 DOM 相关的事件没法使用

• 我们不能加载非自定义的页面，如跳转到 m.baidu.com

最近读了一本关于移动web开发性能优化方面的书 《High Performance Mobile Web》，这本书系统全面的介绍了性能优化的知识点，对我来说至少以后再回答 “你是怎么做性能优化的？” 这个问题，不会再简单罗列诸如懒加载图片、缓存 js/css、按需加载这些了，而是会从不同的方面系统的给出优化点。接下来的系列会对这本书做个简单的总结。

首先谈谈移动设备和PC之间的不同，包括硬件、网络、操作系统、引擎、webview等方面。

如下图所示的布局，红球区域有33个球，篮球区域有16个球，要求自适应页面且最边上的球必须紧靠区域边缘

HTML 结构

1
2
3
4
5

<div class="ball-list">
<i class="ball"></i>
<i class="ball"></i>
...
</div>

1、hash && chunkhash

webpack 提供了两种方式实现缓存

• 一种是为所有的 chunks 打上同样的 hash ，即编译 hash

• 一种是根据每个 chunk 的内容打上各自的 hash，即 chunkhash

1
2
3
4
5
6

output: {
    path: 'output',
    filename: '[name].[hash].js'
    // or
    // filename: '[name].[chunkhash:4].js'
}

dom 的类名中存在某些关键词会被一些浏览器（猎豹，qq，UC…）的广告过滤机制干掉

已知的会被过滤掉的关键字：

• banner
• ad
• poster
• flag
• block
• download
• na-download

包括 HTML 中的 <img /> 的资源路径可能也会被过滤了，有次我把图片命名为 ad.jpg 就被过滤了。。

End.

使用场景

类似这样的列表，前面的序号可以使用 CSS Counter 来实现：

1
2
3
4
5
6
7
8

.list {
	counter-reset: index;
	
	.item::before {
		counter-increment: index;
		content: counter(index);
	}
}

如果不想对某个元素生成计数器，有两个方法：

• display: none

• 无法正常生成内容的伪元素

好处

1、减少 HTML 结构，不用多写一个 span 等标签来包裹它
2、在某些情况下，涉及动态删除、添加列表等情况下，那么列表顺序会被打乱，不能自动排序，需要在js中动态实现；如果使用 css 的话，我们只需要专心实现dom 的增删即可
3、一般这种序号都属于样式修饰，能做到与 HTML 分离自然是很好的

End.

webapp 开发中最常见的一个需求就是在浏览器下尝试调起 App，在此总结通用的解决方案和原理。

1、Deep Link

In the context of mobile apps, deep linking consists of using a URL to link to specific content within an app.

In order for your app to respond to URL requests correctly you need to implement something called a URL scheme. You can specify the URL Scheme in your app and decide what content to display to the user once the link has been clicked on and the app opened.

1.1 URI Scheme

Android 1.0 就已经有了 URI Scheme Deep Link，它允许开发者给他们的 APP 注册一个 URI，然后我们在页面内可以通过一个链接如 myapp:// 打开这个 app，如果没有安装会报 page not found 类似的错误或者没有任何反应

不足：
这种方法在用户安装了 app 的情况下，体验很好，如果没有安装 app，则会弹出 页面未找到 的错误弹框或者 没有反应，所以可能需要我们对这种情况降级处理

获取元素的样式通常使用 window.getComputedStyle，有一天我写成了 document.getComputedStyle，总感觉不对劲，网上一查还真这回事o(╯□╰)o，只不过不是这样写的，而是 document.defaultView.getComputedStyle

window.getComputedStyle

window.getComputedStyle(elem, [pseudoElt])

1、使用这个方法返回的结果和 elem.style 返回的是一样的，都是 CSSStyleDeclaration 对象

但是二者也有一些区别：

所谓“Retina”是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。 —— 百度百科

1、device pixel

device pixel/physical pixel，即 设备像素/物理像素。我们近距离观察显示器屏幕，可以看到很多个点紧紧排在一起，这些点就是物理像素点，每个点都有自己的颜色和亮度。

一般可以通过 screen.width/screen.height 获取设备像素（在 PC 上就是电脑屏幕大小，当然这个值我们不 care）

屏幕密度，即屏幕上存在的像素数量，通常用 PPI 来衡量，即 pixels per inch，每英寸的像素数。

拿 MX3 来说，分辨率 1800 * 1080，尺寸 5.1寸，它的 PPI：

1
2

// 411ppi
PPI = Math.sqrt(1080 * 1080 + 1800 * 1800) / 5.1;

meta 标签

viewport

设置布局视口为设备宽度，不允许用户缩放，在网页加载时隐藏地址栏与导航栏

1

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

• width：layout viewport 的宽度

• height：layout viewport 的高度

• initial-scale：初始的缩放比例

• maximum-scale：允许用户缩放到的最大比例

• user-scalable：用户是否可以手动缩放

• minimal-ui：iOS 7.1 Safari 为 meta 标签新增 minimal-ui 属性，在网页加载时隐藏地址栏与导航栏

PS: iOS 8 中移除了 ‘minimal-ui’

format-detection

iPhone 下会自动将一连串数字转换为拨号超链接，email则会调起邮件系统，去掉自动识别：

1
2
3
4

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<!-- or -->
<meta name="format-detection" content="telephone=no, email=no">