Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how WeChat Mini Programs realizes the function of commodity list jump commodity detail page". In daily operation, it is believed that many people have doubts about how WeChat Mini Programs realizes the function of commodity list jump commodity detail page. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the question of "how to realize the function of WeChat Mini Programs's product list jump commodity details page"! Next, please follow the editor to study!

1.1 implement the home page

The effect is as follows

The code is as follows: where the js page code contains the jump

{{msg1}} ¥1799 {{msg2}} ¥2199 {{msg3}} ¥2499 {{msg4}} ¥3199 / / index.js// const app = getApp () Page ({data: {msg1:'Redmi Note 115G Tianji 810 33W Pro Fast charge 5000mAh large battery 6GB + 128GB shallow Dream Xinghe smartphone' Msg2:'Redmi K40 Snapdragon 870 Samsung AMOLED 120Hz high-brush straight screen 48 million high-definition three-shot 12GB+256GB clear snow game e-sports 5G mobile phone', msg3:' [24 interest-free] Xiaomi 10s new 5G flagship millet mobile phone 12 heavy white 8256GB white, msg4:' MI 11ultra 5G (optional down payment of 0) all Netcom mobile ceramic white white by stages 12+256GB', value:0} Jump1:function (event) {this.setData ({value:1}), wx.navigateTo ({url:'/ pages/page1/page1?value='+this.data.value, success () {console.log ('page one jumps successfully')}), jump2:function (event) {this.setData ({value:2}) Wx.navigateTo ({url:'/ pages/page1/page1?value='+this.data.value, success () {console.log ('page two jumps successfully')})}, jump3:function (event) {this.setData ({value:3}), wx.navigateTo ({url:'/ pages/page1/page1?value='+this.data.value) Success () {console.log ('page three jumps successfully')})}, jump4:function (event) {this.setData ({value:4}), wx.navigateTo ({url:'/ pages/page1/page1?value='+this.data.value, success () {console.log ('page four jumps successfully')})}) / * * index.wxss**/.container {margin-left: 10px; margin-right: 10px; margin-top: 10px; display: flex; flex-direction: row;} # wz {display:-webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal! important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .left {width: 50%;} .right {width: 50% } .tp {width: 190px; height: 200px;} .jg-l {width: 75%; color: blue;}. Jg-r {width: 25%;} .jg-r image {width: 20px; height: 20px;} 2.1.Redirect to the mobile phone details page

The tips for the success of the jump are as follows:

The details page is as follows:

The code is as follows:

Product No.: 6007 launch date: September 2021 Product Price: ¥1799 Product description: {{msg1}} Product number: 6008 launch date: January 2022 Product Price: ¥2199 Product description: {{msg2}} Product No.: 6009 launch date: November 2021 Product Price: ¥2499 Product description: {{msg3}} Product number: 6007 launch date: January 2022 Product Price: ¥3199 Product description: {{msg4}} / / pages/page1/page1.jsPage ({data: { Msg1:'Redmi Note 11 5G Tianji 810 33W Pro Fast charge 5000mAh large battery 6GB + 128GB shallow Dream Xinghe smartphone' Msg2:'Redmi K40 Snapdragon 870 Samsung AMOLED 120Hz high-brush straight screen 48 million high-definition three-shot 12GB+256GB clear snow game e-sports 5G mobile phone', msg3:' [24 interest-free] Xiaomi 10s new 5G flagship millet mobile phone 12 heavy white 8256GB white, msg4:' MI 11ultra 5G (optional down payment of white 0) all Netcom mobile ceramic white white by stages 12+256GB',} OnLoad: function (options) {this.setData ({value:options.value}),}) / * pages/page1/page1.wxss * / .container {margin-left: 10px; margin-right: 10px; margin-top: 10px; display: flex; flex-direction: row;}

Finally, I would like to explain that when you create a new page in the page directory in WeChat Mini Programs's development tool, you need to define the path of the page in app.json.

Here, take this small project as an example, the following character app.json code

{"pages": ["pages/index/index", "pages/page1/page1"], "window": {"backgroundColor": "# F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "# F6F6F6", "navigationBarTitleText": "JD.com Mobile", "navigationBarTextStyle": "black"}, "sitemapLocation": "sitemap.json", "style": "v2"} On "WeChat Mini Programs how to achieve the commodity list jump commodity details page function," the study is over, I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.