uni-app $scope找不到

uni-app $scope找不到

开发环境 版本号 项目创建方式
Mac 14.4 HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

PC开发环境操作系统版本号:14.4

HBuilderX类型:正式

HBuilderX版本号:3.1.6

手机系统:Android

手机系统版本号:Android 10

手机厂商:华为

手机机型:华为mate30

页面类型:vue

打包方式:云端

项目创建方式:HBuilderX

示例代码:

onShow() { // #ifdef APP-PLUS setTimeout(() => { let that = this; let height = 0; //定义动态的高度变量,如高度为定值,可以直接写 let statusBarHeight = 0; uni.getSystemInfo({ //成功获取的回调函数,返回值为系统信息 success: (sysinfo: any) => { height = sysinfo.windowHeight - that.actionBarHeight - sysinfo.statusBarHeight; //自行修改,自己需要的高度 statusBarHeight = sysinfo.statusBarHeight; }, complete: () => {} }); // var currentWebview = this.$mp.page.$getAppWebview(); // var currentWebview = this.$parent.$scope.$getAppWebview() let scopWeb = this.$scope; //获取当前web-view console.log("==== ",scopWeb) let currentWebview: any = this.$scope.$getAppWebview(); //获取当前web-view let wv = currentWebview.children()[0]; wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为px top: statusBarHeight + that.actionBarHeight, height: height }) }, 500); //如页面初始化调用需要写延迟 // #endif }


操作步骤:


[HBuilder] 10:47:23.471 ERROR in /Users/Shared/iosworkplace/build-science-center/src/pages/ShowWeb.vue(73,24):
[HBuilder] 10:47:23.472 73:24 Property '$scope' does not exist on type 'ShowWeb'.
[HBuilder] 10:47:23.489     71 |                // var currentWebview = this.$mp.page.$getAppWebview();
[HBuilder] 10:47:23.490     72 |                // var currentWebview = this.$parent.$scope.$getAppWebview()
[HBuilder] 10:47:23.503   > 73 |                let scopWeb = this.$scope; //获取当前web-view
[HBuilder] 10:47:23.503        |                                   ^
[HBuilder] 10:47:23.508     74 |                console.log("====  ",scopWeb)
[HBuilder] 10:47:23.509     75 |                let currentWebview: any = this.$scope.$getAppWebview(); //获取当前web-view
[HBuilder] 10:47:23.514     76 |                    let wv = currentWebview.children()[0];

预期结果:

[HBuilder] 10:47:23.471 ERROR in /Users/Shared/iosworkplace/build-science-center/src/pages/ShowWeb.vue(73,24): [HBuilder] 10:47:23.472 73:24 Property ‘$scope’ does not exist on type ‘ShowWeb’. [HBuilder] 10:47:23.489 71 | // var currentWebview = this.$mp.page.$getAppWebview(); [HBuilder] 10:47:23.490 72 | // var currentWebview = this.$parent.$scope.$getAppWebview() [HBuilder] 10:47:23.503 > 73 | let scopWeb = this.$scope; //获取当前web-view [HBuilder] 10:47:23.503 | ^ [HBuilder] 10:47:23.508 74 | console.log("==== ",scopWeb) [HBuilder] 10:47:23.509 75 | let currentWebview: any = this.$scope.$getAppWebview(); //获取当前web-view [HBuilder] 10:47:23.514 76 | let wv = currentWebview.children()[0];


实际结果:


[HBuilder] 10:47:23.471 ERROR in /Users/Shared/iosworkplace/build-science-center/src/pages/ShowWeb.vue(73,24):
[HBuilder] 10:47:23.472 73:24 Property '$scope' does not exist on type 'ShowWeb'.
[HBuilder] 10:47:23.489     71 |                // var currentWebview = this.$mp.page.$getAppWebview();
[HBuilder] 10:47:23.490     72 |                // var currentWebview = this.$parent.$scope.$getAppWebview()
[HBuilder] 10:47:23.503   > 73 |                let scopWeb = this.$scope; //获取当前web-view
[HBuilder] 10:47:23.503        |                                   ^
[HBuilder] 10:47:23.508     74 |                console.log("====  ",scopWeb)
[HBuilder] 10:47:23.509     75 |                let currentWebview: any = this.$scope.$getAppWebview(); //获取当前web-view
[HBuilder] 10:47:23.514     76 |                    let wv = currentWebview.children()[0];

更多关于uni-app $scope找不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这里是源码(TS)
<template>
<view class="bim_body">
<u-navbar :title="newsTitle" title-color="#fff" back-icon-color="#ffffff" :background="{ 'background-color': '#010B14'}" back-icon-name="arrow-left" :custom-back="onClickContract" back-icon-size="32">
<view class="navbar-right" slot="right">
<view class=“dot-box right-item” @click=“onClickShare”>
<u-icon name="share-fill" size="32"></u-icon>
</view>
</view>
</u-navbar>
<web-view v-if="bimUrl" :src="bimUrl" :webview-styles="webviewStyles"></web-view>
</view>
</template>

<script lang="ts"> import Vue from "vue"; import { Component } from "vue-property-decorator"; import { StorageHelper } from '@/utils/storage'; import { ZNConfig } from "@/config/ZNConfig"; [@Component](/user/Component)({ components: { } }) export default class ShowWeb extends Vue{ // private bimUrl:string = "https://www.jianshu.com/p/90d53c791c42"; private webviewStyles:any ={ progress: { color: '#FF3333' } } private bimUrl:string = ""; private newsTitle:string = ""; private shareDesc:string = ""; private shareImg:string = ""; private show:boolean = false; private actionBarHeight:number = 60; onLoad(opt:any){ this.bimUrl = decodeURIComponent(opt.url); if(opt.title){ this.newsTitle = opt.title.substring(0,opt.title.length>8?7:opt.title.length); } if(opt.desc){ this.shareDesc = opt.desc; } if(opt.imgUrl){ this.shareImg = opt.imgUrl; } } private onClickContract(){ uni.navigateBack({}); } onShow() { // #ifdef APP-PLUS setTimeout(()=> { let that = this; let height = 0; //定义动态的高度变量,如高度为定值,可以直接写 let statusBarHeight = 0; uni.getSystemInfo({ //成功获取的回调函数,返回值为系统信息 success: (sysinfo:any) => { height = sysinfo.windowHeight - that.actionBarHeight - sysinfo.statusBarHeight; //自行修改,自己需要的高度 statusBarHeight = sysinfo.statusBarHeight; }, complete: () => {} }); // var currentWebview = this.$mp.page.$getAppWebview(); // var currentWebview = this.$parent.$scope.$getAppWebview() let scopWeb = this.$scope; //获取当前web-view console.log("==== ",scopWeb) let currentWebview:any = this.$scope.$getAppWebview(); //获取当前web-view let wv = currentWebview.children()[0]; wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为px top: statusBarHeight+that.actionBarHeight, height: height }) }, 500); //如页面初始化调用需要写延迟 // #endif } private onClickShare(){ uni.share({ provider: "weixin", scene: "WXSceneSession", type: 0, href: this.bimUrl, title:this.newsTitle?this.newsTitle:"科研设计中心app-新闻分享", summary: this.shareDesc?this.shareDesc:"我正在使用[科研设计中心]app,赶紧跟我一起来体验!", imageUrl: this.shareImg?this.shareImg:"https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png", success: function (res) { uni.showToast({ title:"分享成功", icon:"none" }) }, fail: function (err) { uni.showToast({ title:"分享失败", icon:"none" }) } }); } } </script> <style lang="scss" scoped> .bim_body{ position: absolute; width: 100%; height: 100%; } .navbar-right { margin-right: 24rpx; display: flex; } .right-item { margin: 0 12rpx; position: relative; color: #ffffff; display: flex; } </style>

更多关于uni-app $scope找不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中,$scope是旧版本的概念,新版本已经不再支持。根据你的代码,需要使用正确的方式获取webview。

在Vue 3版本的uni-app中,可以通过以下方式获取当前页面的webview:

// #ifdef APP-PLUS
onShow() {
  setTimeout(() => {
    let that = this;
    let height = 0;
    let statusBarHeight = 0;
    
    uni.getSystemInfo({
      success: (sysinfo) => {
        height = sysinfo.windowHeight - that.actionBarHeight - sysinfo.statusBarHeight;
        statusBarHeight = sysinfo.statusBarHeight;
      }
    });

    // 正确获取当前页面webview的方式
    let currentWebview = getCurrentPages()[getCurrentPages().length - 1].$getAppWebview();
    
    let wv = currentWebview.children()[0];
    wv.setStyle({
      top: statusBarHeight + that.actionBarHeight,
      height: height
    });
  }, 500);
}
// #endif
回到顶部