A brief analysis of the interaction between WeChat applet and the web (code sharing)-H5 Tutorial-php.cn

Table of Contents

Background

Access conditions

Home

Web Front-end

H5 Tutorial

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

奋力向前

Aug 17, 2021 am 11:49 AM

h5 js web

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.

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

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>

Copy after login

Use AMD/CMD standard module loading method to load

Installation

npm i weixin-js-sdk

Copy after login

Use

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

Copy after login

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

Copy after login

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" />
Copy after login

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

Copy after login

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

Copy after login

Send data to the mini program

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

Copy after login

More methods

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

Copy after login

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7733

Java Tutorial

1643

CakePHP Tutorial

1397

Laravel Tutorial

1290

PHP Tutorial

1233

Related knowledge

Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

How to enable administrative access from the cockpit web UI Mar 20, 2024 pm 06:56 PM

Cockpit is a web-based graphical interface for Linux servers. It is mainly intended to make managing Linux servers easier for new/expert users. In this article, we will discuss Cockpit access modes and how to switch administrative access to Cockpit from CockpitWebUI. Content Topics: Cockpit Entry Modes Finding the Current Cockpit Access Mode Enable Administrative Access for Cockpit from CockpitWebUI Disabling Administrative Access for Cockpit from CockpitWebUI Conclusion Cockpit Entry Modes The cockpit has two access modes: Restricted Access: This is the default for the cockpit access mode. In this access mode you cannot access the web user from the cockpit

The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

what does web mean Jan 09, 2024 pm 04:50 PM

The web is a global wide area network, also known as the World Wide Web, which is an application form of the Internet. The Web is an information system based on hypertext and hypermedia, which allows users to browse and obtain information by jumping between different web pages through hyperlinks. The basis of the Web is the Internet, which uses unified and standardized protocols and languages to enable data exchange and information sharing between different computers.

Is PHP front-end or back-end in web development? Mar 24, 2024 pm 02:18 PM

PHP belongs to the backend in web development. PHP is a server-side scripting language, mainly used to process server-side logic and generate dynamic web content. Compared with front-end technology, PHP is more used for back-end operations such as interacting with databases, processing user requests, and generating page content. Next, specific code examples will be used to illustrate the application of PHP in back-end development. First, let's look at a simple PHP code example for connecting to a database and querying data:

See all articles