Home > WeChat Applet > Mini Program Development > 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)

不言
Release: 2019-01-23 11:04:55
forward
5632 people have browsed it

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>
Copy after login

In navigator.js, modify the value in url

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

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>
Copy after login

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!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template