头条创作挑战赛三、home首页 3。1创建home分支 运行如下的命令，基于master分支在本地创建home子分支，用来开发和home首页相关的功能：gitcheckoutbhome 3。2配置网络请求 由于平台的限制，小程序项目中不支持axios，而且原生的wx。request（）API功能较为简单，不支持拦截器等全局定制的功能。因此，建议在uniapp项目中使用escookrequestminiprogram第三方包发起网络数据请求3。2。1安装escookrequestminiprogram 在终端通过如下命令安装：npminstallescookrequestminiprogram 安装成功后，根目录会自动出现如下目录： 3。2。1配置网络请求 在项目的main。js入口文件中，进行如下配置：导入http对象import｛http｝fromescookrequestminiprogram将http挂在到uni顶级对象之上，方便全局调用uni。httphttp配置请求根路径http。baseUrlhttps：www。uinav。com请求开始前做一些事情http。beforeRequestfunction（options）｛uni。showLoading（｛title：数据加载中。。。展示loading效果｝）｝请求完成之后做一些事情http。afterRequestfunction（options）｛uni。hideLoading（）隐藏loading效果｝3。3轮播图区域3。3。1请求轮播图的数据1。实现步骤在data中定义轮播图的数组在onLoad生命周期函数中调用获取轮播图数据的方法在methods中定义获取轮播图数据的方法2。示例exportdefault｛初始化数据data（）｛return｛1。轮播图的数据列表，默认为空数组swiperList：〔〕，｝｝，onLoad（）｛2。在小程序页面钢价在的时候，调用获取轮播图数据的方法this。getSwiperList（）｝，methods：｛3。获取轮播图数据的方法asyncgetSwiperList（）｛3。1发起请求const｛data：res｝awaituni。http。get（apipublicv1homeswiperdata）3。2请求失败时执行if（res。meta。status！200）｛returnuni。showToast（｛title：数据请求失败！，duration：1500，icon：none，｝）｝3。3请求成功时为data中的数据赋值this。swiperListres。message｝｝｝ 获取到的数据格式示例如下：｛message：〔｛imagesrc：https：apihmugoweb。itheima。netpygbanner1。png，opentype：navigate，goodsid：129，navigatorurl：pagesgoodsdetailindex？goodsid129｝〕，meta：｛msg：获取成功，status：200｝｝ 参数说明如下： 参数名 类型 说明 imagesrc string 图片路径 opentype string 打开方式 goodsid number 商品id navigatorurl string 导航链接3。3。2渲染轮播图的UI结构1。渲染UI结构templateview！轮播图区域swiper：indicatordotstrue：autoplaytrue：interval3000：duration1000：circulartrue！循环渲染轮播图的item项swiperitemvfor（item，index）inswiperList：keyindexviewclassswiperitem！动态绑定图片的src属性image：srcitem。imagesrcimageviewswiperitemswiperviewtemplate2。美化UI结构stylelangscssswiper｛height：340rpx；。swiperitem｛width：100；height：100；｝｝style 测试效果如下： 3。3。3配置小程序分包 分包可以减少小程序首次启动时的加载时间 项目中，将tabBar相关的4个页面放在主包，其他页面（如：商品详情页、商品列表页）放在分包 在uniapp项目中，配置分包的步骤如下：在项目根目录中，创建分包的根目录，命名为subpkg在pages。json中，和pages节点平级的位置声明subPackages节点，用来定义分包相关的结构：｛ subPackages：〔｛ root：subpkg， pages：〔〕 ｝〕 ｝在subpkg目录上新建页面 3。3。4点击轮播图跳转到商品详情页 将节点内的view组件，改造为navigator导航组件，并动态绑定url属性的值：原先的UI结构： 改造之后的UI结构： 在goodsdetail。vue文件中，编写具体的逻辑：展示传入的商品信息 获取到goodsid｛｛goodsid｝｝的商品 示例结果如下： 3。3。5封装uni。showMsg（） 当数据请求失败之后，经常需要调用uni。showToast（｛配置对象｝）方法来提示用户。此时可以在全局封装一个uni。showMsg（）方法，来简化uni。showToast（）方法的调用 具体实现步骤如下：在main。js中，为uni对象挂在自定义的showMsg（）方法： 封装展示消息提示的方法 uni。showMsgfunction（title数据加载失败！，duration1500）｛ uni。showToast（｛ title， duration， icon：none， ｝） ｝更改原先请求失败时提示消息的调用：3。获取轮播图数据的方法 asyncgetSwiperList（）｛ 3。1发起请求 const｛data：res｝awaituni。http。get（apipublicv1homeswiperdata） 3。2请求失败时执行 if（res。meta。status！200）returnuni。showMsg（） 3。3请求成功时为data中的数据赋值 this。swiperListres。message ｝3。4分类导航区域3。4。1获取分类导航的数据1。实现思路在data中定义轮播图的数组在onLoad生命周期函数中调用获取数据的方法在methods中定义获取数据的方法2。示例3。获取到的数据如下所示：｛message：〔｛name：分类，imagesrc：https：apihmugoweb。itheima。netpygiconindexnav42x。png，opentype：switchTab，navigatorurl：pagescategoryindex｝，｛name：秒杀拍，imagesrc：https：apihmugoweb。itheima。netpygiconindexnav32x。png｝，｛name：超市购，imagesrc：https：apihmugoweb。itheima。netpygiconindexnav22x。png｝，｛name：母婴品，imagesrc：https：apihmugoweb。itheima。netpygiconindexnav12x。png｝〕，meta：｛msg：获取成功，status：200｝｝ 返回参数说明： 参数名 类型 说明 name string 标题名称 imagesrc string 图片路径3。4。2渲染分类导航的UI结构定义如下的UI结构 通过如下的样式美化页面结构：测试效果如下： 3。4。3点击第一项，切换到分类页面为navitem绑定点击事件处理函数： 定义nacClickHandler事件处理函数：4。5楼层区域4。5。1获取楼层数据1。实现思路在data中定义轮播图的数组在onLoad生命周期函数中调用获取数据的方法在methods中定义获取数据的方法2。示例3。获取到的数据示例｛message：〔｛floortitle：｛name：时尚女装，imagesrc：https：apihmugoweb。itheima。netpygpicfloor01title。png｝，productlist：〔｛name：优质服饰，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0112x。png，imagewidth：232，opentype：navigate，navigatorurl：pagesgoodslistindex？query服饰｝，｛name：春季热门，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0122x。png，imagewidth：233，opentype：navigate，navigatorurl：pagesgoodslistindex？query热｝，｛name：爆款清仓，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0132x。png，imagewidth：233，opentype：navigate，navigatorurl：pagesgoodslistindex？query爆款｝，｛name：倒春寒，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0142x。png，imagewidth：233，opentype：navigate，navigatorurl：pagesgoodslistindex？query春季｝，｛name：怦然心动，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0152x。png，imagewidth：233，opentype：navigate，navigatorurl：pagesgoodslistindex？query心动｝〕｝，｛floortitle：｛name：户外活动，imagesrc：https：apihmugoweb。itheima。netpygpicfloor02title。png｝，productlist：〔｛name：勇往直前，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0212x。png，imagewidth：232，opentype：navigate，navigatorurl：pagesgoodslistindex？query户外｝，｛name：户外登山包，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0222x。png，imagewidth：273，opentype：navigate，navigatorurl：pagesgoodslistindex？query登山包｝，｛name：超强手套，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0232x。png，imagewidth：193，opentype：navigate，navigatorurl：pagesgoodslistindex？query手套｝，｛name：户外运动鞋，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0242x。png，imagewidth：193，opentype：navigate，navigatorurl：pagesgoodslistindex？query运动鞋｝，｛name：冲锋衣系列，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0252x。png，imagewidth：273，opentype：navigate，navigatorurl：pagesgoodslistindex？query冲锋衣｝〕｝，｛floortitle：｛name：箱包配饰，imagesrc：https：apihmugoweb。itheima。netpygpicfloor03title。png｝，productlist：〔｛name：清新气质，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0312x。png，imagewidth：232，opentype：navigate，navigatorurl：pagesgoodslist？query饰品｝，｛name：复古胸针，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0322x。png，imagewidth：263，opentype：navigate，navigatorurl：pagesgoodslist？query胸针｝，｛name：韩版手链，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0332x。png，imagewidth：203，opentype：navigate，navigatorurl：pagesgoodslist？query手链｝，｛name：水晶项链，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0342x。png，imagewidth：193，opentype：navigate，navigatorurl：pagesgoodslist？query水晶项链｝，｛name：情侣表，imagesrc：https：apihmugoweb。itheima。netpygpicfloor0352x。png，imagewidth：273，opentype：navigate，navigatorurl：pagesgoodslist？query情侣表｝〕｝〕，meta：｛msg：获取成功，status：200｝｝ 返回参数说明 参数名 类型 说明 floortitle string 一级分类标题 productlist array 一级分类内容 name string 名称 imagesrc string 图片路径 imagewidth string 图片宽度 opentype string 打开方式 navigatorurl string 跳转连接3。5。2渲染楼层的标题定义如下的UI结构： 美化楼层标题的样式3。5。3渲染楼层里的图片定义楼层图片区域的UI结构： ：style｛width：item。productlist〔0〕。imagewidthrpx｝modewidthFix 美化楼层图片区域的样式：完整的测试效果如下： 3。5。4点击楼层图片跳转到商品列表项在subpkg分包中，新建goodslist页面楼层数据请求成功之后，通过双层forEach循环，处理URL地址：将图片外层的view组件，改造为navigator组件，并动态绑定url属性的值： ：style｛width：item。productlist〔0〕。imagewidthrpx｝modewidthFix ：urlitem2。url 测试效果如下：点击任意一个图片之后： 3。6分支的合并与提交将本地的home分支进行本地的commit提交：gitadd。 gitcommitm完成了home首页的开发将本地的home分支推送到远程仓库进行保存：gitpushuoriginhome将本地的home分支合并到本地的master分支：gitcheckoutmaster gitmergehome删除本地的home分支gitbranchdhome
宁静的胸许晴的臀舒淇的腿，中年不发福的女星，依然勾你的魂都说中年女星过时了，年轻的一代才最可爱。可在性感面前，年轻的女星还真不太行，而中年女星才会让人眼前一亮。她们经历过岁月的洗礼后，风韵犹存，味道很特别，尤其是浑身散发出来的女人味，更54岁邱淑贞与富豪老公及女儿为闺蜜庆生，身材发福星味不再8月26日，香港名媛上山诗钠分享一组与好友们一起庆祝58岁生日的照片，虽然她早已经从演艺圈隐退，但圈内人脉依旧强大。包括刘嘉玲关之琳邱淑贞方中信张国荣男友唐鹤德等友人纷纷到场为她庆令人感到痛心，年轻处级干部酒后失德违法，惨遭撤职处理我单位原来的主管领导，因为失德违法被公安机关当场抓获，最终被依规依纪依法严肃处理了。最后他的下场非常悲惨悲凉，但也怨不了别人，只能说他没管住自己的下半身，成为了欲望的奴隶，真是令人恶劣至极的美女蛇，谋害7条人命，还哭诉自己温柔胆小？3年了，原本大家以为尘埃落定的结局，因为她的一句话，引起轩然大波。图源云合数据劳荣枝，逃跑20年的特大杀人案通缉犯，在2019年厦门警方的一次专项打击活动中意外落网，一个月后，劳被深夜惊魂史诗级暴跌！美股狂跌1000点，恐慌指数飙升17！究竟发生了什么？见习记者赵心怡在美东时间8月26日（周五）举行的杰克逊霍尔央行年会上，美联储主席鲍威尔如市场预期的那般发表了鹰派讲话，称美联储将有力地使用我们的工具来打击仍接近40多年来最高水平的如何养成好睡姿正确睡姿1平卧位这种睡觉姿势可以把身体的重量分散到后背，不会压迫到体内脏器，身体受力比较均匀，有利于血液循环，可以有效缓解颈部背部酸痛情况。2侧卧位侧卧位时双腿弯曲，身体屈曲，全身野球帝张照洋和女友高铁站遭殴打？青岛警方双方均有抓痕8月25日，网传野球帝成员张照洋与其女友在山东青岛高铁站遭到多人殴打。视频显示，一位身穿黑色上衣的女子被两名女子拽住头发，发出尖叫声，张照洋欲冲上去保护黑衣女子，被两名男子抱住摁倒不过不备孕，直接怀孕会怎么样？漫画讲解，建议新婚小夫妻了解下人是目前世界上最高等的动物之一，人不但拥有智慧便捷，也学会了使用各种各样的工具，甚至如今我们的科技也越来越发达。除了人之外，在我们所生活的地球上还有很多其他的动植物，正是因为物种的羽毛球世锦赛石宇奇解禁复出，早早淘汰出局，未来难堪大任石宇奇原本被认为是继林丹谌龙之后的羽毛球男单的未来和希望，可近些年表现不尽人意，其实汤姆斯杯未能参加是因为国家队内部禁赛，而这次原本还未到禁赛结束，但是为了备战奥运，男单也是没人，40年前，供销社热销过的8个口粮白酒，全喝过的年纪不小了都说时间如流水，看得见留不住，一年又一年地过去，岁月虽然带走了很多东西，却也留下了一些美好的回忆。7080年代的人们在回忆中想必对供销社印象很深，在那个年代想要买东西就得去供销社，不要再高估朋友了曾广贤文有一句话有钱有酒多兄弟，急难何曾见一人。时间识人，急难识人。经历之后，方意识到人心似海，情薄如纸。不太注意人际关系是一个人最大的成熟和自知之明。人心易变。如果你高估了自己在