Taro H5 项目总结

发表于 更新于 分类于

项目建立

h5项目选用taro框架感觉不太好，很多API是在小程序环境得到支持的，在h5端的支持度都没有写明可不可以用，比如

1
2
3
npm install -g @tarojs/cli
taro init myApp
npm run dev:h5

可能会出现的问题,network_error 服务器错误,记得把fan qiang软件的全局模式切掉。这个问题貌似只在初次dev的时候出现过，之后开全局也能正常dev，之后好好学计网吧，现在我也不太懂.npm run dev:h5后可以看到：

况且taro中封装了太多东西，一方面可以提高生产效率，但另外一方面也降低了对技术的要求，比如了解web API的使用，比如规范化css类名，比如构建页面路由,比如http request。

wepack HMR

当你在本地改了代码甚至不需要手动刷新浏览器，就可以看到更改，这依赖于wepack HMR功能。

sockjs

当你ctrl + c退出后，可以看到如上，使用 HMR 的过程中，（有人说）通过 Chrome 开发者工具知道浏览器是通过websocket和webpack-dev-server 进行通信的，感觉webpack-dev-server是一个很值得研究的东西。

定位+位置比对

使用navigator.geolocation.getCurrentPosition web API 获取经纬度，不同浏览器可能使用的地理信息服务，通过调试可知，qq浏览器使用的是google服务。然而google位置获取服务已经不再支持http了……

项目需求的情景是给用户推荐附近食堂菜单，所以必然要涉及到距离测算。这里我使用腾讯位置服务其中有两个比较难搞的点。

MD5加密

在进行配置的时候，可以看到如下，如果使用的是签名校验验证方法，则会涉及md5加密算法。

md5并不是js内置的方法，所以要外部引入，引入可以用npm install相关包，也可以直接copy 源代码。js版本的md5在github上也挺好找的。做适量更改。

1
2
3
4
5
//md5.min.js
export default md5
//index.jsx
import md5 from './md5.min.js';
let sig = md5('/ws/distance/v1/?from=28.983171,116.308479&key=BQBBZ-TRBCW-J3WRO-OUTER-XXXXXX&mode=driving&to=28.996060,116.353455;28.949227,116.3943108kjYTMrC9zaOW9xTLS5N3EnB7HWviv');

建议在md5.min.jsrun得到sig后在postman测试一下。排除一下配置错误，当然你之后就会发现会在浏览器中碰到postman中不会有的跨域问题，嘿嘿嘿😁……

webServerce API 跨域限制

cors-policy

如error所示，No ‘Access-Control-Allow-Origin’ header is present on the requested resource.在项目中使用 request 调用腾讯接口，会得到类似的错误，然而这是第三方服务，所以无法做到让服务器在响应首部中添加该字段。注意到该接口接受到JSONP回调。

callback

使用script标签调用接口后会返回一段js代码。在下面的情景中，则是接口的 responce 会成为globalFun的参数，返回 globalFun(res) 这个函数，实际上就将这个函数执行了。记得要将回调函数 globalFun 定义在全局可访问的位置。不然只定义在调用接口的页面，你会发现 undefined 的报错。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//  src/index.html
<script>
    function globalFun(obj){
      console.log("globalfun");
      console.log(obj);
      console.log(obj.result.elements);
      let res = JSON.stringify(obj);
      window.localStorage.setItem('resJson', res);
    }
</script>

// components/page/shake/index.jsx
useWebService(pos){
    console.log('useWebService');
    let sig = md5('/ws/distance/v1/?'
        +'callback=globalFun'
        +'&from='+pos.coords.latitude+','+pos.coords.longitude
        +'&key=BQBBZ-TRBCW-J3WRO-OUTER-------'+'&mode=walking'
        +'&output=jsonp'
        +'&to=28.086060,115.053455;28.069227,116.044310'
        +'8kjYTMrC9zaOW9xTLS5N------')
    const script = document.createElement("script");
    script.src = 'https://apis.map.qq.com/ws/distance/v1/?'
    +'callback=globalFun'
    +'&from='+pos.coords.latitude+','+pos.coords.longitude
    +'&key=BQBBZ-TRBCW-J3WRO-OUTER------'+'&mode=walking'
    +'&output=jsonp'
    +'&to=28.086060,115.053455;28.069227,116.044310'
    +'&sig='+sig;
    script.async = false;

    document.body.appendChild(script);
}

摇动监测

部分代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// shake.js 不推荐copy源文件引入 我存粹图方便
export default Shake;

// index.jsx
componentDidMount() {
    const system = Taro.getStorageSync('system');
    if(system == "iOS"){
       if(typeof(DeviceMotionEvent) !== 'undefined' &&typeof DeviceMotionEvent.requestPermission === "function"){
        DeviceMotionEvent.requestPermission()
        .then(response => {
          alert("Orientation tracking " + response);

          if (response == "granted") {
            // window.addEventListener("devicemotion", e => {
            //   //getNearby事件触发条件
            //   // document.getElementById("request").style.visibility = "hidden";
            // });
            var myShakeEvent = new Shake();
            myShakeEvent.start();
            window.addEventListener('shake', this.shakeEventDidOccur, false);
          }else{
            alert('您已拒绝请求，将无法获得摇一摇响应，可重新载入页面，允许请求～')
          }
        })
        .catch(console.error);
       }
    }else{
      var myShakeEvent = new Shake();
      myShakeEvent.start();
      window.addEventListener('shake', this.shakeEventDidOccur, false);
    }
}

项目调试

本地跑项目，直接在浏览器中使用开发者工具即可。若想要真机调试，推荐使用Chrome远程调试。

如果需要对devServer环境进行配置，参照webpack devServer 配置，可按如下：
配置了本地可信任ssl证书，可其实对我想获得https信赖来调试定位起不到作用，因为本地信任，而做不到公网信任啊……所以只能用github pages 生成预览页面，抽出来测试需要https的部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// config/index.js
// 此处应注意config中的 module 语法规范和 src 中的规范不一样的问题
var fs = require('fs');

h5: {
    devServer:{
      https:{
        key: fs.readFileSync('/Users/mac/Desktop/example-cert/server.key'),
        cert: fs.readFileSync('/Users/mac/Desktop/example-cert/server.crt'),
        ca: fs.readFileSync('/Users/mac/Desktop/example-cert/rootCA.pem'),
      }
    //   https: true
      host: "localhost",
      port:10086,
      proxy:{
        '/api':{
          target:'http://food.test.muxixyz.com/',
          changeOrigin:'true'
        }
      }
    },
}

ECS+Nginx部署

部署步骤待更新，先说一个避坑地方：nginx 更新部署失败（视觉上的失败……）

  • 问题情景：初次部署后，更改代码后，拉取了新代码，重启nginx后，打开浏览器还是没有更新，后面发现是浏览器缓存的问题，请求的时候返回的是304。（但其实有ETag等一些验证机制在，按理不会出现使用不新鲜缓存的问题，具体原因尚不明白）。

  • 解决办法：勾选 disable cache 选项，强制请求服务器，而不使用缓存。

0%