webview.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view class="webview-box">
  3. <web-view
  4. v-if="url"
  5. ref="webview"
  6. class="webview"
  7. :src="url"
  8. @onPostMessage="PostMessage"
  9. @message="PostMessage"
  10. ></web-view>
  11. </view>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. url: "https://sit-nanhuacs.4dage.com/web/index.html#/home",
  18. token: uni.getStorageSync('token')
  19. };
  20. },
  21. onLoad(data) {
  22. console.log("postMessage1: ", data);
  23. this.url = data.url + "?token=" + this.token;
  24. console.log("postMessage1: ", this.url);
  25. },
  26. methods: {
  27. // 接收h5页面发来的键值判断需要执行的操作
  28. PostMessage(evt) {
  29. console.log("2222postMessage1: ", evt);
  30. },
  31. // 获取到对应webview(关键)通过evalJs(注意大小写,如果不知道evalJ是什么,可自行百度) 执行网页的函数,可对其进行传参,完成与网页的通讯
  32. handlePostMessage(res) {
  33. console.log("212", res);
  34. },
  35. },
  36. };
  37. </script>
  38. <style>
  39. .webview-box {
  40. position: absolute;
  41. left: 0px;
  42. right: 0px;
  43. top: 0px;
  44. bottom: 0px;
  45. }
  46. .webview {
  47. flex: 1;
  48. width: 100%;
  49. height: 100vh;
  50. }
  51. </style>