雖互不曾謀面,但希望能和您成為筆尖下的朋友

以讀書(shū),技術(shù),生活為主,偶爾撒點(diǎn)雞湯

不作,不敷衍,意在真誠(chéng)吐露,用心分享

點(diǎn)擊左上方,可關(guān)注本刊

標(biāo)星公眾號(hào)（ID：itclanCoder）

如果不知道如何操作

點(diǎn)擊這里,標(biāo)星不迷路

（長(zhǎng)按掃碼進(jìn)入識(shí)開(kāi)發(fā)者頁(yè)面即可體驗(yàn)）

背景

有時(shí)候,因?yàn)闃I(yè)務(wù)需求,在小程序當(dāng)中,需要跳轉(zhuǎn)到 h5 網(wǎng)頁(yè),或跳轉(zhuǎn)到公眾號(hào),形成流量的閉環(huán),那在小程序當(dāng)中怎么實(shí)現(xiàn)呢?

實(shí)例效果

(小程序跳轉(zhuǎn)到公眾號(hào))

（小程序跳轉(zhuǎn)到h5網(wǎng)頁(yè)）

小程序?qū)崿F(xiàn)跳轉(zhuǎn)到公眾號(hào)

前提條件

• 該小程序與需要跳轉(zhuǎn)至的公眾號(hào)(訂閱號(hào)/服務(wù)號(hào))進(jìn)行了綁定關(guān)聯(lián)

• 使用小程序開(kāi)放能力web-view實(shí)現(xiàn)跳轉(zhuǎn)(承載網(wǎng)頁(yè)的容器。會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面，個(gè)人類型的小程序暫不支持使用)

web-view提供了一個(gè)src屬性,這個(gè)src屬性就是可以從小程序跳轉(zhuǎn)到指定鏈接的地止

注意

使用webview時(shí),需要單獨(dú)的在小程序中創(chuàng)建一個(gè)頁(yè)面,要在app.json中的pages中注冊(cè),如下所示,然后在webview中的wxml中使用webview標(biāo)簽,在webview標(biāo)簽上設(shè)置的src屬性就是要跳轉(zhuǎn)的地止

{
  "pages": [
     "pages/webview/webview"
  ]
}

在觸發(fā)事件處:綁定事件

<view>
  <view class="contaniner-1" bindtap="handleToWxPublic">
    點(diǎn)擊跳轉(zhuǎn)到itclanCoder公眾號(hào)
  </view>
  <view class="contaniner-1" bindtap="handleToWebSite">
    點(diǎn)擊跳轉(zhuǎn)到https://coder.itclan.cn/網(wǎng)站
  </view>
</view>

以下是邏輯代碼

// pages/handletowebview/handletowebview.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {},

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
 >上面示例代碼中的跳轉(zhuǎn)的參數(shù)url,nav在另一個(gè)頁(yè)面webview中的onLoad生命周期函數(shù)中的options參數(shù)中可以接收得到,重新賦新值即可

 
在webview頁(yè)面中,示例代碼如下所示
 
<!--pages/webview/webview.wxml-->
<view>
  <web-view src="{{url}}"></web-view>
</view>

 
webview的邏輯頁(yè)面
 
// pages/webview/webview.js
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    url: '', // 頁(yè)面中需要的數(shù)據(jù)
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
 >如上代碼就可以實(shí)現(xiàn)小程序跳轉(zhuǎn)到公眾號(hào)

 
小程序?qū)崿F(xiàn)跳轉(zhuǎn)到 H5 網(wǎng)頁(yè)
 
小程序跳轉(zhuǎn)到 H5 網(wǎng)頁(yè),與跳轉(zhuǎn)公眾號(hào)類似,只需要把上面的url地止切換成自己想要的鏈接即可
 
注意
 
跳轉(zhuǎn)到的網(wǎng)頁(yè)需要在小程序后配置支持業(yè)務(wù)域名即可完成跳轉(zhuǎn),否則是跳轉(zhuǎn)失敗的
 
如下所示,跳轉(zhuǎn)至https://coder.itclan.cn/:
 
handleToWebSite() {
    const url = 'https://coder.itclan.cn/'; // 跳轉(zhuǎn)的外鏈
    const navtitle = 'itclanCoder'; // 這個(gè)標(biāo)題是你自己可以設(shè)置的
    wx.navigateTo({
      // 跳轉(zhuǎn)到webview頁(yè)面
      url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
    });
  }


 
可能會(huì)遇到的問(wèn)題
 
小程序跳轉(zhuǎn)指定的公眾號(hào)失敗
小程序跳轉(zhuǎn)指定的 h5 頁(yè)面失敗
 

 
原因
 
跳轉(zhuǎn)的公眾號(hào)需要關(guān)聯(lián)該小程序,才支持小程序的跳轉(zhuǎn)
小程序后臺(tái)管理沒(méi)有配置添加業(yè)務(wù)域名(如果只是測(cè)試的話,可以在開(kāi)發(fā)者工具里設(shè)置本地域名不校驗(yàn)合法域名webview等)
 
相關(guān)文檔
 
webview-小程序開(kāi)放能力
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
 


 
公眾號(hào)（ID：itclanCoder）
 
碼能讓您早脫菜籍，文能讓您洗凈鉛華
 
  可能您還想看更多：
 

 
Js篇-面試題15-通過(guò)什么方法可以實(shí)現(xiàn)-檢測(cè)頁(yè)面 DOM 變化
 


 
Js篇-面試題11-比較下for..of與for..in的區(qū)別
 

 
Js篇-面試題9-請(qǐng)說(shuō)一下Js中的事件循環(huán)機(jī)制
 

 
vuepress建站過(guò)程中遇到的一些問(wèn)題