How web pages interact with applets

summary

The interaction and communication between web pages and applets need to be used in applets web-view Component open web page , And the visited web pages need to introduce wechat js-sdk, adopt js-sdk Provide an interface to send information to the applet .

For details, please refer to the official documentation of the applet ：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

Applet background configuration business domain name

This is the limitation of applet development , stay web-view The domain name of the web page to be opened in the wechat public platform applet background Development --> Development and setup --> Business domain name Add an item to , otherwise web-view Unable to open this page .

PS： If you don't want to configure this, you can also do it in WeChat developer tools Open inside Do not verify legal domain name .

Web page introduction WeChat js-sdk

WeChat JS-SDK It is a web page development kit based on wechat provided by wechat . Students who have done wechat official account web page development should know ~~（ That's notoriously hard to use ……）~~.

Official document link ：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

I won't write about how to introduce , Just follow the instructions in the above document .

Want to use npm You can also find a third party if you quote in this way , I use this weixin-js-sdk.

Web pages send messages to applets

I made a very simple demo page , Demonstrates the function of navigating to the applet page and sending messages to the applet .

The page is as follows ：

Page is vue Written , It's simple , Go straight to the code ：

<template>
    <section>
        <section>
            <h2> Click picture event </h2>
            <div @click="onClick">
                <img src="https://via.placeholder.com/300x150" alt="">
            </div>
        </section>

        <section>
            <h2> Interact with applets </h2>
            <button @click="switchTab"> Go back to the homepage of the applet </button>
            <button @click="postMessage"> Send messages to applets </button>
        </section>

    </section>
</template>

<script> const wx = require('weixin-js-sdk'); export default {
      data () {
      return {
      isMiniprogram: false, //  Is it an applet environment  }; }, mounted () {
      this.wx = wx; this.wx.miniProgram.getEnv((res) => {
      console.log('getEnv', res, res.miniprogram); this.isMiniprogram = true; }); }, methods: {
      onClick () {
      console.log(' Click on the image ', this.wx); }, switchTab () {
      if (this.isMiniprogram) {
      this.wx.miniProgram.switchTab({
      url: '/pages/index/index', success: function (res) {
      console.log('success', res); }, fail: function (err) {
      console.log('fail', err); }, complete: function (res) {
      console.log('complete', res); }, }); } }, postMessage () {
      if (this.isMiniprogram) {
      this.wx.miniProgram.postMessage({
      data: {
      foo: 'bar' }, }); } }, }, }; </script>

<style lang="scss" scoped> button {
      padding: 10px; background: #333; color: #fff; border: none; margin-right: 10px; border-radius: 5px; } h2 {
      padding: 30px 0 20px 0; } section {
      text-align: center; } </style>

Here are a few points to pay attention to ：

• When navigating to the applet page, the routing method is the same as that of applet development , That is, if you want to navigate to tabbar page , Out-of-service navigateTo Method , Use switchTab, Otherwise, no jump will occur during applet debugging , And there was no error message .（ This is where I got stuck ……）

• wx.miniProgram.postMessage The parameter format of method is object , And there must be data attribute , namely {data:...} such , Otherwise, you won't receive it in the applet .

• WeChat js-sdk Official documents say that you need to configure permissions before using all interfaces , However ！！miniProgram This series of methods can be dispensed with config Of …… Someone asked about this community ： Applet jump page yes bug Do you . Because I don't want to get wechat user information on this page , So this is still more important for me .

The applet receives messages

Applet web-view Of bindmessage It will not be received immediately after the web page sends the message , Instead, it will retreat in the applet 、 Component destruction 、 Trigger and receive a message when sharing . And if the web page sends multiple messages , When the applet receives data Merge .

Page to applet postMessage when , At a certain time （ Applet back 、 Component destruction 、 Share ） Trigger and receive a message .e.detail = { data },data Many times postMessage An array of parameters of

Look directly at the code and output

Code ：

<!-- wxml -->

<view class='web-view'>
  <web-view src="{
     {url}}" bindmessage="getMsgFromWeb" bindload="onWebLoad" binderror="onWebError"></web-view>
</view>

// js

  getMsgFromWeb(e) {
    
    console.log('getMsgFromWeb', e.detail.data)
  },

  onWebLoad(e) {
    
    console.log('onWebLoad', e)
  },

  onWebError(e) {
    
    console.error('onWebError', e)
  }

Output ：

The screenshot above is that I clicked 10 Send Message button again , then getMsgFromWeb The output of is output after I click the button to return to the home page of the applet .

End

This is the basic way to realize the interactive communication between web pages and applets , Because I was cheated when I developed it , Make a record here , I hope it is useful for students who are still climbing the pit ~~