H5页面带参数回调微信小程序，动态参数为数字出现数值变化的解决方法

最新推荐文章于 2023-07-06 23:48:58 发布

程序媛小鹿

最新推荐文章于 2023-07-06 23:48:58 发布

阅读量886

点赞数

文章标签：小程序微信 html5 javascript

本文链接：https://blog.csdn.net/zhaolulinss/article/details/120181206

版权

最近开发了一个功能：微信小程序用 <web-view> 组件内嵌了一个H5页面，当从H5页面完成操作，想返回小程序，并且要带一个返回值时，应该怎么做呢？

百度了一通，按各位大神的指导写入如下代码：

H5页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
　　window.onload = function(){
    var acc = [[${acc}]];
    wx.miniProgram.navigateTo({url: '/pages/index?acc='+ acc })
　　}
</script>
<span th:text="'欢迎您： ' + ${acc} + '!'"></span>
</body>
</html>

小程序页面：

var util = require('../../../../utils/util.js');
var api = require('../../../../config/api.js');
var app = getApp();
Page({

  /**
   * ?面的初始?据
   */
  data: {
    acc: ''
  },

  /**
   * 生命周期函?--?听?面加?
   */
  onLoad: function (options) {
    var that = this;

    var acc = options.acc;
    that.setData({
      acc: acc,
    })
  console.log(that.data.acc)
  }
}),

小程序可以获取到数值了!！

你以为这就结束了？

运行了一段时间后发现有问题：我们的返回值 acc 是一串数字，在H5页面如果用如下写法的时候，小程序收到的 acc 是错误的：


　　window.onload = function(){
    console.log([[${acc}]]);
    var acc = [[${acc}]];
    wx.miniProgram.navigateTo({url: '/pages/index?acc='+ acc })
　　}

Debug了一下H5页面，把 acc 打印在控制台，发现以

[[${acc}]]

这种方式取到的 acc 会四舍五入，例如：814,5904 会变成 814,6000，导致传值错误。

这是控制台打印出来的样纸：

我怀疑是 JS 把这串字符串认成了数字类型，但是JS又没有严格的变量类型，

所以尝试先把acc的值先保存到html标签里，再用JS 取值传出去

改完后的写法参考：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
yes ,this is me!
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
　　window.onload = function(){
<!--
<!--var acc = [[${acc}]];
<!--数值类型的值，需先保存到html元素中再获取，否则会异常
-->
    var acc = document.getElementById("test").innerText;
    wx.miniProgram.navigateTo({url: '/pages/index?acc='+ acc })
　　}
</script>
    <div id="test" th:text=" ${acc} "  ></div>
</body>
</html>

试了一下问题果然解决了，开心！

献给和我遇到一样问题的小伙伴们~~

希望能帮到大家 >*~*<

程序媛小鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5页面带参数回调微信小程序，动态参数为数字出现数值变化的解决方法

最近开发了一个功能：从微信小程序用<web-view> 组件内嵌了一个H5页面，当从H5页面完成操作，想返回小程序，并且要带一个返回值时，应该怎么做呢？百度了一通，按各位大神的指导写入如下代码：H5页面：<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