前言
小程序新出了web-view,正好有一个需求需要做页面跳转,在此记录下过程中发现的填坑
白名单设置
白名单是设置二级域名的,也就是也就说,如果访问的是https://agt.yugi.com下面的地址,就要设置https://agt.yugi.com,而不是https://www.yugi.com,并且这个设置,因此,针对小程序的页面,尽量不要做二级域名,避免设置不过来。而且这个设置似乎不是马上生效的,所以一开始一直提示域名非法。
带参数跳转
因为考虑还会有其他的页面跳转, 就直接做了一个web的页面,带入url即可,然后实际操作中,发现一直白屏,通过数据分析,发现是URL的参数丢失了。
通过调查,发现是我的参数中含有的一些参数在微信传参中会丢失,需要在跳转前将参数转义,使用前在重新转义回去。
传参
toUrl(event) {
// 打开页面(只能打开白名单的域名)
var url = event.target.dataset.url;
if(!url){
return;
}
url = encodeURIComponent(url);
url = '/pages/web/web?url=' + url;
wx.navigateTo({
url: url
})
}
收参
onLoad: function (options) {
// 页面渲染后 执行
var page = this;
var url = options.url;
url = decodeURIComponent(url);
// 页面初始化 options为页面
var newUrl = "https://www.yugi.com";
if (url.indexOf('http://yugi.com')>-1){
url = url.replace('http://yugi.com', newUrl);
} else if (url.indexOf('http://www.yugi.com')>-1) {
url = url.replace('http://www.yugi.com', newUrl);
}
//isPassArea=1&xcx=1
if (url.indexOf('isPassArea')<0) {
url = url +'&isPassArea=1';// 二级域名不过滤
}
if (url.indexOf('xcx') < 0) {
url = url + '&xcx=1';// 小程序标识,如果有需要特殊处理,可以用此判断
}
if (url.indexOf('flag=1') < 0) {
url = url.replace('flag=1','flag=2');
}
if (url.indexOf('flag') < 0) {
url = url + '&flag=2';// 取消一键下载
}
// 页面初始化 options为页面跳转所带来的参数
this.setData({
url: url
})
}
分享
微信不能分享网页,所以,依然是分享这个微信小程序页面,this.data.url
在上文中的onload已经设置好了。页面标题暂时没有看到API可以获取,所以略过。
onShareAppMessage(options) {
var url = this.data.url;
url = encodeURIComponent(url);
url = '/pages/web/web?url=' + url;
// console.log(url);
return {
title: 'yugi',
desc: '',
path: url
}
}
一下列出几个较为完整的代码,便于下次阅读修改
web.js
// pages/web/web.js
Page({
data: { // 参与页面渲染的数据
url: ''
},
onShareAppMessage(options) {
var url = this.data.url;
url = encodeURIComponent(url);
url = '/pages/web/web?url=' + url;
return {
title: 'title',
desc: '',
path: url
}
},
onLoad: function (options) {
// 页面渲染后 执行
var page = this;
var url = options.url;
url = decodeURIComponent(url);
// 页面初始化 options为页面
var newUrl = "https://www.yugi.com";
if (url.indexOf('http://yugi.com')>-1){
url = url.replace('http://yugi.com', newUrl);
} else if (url.indexOf('http://www.yugi.com')>-1) {
url = url.replace('http://www.yugi.com', newUrl);
}
// 页面初始化 options为页面跳转所带来的参数
this.setData({
url: url
})
}
})
web.wxml
<web-view src="{{url}}"></web-view>
网友评论