wx小程序学习Day4 搭建项目目录、页面、搭建tabbar结构、自定义搜索框组件、轮播图组件

最新推荐文章于 2024-07-21 13:36:37 发布
最新推荐文章于 2024-07-21 13:36:37 发布
阅读量301 收藏 1
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gegegegege12/article/details/119424439
版权

今天是学习小程序的第4天

学习内容

1. 项目搭建

1.1 新建小程序项目

填入自己的appid

1.2 搭建目录结构

目录名作用
styles存放公共样式
components存放组件
lib存放第三方库
utils自己的帮助库
request自己的接口帮助库

之后清理一下不要的文件和代码
app.js中输入wx-app自动生成一段新的默认代码
pages/index/index.js中输入wx-page自动生成一段新的默认代码
(确保在vscode中安装了小程序开发助手插件)

1.3 搭建项目的页面

页面名称名称
首页index
分类页category
商品列表页goods_list
商品详情页goods_detail
购物车页cart
收藏页collect
订单页order
搜索页search
个人中心页user
意见反馈页feedback
登陆页login
授权页auth
结算页pay

在这里插入图片描述
按com+s，成功生成
在这里插入图片描述

1.4 引入iconfont

复制这个在线链接
在这里插入图片描述
路径前补https:
全选复制
在这里插入图片描述
在我们的项目styles文件夹中新建一个iconfont.wxss文件，注意这里后缀是.wxss
粘贴刚刚复制的样式代码
在这里插入图片描述
在这里插入图片描述
将iconfont.wxss文件在全局样式文件app.wxss中导入，这样就能在每个页面中使用了
在这里插入图片描述

1.5 搭建项目tabbar结构

首先新建一个icon文件夹，把我们准备好的图标图片拖进来

在app.json中配置tabbar
和"pages"同级：
这里直接打tabbar会有自动提示，注意每一个pagePath不一样的
在这里插入图片描述
在这里插入图片描述

要改变字体颜色和背景颜色：
selectedColor是活跃时的字体颜色
在这里插入图片描述
在这里插入图片描述

1.6 初始化页面样式

我们要在全局样式文件app.wxss 进行一些样式初始化
在这里插入图片描述
还需要改变一下导航栏的背景和字体颜色：
在app.json的window字段中：
在这里插入图片描述
在这里插入图片描述

2.首页

2.1 自定义搜索框组件

我们这里需要自定义组件，因为多个页面都用到了搜索框

在components文件夹中新建一个文件夹SearchInput，右键选择新建component，就会自动生成四个文件
在这里插入图片描述
声明组件：
哪个页面要用这个组件，就在哪个页面的.json文件中声明
在这里插入图片描述
实现这个搜索框组件：
实际上是个超链接，点击会跳转到search页面：
在这里插入图片描述
样式部分我把后缀改成.less然后写了，安装了Easy WXLESS插件的话会自动生成相应的.wxss文件
在这里插入图片描述
在这里插入图片描述
点击跳转到search页：
在这里插入图片描述

2.2 获取轮播图数据

pages/index/index.js：
在data中定义一个swiperList空数组，准备放一些轮播图数据
在onLoad生命周期回调中，我们发送异步请求，获取轮播图数据
在这里插入图片描述
控制台会报错，我们没有权限来请求这个接口
在这里插入图片描述
解决：
在详情-本地设置：
勾选这个
在这里插入图片描述
现在可以成功获取到：
在这里插入图片描述
这组message就是我们想要的数据，用setData赋值给swiperList
在这里插入图片描述
在AppData中看到swiperList有值了就是成功了
在这里插入图片描述
补充一个解决权限问题的方法：
将域名添加到小程序的后台中
process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VnZWdlZ2UxMg==,size_16,color_FFFFFF,t_70)
在这里添加request的合法域名
在这里插入图片描述

关于发送网络请求的更多细节，参考文档：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

2.3 动态渲染轮播图

给image设置widthFix模式，宽度不变，高度自动变化，从而保持原图比例
在这里插入图片描述

