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"
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章