微信小程序-小鱼鲜花前端-CSDN博客

本文链接：https://blog.csdn.net/weixin_68226434/article/details/142597363

文章目录

- 目录
  
  概要
  
  小鱼鲜花
  
  具体部分代码
  
  技术细节
  
  小结

概要

在微信小程序的实例中，前端部分是用户直接交互的界面，它包括了页面布局、用户界面设计、交互逻辑等。前端开发的主要目标是为用户提供一个直观、易用且视觉吸引的购物体验。

小鱼鲜花

通过这款小程序，您可以探索来自世界各地的精选花卉，每一款都通过清晰的图片和详尽的描述来展现其独特风采。无论是庆祝特别的日子、表达深情还是装饰您的居住空间，您都能轻松挑选到最适合您需求的花艺作品。

特色功能：

高清视觉体验：每一朵花都以高清图片展示，细节丰富，色彩鲜活。
个性化推荐：根据用户喜好和购买历史，智能推荐花品。
一键购买：简化购物流程，实现快速下单。
节日专题：根据不同节日推出特色花束，满足节日送礼需求。
定制服务：提供个性化定制服务，打造专属花束。

具体部分代码

app.json 是微信小程序的全局配置文件，它位于小程序项目的根目录下。这个文件用于对小程序进行全局设置，包括页面路径、窗口表现、网络超时时间、底部 tab 等。

pages：设置小程序的页面路径，是一个数组，包含小程序所有页面文件的路径。
window：定义小程序的窗口表现，如背景色、文字大小、默认字体等。
tabBar：如果小程序有底部 tab，可以在这里配置 tab 的相关属性，如 list（tab 的列表）、color（图标颜色）、selectedColor（选中时的图标颜色）、backgroundColor（背景色）、borderStyle（边框风格）等。
networkTimeout：设置小程序的网络超时时间，如 request、uploadFile、downloadFile 等。

在微信小程序中，navigationBar 是页面导航栏的配置，它通常在 app.json 中全局设置，也可以在特定页面的 .json 文件中进行局部覆盖。导航栏是小程序页面的顶部区域，通常包含页面标题、左右侧的按钮等元素。

navigationBarTitleText：设置导航栏标题的文字内容。
navigationBarTitleIconPath：设置导航栏标题的图标路径。
navigationBarBackgroundColor：设置导航栏的背景颜色。
navigationBarTextStyle：设置导航栏标题的颜色，通常值为 black 或 white。

在WXML中添加 <swiper> 组件：
- 使用 <swiper> 标签来定义轮播图的容器。
- 使用 <swiper-item> 标签来定义每一个轮播的项目。
在WXSS中设置样式：
- 可以为 <swiper> 和 <swiper-item> 设置样式，如宽度、高度、图片样式等。
在JS中控制轮播图：
- 可以通过数据绑定和事件处理来控制轮播图的行为，如手动切换轮播项。
在JSON中定义轮播图：
- 在页面的配置文件中定义轮播图的数据。

在微信小程序中使用iconfont字体图标，可以按照以下步骤进行：

1. **选择图标**：
访问iconfont官网，选择所需的图标并添加到项目中。

2. **下载图标**：
在iconfont项目页面，选择“Unicode”或“Base64”格式，生成在线代码或下载到本地。

3. **配置项目**：
将下载的`iconfont.css`文件重命名为`iconfont.wxss`，并将其放置在小程序项目的合适目录下。

4. **全局引入**：

- 确保使用在线链接或base64编码的字体文件，以避免小程序本地路径引用的限制。

5. **使用图标**：
- 在WXML文件中使用`<text>`或`<view>`标签，并添加相应的iconfont类名

6. **样式调整**：
- 可以在WXSS中对图标进行样式调整，如设置大小、颜色等。

7. **组件封装**：
- 可以将图标封装成自定义组件，方便在不同页面中重复使用。

8. **注意事项**：
- 字体商用需授权许可，确保使用的字体图标符合授权要求。
- 字体链接需支持HTTPS，且需满足CORS策略。

展示了微信小程序中使用 navigator 组件和 image 组件来创建一个简单的商品导航界面。以下是这段代码中的一些关键知识点：

<navigator> 组件：
- 用于页面的导航跳转，可以让用户从一个页面跳转到另一个页面。
- url 属性指定了目标页面的路径，例如 "/pages/list/list"。
<image> 组件：
- 用于显示图片，可以设置图片的 src 属性来指定图片的路径。
- mode 属性用于指定图片的裁剪和缩放模式，以适应不同的布局需求。
路径指定：
- 图片路径 src 属性中的路径是相对路径，指向图片资源所在的目录。
布局和文本标签：
- 使用 <view> 组件作为容器来组织和布局其他组件，如 navigator 和 image。
- 使用 <text> 组件来显示文本内容，如商品名称“鲜花玫瑰”。

技术细节

在微信小程序的开发中，关注以下技术细节至关重要：

WXML模板语法：
- 数据绑定：使用双花括号{{}}语法进行数据绑定，例如<text>{{message}}</text>。
- 列表渲染：使用wx:for和wx:for-index、wx:for-item进行列表渲染，例如<block wx:for="{{array}}" wx:for-item="item" wx:for-index="index"><text>{{item}}</text></block>。
- 条件渲染：使用wx:if、wx:elif和wx:else进行条件渲染，例如<view wx:if="{{condition}}">显示内容</view>。
WXSS样式规范：
- 尺寸单位：使用rpx（responsive pixel）作为尺寸单位，以适应不同屏幕尺寸。
- 样式继承：利用WXSS的继承规则，合理使用类和ID选择器。
- 全局样式与局部样式：在app.wxss中定义全局样式，在页面对应的.wxss文件中定义局部样式。
组件使用：
- 基础组件：熟悉并使用微信小程序提供的基础组件，如<button>、<input>、<swiper>等。
- 自定义组件：通过组件化开发，提高代码复用性，降低维护成本。
事件处理：
- 事件绑定：使用bind或catch关键字绑定事件，例如<button bindtap="handleTap">点击我</button>。
- 事件对象：在事件处理函数中，通过事件对象获取额外信息，如handleTap(event)。
数据绑定与状态管理：
- Page对象的data属性：定义页面的初始数据，如Page({ data: { message: 'Hello World' }})。
- this.setData：使用this.setData进行数据更新，实现视图的响应式变化。