Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to communicate between web web pages and Mini Program". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Our WeChat Mini Programs uses the web-view approach to embed H5 projects, thus reducing the amount of development. In practice, we will encounter functional requirements for web pages to communicate with Mini Program. Below, I briefly summarize the problems I have encountered and the solutions.

Features provided by Mini Program

Wechat provides a way for web pages to send messages to Mini Program: wx.miniProgram.postMessage, which sends messages to Mini Program and triggers the component's message event at a specific time (Mini Program retreat, component destruction, sharing).

A brief introduction to how to use it, take sharing as an example, if page A needs to set up special sharing content, such as forwarding title, thumbnail, etc. You can set the value of the variable in the web page and send it to Mini Program

Web page

Let shareData = {path: 'forwarding path', title: 'custom forwarding title', imageUrl: 'thumbnail url',}; wx.miniProgram.postMessage ({data: JSON.stringify (shareData)})

Mini Program

Index.wxml

Receive events through bindmessage binding

Index.js

/ / get the message getMessage (e) {const getMessage (e) {/ / data is an array of parameters of multiple postMessage, const {data} = e.detail. / / the last piece of data let shareMessage = data [data.length-1]; this.shareMessage = JSON.parse (shareMessage);} / / set sharing onShareAppMessage (options) {return {title: this.shareMessage.title, path: this.shareMessage.path, imageUrl: this.shareMessage.imageUrl,};}

Such a customized sharing function is complete, but the postMessage method can only get messages in a specific scenario, so how do you get communication if it is not a specific scenario?

A simple method of obtaining communication

The solution I provide may not be the best or the most general-purpose, but it can be used as an alternative if you encounter problems.

1. Scene restoration

We have a city positioning in Mini Program. You need to select a city when you enter Mini Program for the first time. After selecting a city, it will be cached locally, and then you do not need to re-select a city when you enter Mini Program again. The functions are as follows

After selecting the city, it will be displayed in the upper right corner of the home page.

As both the city selection page and the home page are embedded with Mini Program in web-view, it is obvious that caching information cannot be obtained in Mini Program if you enter the cache in the H5 page.

2. Solution

The solution is very simple. After I communicate with my partner at the back end, I ask him to provide me with an interface to associate the city id with the user information, so that I can get the city id selected by the user last time when performing Mini Program, and then cache the processing in Mini Program, so that the user does not have to select a city again when they enter Mini Program again.

Web page

/ / Save city information const saveCityHandle = () = > {saveCity ({cityId: cityId, userId: userId,}). Then (() = > {});}

Mini Program

After getting the city id, it is cached through wx.setStorageSync for later use.

Wx.login ({success (res) {if (res.code) {wx.request ({url: `${that.domain ()} / getUserInfo`, data: {body: {jsCode: res.code},}, success (res) {wx.setStorageSync ('cityId', res.data.cityId);},},}) } else {console.log ('login failed!' + res.errMsg);},}); Summary

"if you review the past and learn the new, you can be a teacher."

Sometimes if you look back at some knowledge points, you may have new ideas to share with you. (◍ °∇ °◍)

A little poem

After looking at the date, I found that in December, the last month of 2021, I had written a small poem, which was somewhat in line with my current state of mind, and some blessings were given to myself and to everyone.

In front of me is a window, outside the window is a changing scenery, at night, dark green trees, scattered lights of high-rise buildings, speeding cars, or hurried or leisurely pedestrians. I seem to remember every building, but I don't remember every face, the same building, the changing passers-by. This year, there are some changes, every heart in the pursuit of life, are worth looking forward to, every reluctant look, smile can not be hidden. To all the development partners, please do not cherish your heart and wish you happiness and happiness. This is the end of the content of "how to communicate between web and Mini Program". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.