共计 1468 个字符，预计需要花费 4 分钟才能阅读完成。
前言
因公司业务需求转变，要将现有的app开发成支持多端的app，领导经过深思熟虑采用了uniapp的多端开发方案。由于诸多原因，活就来到了我的头上。
众所周知，我是之前只是安卓开发程序员，对于web前端开发那基本是直通一窍。但是在博主经过时长两年半的学习之后，终于略懂了vue和uniapp的使用。
所以这篇文章是使用uniapp踩坑开发时遇到问题的一点记录
web-view页面未加载完毕前不可使用evalJs
报错信息如下：
22:40:32.925 Cannot read property 'evalJs' of undefined
TypeError: Cannot read property 'evalJs' of undefined
at Proxy.onLoad (pages/cyunzing/test.js.nvue:93:26)
at pages/cyunzing/test.js.nvue:173:9
at pages/cyunzing/test.js.nvue:175:3下面是原来的代码，只要运行就肯定执行不了jsCallBack，哪怕网页里面有jsCallBack方法可以回调。
webview.html 回调代码：
<script type="text/javascript">
function jsCallBack(data) {
alert(data)
}
</script>test.nvue代码：
<template>
<web-view ref="webview" src="https://www.cyunzing.com/webview.html"></web-view>
</template>
<script>
onLoad() {
this.$refs.webview.evalJs("jsCallBack('我是cyunzing，我要callback')");
// other code...
}
</script>那么这是为什么呢？
简单来说，就是因为onLoad是nvue页面开始加载的生命周期，此时webview还没加载。那么什么时候才能调用webview的evalJs？
web-view给我们提供了@pagestart事件，在这个事件之后就可以成功使用evalJs了，页面加载成功后会回调这个事件绑定的方法。具体使用如下：
改动后的test.nvue代码
<template>
<web-view ref="webview" src="https://www.cyunzing.com/webview.html" @pagestart="onPageStart"></web-view>
</template>
<script>
onLoad() {
// other code...
},
methods: {
onPageStart(e){
console.log("onPageStart event=>",e)
this.$refs.webview.evalJs("jsCallBack('我是cyunzing，我要callback')");
}
}
</script>改动后的test.nvue结合webview.html就可以成功的在手机上弹出弹窗提示了。
当然了，也可以在onPageStart方法中加上控制变量，如果回调了就改为false。这样也可以在需要由用户或者什么事件触发的时候用这个控制变量来提示用户，现在还不能使用evalJs。
花开两朵，各表一支。还有很多种方法结合使用，就靠大家去探索了，今天分享就到这里了。
正文完
