WeChat mini program page jump function-Mini Program Development-php.cn

WeChat mini program page jump function

小云云

Release： 2017-12-07 15:59:40

Original

4421 people have browsed it

This article mainly introduces the WeChat mini program page jump function and the method of jumping from the item item in the list to the next page. It summarizes and analyzes the relationship between the WeChat mini program page jump and the list item jump page based on specific examples. Friends who need it can refer to the operation skills.

1. Rendering

Move from the list page on the left to the details page on the right

2. Jumping between pages

The first thing to look at is the page jumping. WeChat mini program has three jumping methods. Choice:

1. Keep the current page and jump to a page in the application. Use wx.navigateBack to return to the original page.

wx.navigateTo({
 url: &#39;test?id=1&#39;
})

Copy after login

2. Close the current page and jump to a page within the application.

wx.redirectTo({
 url: &#39;test?id=1&#39;
})

Copy after login

3. Jump to the tabBar page and close all other non-tabBar pages

wx.switchTab({
 url: &#39;/index&#39;
})

Copy after login

Note: wx.navigateBack(OBJECT)Close the current page and return to the previous page or multi-level page. You can get the current page stack through getCurrentPages()) and decide how many layers need to be returned.

3. Jump from the list item to the next page

The first step is to render the list and use wx:for on the component. By binding the control property to an array, the component can be repeatedly rendered using the data of each item in the array. By default, the subscript variable name of the current item in the array defaults to index, and the variable name of the current item in the array defaults to item

<view wx:for="{{array}}">
 {{index}}: {{item.message}}
</view>

Copy after login

Second Step 1, use wx:key to bind the identifier

<view wx:for="{{array}}" wx:key="{{item.viewid}}">
 {{index}}: {{item.message}}
</view>

Copy after login

to the items in the list. Step 3: For each item, The link passes the corresponding parameters. Use the navigator navigation component on the layout page. Specify the URL and pass the corresponding parameters for the link corresponding to each item. Just follow the URL with ? and the key value. Multiple parameters are connected with &, for example:

url="../detail/detail?index={{item.viewid}}"

Copy after login

4. Demo source code


  
    {{item.name}}

Copy after login

Page({
 data: {
   words: [{message: &#39;微信小程序&#39;,viewid:&#39;1&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;2&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;3&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;4&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;5&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;6&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;7&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;8&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;},
  {message: &#39;微信小程序&#39;,viewid:&#39;9&#39;,time:&#39;2017-01-09 8:00:00&#39;,money:&#39;hello&#39;}]
 }
 ...
})

Copy after login

Related recommendations:

How to implement the image enlargement preview function in the WeChat applet

How Develop a date picker for WeChat mini program

Summary of experience in mini program development

The above is the detailed content of WeChat mini program page jump function. For more information, please follow other related articles on the PHP Chinese website!