复盘一下学到的东西
实现基础的九宫格布局技术
1
学会配置tabBar 到app.json中配置。注意，用navigator跳转页面时不能够跳转到tabBar的页面
"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "picture/converted_R-C.png", "selectedIconPath": "picture/0d7267d692adf36d2a20a88ebd7696f1.jpg"},{ "pagePath": "pages/message/message", "text": "来消息了", "iconPath": "picture/7ee2069c_E367172_d6073336.png", "selectedIconPath": "picture/converted_3678.png_860.png" } , { "pagePath": "pages/contact/contact", "text": "来聊天", "iconPath": "picture/R-C (1).png", "selectedIconPath": "picture/5be015651dbd8_610.jpg" }]},
2改变首页上的文字。如本地生活和背景颜色，也需要
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#2b4b6b", "navigationBarTitleText": "本地生活", "navigationBarTextStyle": "black" },
3实现轮滑图的效果
利用swiper
4
this.setData({"grid_lis[0]":{src:"http://s1.aigei.com/src/img/png/67/67aa093308fa4f588e7773d7d5b4f3d2.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:9LKRsh2HX3z6BoRgMxdabs6YLCk=",name:"胡萝卜"},"grid_lis[1]": {src:"https://s1.aigei.com/src/img/png/08/0853f67911dd4223b1bcd48e75947cef.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:TrYqql756YOiCWDI7svIgjw6WLE=",name:"西瓜"},"grid_lis[2]":{src:"https://s1.4sai.com/src/img/png/38/382fb89572a74d638bc53f4fb06e9729.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:U0-joX1udLJf-R7C-UTtqKzhfSY=",name:"锅"},"grid_lis[3]":{src:"https://s1.4sai.com/src/img/png/26/26946528065946a2ac34e2c0980454c3.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:f1kQUSsTteh-eZdktEymJKmU5nI=",name:"皮卡丘"},"grid_lis[4]":{src:"https://s1.aigei.com/src/img/png/74/7482442e72b94a17b437cd095d153903.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:qdvhNK4OIfKdrnF8ck6Im4a0a0s=",name:"牛肉"},"grid_lis[5]":{src:"https://s1.aigei.com/src/img/png/5d/5d242a078efb453cacb60a73629c1f8a.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:rPoMSWaRC1-BT-kgabpn0DbAi-I=",name:"包子"},"grid_lis[6]":{src:"https://s1.4sai.com/src/img/png/46/46f545e3ae814376ac9678c659d4d555.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:tjCDjukwyH3DhpZw3nbdBUSeG0I=",name:"面条"},"grid_lis[7]":{src:"https://s1.aigei.com/src/img/png/a7/a7ffd4494d1840c1a3eaac5418caae24.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:3ZZMqCfX7liNxbj-IYMy_X021_Q=",name:"饼"},"grid_lis[8]":{src:"https://s1.4sai.com/src/img/png/c0/c07450b1580e490daaaa00d3cbeb0c17.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:rdW-ztxl_UI07S001lGL793dM6c=",name:"蛋糕"}}),this.setData({swiperlist:["https://pic.ecook.cn/web/259030835.jpg!wl280" ,"https://pic.ecook.cn/web/257460339.jpg!wl280", "https://pic.ecook.cn/web/2022072808594812258035034.jpg!wl280" ]}) console.log(this.data.grid_lis)}, getUserProfile() { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } })
在js中用this.data.setdata设置好相关链接，注意列表和setdata之间的用法。多多查阅资料再上手
5 学会navigator的用法。注意相对路径中是不包含miniprogram的
6
// pages/meisi/meisi.tsPage({ /** * 页面的初始数据 */ data: { query:{}, // shop_list:[] as any ,在这里用列表容易报错 shop_list:[], page:1, pageSize:10, total:5, isloading:false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({query:options}) console.log(this.data.query) this.Getshoplist() console.log(this.data.shop_list) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { wx.setNavigationBarTitle({ title: this.data.query.name }) }, Getshoplist(cb){ this.setData({isloading:true})wx.showLoading({ title:'正在加载中'})wx.request({ url:"https://applet-base-api-t.itheima.net/categories/"+this.data.page+"/shops", method:"GET", // header:{"User-Agent": // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.69"}, // console.log(...res.data) success:(res)=>{ this.setData({'shop_list':[...this.data.shop_list,...res.data]}) },complete:()=>{ wx.hideLoading() this.setData({isloading:false}) // wx.stopPullDownRefresh()把这个stop放在这里好像是行不通 cb&&cb() // c// 查看是否有回调进来 ，如果有就执行回调的方法，如果没有就不执行}} ) } /** * 生命周期函数--监听页面显示 */, onShow() { }, // 实现上拉刷新 /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { // 需要重置相关数据 this.setData({ page:1, shop_list:[], total:5 } ); // 重新发起 请求 this.Getshoplist(() =>{ wx.stopPullDownRefresh() }) }, /** * 页面上拉触底事件的处理函数 */ /** * 用户点击右上角分享 */ onShareAppMessage() { }, // 页面监听事件实现下拉刷新监听 // 实现触底事件的监听 onReachBottom() { if (this.data.page>=this.data.total) { return wx.showToast({ title:"数据加载完毕", icon:"none" }) } if (this.data.isloading) return console.log('不行'); console.log("Reached bottom of the page!"); this.setData({page:this.data.page+1}); this.Getshoplist(); } // 当页面滚动到底部时触发的代码 // 执行其他操作... })
学会wx.requert请求。
7 学会用navigator携带参数传参
8 学会函数的使用和触底onreachbotomn 和onrefresh的使用
9了解到箭头函数。
回调函数用法
