当在小程序中通过 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 传参注意事项的更多相关文章

  1. 微信小程序中使用 <web-view> 内嵌 H5 时,登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  2. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  3. 小程序内嵌H5——判断小程序环境的坑

    现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...

  4. [转]微信小程序、微信公众号、H5之间相互跳转

    本文转自:https://www.cnblogs.com/colorful-paopao1/p/8608609.html 转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加 ...

  5. 微信小程序、微信公众号、H5之间相互跳转

    转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加小程序. 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序.已关联的小程序可被使用在自定义菜单和模版消息 ...

  6. appium常见问题02_android内嵌H5页(webview)如何定位

    现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...

  7. 安卓内嵌H5只展示部分静态页面

    问题: 安卓内嵌H5在华为P9部分机型只展示h5静态页面无法展示接口返回渲染的页面 解决办法: Android  关闭硬件加速   android:hardwareAccelerated=" ...

  8. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  9. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

随机推荐

  1. 最好用的jQuery-Ajax缓存插件

    AJAX-Cache    最好用的jQuery-Ajax缓存插件 介绍 AJAX-Cache是一款jQuery插件,基于localStorage/sessionStorage实现异步请求缓存功能,并 ...

  2. 配置安全的管理访问(GNS3)

    实验拓扑: 实验目的: 尝试用R2/R3远程登陆R1路由器并进行管理,在此之前先在R1配置安全的管理访问 1.端口IP配置 R1: e1/0 192.168.1.1/24 e1/1 192.168.2 ...

  3. Storm入门(四)WordCount示例

    一.关联代码 使用maven,代码如下. pom.xml  和Storm入门(三)HelloWorld示例相同 RandomSentenceSpout.java /** * Licensed to t ...

  4. C语言报错:error: expected ‘while’ at end of input } ^

    在建线程池过程当中遇见上图所示错误: 解决方法: Linux中定义: SYNOPSIS #include <pthread.h> void pthread_cleanup_push(voi ...

  5. php框架之phalcon

    1.开发助手 1) 下载 git clone https://github.com/phalcon/cphalcon.git git clone https://github.com/phalcon/ ...

  6. js中对象引用出现的问题

    先看一个特别不符合直觉的代码 <script type="text/javascript"> var a = [1,2,3,4]; var b = [1,2,3,4]; ...

  7. javascript深入浅出——学习笔记(包装对象和类型检测)

    3包装对象:https://www.imooc.com/video/5676 当我们尝试把基本类型已对象的方式访问时,javascript会把该基本类型转换为对应的包装类型对象(临时对象),相当于ne ...

  8. 2019-04-05 Spring Boot学习记录

    1. 使用步骤 ① 在pom.xml 增加父级依赖(spring-boot-starter-parent) ② 增加项目起步依赖,如spring-boot-starter-web ③ 配置JDK版本插 ...

  9. jquery ajax几种书写方式的总结

    Ajax在前端的应用极其广泛,因此,我们有必要对其进行总结,以方便后期的使用. AJAX优点: 可以异步请求服务器的数据,实现页面数据的实时动态加载, 在不重新加载整个页面的情况下,可以与服务器交换数 ...

  10. struts2 --xml配置

    struts2.5 官方文档介绍 这个是struts2.5给出的web.xml配置方式,核心包已经被挪到了ng的上一层 <web-app id="MyStrutsApp" v ...