小程序跳轉(zhuǎn)h5百科-微信小程序內(nèi)嵌的h5如何跳轉(zhuǎn)到其他h5鏈接?
小程序跳轉(zhuǎn)h5
微信小程序作為一個越來越受歡迎的營銷工具,使得商家可以快速地將業(yè)務(wù)推廣到更廣泛的用戶群體。但是,在小程序中打開H5頁面有時會變得棘手。讓我們一起看看如何解決從小程序內(nèi)嵌的H5跳轉(zhuǎn)到其他H5鏈接的問題。
1、設(shè)置H5頁面路由規(guī)則
首先,你需要在小程序后臺的“設(shè)置”選項卡下找到“開發(fā)設(shè)置”,然后開啟“關(guān)聯(lián)小程序”。此外,你還需在小程序根目錄下的app.json文件中設(shè)置「H5頁面路徑配置」:
{ "pages": [ "pages/home/index", "pages/about/index", // H5頁面 "pages/webview/index" ], "subPackages": [ ], "window": { ... }, "networkTimeout": { "request": 30000, "downloadFile": 10000 }, // H5頁面路由設(shè)置 "navigateToMiniProgramAppIdList": [ ], "usingComponents": { } }
以上面的JSON代碼為例, 我們在"pages"數(shù)組里定義了三個頁面: 主頁、關(guān)于我和一個webview頁面用于打開H5頁面。注意,新增的webview必須是現(xiàn)有小程序頁面之一:即前面的 “pages”數(shù)組里已經(jīng)存在的一頁。
2、編寫跳轉(zhuǎn)代碼
定義好H5頁面路徑配置后,你還需要在小程序JS文件里編寫相應(yīng)的跳轉(zhuǎn)代碼:
wx.navigateTo({ url: '/pages/webview/index?weburl=https://www.example.com', })
代碼中,“/pages/webview/index”是預(yù)定義的H5頁面路徑,“?weburl=”后面是要跳轉(zhuǎn)的H5頁面的URL地址。
3、處理返回鍵
為了讓你的H5網(wǎng)頁有很好的用戶體驗(yàn),你需要對小程序內(nèi)嵌的H5頁面進(jìn)行返回鍵處理。只需在webview頁面的js代碼中使用wx.navigateBack方法返回。如下所示:
// “返回上一頁”按鈕事件處理 onNavigateBack: function() { wx.navigateBack({ delta: 1 }); }
4、多次跳轉(zhuǎn)問題
如果你的小程序需要多次在內(nèi)部跳轉(zhuǎn)至不同的H5 URL,則需要通過JSBridge實(shí)現(xiàn)該功能。下面是一個簡單的偽代碼示例:
//HTML代碼片段Link 1Link 2//JS代碼片段 function myFunction(url) { var message = { type: 'redirect', data: url }; // 發(fā)送消息給微信客戶端 WeixinJSBridge.send(message); }
以上代碼將偽造發(fā)送一個重定向請求到指定的H5網(wǎng)址。
<本文由himall原創(chuàng),商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請標(biāo)明:himall原創(chuàng)>
滿足不同行業(yè)發(fā)展電商的需求,HiMall更有針對性的提供不同行業(yè)內(nèi)的電商解決方案
-
跨境電商解決方案
支持直郵/保稅模式
對接海關(guān)/保稅倉
支持多國國際語言
對接Paypal國際支付
幫助跨境外貿(mào)企業(yè)搭建跨境進(jìn)口/出口電商平臺,搶占國際電商市場,針對企業(yè)需求定制個性化跨境電商解決方案 -
分賬解決方案
迎合金融監(jiān)管要求
規(guī)避“二清”結(jié)算
節(jié)約平臺財務(wù)成本
降低平臺招商成本
在合法、合規(guī)的前提下,為電商平臺提供資金收付、賬戶管理、資金合規(guī)等一體化整體解決方案 -
B2B批發(fā)解決方案
多級階梯批發(fā)價
布局全渠道批發(fā)入口
專屬批發(fā)訂貨市場
銀聯(lián)B2B大額支付
為企業(yè)快速搭建綜合性B2B批發(fā)電商平臺,整合線下批發(fā)資源,拓展線上批發(fā)渠道,實(shí)現(xiàn)批發(fā)業(yè)務(wù)24小時在線經(jīng)營
-
MRO工業(yè)品采購平臺系統(tǒng)|MRO工業(yè)品采購平臺系統(tǒng)有哪些功能
最新消息:MRO工業(yè)品采購平臺系統(tǒng) 是一款集產(chǎn)、研、銷于一體的綜合性解決方案,專為解決工業(yè)品企業(yè)的采購難題而設(shè)計。該系統(tǒng)通過...詳情
-
電子元器件采購商城系統(tǒng)|電子元器件采購商城系統(tǒng)有哪些功能
最新消息:電子元器件采購商城系統(tǒng) 是專為滿足電子元器件行業(yè)復(fù)雜業(yè)務(wù)流程需求而設(shè)計的綜合性平臺。它不僅提供了全面的技術(shù)支持...詳情
【本站聲明】
1、本網(wǎng)站發(fā)布的該篇文章,目的在于分享電商知識及傳遞、交流相關(guān)電商信息,以便您學(xué)習(xí)或了解電商知識,請您不要用于其他用途;
2、該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)并非來源于本網(wǎng)站,更非本網(wǎng)站提供,與本網(wǎng)站無關(guān),系他人的商品或服務(wù),本網(wǎng)站對于該類商標(biāo)、標(biāo)識不擁有任何權(quán)利;
3、本網(wǎng)站不對該篇文章中所涉及的商標(biāo)、標(biāo)識的商品/服務(wù)作任何明示或暗示的保證或擔(dān)保;
4、本網(wǎng)站不對文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé),僅系客觀性描述,如您需要了解該類商品/服務(wù)詳細(xì)的資訊,請您直接與該類商品/服務(wù)的提供者聯(lián)系。