uniapp 微信小程序跳转外部链接

一、背景:

开发小程序时,跳转到内部路径通常会使用:uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab等方法,可以跳转到pages.json中已经注册的页面

uni.navigateTo(OBJECT) | uni-app官网

跳转到外部链接,便不能再使用以上方法,需要利用web-view来实现需求

web-view | uni-app官网

二、实现步骤

2.1、展示效果

2.2、pages.json中创建index与webView两个页面

2.3、在index页面点击按钮跳转到webView页面

备注:跳转时携带需要访问的外部路径

<template><view class="content"><button @click="goto">跳转到百度</button></view>
</template><script>export default {methods: {goto(){//需要跳转的外部路径let url = 'https://www.baidu.com/'uni.navigateTo({url:'/pages/webView/webView?url='+url})}}}
</script>

2.4、webView页面接收传递的路径,利用web-view标签进行跳转

<template><view><web-view :src="url"></web-view></view>
</template><script>export default {data() {return {url:''};},onLoad(e) {//接收传递的访问地址this.url = e.url}}
</script>

三、业务域名问题

3.1、开发跟测试时在本地中打开不校验合法域名 

3.2、预览和发布正式版时要在小程序管理后台配置业务域名

3.2.1问题:我在开发测试时选择的不校验合法域名,在微信开发者工具点击跳转到百度按钮是可以正常跳转的,但是我在手机上进行预览时是无法跳转到百度的,下面是手机预览跳转到百度的效果👇

3.2.2解决:需要在小程序管理后台配置业务域名

路径👉:登录微信公众平台(微信公众平台),在左侧找到开发/开发管理,进入找到开发工具,其中有一项是配置业务域名👇

备注:个人开发的小程序在开发工具中是没有业务域名这一项的,所以个人开发的小程序配置不了业务域名

3.2.3配置域名后的效果:

在配置业务域名后,我预览时跳转的地址就不能再是百度了,需要将地址更改成已配置的业务域名地址

手机预览效果

最后,👏👏 😀😀😀 👍👍  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/603855.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编程天赋和努力哪个更重要?

编程天赋和努力在编程中都非常重要&#xff0c;但它们的侧重点不同。 编程天赋通常指的是与生俱来的、在逻辑思维、抽象思维、创造力等方面的能力&#xff0c;这些能力可以帮助程序员更快地理解问题、更高效地设计和实现解决方案。天赋的确可以帮助程序员更容易地入门和更快地掌…

[通俗易懂]c语言中指针变量和数值之间的关系

一、指针变量的定义 在C语言中&#xff0c;指针变量是一种特殊类型的变量&#xff0c;它存储的是另一个变量的内存地址。指针变量可以用来间接访问和操作内存中的其他变量。指针变量的定义如下&#xff1a; 数据类型 *指针变量名&#xff1b;其中&#xff0c;数据类型可以是任…

联邦学习中聚合算法可能怎样创新,智慧农业结合什么数学理论或知名理论实现创新并发表文章

目录 联邦学习中聚合算法可能怎样创新 智慧农业结合什么数学理论或知名理论实现创新并发表文章

什么是集合

在数学中&#xff0c;集合是由一些确定的对象组成的整体。这些对象称为集合的元素&#xff0c; 在Java中&#xff0c;集合&#xff08;Collection&#xff09;是一种用来存储和操作一组对象的容器。Java提供了多个集合类和接口&#xff0c;位于java.util包中&#xff0c;用于处…

深度解析基于模糊数学的C均值聚类算法

深度解析基于模糊数学的C均值聚类算法 模糊C均值聚类 (FCM)聚类步骤&#xff1a;FCM Python代码&#xff1a; 模糊C均值聚类 (FCM) 在数据挖掘和聚类分析领域&#xff0c;C均值聚类是一种广泛应用的方法。模糊C均值聚类&#xff08;FCM&#xff09;是C均值聚类的自然升级版。相…

学习笔记——C++中数据的输入 cin

作用&#xff1a;用于从键盘中获取数据 关键字&#xff1a;cin 语法&#xff1a;cin>>变量 类型&#xff1a;C中数据的输入主要包含&#xff1a;整形&#xff08;int&#xff09;浮点型&#xff08;float&#xff0c;double float&#xff09;&#xff0c;字符型&…

1.2 ARCHITECTURE OF A MODERN GPU

图1.2显示了典型的支持CUDA的GPU架构的高级视图。它被组织成一系列高线程的流式多处理器&#xff08;SM&#xff09;。在图中1.2&#xff0c;两个SM构成一个 block。然而&#xff0c;构建块中的SM数量可能因代而异。此外&#xff0c;在图中&#xff0c;每个SM都有多个共享控制逻…

复试 || 就业day11(2024.01.07)算法篇

文章目录 前言数组序号转换检查整数及其两倍数是否存在有多少小于当前数字的数字上升下降字符串找出数组中的幸运数统计最大组的数目 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff…

书生·浦语大模型第二课作业

作业一&#xff1a;小故事创作 作业要求&#xff1a;使用 InternLM-Chat-7B 模型生成 300 字的小故事&#xff08;需截图&#xff09; 完成情况&#xff1a; 作业二&#xff1a;熟悉 hugging face 下载功能 作业要求&#xff1a;熟悉 hugging face 下载功能&#xff0c;使用…

基于Springboot的摄影跟拍预定管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的摄影跟拍预定管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

使用 openpyxl 库读取 Excel 文件

使用 openpyxl 库来读取 Excel 文件中特定行和列的值: 通过 openpyxl.load_workbook() 函数加载 Excel 文件&#xff0c; 使用 worksheet.cell() 方法获取指定行和列的单元格&#xff0c;并返回其值 注&#xff1a;在运行代码之前确保已安装 openpyxl 库&#xff0c;并且输入…

网络通信(10)-C#TCP客户端实例

本文使用Socket在C#语言环境下完成TCP客户端的实例。 实例完成的功能: 客户端与服务器连接,实现实时刷新状态。 客户端接收服务器的数据。 客户端发送给服务器的数据。 客户端实时判定状态,断开连接后自动重连。 客户端与服务器端发送心跳包。 在VS中创建C# Winform项…

【影刀RPA_如何使用影刀的企业微信指令?】

思路&#xff1a;先用python代码过一遍&#xff0c;再将必要参数填到指令里面。 第一步&#xff1a; 1、在企业微信后台新建应用&#xff0c;设置消息接收地址&#xff08;需要服务器的公网ip地址&#xff09;&#xff0c;进行签名验证。然后&#xff0c;从浏览器中查询ip地址…

Java、Python、C++和C#的界面开发框架和工具的重新介绍

好的&#xff0c;以下是Java、Python、C和C#的界面开发框架和工具的重新介绍&#xff1a; Java界面开发&#xff1a; Swing: 是Java提供的一个基于组件的GUI工具包&#xff0c;可以创建跨平台的图形用户界面。它提供了丰富的组件和布局管理器&#xff0c;使得界面开发相对简单。…

如何使用 CMake 来构建一个共享库(动态库)

tutorial_4/CMakeLists.txt # 声明要求的 cmake 最低版本 cmake_minimum_required( VERSION 2.8 )# 声明一个 cmake 工程 project( HelloSLAM )add_subdirectory(src)tutorial_4/src/CMakeLists.txt #工程添加多个特定的头文件搜索路径 include_directories(include)set(LIBR…

Debian 12

debian | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror apt update & apt upgrade apt dist-upgrade apt-get install fcitx fcitx-*pinyin* dpkg-configure tzdata sudo sh -c dpkg-configure tzdata date -R apt --fix-broken install…

nodejs 不用 electron 实现打开文件资源管理器并选择文件

前言 最近在开发一些小脚本&#xff0c;用 nodejs 实现。其中很多功能需要选择一个/多个文件&#xff0c;或者是选择一个文件夹。 最初的实现是手动输入一个目录&#xff08;这个只是一个普通的终端文本输入&#xff0c;所以按下 tab 没有路径提示&#xff09;&#xff0c;非…

UNION 和 UNION ALL

概述 UNION 和 UNION ALL 都是 SQL 中用于将多个 SELECT 语句的结果合并成一个结果集的操作符。它们都适用于需要将多个表或查询结果合并在一起的情况。但是它们的行为略有不同。 区别 UNION 和 UNION ALL 的区别在于&#xff0c;UNION 会将结果集合并成一个不含重复行的结果…

java springboot 目录组织架构介绍

推荐的package组织方式 com- example- myproject // root packagecom.example.myproject&#xff0c;所有的类和其他package都在root package之下。- Application.java // 应用主类- domain // 用于定义实体映射关系与数据访问相关的接口和实现| - Customer.java| - Custom…

实现并解决微服务间OpenFeign转发文件格式MultipartFile

场景 使用openfeign转发MultipartFile类型的文件时出现了下面的错误。 PostMapping(value "/upload", consumes MediaType.MULTIPART_FORM_DATA_VALUE) ApiOperation(value "导入") public ResponseJson<String> uploadFiles(RequestParam(&quo…