Home > Article > Web Front-end > A brief analysis of the interaction between WeChat applet and the web (code sharing)

A brief analysis of the interaction between WeChat applet and the web (code sharing)

奋力向前forward: 2021-08-17 11:49:144750browse

In the previous article "In-depth analysis of the basic interaction between React Native and the Web (with code)", I will give you an understanding of the interaction between React Native and the Web. The following article will give you an understanding of the interaction between WeChat applet and the web. Friends in need can refer to it. I hope it will be helpful to you.

Background

Usually we write a set of adaptive web programs and want to use them in a variety of environments. For example, in apps, WeChat In mini programs and various app sharing, if you can only use the app to browse, it is not a big problem, but if you want to interact with the app itself in the embedded app, you have to make various troubles, so this article is here.

Tossing around in ReactNative, Please look here

Access conditions

You must first have Developer permissions
You must have a server and have permission to upload files, otherwise the verification will not pass
Must be an enterprise applet, personal and Overseas mini programs cannot use the web-view component
Your relevant domain name is configured with a valid certificate and the httpsservice## is enabled
#The website you want to visit must be added to the business domain name whitelist, the api interface called by the website must be added to the server domain name whitelist, and the
apiinterface must also be usedhttpsProtocol

The above conditions must be met at the same time, each one is indispensable WeChat

JSSDKIntroduction

WeChat JSSDK introduction

External introduction

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
//进一步提升服务稳定性，当上述资源不可访问时，可改访问
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

Use AMD/CMD standard module loading method to load

Installation

npm i weixin-js-sdk

Use

import wx from &#39;weixin-js-sdk&#39;

in main.js to determine whether it is a WeChat applet environment

through

userAgent to micromessenger, Or window.__wxjs_environment to determine

Starting from WeChat 7.0.0, you can determine the mini program web-view environment by determining that the userAgent contains the word miniProgram.

import wx from "weixin-js-sdk";

let OS = "PC"; //假设有多种环境

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";
    }
  });
}

Introduced

sdk, and knowing the environment variables, let’s get started.

Interactive example applet

Use the components of the applet, create a new /page/webview/index.wxml

web-view will automatically fill the entire mini program page. Personal and overseas mini programs are not supported for the time being. Starting from client version 6.7.2, navigationStyle: custom is invalid for components

<web-view src="{{url}}" bindmessage="getMessage" />

New/page/webview/index.js

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

    let url = options.url;
    if (url) {
      //请注意传递url 请务必使用 decodeURIComponent 和 encodeURIComponent , 不然会白屏
      url = decodeURIComponent(url);
    }
    //因为小程序 貌似还不能主动和H5 交互,所以拿到的登录信息,我们通过url 来传递.
    let localUrl = "";
    if (token) {
      localUrl = url + "?token=" + userToken + "&nickName=" + nickName;
    }
    //犹豫地址存了token 和其他信息,分享会暴露,所以要手动重置分享地址 数据为 shareData
    this.setData({
      url: localUrl,
      shareData: {
        titil: "测试小程序",
        desc: "测试小程序藐视描述",
        path: url,
      },
    });
  },
  getMessage(e) {
    //此处接收html传递过来的参数
    this.postData = e.detail.data;
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    //重置分享链接和路径
    return {
      title: this.shareData.title,
      desc: this.shareData.desc,
      path: this.shareData.path,
    };
  },
});

Interaction example web side

On the web side, we know how to determine whether the web is in a mini program. We can directly send interactive information through WeChat

jsskd, and in the native WeChat mini program Same

Make routing jump

// 前面我们已经定义了window.wx = wx ,这里可以直接调用
// 还可以通过url 来获取token 等相关信息

if (OS == "RN") {
  //这里假设我们有多重环境..
}
if (OS == "wxminiprogram") {
  wx.miniProgram.navigateTo({
    url:
      "/pages/webview/index?url=" +
      decodeURIComponent("https://www.chuchur.com?id=100"),
  });
}

Send data to the mini program

wx.miniProgram.postMessage({
  data: {
    hello: "wrold",
  },
});
//web-view 则通过 bindmessage 来监听 传过来的数据

More methods

wx.miniProgram.navigateBack(); //返回
wx.miniProgram.switchTab(); //切换底部的导航
wx.miniProgram.reLaunch(); //重新加载
wx.miniProgram.redirectTo(); //地址重定向
wx.miniProgram.getEnv(); //获取当前环境

A brief analysis of the interaction between WeChat applet and the web (code sharing)

Background

Access conditions

Related articles