在小程序里添加跳转外部链接web-view(使用的是uni-app)

1.创建一个空的文件

2.在文件夹里放置web-view

<view>
	<web-view :src="url" :progress="false">
	</web-view>
</view>

3.在js里接收传递过来的链接

<script>
	export default {
		data() {
			return {
				url: ‘‘
			};
		},
		onLoad(val) {
			this.url = decodeURIComponent(val.url) //解码网址
		},
	}
</script>

 4.在要跳转的页面里的标签添加点击方法

<view class="banner" @tap="tonewurl">
</view>

  5.定义点击方法

	// 跳转外部链接
			tonewurl() {
				let url = this.result.vr_link;//接收返回的数据
				let shopId = this.result.uniacid;
				let utoken = uni.getStorageSync(‘user‘).utoken;
				let unionid = uni.getStorageSync(‘user‘).unionid;
				if (!this.getUserStatus()) {
					return;
				}
				// 判断链接是否为空
				if (url == null) {
					return false;
				}
				// 判断链接是否为https
				let notS = url.split(‘:‘)[0];
				let a = notS.indexOf(‘s‘) > -1;
				if (a == false) {
					return false;
				}
                              //条件编译
				//#ifdef MP-WEIXIN
				var typefrom = ‘wechat‘;
				//#endif
				//#ifdef MP-BAIDU
				var typefrom = ‘baidu‘;
				//#endif
				//#ifdef MP-ALIPAY
				var typefrom = ‘ali‘;
				//#endif
				//#ifdef APP-PLUS
				var typefrom = ‘APP‘;
				//#endif
                            //  链接拼接编码网址(同时用模板字符串放置所需要的数据)
				url = encodeURIComponent(url + `?typefrom=${typefrom}&utoken=${utoken}&unionid=${unionid}&shopid=${shopId}`);
				uni.navigateTo({
					url: ‘../newurl/newurl?url=‘ + url
				});
			},

  

原文地址:https://www.cnblogs.com/Glant/p/11217270.html

时间: 2024-10-31 15:10:59

在小程序里添加跳转外部链接web-view(使用的是uni-app)的相关文章

小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitation.png' class='img-invitation' bindtap='invitation'></cover-image> 2.index.js   添加事件 invitation: function () { var that = this; wx.showModal({ ti

微信小程序的页面跳转

小程序页面的跳转: 先创建页面toolbar,并在app.json里面pages写上路径 "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/toolbar/toolbar"  ], 然后写在页面中添加按钮,然后添加事件, <button type="primary" bindtap="start"&g

小程序里实现 watch 和 computed

小程序里的自定义组件里是有数据监听器的,可以监听对应数据的变化来执行callBack,但是页面Page里没有对应的api就显的很生硬,比如某个数据变了(如切换城市)需要重新刷页面,如果不做监听,每次都要在数据变化的地方手动去调一次函数. 那么如何像vue那样在Page里实现 watch 和 computed 呢 ?如果这时候你脑子里能想到 Obejct.defineProperty 或者 Proxy 那么接下来就慢慢实现吧. 先晒出是这样调用的,请牢记这个调用,后面会反复提到 test2 tes

微信小程序里各种文件是干什么的?

微信小程序首次进入 其他地方略过,这里讲一下,为什么要勾选"在当前目录中创建quick start项目",quick start项目相当于word文档中的模板,可以在模板的基础上直接修改. 创建好了以后,会看到这个 中间的部分的目录,就是微信小程序的工程结构重要的是图中的这些文件分别是干什么的? 这些文件可以分为四类,分别是以js.wxml.wxss和json结尾的文件.以js结尾的文件,一般情况下是负责功能的,比如,点击一个按钮,按钮就会变颜色. 以wxml为后缀的文件,一般情况下负

小程序里使用es7的async await语法

我们做小程序开发时,有时候想让自己代码变得整洁,异步操作时避免回调地狱.我们会使用es6的promise. es7的async,await .promise在小程序和云开发的云函数里都可以使用. async和await只能在云开发的云函数里使用.我们在小程序的代码里直接使用,就会报如下错误. 这个报错就是告诉我们不能在小程序里直接使用es7的async和await语法.但是这么好的语法我们用起来确实显得代码整洁,逼格高.那接下来我就教大家如何在小程序代码里使用es7的async和await语法.

小程序里input宽度与文字显示的问题

不知道是不是bug,微信小程序里input宽度缩小,input可输入文字的区域会缩小的更多,比如说你把input宽度设置为90%,则input文字输入可显示的区域可能只有80%左右. //(存在疑点=>)目前的解决方法:在input输入框外面套一层view,通过改变view的宽度控制input的长度,这样不会影响文字显示 注意 input框上 不能加display:flex 属性 原文地址:https://www.cnblogs.com/panghu123/p/12178187.html

微信小程序携参跳转页面

微信小程序携参跳转页面 前页面 首先在前一个页面写一个按钮,点击按钮跳转到新的页面. <button bindtap="tiaozhuan">跳转到news</button> 写一个方法,让他跳转到其他页面顺便带一个参数. // 跳转页面 tiaozhuan(){ wx.navigateTo({ url: '../news/news?id=wjw1014', }) }, 上边的代码是 在点击按钮的时候跳转到news页面,传进去一个参数id值是wjw1014. 新

用mpvue写微信小程序时,webview跳转外部链接,再跳转回来需要点两次返回箭头才能跳转

问题描述: 给公司做微信小程序时遇到了这个问题,用mpvue框架搭建的小程序,从首页点击进去,先跳转到一个中间页面,在中间页面放上webview链接到外部的H5页面,这时点击小程序左上角自带的返回按钮,第一次会跳转到空白页,再点一次才能跳转到首页. 首页: 详情页: 这时需要点击左上角的返回箭头两次,才能跳转到首页 解决办法: 小程序跳到外部页面方法: 1.从首页(index)跳转到中间页(template): goPage(id){ wx.navigateTo({url:'../templat

微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 1 "use strict"; 2 Object.defineProperty(exports, "__esModule", { 3 value: true 4 }); 5 const http = require('./utils/http.js'); 6 const api = require('./config.js'); 7