Web App 里的渐进增强

[lmk123]

最近我正在开发公司网站的移动端网站——考虑到功能繁多且无需服务端渲染，也许用 “Web App” 来形容会更准确一点。

公司希望这个 Web App 能运行在微信里，并使用微信 SDK 提供的各种功能（特别是“扫描条形码”的功能）。也就是说，公司想要一个“微信 only” 的网站。

但实际上，我更倾向于“渐进增强”的做法。

以“扫描条形码”举例来说，除了微信，PhoneGap 也有插件提供这个功能。我的想法是：开发一个基本的 Web App，这个 Web App 应该能在任何浏览器环境（普通浏览器、微信内置浏览器或者 PhoneGap）里使用，但如果用户点击了“扫描条形码”的按钮：

• 如果是在微信内置浏览器内，就使用微信 SDK
• 如果是在 PhoneGap 包装的 Hybrid App 内，就使用插件提供的 API
• 如果是在普通浏览器内，就提示用户无法使用此功能，并引导他在微信内打开链接，或者下载 PhoneGap App

也就是说，我们可以把这部分逻辑独立出来，并在不同的环境引用不同的功能：

let api;

if( isWeixin ) {
  api = {
    scan() { 
     wx.scanQRCode();
    }
  };
}

if ( isPhoneGap ) {
  api = {
    scan() {
      // 插件提供的某个方法
      scanFuncProviedByPlugin();
    }
  };
}

if ( isNormal ) {
  api = {
    scan() { alert( '无法使用扫一扫功能，请在微信中打开此链接，或者下载我们的手机客户端。' ); }
  };
}

api.scan();

这样做的好处是，如果以后又有新的运行环境出现了（例如在 Chrome App 中运行），那我们只需要多添加一个 api 就可以无缝迁移了。

[SiZapPaaiGwat]

推销个小工具,把issues列表插入到你的README,这样在主页就可以看到博文列表了. https://github.com/simongfxu/giab :smile_cat: