uniapp 小程序 跳转到外部链接

这篇具有很好参考价值的文章主要介绍了uniapp 小程序 跳转到外部链接。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景:点击“积分列表”中的“积分兑换”,需要跳转到三方的“积分商城”链接进行兑换,兑换完成后,跳回小程序“积分列表”。

结论:无法离开小程序,跳转到其他地址。只能通过web-view内嵌的形式,将三方链接内嵌进小程序。

参数传递方式:拼接到src上 ,<web-view src='https://aaa.com/index?参数a=XXXXX&参数b=XXXXX' / >文章来源地址https://www.toymoban.com/news/detail-516578.html

积分列表页面

<template>
	<!-- 积分列表 -->
	<view class="bg_wrap fs_28">
		<text class="cor_9 fs_24">累计积分:{{info.total}}</text>
		<text class="cor_9 fs_24">剩余积分:{{info.surplus}}</text>
		<view class="green_btn_small" @click="go_thirdPart">去兑换</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					total: 12,
					surplus: 1
				}
			}
		},
		methods: {
			// 去兑换
			go_thirdPart() {
				uni.navigateTo({
					url: `/subpkg/bonus/bonus_exchange?openid=${uni.getStorageSync('openid')}&surplus=${this.info.surplus}`
				})
			}˝
		}
	}
</script>

积分兑换页面

<template>
	<!-- 积分兑换页面 -->
	<view class="bg_wrap fs_28">
		<web-view
			:src="`https://cy.jingxiniao.com/index/inlet.html?openid=${options.openid}&surplus=${options.surplus}`" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {}
			}
		},
		onLoad(options) {
			this.options = options
		},
	}
</script>

到了这里,关于uniapp 小程序 跳转到外部链接的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp开发小程序:使用webview 跳转外部链接

    ①先在自己uniapp项目pages.json中建一个页面webview.vue ②页面webview.vue中的全部代码如下: ③在需要操作的页面,通过点击事件触发跳转 tips:如果链接地址不是https的,可能会出现页面无法跳转的问题:需要通过一下步骤去配置一下: https://smartprogram.baidu.com/docs/develop/component/op

    2024年02月07日
    浏览(37)
  • 【uni-app】只支持在微信小程序运行的 导入外部3d模型

    uniapp 导入3d模型,在微信小程序端运行。只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里 只导入了3d模型,未设置让模型动。 glb 格式 (1)首先文件 下载适配微信小程序的 three.js 地址:https://github.com/wechat-miniprogram/threejs-miniprogram (2)导入文件

    2023年04月08日
    浏览(55)
  • uni-app小程序跳转其他小程序、获取目标小程序的页面地址

    一、小程序中跳转其他小程序 1、在manifest.json中的mp-weixin目录下添加配置(替换目标小程序appid) 2、在需要跳转的页面添加按钮点击事件,替换path以及传参 二、获取其他小程序页面地址 微信小程序中官方文档获取地址入口已经关闭不能用了(https://kf.qq.com/faq/180725biaAn21807

    2024年02月12日
    浏览(44)
  • 如何从短信链接打开跳转到微信App内

    运营做了一个活动,准备发送短信推广出去,结果问题来了,用户接收到短信后,点击短信里的链接,默认是用的系统浏览器打开的,但我们的活动是用微信支付啊~~~微信支付啊~~~ 系统浏览器里不支持啊!!! 如何才能让用户点击链接后打开微信呢? 上网搜了一圈,发现小

    2024年02月08日
    浏览(46)
  • 小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

    Uniapp支持锚点连接,可以通过以下步骤实现锚点连接 一、在需要设置锚点的页面,为需要跳转的部分设置id属性。 例如,设置一个id为“section1”的元素: 二、在需要跳转到锚点的页面,使用 uni.navigateTo 或 uni.redirectTo 方法,搭配URL参数的方式实现跳转。 例如,跳转到id为“

    2024年02月14日
    浏览(58)
  • uniapp 跳转外部链接

    一、先建一个内部页面webview.vue 1.1、在page.json里面指向我们跳转的这个内部路径 二、点击触发跳转 界面: js:

    2024年02月12日
    浏览(43)
  • uni-app小程序实现音频播放,uniapp播放录音,uniapp简单实现播放录音

    复制到.vue文件即可预览效果 问题 :开发者工具中.onTimeUpdate方法可能会失效! 官方参考:https://uniapp.dcloud.net.cn/api/media/audio-context.html# 其他博客参考:https://blog.csdn.net/weixin_45328705/article/details/114091301 录音实现参考 :https://blog.csdn.net/weixin_43992507/article/details/129857780

    2024年02月12日
    浏览(84)
  • 微信小程序如何跳转到外部小程序

    要在微信小程序中跳转到外部小程序,您可以使用微信小程序提供的 wx.navigateToMiniProgram 方法。以下是实现步骤: 在需要跳转的页面或组件中,编写触发跳转的逻辑,例如点击按钮: 替换 \\\'外部小程序的AppID\\\' 和 \\\'外部小程序的路径\\\' 为实际的外部小程序的 AppID 和路径。 如果需

    2024年02月06日
    浏览(53)
  • 微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

     微信小程序appId查看方法: 1)有后台登录权限的情况下:登录微信公众平台后, 微信公众平台 微信公众平台,给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。 https://mp.weixin.qq.com/ 点击右上角logo,在“帐号信息”中找到AppID(小程序ID) 2)没有后台登录权

    2024年02月11日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包