27
2017
09

hbuilder mui 移动网页 页面传参

hbuilder开发的app应用,可以用5+传参,就不说了,官网有介绍
那么开发移动web项目的话,页面传参怎么传?

数据获取方式:所有数据都是通过ajax从后台接口获得,跟开发app获取数据的方式一样

问题:不能用5+的 extra 或者 fire()进行页面传参,怎么办?

解决:通过localStorage存储临时数据,用完后再清空localStorage,实现页面之间传参

例如:article-list.html 把文章的 id 传给 article-detail.html

关键代码:
article-list.html 存储文章id到localStorage 关键代码:

<!-- html 部分 -->
<html>
<body>
    <ul>
        <!--下面的 data-aid="23" 应该是动态添加的,这里为了演示方便,就写了个死数据 -->
        <li onclick="clicked()" data-aid="23" >点我跳转,并把 23 传给文章详情页 </li>
    </ul>
</body>
</html>

<!-- javascript 部分 需要先加载mui.min.js 和 jquery.min.js -->
<script> //通知点击监听 function clicked(){ //动态获取文章id,文章id存储在 data-aid 标签里 var aid = $(this).attr("data-aid"); //设置本地存的文章id console.log("页面的文章id为:"+aid); //输出为 "页面的文章id为:23" localStorage.setItem("article_id",aid); //页面跳转,go_page()是我自己封装的跳转函数,大家可以用mui.openWindow()来跳转,效果一样 go_page("article-detail.html"); }); </script>

article-detail.html 获取localStorage 里的文章id 关键代码:

//获取本地存储文章id
var article_id = localStorage.getItem("article_id");
console.log("本地存储的文章id为:"+article_id);//输出为 "本地存储的文章id为:23"
上一篇:Android Studio一键修改项目包名 下一篇:pubsub-js 实现RN组件间通信