最近在写一个项目，前端技术使用的是Vue，在与lua的交互过程，是通过一个公共JS，前端调用公共js的方法给lua发送命令，lua接到命令，去执行一些方法，然后又通过回调返回到了前端，由于是第一次写这样的项目，遇到了一些坑，总结下。

1、提示

null is not an Object (evaluating 'this.msgList')  

　　在解析Vue中的数据的时候，在回调函数中，this的指向丢失，导致报错，最终采用了箭头函数的方法来解决了这个问题

2、

null is not an Object (evaluating 'document.getElementById')  

　　在Vue的methods里面去操作dom遇到了问题，考虑是dom节点还没有的情况下拿不到dom，这个选择要再mounted里面来执行

3、

var cbDispatcher = null;
var eventDispatcher = null;

var H5SDK = {};

H5SDK.get=function(){}

H5SDK.put=function(){}

由于在公共变量里面有三个变量，lua也有引用其中的方法，我把这个方法改写成了Es6的，export default H5SDK,在lua在引用方法的时候就找不到了 ，因此最后的解决方案是在html里面引入了JS。

4、

在Vue的created里面给lua发送了多个命令同一个请求后台数据的命令，但lua同时只能处理一个命令，因此只会执行最后一次发送的命令，覆盖了前面几次的命令，解决方法呢，就是采用了定时器来延迟执行。

5、页面无法滚动

　　一方面lua代码禁止了view的滚动，另一方面，前端也写了overflow：hidden。

　　解决方法：前端删除overflow：hidden，lua:View.scrollEnable=YES,并且webview的自适应改为false，防止webview下面的内容暴露。

6、请求回来的数据格式和前端需要的数据不一致，这时候就要做容错处理，判断下如果不是需要的数据return就可以了。

7、前端和客户端lua交互的请求数据方式封装为一个方法，url，params由web端来传，主要post与get请求的不同处理。

8、客户端在访问本地开发环境的时候图片加载出来是框框，编译完了之后，访问html页面也一样，

　　解决办法：在updated里面加入了window.onload之后再与乱交互，保证静态资源的加载；还有个问题，就是请求后台的数据发送命令的时候偶现性不加载图片，发现一旦发送命令，就把js引擎的 http线程给cancel掉了，因此要保证静态资源加载完毕再发送命令，也可以绕过去依赖计数线程来达到异步加载。

9、乱点击会挂掉，处理方式客户端解答是跳过乱点击报的错就ok了，有更好的方法，欢迎留言。

10、需求左侧left要和右侧一样 在Vue中动态获得元素的高度，在updated生命周期中，只能获取上个状态。

　　最后解决方案是使用display:flex;把设置的高度全部去掉，使用的是

　　align-item：stretch

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 　　然后给容器设置了个最小高度：window.innerHeight。

如果觉得文章不错,可以给小编发个红包给予鼓励.