Recently have a certain knowledge of small programs, but also to small programs, experience is very good, but share a single page of small programs easy to have a problem, back to the home page of interaction is complex, there is no back button, let’s look at a small program with realize the process how to do this to live — – guangzhou’s go heart all free help looking for renting a small team (thank you help me to find the right Residence)

Look at the effect

Look carefully will find that in general, a small program to share page didn’t jump process, and live here, have a process, first entered the page and then jump into the corresponding share page, this sharing into the left upper corner of the page after the back button will be back to the home page, compared to let users familiar with small program back to the home page of the interaction, it is more reasonable.

At present, I found that many small programs on the market did not use such a way to share the page, fast living or more ideas, post a two-dimensional code, the officer can go to experience.

How to implement

Referring to online materials and official documents, I have studied for a long time, which is also caused by incomplete official documents of wechat mini programs (or I am not careful enough).

Let’s take a look at the API about sharing in wechat mini program

Wechat official API document forwarding

We can override the onShareAppMessage function to implement some customizations, such as the title of the shared card and so on. Most importantly, we can define the path to the page where the user clicks on the card. Post code:

onShareAppMessage: function (res) {
    if (res.from === 'button') {// From the page forward button console.log(res.target)}return {
      title: 'Custom Forwarding title',   
      path: '/pages/xxxx/xxx'/pages/ XXXX/XXX success:function(res) {// Forwarding succeeded}, fail:function(res) {// Forwarding failed}}}Copy the code

Path is any page we can set, where we need to fill in the address of the home page, so that the user clicks on the shared card to go to the home page.

Realize the home page to jump to the specific details page

There are two problems involved here, the first one is how to judge when to jump, and the second one is how to know which detail page to jump to.

This is something that wechat official documents do not tell us, namely page pass value.

Page by value

Post code:

onShareAppMessage: function (res) {
    if (res.from === 'button') {// From the page forward button console.log(res.target)}return {
      title: 'Custom Forwarding title',   
      path: '/pages/xxxx/xxx? pageId=123'PageId = 123, pageId = 123, pageId = 123, pageId = 123, pageId = 123function(res) {// Forwarding succeeded}, fail:function(res) {// Forwarding failed}}}Copy the code

A piece of code realizes that the value 123 is brought to the home page, and the home page needs to judge whether the source of entering the home page is the user clicking on the shared card by this value.

Home page gets the value of pageId

In the js file on the home page, find the onLoad function post code:

onLoad: function (options) {
    ifNavigateTo ({options. PageId) {wx. NavigateTo ({url: navigateTo({options. PageId) {wx.'.. /pageDetail/pageDetail? pageId=' + options.pageId,
      })
    }
  }
Copy the code

Online and other practices, such as in the details page to add a button back to the home page, personally think that this way of jump, back into the front page of interaction is natural, however, the disadvantages of the only, there will be a jump from its front page to page for details of small moments, but the popular many are dependent on the small program to share card, users click on share card at a glance might be a home page A bad thing.

end