這篇文章主要介紹微信小程序和web之間如何實(shí)現(xiàn)交互，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、微信小程序開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等多方位專(zhuān)業(yè)化運(yùn)作于一體。

接入條件

• 首先得有開(kāi)發(fā)者權(quán)限

• 你得有臺(tái)服務(wù)器，有權(quán)限上傳文件，不然驗(yàn)證無(wú)法通過(guò)

• 必須是企業(yè)小程序，個(gè)人和海外小程序無(wú)法使用web-view組件

• 你的相關(guān)域名配置了有效的證書(shū)，并且開(kāi)啟了https服務(wù)

• 你要訪問(wèn)的網(wǎng)址必須加入了業(yè)務(wù)域名白名單，網(wǎng)址所調(diào)用的api接口必須加入了服務(wù)器域名白名單，并且api接口也使用的https協(xié)議

以上條件必須同時(shí)滿足，缺一不可微信JSSDK引入

微信 JSSDK 引入

外部引入

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
//進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問(wèn)時(shí)，可改訪問(wèn)
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

使用AMD/CMD標(biāo)準(zhǔn)模塊加載方法加載

安裝

npm i weixin-js-sdk

在mian.js用使用

import wx from 'weixin-js-sdk'

判斷是微信小程序環(huán)境

通過(guò)userAgent為micromessenger，或者window.__wxjs_environment來(lái)判斷

從微信 7.0.0 開(kāi)始，可以通過(guò)判斷userAgent中包含miniProgram字樣來(lái)判斷小程序web-view環(huán)境。

import wx from "weixin-js-sdk";

let OS = "PC"; //假設(shè)有多種環(huán)境

let ua = window.navigator.userAgent.toLowerCase();
if (
  ua.indexOf("micromessenger") >= 0 ||
  window.__wxjs_environment === "miniprogram"
) {
  //在微信或者小程序中
  wx.miniProgram.getEnv((res) => {
    if (res.miniprogram) {
      //在小程序中
      OS = "wxminiprogram";
      window.wx = wx;
    } else {
      //在微信中
      OS = "weixin";
    }
  });
}

引入了sdk，知道了環(huán)境變量，下面就是開(kāi)干了。

交互示例小程序端

使用小程序端的組件，新建/page/webview/index.wxml

web-view會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面，個(gè)人類(lèi)型與海外類(lèi)型的小程序暫不支持使用?？蛻舳?.7.2版本開(kāi)始，navigationStyle: custom對(duì)組件無(wú)效

<!-- 通過(guò)src 來(lái)傳遞當(dāng)前url, 通過(guò)bindmessage 來(lái)監(jiān)聽(tīng)html的傳值 -->
<web-view src="{{url}}" bindmessage="getMessage" />

新建/page/webview/index.js

// pages/webview/index.js
const app = getApp();
Page({
  data: {
    url: "",
    shareData: {},
    postData: {},
  },
  onLoad: function (options) {
    // nickName ,token 是登錄之后拿到的信息 , 用來(lái)和h6 交互
    let nickName = wx.getStorageSync("nickName");
    let token = wx.getStorageSync("token");

    let url = options.url;
    if (url) {
      //請(qǐng)注意傳遞url 請(qǐng)務(wù)必使用 decodeURIComponent 和 encodeURIComponent , 不然會(huì)白屏
      url = decodeURIComponent(url);
    }
    //因?yàn)樾〕绦?nbsp;貌似還不能主動(dòng)和H5 交互,所以拿到的登錄信息,我們通過(guò)url 來(lái)傳遞.
    let localUrl = "";
    if (token) {
      localUrl = url + "?token=" + userToken + "&nickName=" + nickName;
    }
    //猶豫地址存了token 和其他信息,分享會(huì)暴露,所以要手動(dòng)重置分享地址 數(shù)據(jù)為 shareData
    this.setData({
      url: localUrl,
      shareData: {
        titil: "測(cè)試小程序",
        desc: "測(cè)試小程序藐視描述",
        path: url,
      },
    });
  },
  getMessage(e) {
    //此處接收html傳遞過(guò)來(lái)的參數(shù)
    this.postData = e.detail.data;
  },
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage() {
    //重置分享鏈接和路徑
    return {
      title: this.shareData.title,
      desc: this.shareData.desc,
      path: this.shareData.path,
    };
  },
});

交互示例web端

在web端，我們知道如何判斷web是在小程序中，可以通過(guò)微信jsskd直接發(fā)送交互信息，和在原生的微信小程序里一樣

做路由跳轉(zhuǎn)

// 前面我們已經(jīng)定義了window.wx = wx ,這里可以直接調(diào)用
// 還可以通過(guò)url 來(lái)獲取token 等相關(guān)信息

if (OS == "RN") {
  //這里假設(shè)我們有多重環(huán)境..
}
if (OS == "wxminiprogram") {
  wx.miniProgram.navigateTo({
    url:
      "/pages/webview/index?url=" +
      decodeURIComponent("https://www.chuchur.com?id=100"),
  });
}

給小程序發(fā)送數(shù)據(jù)

wx.miniProgram.postMessage({
  data: {
    hello: "wrold",
  },
});
//web-view 則通過(guò) bindmessage 來(lái)監(jiān)聽(tīng) 傳過(guò)來(lái)的數(shù)據(jù)

更多方法

wx.miniProgram.navigateBack(); //返回
wx.miniProgram.switchTab(); //切換底部的導(dǎo)航
wx.miniProgram.reLaunch(); //重新加載
wx.miniProgram.redirectTo(); //地址重定向
wx.miniProgram.getEnv(); //獲取當(dāng)前環(huán)境

以上是“微信小程序和web之間如何實(shí)現(xiàn)交互”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：微信小程序和web之間如何實(shí)現(xiàn)交互
分享URL：http://aaarwkj.com/article16/pdejgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、移動(dòng)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、企業(yè)網(wǎng)站制作、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)