1.Interface Mock The server is turned on, as long as all static resource files such as pictures are placed in thepublicUnder the folder, you can directly access the Mock The server localhost:3000Find the corresponding path http://localhost:3000/images/0/a.jpg(api/public/images/0/a.jpg) http://localhost:3000/recommends(db.json --> recommends:[{},{}....])
2. Applet's own request scheme After the first rendering of the page, onload() {} is completed to request data (which can also be done in onReady), and onReady will execute automatically. //When the interface has been written onLoad: function () { //Ajax requests (much like jQuery) wx.request({ url: 'https://m.maoyan.com/ajax/mostExpected?ci=10&limit=10&offset=0&token=&optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&optimus_risk_level=71&optimus_code=10', data:{ }, success:(res)=>{ console.log(res.data) // res.data The real data returned by the back end } }) } //Error will be reported. You need to add the interface to the white list 3. Note: (1) If the back-end interface is online: <1> Applets have no cross domain restrictions <2> In order to cover security, you need to add your own background interface to the white list <3> This interface must be the interface of https security protocol (such as cat's eye, no cross domain restriction) (2) If using a Mock server (emulation): In the development stage, if the back-end interface is not developed, we can enable the function that the applet does not verify the domain name 3. Add domain name to the white list (https interface of cat's eye) Wechat applet platform > Development > development Settings > server domain name > request legal domain name -->Modify: copy and paste the HTTPS + domain name of cat's eye( https://m.maoyan.com )Save and submit 4. The back-end interface hasn't been written yet. Use Mock server to simulate onLoad: function (options) { //Ajax requests (much like jQuery) wx.request({ url: 'http://localhost:3000/recommends', data:{ }, success:(res)=>{ console.log(res.data) //res.data The real data returned by the back end } }) } Note that it is not possible to configure the white list in the applet platform at this time. To configure it in details: Wechat Developer Tools > details > local configuration (you can see the legal domain names in the project configuration) - > do not verify the legal domain names, web view (business domain name), TLS version and HTTPS Certificate (only applicable to the development stage) Check during development (do not want to verify) Uncheck in production stage (need to be verified) So we can get the data!
db.json
{ "recommends": [ { "id": 1, "name": "Thinkpad", "url": "/images/0/a.jpg" }, { "id": 2, "name": "Kitchen and bathroom category day", "url": "/images/0/b.jpg" }, { "id": 3, "name": "Super brand day", "url": "/images/0/c.jpg" }, { "id": 4, "name": "Disposable Face Mask ", "url": "/images/0/d.jpg" } ], "goods": [ { "id": 1, "name": "Glory 9 X", "feature": "Kirin 8104000 mAh Last 48 million super clear night shooting 6.59 Inch lifting full screen full Netcom 6 GB+64GB Succulent sea blue", "price": 1299, "goodcomment": "97%", "poster": "/images/1/poster.jpg", "slides": [ "/images/1/detail_1.jpg", "/images/1/detail_2.jpg", "/images/1/detail_3.jpg" ] }, { "id": 2, "name": "Millet( MI) Redmi 8A", "feature": "Super long endurance, shocking and loud volume AI Face unlocking", "price": 749, "goodcomment": "98%", "poster": "/images/2/poster.jpg", "slides": [ "/images/2/detail_1.jpg", "/images/2/detail_2.jpg", "/images/2/detail_3.jpg" ] }, { "id": 3, "name": "Samsung Galaxy S20+", "feature": "5G(SM-G9860)Bimodal 5 G Xiaolong 865 120 Hz Super sensitive screen 8 K Video game mobile 12 GB+128GB Fantasy tour black", "price": 7999, "goodcomment": "98%", "poster": "/images/3/poster.jpg", "slides": [ "/images/3/detail_1.jpg", "/images/3/detail_2.jpg", "/images/3/detail_3.jpg" ] }, { "id": 4, "name": "Glory 20 S", "feature": "3200 10000 portraits super night view 48 million super wide angle AI Three camera Kirin 810 all net version 8 GB+128GB Butterfly feather white", "price": 1999, "goodcomment": "97%", "poster": "/images/4/poster.jpg", "slides": [ "/images/4/detail_1.jpg", "/images/4/detail_2.jpg", "/images/4/detail_3.jpg" ] }, { "id": 5, "name": "Glory 20 Youth Edition", "feature": "AMOLED Screen fingerprint 4000 mAh Large battery 20 W Fast charging 48 million mobile phones 6 GB+64GB Icelandic mirage", "price": 1199, "goodcomment": "97%", "poster": "/images/5/poster.jpg", "slides": [ "/images/5/detail_1.jpg", "/images/5/detail_2.jpg", "/images/5/detail_3.jpg" ] }, { "id": 6, "name": "Apple iPhone 11", "feature": "Whether you like to buy or not", "price": 5999, "goodcomment": "95%", "poster": "/images/6/poster.jpg", "slides": [ "/images/6/detail_1.jpg", "/images/6/detail_2.jpg", "/images/6/detail_3.jpg" ] }, { "id": 7, "name": "vivo U3x", "feature": "6GB+64GB Black tea 5000 mAh Large battery 18 W Dual engine flash charging super wide angle AI Three cameras Xiaolong 665 processor all Netcom 4 G mobile phone", "price": 999, "goodcomment": "97%", "poster": "/images/7/poster.jpg", "slides": [ "/images/7/detail_1.jpg", "/images/7/detail_2.jpg", "/images/7/detail_3.jpg" ] }, { "id": 8, "name": "glory Play3", "feature": "6.39 Inch eye full screen 4000 mAh 48 million large batteries AI Three photos of Unicorn 710 F Self developed chip play all Netcom 6 GB+64GB Dark night", "price": 999, "goodcomment": "98%", "poster": "/images/8/poster.jpg", "slides": [ "/images/8/detail_1.jpg", "/images/8/detail_2.jpg", "/images/8/detail_3.jpg" ] }, { "id": 9, "name": "Millet( MI) Redmi Note8", "feature": "Quality small King Kong 48 million four pictures of Xiaolong 665", "price": 899, "goodcomment": "97%", "poster": "/images/9/poster.jpg", "slides": [ "/images/9/detail_1.jpg", "/images/9/detail_2.jpg", "/images/9/detail_3.jpg" ] }, { "id": 10, "name": "Huawei HUAWEI Mate 30", "feature": "5G Kirin 9.94 million super sensitive Leica image dual super fast charging 8 GB+128GB Bright black 5 G All Netcom game mobile", "price": 4499, "goodcomment": "97%", "poster": "/images/10/poster.jpg", "slides": [ "/images/10/detail_1.jpg", "/images/10/detail_2.jpg", "/images/10/detail_3.jpg" ] }, { "id": 11, "name": "Glory 20 PRO", "feature": "4800 Wanquanjiao section AI Four camera, two optical anti shake Unicorn 980 all Netcom 4 G 8GB+128GB Magic night Galaxy camera phone", "price": 2499, "goodcomment": "95%", "poster": "/images/11/poster.jpg", "slides": [ "/images/11/detail_1.jpg", "/images/11/detail_2.jpg", "/images/11/detail_3.jpg" ] }, { "id": 12, "name": "Huawei( HUAWEI) nova 5 Pro", "feature": "Super night view/AI Four pictures/Kirin 980", "price": 2499, "goodcomment": "96%", "poster": "/images/12/poster.jpg", "slides": [ "/images/12/detail_1.jpg", "/images/12/detail_2.jpg", "/images/12/detail_3.jpg" ] }, { "id": 13, "name": "Apple iPhone Xs Max", "feature": "person 's face ID Double card double waiting", "price": 7299, "goodcomment": "97%", "poster": "/images/13/poster.jpg", "slides": [ "/images/13/detail_1.jpg", "/images/13/detail_2.jpg", "/images/13/detail_3.jpg" ] }, { "id": 14, "name": "vivo iQOO Neo 855 edition", "feature": "HDR10 Display snapdragon 855 big storage", "price": 2198, "goodcomment": "96%", "poster": "/images/14/poster.jpg", "slides": [ "/images/14/detail_1.jpg", "/images/14/detail_2.jpg", "/images/14/detail_3.jpg" ] }, { "id": 15, "name": "Huawei HUAWEI Enjoy 8 e youth", "feature": "2GB+32GB Full screen black full network version of China Unicom Telecom 4 G Mobile dual card dual standby", "price": 499, "goodcomment": "98%", "poster": "/images/15/poster.jpg", "slides": [ "/images/15/detail_1.jpg", "/images/15/detail_2.jpg", "/images/15/detail_3.jpg" ] }, { "id": 16, "name": "Hisense(Hisense) Reading cell phones A5", "feature": "5.84 Inch eye protection ink screen ink screen e-book reader exclusive edition 4 GB+64GB(Black jade) All Netcom 4 G mobile phone", "price": 1499, "goodcomment": "95%", "poster": "/images/16/poster.jpg", "slides": [ "/images/16/detail_1.jpg", "/images/16/detail_2.jpg", "/images/16/detail_3.jpg" ] } ], "carts": [ { "goodId": 1, "number": 2, "checked": false, "username": "cool oneself by drinking ice water", "id": 1 } ], "users": [] }