小程序通过 url 向内嵌 H5 传参注意事项
当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示...):
1、test.wxml
<view>
<web-view src="{{url}}"></web-view>
</view>
2、test.js,对参数进行编码处理:
Page({
/**
* 页面的初始数据
*/
data: {
url: 'https://xxx.xx.com'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(option) {
let loginName = encodeURI(wx.getStorageSync('loginName'));
try {
//相关操作
}
} catch (e) {
wx.navigateTo({
url: '../login/login'
})
}
let pageUrl = encodeURI(option.url);
this.setData({
url: `${this.data.url}${pageUrl}loginName=${loginName}`
});
},
onReady: function() {
},
onShow: function(option) {
}
})
3、H5 端获取参数时需要进行解码处理。
//获取地址栏参数
getQueryString: (name) => {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(decodeURI(r[2]));
return null;
}
}
小程序通过 url 向内嵌 H5 传参注意事项的更多相关文章
- 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法
在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...
- 小程序中webview内嵌h5页面
小程序内嵌h5页面跳转小程序指定页面, 需要引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...
- 小程序内嵌H5——判断小程序环境的坑
现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...
- [转]微信小程序、微信公众号、H5之间相互跳转
本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加 ...
- 微信小程序、微信公众号、H5之间相互跳转
转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加小程序. 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序.已关联的小程序可被使用在自定义菜单和模版消息 ...
- appium常见问题02_android内嵌H5页(webview)如何定位
现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...
- 安卓内嵌H5只展示部分静态页面
问题: 安卓内嵌H5在华为P9部分机型只展示h5静态页面无法展示接口返回渲染的页面 解决办法: Android 关闭硬件加速 android:hardwareAccelerated=" ...
- ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号
异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...
- APP中内嵌H5页面为什么不能下载?
在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...
随机推荐
- 多租户通用权限设计(基于casbin)
多租户通用权限设计(基于 casbin) 所谓权限控制, 概念并不复杂, 就是确认某个操作是否能做, 本质上仅仅就是个bool判断. 权限几乎是每个系统必不可少的功能, 和具体业务结合之后, 在系统中 ...
- 既然CPU一次只能执行一个线程,那多线程存在的意义是什么?
今天看到了一篇文章,终于解除了一直的疑惑. 原文链接:https://www.cnblogs.com/qingbafengliuxia/p/10171638.html CPU的时间是按 ...
- extjs 中比较常见且好用的监听事件
ComboBox listeners:{ expand:function(){ //此函数是,点击下拉框展开的时候事件 }, select:function(com, record, index){ ...
- Storm入门(四)WordCount示例
一.关联代码 使用maven,代码如下. pom.xml 和Storm入门(三)HelloWorld示例相同 RandomSentenceSpout.java /** * Licensed to t ...
- EJS 语法
教程
- Linux 下的 python 虚拟环境 + vim快捷方式
day04虚拟环境 https://www.cnblogs.com/pyyu/p/9015317.html 博客 关闭防火墙: systemctl stop firewalld # 关闭防火前 sys ...
- ZHS16GBK的数据库导入到字符集为AL32UTF8的数据库
字符集为ZHS16GBK的数据库导入到字符集为AL32UTF8的数据库 相信大家都对字符集有相当的了解了,废话就不多说了!直接步入正题:这里主要是测试含有 汉字的数据从ZHS16GBK的数据库导入到 ...
- Python:time模块/random模块/os模块/sys模块
time 模块 #常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2.time.time() 获取当前时间戳 python中时间日期格式化符号: %y 两位数的 ...
- JS 设计模式七 -- 模板方法模式
概念 模板方法模式是一直昂只需使用继承就可以实现的非常简单的模式. 模板方法模式由两部分结构组成,第一部分是抽象父类,第二部分是具体实现的子类. 实现 模板方法模式一般的实现方式为继承. // 体育运 ...
- quotes 整站数据爬取存mongo
安装完成scrapy后爬取部分信息已经不能满足躁动的心了,那么试试http://quotes.toscrape.com/整站数据爬取 第一部分 项目创建 1.进入到存储项目的文件夹,执行指令 scra ...