Home  >  Article  >  WeChat Applet  >  How to open a new page link in mini program development (code example)

How to open a new page link in mini program development (code example)

不言
不言forward
2019-01-23 11:04:555451browse

The content of this article is about the method (code example) of opening a new page link in the development of a small program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There is a user center in the small program developed. The requirement is that users can click the button to jump to a new link. In fact, there is no good method when meeting this requirement, and some past experiences are not applicable to small programs. After checking some information, I have no clue. The final implementation method is to use the navigator component. If anyone has a better method, or if my implementation method is defective, please point it out below.

External link display page

First create a directory, which is used to display the content in external links. Because it is an external link, web-view is used (note that this component has some features, check it out from the link below).

Look at the directory structure, where navigator is the page that displays external links

How to open a new page link in mini program development (code example)
In navigator.wxml, only one line of code is needed

<web-view></web-view>

In navigator.js, modify the value in url

onLoad: function (options) {
    if (options.url) {
      this.setData({
        // 设置当前链接
        url: options.url
      })
    } 
  },

User Center

In the User Center, just Jump the link to /navigator/navigator and bring the parameters. Take a look at the example

<!-- {{url}}中是外链地址 -->
<navigator></navigator>

The above method can be implemented. Of course, the actual project is more complicated and needs to be modified according to actual needs.

The above is the detailed content of How to open a new page link in mini program development (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete