首页 > 编程语言 >在uniapp中实现 单击按钮跳转至小程序内置空页面/外部链接

在uniapp中实现 单击按钮跳转至小程序内置空页面/外部链接

时间:2022-09-05 09:48:12浏览次数:96  
标签:uniapp 浏览器 单击 控件 html 跳转 webview 页面

记录一次业务需求,单击实现打开问卷

  1. 给btn注册单击事件
// 鼠标单击事件
		methods: {
			companyBtnNavigation() {
                // 第一次的尝试,报error: plus is not defined
				// window.plus.runtime.openURL("https://需要跳转到的链接地址")
				uni.navigateTo({
					url: "/pages/company/companyInfo",
				})
			},

		}
  1. 需要跳转的页面

    新建的含webView的页面必须在pages.json的pages里注册

<template>
	<web-view src="https://需要跳转到的链接地址"></web-view>
</template>
  1. 关于web-view是什么?

    • webView是Google 官方为开发者提供的一个浏览器控件,我们开发者可以集成到App中,web-view可以实现移动端嵌入web的技术,其实现的本质是内置了一款webkit内核的,展现web页面的控件.
    • 在手机端如果没有webview的支持,是无法展示也页面的,webview用于解析dom元素,展示html页面。和浏览器展示页面的原理是相同的。
  2. 使用场景:在手机系统中加载html文件时被需要,比如你自己写个APP,想要访问网络(如百度页面),可以不使用手机自带的浏览器,只需APP内部展示百度页面,这时候就可以用webView。

  3. 优点:

    • 原生app开发:需要将业务代码打包供用户下载和安装,如果页面布局和业务逻辑变更时,需要修改前端内容,升级打包,重新发布才可以使用最新的。
    • webview: 直接通过html来展示页面,如果页面布局和业务逻辑变更时,只需要修改html代码或者js文件(如果是从服务器端获取,只要新的文件部署完成),用户重新刷新就可以使用更新后的,无需通过下载安装的方式完成升级。
  4. 那都是在手机端实现html页面, webview与手机浏览器的区别?

    • webview:是Google 官方为开发者提供的一个浏览器控件,我们开发者可以集成到App中,
    • 手机的浏览器app:处于版权问题(?,他们集成的都是经过自己深度定制了的类似webView这么个东西,不过国内的几大浏览器厂商也都是基于webkit引擎的

    总结: 都是基于webbkit引擎开发的,出于不同场景下的webview控件

标签:uniapp,浏览器,单击,控件,html,跳转,webview,页面
From: https://www.cnblogs.com/ecat-octopus/p/16656968.html

相关文章

  • 防止链接跳转
    常规方式方式1:<ahref="#"onclick="returnfalse"></a>方式2:<ahref="####"></a>javascript方式javascript是一个伪协议,后面的代码内容表示触发<a>标签后的默认......
  • uniapp使用uview封装请求拦截。报错:f is not a function
    uniapp使用微信小程序运行出现以下报错: 报错原因是:你使用的uview组件或api跟uview版本对不上,导致以上报错,解决方案:更换相应的版本即可......
  • uni-app页面跳转传递参数
    uni-app页面跳转传递参数<navigator>首先来看看官网给的介绍:navigator官网介绍页面跳转。该组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中......
  • Vue的列表超链接(A标签)是什么?如何实现跳转呢?
    方法一:通过<router-link:to="">我要跳转,别拦我</router-link>首页列表:在这里我用a标签进行跳转,在vue里面使用<router-link></router-link>  //注意:这里的router-lin......
  • uniapp小程序分包记录
    用uniapp开发微信小程序,发布大小尚若超出2M,那么就无法提交体验版上线,项目完犊子了当然,大小如果超2M,常见的做法一般是把本地图片转移网络图片,或者压缩代码,但如果这些都做过......
  • SpringMVC 05: SpringMVC中携带数据的页面跳转
    SpringMVC默认的参数对象SpringMVC默认的参数对象是指,不用再另行创建,相当于SpringMVC内置对象,可以直接声明并使用默认的参数对象有:HttpServletRequest,HttpServletRespon......
  • uniapp监听页面滚动事件 onPageScroll
    data(){return{operate_dm:true,//弹幕编辑按钮默认显示isShowLog:0,timer_dm:null,......
  • SpringMVC 04: SpringMVC中4种页面跳转方式
    转发和重定向的页面跳转方式页面跳转方式,本质上只有2种方式:转发+重定向但在SpringMVC的具体实现上,转发可以细分为:普通的页面转发+经由action方法的页面转发重定向......
  • 【面试题】Vue路由跳转的四种方式用法及区别
    Vue路由跳转的四种方式用法及区别点击打开视频讲解更加详细一、router-link<router-link:to="{name:'home'}"><router-link:to="{path:'/home'}">//name,path都行......
  • 【Uniapp】uview的配置与为什么不能正常使用uview的组件?
    年少不知Vue的好,错把layui当成宝不用太在意这句话,只是我的感慨1.安装与配置:在HBuilderX创建Uniapp项目,可以不用启动uniCloud,Vue的版本随意选择即可,常用vue2.x。根据官......