微信小程序-小鱼鲜花前端

文章目录

• • 目录

    概要

    小鱼鲜花

    具体部分代码

    技术细节

    小结

概要

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

小鱼鲜花

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

特色功能：

1. 高清视觉体验：每一朵花都以高清图片展示，细节丰富，色彩鲜活。

2. 个性化推荐：根据用户喜好和购买历史，智能推荐花品。

3. 一键购买：简化购物流程，实现快速下单。

4. 节日专题：根据不同节日推出特色花束，满足节日送礼需求。

5. 定制服务：提供个性化定制服务，打造专属花束。

具体部分代码

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

1. pages：设置小程序的页面路径，是一个数组，包含小程序所有页面文件的路径。

2. window：定义小程序的窗口表现，如背景色、文字大小、默认字体等。

3. tabBar：如果小程序有底部 tab，可以在这里配置 tab 的相关属性，如 list（tab 的列表）、color（图标颜色）、selectedColor（选中时的图标颜色）、backgroundColor（背景色）、borderStyle（边框风格）等。

4. networkTimeout：设置小程序的网络超时时间，如 request、uploadFile、downloadFile 等。

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

1. navigationBarTitleText：设置导航栏标题的文字内容。

2. navigationBarTitleIconPath：设置导航栏标题的图标路径。

3. navigationBarBackgroundColor：设置导航栏的背景颜色。

4. 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 组件来创建一个简单的商品导航界面。以下是这段代码中的一些关键知识点：

1. <navigator> 组件：

   • 用于页面的导航跳转，可以让用户从一个页面跳转到另一个页面。
   • url 属性指定了目标页面的路径，例如 "/pages/list/list"。

2. <image> 组件：

   • 用于显示图片，可以设置图片的 src 属性来指定图片的路径。
   • mode 属性用于指定图片的裁剪和缩放模式，以适应不同的布局需求。

3. 路径指定：

   • 图片路径 src 属性中的路径是相对路径，指向图片资源所在的目录。

4. 布局和文本标签：

   • 使用 <view> 组件作为容器来组织和布局其他组件，如 navigator 和 image。
   • 使用 <text> 组件来显示文本内容，如商品名称“鲜花玫瑰”。

技术细节

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

1. 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>。

2. WXSS样式规范：

   • 尺寸单位：使用rpx（responsive pixel）作为尺寸单位，以适应不同屏幕尺寸。
   • 样式继承：利用WXSS的继承规则，合理使用类和ID选择器。
   • 全局样式与局部样式：在app.wxss中定义全局样式，在页面对应的.wxss文件中定义局部样式。

3. 组件使用：

   • 基础组件：熟悉并使用微信小程序提供的基础组件，如<button>、<input>、<swiper>等。
   • 自定义组件：通过组件化开发，提高代码复用性，降低维护成本。

4. 事件处理：

   • 事件绑定：使用bind或catch关键字绑定事件，例如<button bindtap="handleTap">点击我</button>。
   • 事件对象：在事件处理函数中，通过事件对象获取额外信息，如handleTap(event)。

5. 数据绑定与状态管理：

   • Page对象的data属性：定义页面的初始数据，如Page({ data: { message: 'Hello World' }})。
   • this.setData：使用this.setData进行数据更新，实现视图的响应式变化。

小结

        在本文中，我们探讨了微信小程序前端页面开发的流程，包括WXML结构的编写、WXSS样式的应用。