小程序內嵌h5頁面分享_微信小程序webview內頁面分享

6ef693e7c4fd24981781739ce9c17cb5.png

因為項目原因,之前在微信小程序內部使用 webview 嵌套了 h5 頁面,現在要添加一個新的功能,用戶在哪個頁面進行了分享,被分享的用戶從鏈接進來就跳轉到哪個分享頁面。

先了解一下 web-view 組件的限制,web-view 是承載網頁的容器,會自動鋪滿整個小程序頁面。目前個人類型小程序不支持使用。

src 屬性里放置 webview 要打開的網頁鏈接,需要注意的是在管理后臺配置要訪問網頁的域名,否則生產模式無法進行訪問。開發版和體驗版可以通過點擊小程序右上角三個點打開調試來進行訪問。

小程序頁面轉發分享需要自身定義了一個轉發的相關事件 onShareAppMessage,這個事件在設置之后可以通過點擊小程序右上角的三個點來觸發,也可以通過為小程序頁面添加 button 標簽,設置 button 的屬性 open-type=”share” 來觸發。

webview 是內嵌的網頁,內部頁面無法直接調起小程序的轉發。

這個需求實現的特殊之處在于要分享的頁面為 webview 中的頁面,而 webview 作為一個容器,它放在了小程序的一個頁面中,我們所看到的頁面跳轉都是在這個容器中進行的,小程序無法直接獲取容器的跳轉路徑。

所以為了實現 webview 中的頁面分享,把 h5 頁面地址作為參數傳輸,在接收的頁面中取出并賦值到當前頁面 webview 中的 src 中,即可進行展示。

如何拿到 webview 中當前的頁面鏈接,以及一些動態參數如何傳遞給小程序?

動態參數包括要跳轉的 h5 頁面地址,分享鏈接展示的圖片這些參數需要通過 h5 頁面來進行獲取,然后 h5 再傳輸給小程序,小程序分享的時候進行攜帶。

查閱開發文檔 webview 看到 bindmessage 屬性,網頁向小程序 postMessage 時,會在特定時機(小程序后退、組件銷毀、分享)觸發并收到消息。e.detail = { data },data 是多次 postMessage 的參數組成的數組。

H5 網頁需要引入 JSSDK 1.3.2 提供的接口 wx.miniProgram.postMessage 向小程序傳輸參數。

webview 通過 bindmessage 定義的方法接收 h5 傳輸的數據,需要注意的是,每次發送數據后數據都會添加到 e.detail.data 中的數組,并不會清除掉上一次傳遞的數據,所以我們取數組的最后一位元素。

由此,h5 頁面引入 JSSDK 1.3.2,使用 wx.miniProgram.postMessage 發送參數,小程序頁面使用 webview 的 bindmessage 屬性接收參數即可完成動態參數的傳遞。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/271385.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/271385.shtml
英文地址,請注明出處:http://en.pswp.cn/news/271385.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

shell shift與{}_一文掌握shell腳本中shift的用法及功能

概述今天主要介紹下shell腳本中shift的一些用法,這個命令還是相對比較少見的。一、shift介紹shift命令用于對參數的移動(左移),通常用于在不知道傳入參數個數的情況下依次遍歷每個參數然后進行相應處理(常見于Linux中各種程序的啟動腳本)。簡而言之&…

redisTemplate設置key零點過期,生成自增的單號