图片设置width: 100%就好，占满整个swiper，高度不用设置会自适应
swiper也需要设置新的高度，不然在不同的设备中：swiper固定了150px的高度，而图片高度是自适应，会导致图片显示不全
swiper的高度是利用swiper宽高比=image宽高比计算出来的，(这个750rpx是swiper的宽度
在这里插入图片描述
这时候轮播图在不同机型也能正确显示：
在这里插入图片描述
自动轮播、循环轮播、显示面板指示点在swiper标签上加上autoplay、circular、indicator-dots三个属性就行

2.4 原生请求改成promise的方式

在request文件夹中新建一个index.js文件：
在这里插入图片描述
在我们原来发送异步请求的地方调用这个request方法来发送请求：
在这里插入图片描述
还可以再抽一步：
在这里插入图片描述

2.5 分类导航

data中定义一个catesList空数组，定义一个getCatesList()方法，内容基本和获取轮播图数据一模一样，只是名字改了
在这里插入图片描述在这里插入图片描述在这里插入图片描述
pages/index/index.wxml：
在这里插入图片描述
pages/index/index.wxss：
在这里插入图片描述

2.6 楼层

data中定义一个floorList空数组，定义一个getFloorList()方法，内容基本和前面的一模一样，只是名字改了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
拿到数据：
在这里插入图片描述
这里要用到嵌套循环，注意一下层级结构
在这里插入图片描述
重新设置一下item的名字会更清晰：
在这里插入图片描述
布局瞎弄了一下不深究了，大概效果就是这样：
在这里插入图片描述

首页完

AIpoem
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3 | 小程序实战之首页设计（tabbar + 头部搜索框+ 轮播图 + 使用promise优化原生的请求 + 分类导航 + 楼层)
NSX-Truth
08-14 1826
前言 由于项目很多数据（如图片等）都是从后台调用的，这里给一个API接口文档，但是，我不会讲解怎么在后台写代码，因为这是一个小程序实战，主要学的是怎么去设计一个小程序，至于未来，我会再写一个基于SpringBoot的小程序开发实战的笔记！ 1. 效果 2. tabbar底部导航栏 已在上一节（2 | 小程序实战之项目搭建）完成 3. 头部搜索框 由于很多页面都需要使用头部搜索框，所以，为了实现动态化，我们需使用自定义组件 3.1 新增组件 在components文件夹下新增 SearchInput 组件
微信小程序轮播图，搜索栏，九宫格布局的做法
JasonLam的博客
03-07 5817
2018_3_7学习总结日志最近算是入门了微信小程序的小程序端吧，因为大一学习过html+css，然后再补一些js知识就去捣鼓了，我觉得这是学习的比较快的方法吧，实践出真知哈哈。
微信小程序（第八章）- 轮播图的实现
weixin_42178241的博客
01-20 1718
微信小程序（第八章）- 轮播图的实现前言组件链接实现步骤 前言 微信小程序比我们上一章讲的搜索框更好实现，因为微信小程序公众平台提供了组件（很小声）。 组件链接 swiper组件 实现步骤 开始拷贝 从swiper组件文档的最底部的wxml中复制swiper组件的相关代码。 从swiper组件文档的最底部的Javascript中复制data数据，放在index.js的data里面。 把index.js原有data里面的数据都给删掉。 把swiper-item里面的view改成image,目的是让每一个滑块
微信小程序学习1《语法、创建项目、tabbar、搜索框、轮播图》
x-dragon8899的博客
09-24 2570
一、环境准备 1、注册账号 https://mp.weixin.qq.com/wxopen/waregister?action=step1 2、获取APPID 3、下载开发工具并安装 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 二、运行工具 1、扫码登录 2、新建项目 三、语法 1、text/view ...
微信小程序自定义组件
pengyu1801的专栏
05-23 475
我们在实际开发过程中会遇到很多组件，这时候微信小程序官方不能提供，只能自己自定义了。 自定义组件 1.创建对应的文件夹，这个时候有个注意点， 要选中 YUN01目录下的文件在点击文件夹加号才能在最外层创建 components 文件夹。 这时候已经把自定义组件的文件夹创建出来了（components） 文件夹。 我们要自定义一个搜索框组件，在 components 文件夹下创建 search 文件夹，然后创建 search compent,如下图： 这时候就编辑组件就好。 在页
小程序学习笔记1-tabBar、轮播图和九宫格
03-29
今天开始学习小程序，按自己写APP的顺序开始，就不按微信官方文档来了。 有些控件是结合官方和网上其他同学分享的代码。 基础概述 这一部分看官方网站，了解一下小程序的架构页面组成啥的，没什么难度，打开微信...
微信小程序自定义菜单切换栏tabbar组件代码实例
10-15
主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序colorui组件库自定义导航栏和tabbar
04-24
在微信小程序开发中，ColorUI 是一款非常受欢迎的组件库，它为开发者提供了丰富的样式和易于使用的组件，大大提升了小程序的界面美观度和用户体验。本篇文章将深入探讨如何利用 ColorUI 组件库来实现自定义的导航栏...
微信小程序demo：中欧商学院：自定义tabbar，轮播图
03-15
【微信小程序自定义Tabbar与轮播图实现详解】 微信小程序是腾讯推出的一种轻量级的应用开发框架，它允许开发者在微信环境下构建丰富的交互式应用。在这个“中欧商学院”的微信小程序demo中，主要展示了两个关键功能...
小程序通过页面json文件中的usingComponents引入组件的方式实现自定义tabbar，会闪烁，影响小.zip
07-27
在微信小程序开发中，自定义tabbar是一种常见的需求，它能提供更加个性化和与应用风格一致的底部导航栏。在本问题中，开发者遇到了通过页面json文件中的`usingComponents`属性引入组件来实现自定义tabbar时，页面...
制作微信小程序 第三天（轮播图 导航栏 按钮 框）
热门推荐
weixin_43321726的博客
01-12 1万+
1.轮播图的实现 .wxss swiper{ width: 100%; height: calc(100vm * 352 / 1125) } image{ width:100% } .wxml <swiper autoplay interval="3000" circular indicator-dots indicator-color="#0094ff" indicator-...
项目实战 02（搜索框 轮播图）这是最后一个！ 跳级真的不好...还是按部就班！
weixin_43321726的博客
01-15 938
1.搜索框（自定义组件：在components下新建一个Searchinput，后右键新建四个文件，哪个文件要用就在哪个文件中声明，个人在index的.json下的usingComponents，然后将Searchinput下的相对路径进行复制，路径的.js不要，做完一切之后在index.wxml下测试，再回到Searchinput.wxml写下“搜索”，最后在visual studio code...
Vscode多个窗口显示多个选项卡/Tabs
阿杰的程序人生
02-12 5255
先来看效果： 可以看到多个窗口合并到了一个窗口的多个tab中，这是不是方便了好多，不用来回的切屏或切窗口了，那么如何配置？ 配置 左下角点击配置按钮，选中 settings。 搜索 window.native 选中此选项 设置后重启 此时可以看到窗口上方已经多了一行白条，说明已经设置成功了 使用 以任何一种方式打开一个新的窗口。 点击菜单 ->窗口/window -> 合并所有窗口/merge all window 如果帮助到你，可以来一波素质三连???? 参考： https
影响转化率的多元因素分析及定制开发AI智能名片S2B2C商城系统小程序的应用案例
专注MarTech应用研究与实施方案
07-17 760
综上所述，影响转化率的因素多种多样，包括活动页面的设计、活动的限时性、主题文案的吸引力、从众心理的运用以及产品质量与优惠力度等。本文首先分析了影响转化率的多种因素，包括活动页面的设计、活动的限时性、主题文案的吸引力、从众心理的运用，以及最核心的产品质量与优惠力度。同时，页面的加载速度也是影响用户体验和转化率的重要因素，过长的加载时间会导致用户流失。对于电商和各类线上营销活动来说，提高转化率意味着增加销售额、提升市场份额，因此深入分析影响转化率的因素，并探索有效的提升策略，对于商家来说具有至关重要的意义。
打印室预约小程序的设计
ing65768的博客
07-17 375
管理员账户功能包括：系统首页，个人中心，用户管理，附近打印店管理，文件打印管理，当前预约管理，预约历史管理，打印记录管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。服务器：SpringBoot自带 apache tomcat。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发工具：IDEA(推荐)开发系统：Windows。
PHP宠物店萌宠小程序系统源码
2401_84593614的博客
07-19 431
🛍️而且，小程序还提供便捷的在线购物体验，一键下单，快速送达，让你不再为找不到合适的宠物用品而烦恼。更重要的是，所有商品都经过严格筛选，确保安全健康，让你的宠物享受到最贴心的呵护。在“宠物店萌宠小程序”里，你可以为心爱的宝贝建立专属档案，记录它的成长点滴，分享它的可爱瞬间。不仅如此，还能根据宠物的个性，为它定制专属的标签和装扮，让它成为最耀眼的小明星！在“宠物店萌宠小程序”里，你还可以享受到专业的宠物健康咨询服务。在这里，你可以分享养宠心得，交流养护经验，还可以参与各种有趣的宠物活动，结识志同道合的朋友。
tg小程序前端-dogs前端源码分析
西京刀客
07-18 1537
调用方法,使 Telegram Web 应用程序全屏显示。调用和方法,将应用程序的头部和背景颜色设置为黑色。在页面的 中有两个: 这个元素初始状态是隐藏的(通过 CSS 样式 display: none;和 opacity: 0;实现)。: 这个元素是主要的内容区域,用于渲染应用程序的主界面。当页面加载完成后,元素会逐渐淡入并移动到页面底部,同时元素会下移并逐渐淡出消失。总的来说,这个页面使用了一个过渡动画来平滑地从加载状态切换到主界面展示,增强了用户体验。
h5和小程序和app的交互方式原理
最新发布
Ruiqi8的博客
07-21 204
ios端已经淘汰掉了UIWebView，现在要使。，小程序就是用自己的webview内核。你可以把webview理解。1、webview实现。
uniapp中小程序自定义tabbar组件
10-08
在uniapp中，可以通过自定义组件来实现小程序的自定义tabbar。以下是实现步骤： 1. 在uniapp项目的components目录下创建一个新的文件夹，用于存放tabbar组件相关的文件。 2. 在该文件夹下创建一个.vue文件，作为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值