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">跳转到CSDN</button></view>
</template><script>export default {methods: {goto(){//需要跳转的外部路径let url = 'https://blog.csdn.net/weixin_71403100/article/details/135416379?spm=1001.2014.3001.5501'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问题:我在开发测试时选择的不校验合法域名,在微信开发者工具点击跳转到CSDN按钮是可以正常跳转的,但是我在手机上进行预览时是无法跳转到CSDN地址的,下面是手机预览跳转时的效果👇

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

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

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

3.2.3配置域名后的效果:

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

手机预览效果:👇

最后,👏👏 😀😀😀 👍👍  

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

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

相关文章

架构模式:分片

什么是分片&#xff1f; 分片是一种数据库架构模式&#xff0c;涉及将数据库划分为更小、更快、更易于管理的部分&#xff0c;称为分片。每个分片都是一个不同的数据库&#xff0c;这些分片共同构成了整个数据库。分片对于管理大型数据库特别有用&#xff0c;可以显着提高性能…

部署上传漏洞的靶场环境upload-labs

1、工具介绍 upload-labs是一个使用php语言编写的&#xff0c;专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。旨在帮助大家对上传漏洞有一个全面的了解。目前一共20关&#xff0c;每一关都包含着不同上传方式。 upload-labs靶场开源地址&#xff1a;&#xff1a;https://…

代码随想录day60:贪心算法|84.柱状图中最大的矩形

84. Largest Rectangle in Histogram 进行优化&#xff0c;如果我们想获得left就给他left即可&#xff0c;我们只需要在求宽度的时候用到left,而没必要修改原数组。 所以给栈插入一个虚拟索引-1 思考过程&#xff1a; left应该为多少呢&#xff1f; 首先确定left是什么&#…

HCIA-Datacom题库(自己整理分类的)_11_其他网络协议单选【9道题】

1.DNS协议的主要作用是&#xff1f; 文件传输 远程接入 域名解析 邮件传输 2.下列属于链路状态协议的是? Direct static FTP OSPF 解析&#xff1a; FTP&#xff1a;文件传输协议 OSPF&#xff1a;链路状态路由协议 3.如下图所示的网络主机A通过Telnet登录到路由…

力扣labuladong一刷day54天前缀树

力扣labuladong一刷day54天前缀树 文章目录 力扣labuladong一刷day54天前缀树一、208. 实现 Trie (前缀树)二、648. 单词替换三、211. 添加与搜索单词 - 数据结构设计四、1804. 实现 Trie &#xff08;前缀树&#xff09; II五、677. 键值映射 一、208. 实现 Trie (前缀树) 题…

【DevOps-05】Integrate工具

一、简要说明 持续集成、持续部署的工具很多,其中Jenkins是一个开源的持续集成平台。 Jenkins涉及到将编写完毕的代码发布到测试环境和生产环境的任务,并且还涉及到了构建项目等任务。 Jenkins需要大量的插件保证工作,安装成本较高,下面会基于Docker搭建Jenkins。 二、Jenk…

11.perror函数的使用

文章目录 perror函数介绍简介&#xff1a; 测试代码 perror函数介绍 函数原型&#xff1a;void perror(char const *message); 简介&#xff1a; perror函数&#xff0c;以一种简单、统一的方式报告错误。标准库函数在一个外部整型变量errno&#xff08;在errno.h中定义&…

大模型实战营Day2 作业

基础作业 1 使用 InternLM-Chat-7B 模型生成 300 字的小故事 2 熟悉 hugging face 下载功能&#xff0c;使用 huggingface_hub python 包&#xff0c;下载 InternLM-20B 的 config.json 文件到本地 进阶作业 1 完成浦语灵笔的图文理解及创作部署 2 完成 Lagent 工具调用 Demo…

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…

多线程高级面试题

1. 什么是 ThreadLocal&#xff1f; 参考答案 ThreadLocal 叫做本地线程变量&#xff0c;意思是说&#xff0c;ThreadLocal 中填充的的是当前线程的变量&#xff0c;该变量对其他线程而言是封闭且隔离的&#xff0c;ThreadLocal 为变量在每个线程中创建了一个副本&#xff0c;…

【AI视野·今日Robot 机器人论文速览 第七十一期】Fri, 5 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Fri, 5 Jan 2024 Totally 11 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Machine Learning in Robotic Ultrasound Imaging: Challenges and Perspectives Authors Yuan Bi, Zhongliang Jiang, Felix D…

gradle安装

从gradle下载安装包。 安装环境变量以及仓库存储地址。 在path中添加bin路径 打开cmd命令&#xff0c; 输入 gradle -v 查看版本信息。

JVM工作原理与实战(九):类加载器-启动类加载器

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、启动类加载器 二、通过启动类加载器去加载用户jar包 1.放入jre/lib目录进行扩展 2.使用参数进行扩展 总结 前言 JVM作为Java程序的运行环境&#xff0c;其负责解释和执行字节码…

优化器(一)torch.optim.SGD-随机梯度下降法

torch.optim.SGD-随机梯度下降法 import torch import torchvision.datasets from torch import nn from torch.utils.data import DataLoaderdataset torchvision.datasets.CIFAR10(root./data, trainFalse, downloadTrue,transformtorchvision.transforms.ToTensor()) data…

RK3399平台入门到精通系列讲解(实验篇)自定义工作队列的使用

🚀返回总目录 文章目录 一、自定义工作队列介绍1.1、工作队列相关结构体1.2、工作队列相关接口函数二、自定义共享队列案例2.1、Makefile2.2、驱动案例共享队列是由内核管理的全局工作队列,自定义工作队列是由内核或驱动程序创建的特定工作队列,用于处理特定的任务。 一、…

华为mstp、vrrp、ospf、isis、bgp等综合一起排错

最终实现左边私网和右边私网全部ping通 SW1 vlan batch 12 34 stp region-configuration //mstp配置 region-name test instance 12 vlan 12 instance 34 vlan 34 active region-configuration interface GigabitEthernet0/0/3 port link-type trunk port trunk allow-pass …

求更新后的路由表

假定网络中的路由器B的路由表有如下的项目 (这三列分别表示“目的网络“距离”和“下一跳路由器”): 现在B收到从C发来的路由信息(这两列分别表示“目的网络”和“距离”): 试求出路由器B更新后的路由表(详细说明每一个步骤)。 (1)首先把收到的路由信息的"距离"1: …

[论文阅读] Revisiting Feature Propagation and Aggregation in Polyp Segmentation

[论文地址] [代码] [MICCAI 23] Abstract 息肉的准确分割是筛查过程中有效诊断结直肠癌的关键步骤。 由于能够有效捕获多尺度上下文信息&#xff0c;普遍采用类似UNet 的编码器-解码器框架。 然而&#xff0c;两个主要限制阻碍了网络实现有效的特征传播和聚合。 首先&#xff…

我的创作纪念日——redis的历史纪录

机缘 最开始只想存留点Redis的操作信息&#xff0c;后来写着写着也就写多了&#xff0c;虽然后面很长时间由于忙就没继续写&#xff0c;但是还是偶尔登录看一下&#xff0c;有好几篇文章的浏览量还是很多的呢。 收获 收获不多&#xff0c;粉丝也才三十多个&#xff0c;浏览量感…

Nacos 持久化及集群的搭建【微服务】

文章目录 一、统一配置管理二、微服务配置拉取三、配置热更新四、多环境共享配置五、Nacos 集群搭建1. 集群结构2. 初始化数据库3. 搭建集群 六、Nginx 反向代理七、启动项目测试 一、统一配置管理 案例练习的时候我们只有两个微服务&#xff0c;管理起来非常简单&#xff0c;但…