public String getId() {String key "finance:funs:code";Long incr getIncr(key);if (incr 0) {incr getIncr(key);//從0001開始}DecimalFormat df new DecimalFormat("0000");//四位序列號String format df.format(incr);return format;}public Lo…

docker log 文件 清理

1 查看docker log 文件位置 docker inspect *** 2 定時清理 truncate -s 0 /var/lib/docker/containers/*/*-json.log docker 日志管理 https://docs.docker.com/engine/admin/logging/json-file/ 全局配置 默認位置 /etc/docker/daemon.json 由dockerd 啟動參數 --config-fi…

計算機網絡基礎:常見的網絡傳輸介質

傳輸介質是信號傳遞的媒體,常用的網絡傳輸介質包括有線介質(雙絞線、同軸電纜、光纖等)和無線介質(微波、紅外線、激光等)。 1、雙絞線 雙絞線是目前最普遍的傳輸介質,分為兩類:屏蔽雙絞線&…

json為全局變量 vue_vue 設置全局變量、指定請求的 baseurl

一. 基本環境前端vue:2.5.6axios:0.18使用vue腳手架構建項目。參照:webstorm搭建vue項目后臺ssm框架前后端數據采用json格式傳輸二. 前端配置axios配置1.安裝:npm install axios --save2.在所需組件中引入axios:import…

java 多項式擬合最多的項數_Matlab概率統計與曲線擬合

一、二項分布二項分布來源于伯努利試驗 (事件發生概率 ) :含義為獨立重復N次試驗后, 事件總共發生k次的概率分布函數 二項分布記為 binopdf 獲得事件共發生次的概率 binocdf 為事件最多發生次的概率 binornd 將生成一個服從二項分布 規模為 的隨機矩陣二項分布的數字特征…

mysql -- MAC下安裝配置mysql

1:進入官網,鏈接是 https://dev.mysql.com/downloads/mysql/ 點擊第一個dmg文件,download 2:點擊 No thanks, just start my download. 3:下載到本地到dmg文件 4:安裝MySQL,雙擊 mysql.dmg 文件,進行安裝。 注意:安裝…

負載均衡配置與使用

Nginx負載均衡的理解 Nginx是一個輕量級的、高性能的WebServer,他主要可以干下面兩件事: 作為http服務器(和apache的效果一樣) 作為反向代理服務器實現負載均衡 現在Nginx到處都可以見到,經常會看到宕機后的網頁會顯示…

計算機網絡基礎:網絡分類和拓撲結構知識筆記

???????1、計算機網絡分類 城域網、廣域網、局域網網對比 網絡分類 縮寫 分布距離 計算機分布范圍 傳輸速率范圍 局域網 LAN 10、100、1000m左右 房間、樓寓、校園 4Mb/s- 1Gb/s 城域網 MAN 10KM左右 城市 50Kb/s-100Mb/s 廣域網 WAN 100KM左右 國家或…

php發送數據到視圖格式_PHP-FPM的相關知識的深度解釋

一、需要搞清楚幾個名詞概念1. CGI(Common Gateway Interface,CGI)通用網關接口, 是Web 服務器運行時外部程序的規范,按CGI 編寫的程序可以擴展服務器功能。CGI 應用程序能與瀏覽器進行交互,還可通過數據API與數據庫服…

stm32超聲波測距代碼_干貨!特斯拉Autopilot核心傳感器解讀超聲波雷達篇

加入高工智能汽車行業群(自動駕駛行業4群,車聯網智能座艙3群,智能商用車行業群),加微信:15818636852,并出示名片,僅限智能網聯汽車零部件及OEM廠商。目前為止,特斯拉的Autopilot一共經歷了三代硬…

記錄

https://xclient.info/ https://www.macbl.com/ https://www.macwk.com/

進階篇-安卓系統:2.多點觸控的交互處理

1.android 觸摸事件偵聽 安卓的用戶交互方式包括兩種,一種是點擊交互,一種是觸摸交互。點擊交互就是手指按下抬起一個動作組。而觸摸交互分為按下(down),移動(move),抬起&#xff08…

計算機網絡:網絡設備知識筆記

網絡設備是實現計算機網絡實現用戶通信和交互信息的硬件基礎。常用的網絡設備有中繼器、網橋、路由器、集線器等。 1、網絡傳輸介質互聯設備 網絡線路和用戶節點具體銜接時,需要網絡傳輸介質的互聯設備。比如T型頭(同軸電纜連接器)、收發器、…

執行git命令時提示秘鑰權限太開放‘Permissions 0644 for ‘/Users/liuml/.ssh/id_rsa_tz‘ are too open.’

執行git命令時提示秘鑰權限太開放‘Permissions 0644 for /Users/liuml/.ssh/id_rsa_tz are too open.’ 報錯如下 這個問題是由于 權限的問題,需要文件設置權限: chmod 600 *

eclipse折疊if語句塊_Python學習日志01判斷 if 語句

1.條件判斷語句(if語句)在python中,if語句就是用來進行判斷的,語法如下:語法:If 條件表達式:代碼塊執行的流程:if語句在執行時,會先對條件表達式進行求值判斷&#xff1b…

mysql怎么可視化連接_IDEA連接MySQL可視化工具連接操作

IDEA連接MySQL可視化工具連接操作入下所示:填寫完成后,點擊測試連接,連接成功如圖所示點擊OK即可報告錯誤(如圖所示):[08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up. java.ne…

Windows下圖文詳解PHP三種運行方式(php_mod、cgi、fastcgi)

PHP能不能成功的在Apache服務器上運行,就看我們如何去配置PHP的運行方式。PHP運行目前為止主要有三種方式: a、以模塊加載的方式運行,初學者可能不容易理解,其實就是將PHP集成到Apache服務器,以同一個進程運行。 b、以…

計算機網絡基礎:ISO/OSI網絡體系結構知識筆記?

??作者主頁:IT技術分享社區 ??作者簡介:大家好,我是IT技術分享社區的博主,從事C#、Java開發九年,對數據庫、C#、Java、前端、運維、電腦技巧等經驗豐富。 ??個人榮譽: 數據庫領域優質創作者🏆&#x…

mac下安裝redis

官網地址:https://redis.io/ 二、下載完成后解壓安裝 解壓命令 tar zxvf redis-6.0.6.tar.gz 切換到redis目錄下 cd redis-6.0.6 編譯測試 sudo make test 編譯安裝 sudo make install sudo make test sudo make install