h5项目开发入门指北

h5项目开发入门指北

最近刚接触公司的h5项目，踩了很多坑，问了很多问题，希望能记录下来帮助大家少走弯路。

1.安装抓包工具-Charles

（除了Charles还可以使用其他抓包工具这里以Charles举例）

为什么要使用抓包工具呢？我们平时在开发PC端的时候，可以使用Chrome的NetWork调试工具来帮助我们查看网络请求，虽然h5项目在开发阶段同样也能通过Chrome来查看网络请求。但我们往往有这样的场景：

• 拿到App端内跳转的h5页面地址
• 查看App中返回的数据是否正确（查看数据还可以通过vconsole或eruda）

我们在移动端无法感知网络请求，所以需要将我们移动端的请求代理到我们到电脑上，然后利用电脑上的抓包工作获取移动设备获取的网络请求。

安装Charles并且配置代理的方法

安装完成后就能愉快地抓包了！

查看返回的数据

2.安装移动端调试工具

eruda

我们在npm或者github搜索edura，我们首先来看看这个包的简介

然后根据在项目中引入(这里使用src的方式在React项目中引入)

找到项目的入口文件index.js

function loadScript(url) {
  const script = document.createElement('script');
  script.onload = () => {
    window.eruda && window.eruda.init();
  };
  script.src = url;
  document.querySelector('body').appendChild(script);
}

if (typeof ENV !== 'undefined' && ENV !== 'production') {
  const cdnEruda = '//cdn.jsdelivr.net/npm/eruda';
  loadScript(cdnEruda);
}

在移动端设备上查看引入eruda之后的效果

3.安装chrome插件-二维码生成器（Quick QR）

当我们开发完一个需求想要在真机上测试效果，但是又不想频繁的发布时，我们可以直接在移动设备上访问电脑上启动的服务，但是必须满足两个条件：

1. 电脑上启动的项目必须是以ip为域名（不能是localhost，localhost情况下是不联网，不使用网卡，不受防火墙和网卡限制，并且只能本机访问）
2. 保证移动设备和电脑在同一局域网下（最好是连接同一个Wifi）

比如我们启动的项目路径为 http://192.168.*.*/activity-invite/passenger，可以直接在手机上访问到这个地址。

但是如果完全靠手动输入，或者Ctrl+CV然后发到手机上难免有些繁琐。为了节省各位未来专家的宝贵时间，推荐在google商店中下载一个 Quick QR插件（科学上网），将当前页面生成一个二维码，直接在手机上扫描访问。

4.JSBridge

JSBridge是JS和Native之间的一种通信方式，也就是定义Native和JS的通信，其中Native只通过一个固定的桥对象调用JS，而JS也只通过固定的桥对象调用Native。

当我们在开发App内h5页面的时候，往往涉及到h5页面和App之间的交互，比如我们在h5页面中需要打开相机，调用通讯录，以及操作App上的登陆登出功能。同样的App也可能需要调用一些h5页面中的方法。

具体的使用方法，不同的公司可能根据业务需求，封装一些特定的功能组件来供本公司的开发者使用，这里不赘述。

android触发流程

5.埋点

在h5的业务中，为了监控用户行为，采集数据用于决策分析，经常需要做一些业务埋点。比如监控某一个页面的曝光次数，以及某个按钮的点击次数，然后将采集的数据进行统计分析，为后续的运营策略提供数据支持，或者是验证已有推广活动的投资回报率等等。

怎么埋点？

要想知道埋点的方法，首先要了解埋点的分类，目前埋点主要分为三大类，分别是：

• 代码埋点
• 无埋点
• 可视化埋点（可认为是无埋点的一种）

由于目前公司主要以代码埋点为主，所以这里只介绍代码埋点，代码埋点虽然监测数据准确，但是工作量大，需要手动在需要埋点的地方进行埋点，因此需要侵入业务代码。本质上就是在点击或者新打开页面时候向某个地址下发送ajax请求，并带上对应的点位和额外参数。下面以talkingData为例，简单介绍一下埋点的流程。

1.首先在talkingData中申请账号，并且复制AppId

2.在项目中引入talkingData的sdk

  <script src="https://jic.talkingdata.com/app/h5/v1?appid=你的AppId" async></script>

3.上报数据

document.addEventListener('click', () => {
  window.TDAPP && window.TDAPP.onEvent('页面被点击了', '页面头部', {
        eventId: 'H111100',
  });
})

4.在talkingData的后台查看数据