用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

實現小程序和H5頁面之間互相跳轉

Rolan 2019-6-26 00:32

一、背景需求背景是這樣的,在小程序里面,點擊查看用戶簽訂的協議,跳轉到協議詳情頁,剛好協議詳情頁在另一個H5項目的已經有,所以就想直接跳轉過去,避免再開發小程序版本的協議詳情頁二、小程序跳轉H5頁面小程序 ...

一、背景

需求背景是這樣的,在小程序里面,點擊查看用戶簽訂的協議,跳轉到協議詳情頁,剛好協議詳情頁在另一個H5項目的已經有,所以就想直接跳轉過去,避免再開發小程序版本的協議詳情頁

二、小程序跳轉H5頁面

小程序里面運行H5頁面,需要嵌在<web-view></web-view> web-view 里面,注意:一個項目只能有一個<web-view></wb-view>。

Demo:在小程序里面打開百度網頁

在小程序項目里面src/pages/新建一個webview的文件夾,含有wxml/wxss/json/js

wxml:
<web-view src="{{ src }}"></web-view>
js:在onLoad里面獲取到url這個參數,然后賦值給data,這樣在wxml里面就能取到src的值。
Page({
    data: {
        url: '',
    },
    onLoad: function (param) {
        this.setData({
            url: decodeURIComponent(param.url),
        })
    }
});

json/wxss是空文件就可以了。

在小程序的頁面跳轉到H5頁面的寫法

wx.navigateTo({
    url: '../webview/index?url=https://www.baidu.com/'
});

這樣就成功實現從小程序跳轉到H5頁面。

三、H5頁面返回小程序

從H5頁面返回小程序頁面,需要使用微信SDK提供的跳轉方法。

window.wx.miniProgram.navigateTo({
    url: `/page/account/index`,
 });

使用微信的SDK方法,需要先發送簽名驗證wx.config。

四、小程序和H5互跳遇到的坑

  1. 【問題描述】wx.miniProgram.navigateTo中url無法跳轉問題

【問題解決】:app.json中配置的tabBar與wx.navigateTo中的url引用相同頁面導致

首先pages/account/index這個路徑在app.json已經存在,也就是當前從H5頁面window.wx.miniProgram.navigateTo(url)的url已經和app.json的一樣。此時是不能通過這個方式跳轉,而是要改成window.wx.miniProgram.reLaunch(url)

總結:如果url在app.json已定義,則使用reLaunch跳轉,如果沒有,則使用miniProgram.navigateTo(url)

  1. 【問題描述】在小程序里面跳轉到H5協議詳情頁的時候,進入了系統錯誤頁(項目里定義好的錯誤頁),當我現在微信公眾號打開該協議詳情頁,此時再從小程序進入,不會出現。

【問題解決】這里我判斷是跟登錄態有關系,因為我先訪問一下公眾號,此時瀏覽器里有了登錄態,所以在小程序里面訪問協議詳情頁不會進入系統錯誤頁。

定位問題過程:H5頁面是vue頁面,先從路由文件/routes/index.js開始debugger,果然就在登錄的js里面找到問題,查看登錄的js里面有一個先會登出的過程,然后再login(這里是因為不同券商的原因,需要logout清除上一個券商的數據,哈哈,流水賬,不然越記越長,不展開咯)在登錄logout的過程,此時該cgi拋出異常,剛好被全局捕獲,所以進入了系統錯誤頁。

后面的解決方法,是在登出的時候try catch捕獲異常,不要把異常被全局捕獲。

try {await request('logout.cgi')} catch(e) {console.log('error')}
記下問題2,是想跟自己說,bugger經常有,遇到了就一個個地看debugger,看錯誤來源哪里。謹記在心。
鮮花
鮮花 (1)
雞蛋
雞蛋

剛表態過的朋友 (1 人)

分享至 : QQ空間
收藏
原作者: totora_MS 來自: segmentfault
致青春APP 幸运彩票手机安卓版app 二人雀神麻将下载 宝妈兼职赚钱做什么好 分分彩包胆技巧 赌大小猜骰子技巧 浙江20选5走势图带连线 日亚买什么赚钱 三个骰子赌大小技巧 浙江快乐12开奖结果今天的全部 父母给孩子赚钱 今天贵州11选五11选5 上海天天彩选四中奖规则 澳搏线上娱乐 重庆时时彩和新时时彩 上证指数什么股票指数 北京pk10在哪里投注