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

以讀書,技術,生活為主,偶爾撒點雞湯

不作,不敷衍,意在真誠吐露,用心分享

點擊左上方,可關注本刊

標星公眾號（ID：itclanCoder）

如果不知道如何操作

點擊這里,標星不迷路

（長按掃碼進入識開發(fā)者頁面即可體驗）

背景

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

實例效果

(小程序跳轉到公眾號)

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

小程序實現(xiàn)跳轉到公眾號

前提條件

• 該小程序與需要跳轉至的公眾號(訂閱號/服務號)進行了綁定關聯(lián)

• 使用小程序開放能力web-view實現(xiàn)跳轉(承載網(wǎng)頁的容器。會自動鋪滿整個小程序頁面，個人類型的小程序暫不支持使用)

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

注意

使用webview時,需要單獨的在小程序中創(chuàng)建一個頁面,要在app.json中的pages中注冊,如下所示,然后在webview中的wxml中使用webview標簽,在webview標簽上設置的src屬性就是要跳轉的地止

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

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

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

以下是邏輯代碼

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

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

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

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

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

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


 
可能會遇到的問題
 
小程序跳轉指定的公眾號失敗
小程序跳轉指定的 h5 頁面失敗
 

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


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

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


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

 
Js篇-面試題9-請說一下Js中的事件循環(huán)機制
 

 
vuepress建站過程中遇到的一些問題