Отправить сообщение из мини-программы WeChat на веб-просмотр - PullRequest
Новая
       17

Отправить сообщение из мини-программы WeChat на веб-просмотр

0 голосов
/ 16 июня 2019

Я создаю WeChat Mini-Program, которая на одной из своих страниц имеет web-view контроль.Например:

page.wxml 

<web-view src="https://..." bindmessage="onWebViewMessage"></web-view>

page.js 

const app = getApp();
Page({
    onWebViewMessage:function(e) {
         console.log(e);
    },
    onLoad:function() {
    }
});

In web-view anЗагружается HTML-страница (index.html), которая включает jweixin-1.3.2.js lib из WeChat, для подключения к WeChat API, а также для подключения к родительской мини-программе.Страница пуста, элементов DOM нет, просто javascript, который будет выполняться при загрузке документа.

У него есть такой javascript:

index.js 

document.addEventListener('DOMContentLoaded',function(){
    wx.miniProgram.postMessage({data:'test'});
});

Я могу отправлять сообщения из этого документа в мини-программу без проблем.Также можно отправлять некоторые команды навигации мини-программы, такие как wx.miniProgram.navigateTo({url:'path/to/page'});, поэтому все выглядит хорошо.Я также могу получить обратный вызов в мини-программе, когда web-view завершил загрузку.

Вопрос:

Как мне отправить сообщение из Mini-программа для веб-просмотра?Например, чтобы передать строку или объект в веб-представление.

Я часами гуглю и не могу найти никого, кто это делает, но я не могу поверить, что это только в одну сторонуобщение возможно.

Любая помощь или идея приветствуется!

1 Ответ

0 голосов
/ 23 июня 2019

Я нашел эффективный способ передачи данных из мини-программы в контент для веб-просмотра, и в данный момент кажется, что это единственный возможный способ сделать это.

Мини-программа

1.Модуль Base64

Вам необходимо будет преобразовать обычную строку в строку Base64.В API мини-программы есть метод для преобразования байтового массива в строку base64, но он не будет использоваться для этой цели.Итак, создайте свой собственный модуль, который делает это:

Файл: lib/b64.js

var string2base64 = function(str) {
    .... here put your js code for making b64 string ....
    return result;
};

module.exports = {
    string2base64
};

2.Страница с веб-представлением

На странице, которая имеет элемент управления web-view, подготовьте элемент DOM в файле wxml, например:

Файл: pages/xxx/index.wxml

<web-view src="{{webURL}}" bindload="onWebLoad" binderror="onWebError"></web-view>

Обратите внимание, что параметр src теперь привязан к свойству webURL страницы.Всякий раз, когда страница устанавливает значение этого свойства, оно автоматически применяется к элементу DOM.

В файле pages/xxx/index.js вам необходимо добавить модуль base64: 

const b64 = require('../../lib/b64.js')

обратите внимание, чтотребуемый путь может варьироваться в зависимости от того, как вы настроили свой проект

и в объекте data страницы добавьте свойства webURL и webBaseURL, например: 

Page({
    data: {
        webURL:'',
        webBaseURL:'https://your/web/app/url',
        messageQueue:[],
        messageQueueSize:0,
        .... other page properties go here ....
    },
    ..... rest of your page code goes here .....
})

Обратите внимание, что webURL установлено пустым.Это означает, что при загрузке страницы пустая строка будет установлена ​​в объект DOM по умолчанию.

webBaseURL объяснит чуть позже.

messageQueue - это массив, в котором будут хранитьсяожидающие сообщения для отправки на веб-просмотр.messageQueueSize это просто длина массива.Используется для повышения производительности, чтобы избежать чтения Array.length.

3.Start Message Queue

В onShow обратном вызове страницы установите webURL и начальный интервал, который будет читать messageQueue Array каждые 250 мс.Вы можете изменить способ сделать это, если вам не нравится использовать интервалы, это был просто самый простой способ сделать теоретический тест. 

onShow: function(){
    // This will start loading of the content in web-view
    this.setData({webURL: this.data.webBaseURL } );

    // Sends message from message queue to web-view
    let _this = this;
    setInterval(function(e) {
        if( _this.data.messageQueueSize < 1 ) return;
        _this.data.messageQueueSize --;
        let msg = _this.data.messageQueue.splice(0,1);
        _this.setData({webURL: _this.data.webBaseURL+"#"+msg});
    },250);
}

Вы можете видеть, что сообщение добавляется к источнику веб-просмотра (url) какхеш.

webBaseURL используется для генерации окончательного URL с хешем, который затем отправляется в веб-просмотр.

4.Добавление сообщения в очередь

Чтобы создать сообщение в очереди сообщений, просто определите следующий метод на своей странице: 

addMessageToQueue: function(obj) {
    obj.unique = Math.round(Math.random()*100000);
    let msg = b64.string2base64(JSON.stringify(obj));
    this.data.messageQueue.push(msg);
    this.data.messageQueueSize++;
}

Каждый раз, когда вы вызываете этот метод, просто передайте объект с любыми свойствами.он вам нужен, и он будет преобразован в строку JSON, затем в строку base64 и, наконец, добавлен в очередь сообщений.

unique свойство добавлено, чтобы сгенерированный результат base64 всегда отличался, даже еслиостальные свойства объекта одинаковы - мне просто нужно это для целей моего проекта.Вы можете проигнорировать / удалить его, если он вам не нужен.

Поскольку выполняется интервал и выполняется проверка очереди сообщений, все добавленные сообщения будут отправляться на веб-просмотр в том же порядке, в котором они были добавлены.в очередь.

Теперь осталось только одно - добавить прослушивание изменения хеша на HTML-странице, которую мы загрузили в веб-представление:

HTML Web-приложение

1.Послушайте изменение хеша 

window.addEventListener("hashchange",function(e){
    let messageBase64 = window.location.hash.substr(1);
    let json = window.atob( messageBase64 );
    let data = JSON.parse(json);
    console.log("Received data from mini-program:",data);
});

Протестировано на Xiaomi Mi8 Pro.Я еще не тестировал другие устройства, продаваемые в Китае.

Ура!

...