微信小程序笔记1

已于 2024-03-27 21:21:12 修改
阅读量1.7k 收藏 35
点赞数 37
文章标签： 笔记
于 2024-03-10 18:15:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanglinsang/article/details/136579594
版权

第一步：创建项目与项目初始化

1.创建项目:

 

2.项目初始化

 重置app.js中的代码。

 删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。

 重置 app.wxss中的代码。

删除app.json中pages 下的"pages/logs/logs"路径，同时删除pages/logs ⽂件夹。

删除 components 中的⾃定义组件。

重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。

更新 utils 下 util.js 的⽂件名为 formatTime.js。

二.自定义构建

首先在project.config.json配置miniprogramRoot选项，指定小程目录。

 然后配置project.config.json的setting.packNpmManually为true.

初始化目录，在终端中打开。

 

安装vant,然后进行npm构建，测试是否能够正常vant构建成功。 

 三.构建项目页面

assets文件导入。

配置app.json文件。

{
  "pages": [
    "pages/cart/cart",
    "pages/category/category",
    "pages/index/index",
    "pages/my/my",
    "pages/index/banner/banner",
    "pages/index/entrance/entrance"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "慕尚花坊",
    "navigationBarBackgroundColor": "#FF734C"
  },
  "tabBar": {
    "color": "#252933",
    "selectedColor": "#FF734C",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tabbar/index.png",
        "selectedIconPath": "assets/tabbar/index-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "assets/tabbar/cate.png",
        "selectedIconPath": "assets/tabbar/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "assets/tabbar/cart.png",
        "selectedIconPath": "assets/tabbar/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "assets/tabbar/my.png",
        "selectedIconPath": "assets/tabbar/my-active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
  }
}

 四.首页

1.首页结构

<view class="index-container">
  <!-- 首页背景图 -->
  <view class="window-bgc"></view>
  <!-- 页面主体区域 -->
  <view class="container">

    <!-- 轮播图区域 -->
    <banner/>
    <!-- 导航区域 -->
    <entrance/>
    <!-- 广告区域 -->
  <view class="adver">
    <view class="adver-left">
      <navigator url="">
        <image src="../../assets/images/love.jpg" mode="widthFix"/>
      </navigator>
    </view>
    <view class="adver-right">
      <view>
        <navigator url="">
          <image src="../../assets/images/elder.jpg" mode="widthFix"/>
        </navigator>
      </view>
      <view>
        <navigator url="">
          <image src="../../assets/images/friend.jpg" mode="widthFix"/>
        </navigator>
      </view>
    </view>
  </view>
    <!-- 商品列表 -->
    <goods-list title="猜你喜欢"></goods-list>
    <goods-list title="人气推荐"></goods-list>
  </view>
</view>

 2.首页样式

/**index.wxss**/
.index-container {
  // 首页背景图
  .window-bgc{
    height: 200rpx;
    position:absolute;
    width: 100%;
    background-color: #f3514f;
    border-radius: 0 0 25% 25%;
  }
  .adver {
    display: flex;
    margin: 0 20rpx;
    width: 96%;
    padding: 18rpx;
    box-sizing: border-box;
    background-color: white;
    border-radius: 18rpx;
    .adver-left{
      width: 50%;
      padding: 8rpx 8rpx 0rpx 8rpx;
    }
    .adver-right{
      width: 50%;
      padding: 8rpx 8rpx 0rpx 8rpx;
    }
    // 选中第二张图片
    view:laat-child{
      padding-top: 10rpx;
    }
    image{
      width: 100%;
    }
  }
}

 

 3.banner组件

创建banner组件

创建banner组件结构

banner.js

 

// banner.json 

{

  "component": true,

  "usingComponents": {}

}

 banner.scss

 

 banner.wxml

//  index.json ：引入bann.json组件

{

  "usingComponents": {

    "banner": "./banner/banner"

  }

//  index.html ：将轮播图放入合适位置

 <!-- 轮播图区域 -->

    <banner/>

 

 4.entrance组件

创建entrance组件

完成entrance组件

// entrance.html

 entrance.js

 entrance.json

 entrance.scss

 // index.wxml

<!-- 导航区域 -->

    <entrance/>

 // index.json

{

  "usingComponents": {

    "banner": "./banner/banner",

    "entrance": "./entrance/entrance"

  }

}

 

 

flex弹性布局 

 5.广告区域

// index.wxml

 <!-- 广告区域 -->

  <view class="adver">

    <view class="adver-left">

      <navigator url="">

        <image src="../../assets/images/love.jpg" mode="widthFix"/>

      </navigator>

    </view>

    <view class="adver-right">

      <view>

        <navigator url="">

          <image src="../../assets/images/elder.jpg" mode="widthFix"/>

        </navigator>

      </view>

      <view>

        <navigator url="">

          <image src="../../assets/images/friend.jpg" mode="widthFix"/>

        </navigator>

      </view>

    </view>

广告区域的样式

// index.scss

.adver {

    display: flex;

    margin: 0 20rpx;

    width: 96%;

    padding: 18rpx;

    box-sizing: border-box;

    background-color: white;

    border-radius: 18rpx;

    .adver-left{

      width: 50%;

      padding: 8rpx 8rpx 0rpx 8rpx;

    }

    .adver-right{

      width: 50%;

      padding: 8rpx 8rpx 0rpx 8rpx;

    }

    // 选中第二张图片

    view:laat-child{

      padding-top: 10rpx;

    }

    image{

      width: 100%;

    }

  }

 

 6.注册goods-card和goods-list组件

创建文件夹components，将goods-card和goods-list组件放入文件夹中。

1.完成goods-card组件

// goods-card

Component({

  /**

   * 组建的属性列表

   */

  properties:{

    // 每一项商品的数据

    goodItem: {

      type:Object,

      value: {}

    }

  },

  /**

   * 组件的初始数据

   */

  data: {},

  /**

   * 组建的方法列表

   */

  methods: {}

})

 // goods-card.json

{

  "component": true,

  "usingComponents": {}

}

// goods.card.scss

/* components/goods-card/goods-card.wxss */

.goods_card_container{

  width: 350rpx;

  margin-top: 18rpx;

  background-color: #fff;

  border-radius: 18rpx;

  .goods_img{

    width: 100%;

    max-height: 360rpx;

    border-top-left-radius: 18rpx;

    border-top-right-radius: 18rpx;

  }

  .goods_item_info{

    // 设置弹性布局

    display: flex;

    // 更改主轴方向为纵轴

    flex-direction: column;

    padding: 10rpx 20rpx;

    .goods_item_info_name {

      // 设置字体粗细

      font-weight: bolder;

      font-size: 30rpx;

      line-height: 20px;

      // 溢出隐藏

      overflow: hidden;

      // 溢出之后的文本

      text-overflow: ellipsis;

      // 超过一行就算溢出

      white-space: nowrap;

    }

    .goods_item_info_promo {

      margin: 10rpx 0;

      padding-top: 20rpx;

      padding-bottom: 3px;

      font-size: 12px;

      color: #71797f;

      // 溢出隐藏

      overflow: hidden;

      // 溢出之后的文本

      text-overflow: ellipsis;

      // 超过一行就算溢出

      white-space: nowrap;

    }

  }

  .goods_item_info_bottom{

    // 设置弹性布局

    // 将块级元素一行显示

    display: flex;

    line-height: 50rpx;

    margin-top: 20rpx;

    .goods_item_info_price{

      font-size: 30rpx;

      font-weight: bold;

      color: #f3514f;

      .text{

        font-size: 24rpx;

        padding-right: 4rpx;

        font-weight: normal;

      }

    }

    .goods_item_info_origin_price{

      // flex设置为1

      // 则该元素拥有所有的剩余部分

      flex: 1;

      font-size: 20rpx;

      color: #71797f;

      text-decoration-line: line-through;

      margin-left: 6%;

      margin-top: 4rpx;

      .text{

        font-size: 20rpx;

      }

    }

    .goods_image {

      width: 48rpx;

      height: 48rpx;

    }

  }

}

 // goods-card.wxml

<!--components/goods-card/goods-card.wxml-->

<view class="goods_card_container">

<!-- 图片 -->

  <navigator class="navigator_nav" url="/pages/goods/detail/detail?goodsId={{goodItem.id}}">

    <image src="../../assets/images/floor.jpg" mode="widthFix" class="goods_img"/>

  <!-- 详细信息 -->

  <view class="goods_item_info">

    <!-- 商品名称 -->

    <text class="goods_item_info_name">亲爱的/情人节网红款/19枝</text>

    <!-- 商品描述 -->

    <text class="goods_item_info_promo">情⼈节新品情⼈节新品情⼈节新品情⼈节新品</text>

    <!-- 商品价格 -->

    <view class="goods_item_info_bottom">

      <view class="goods_item_info_price">

        <text class="text">￥</text>399

      </view>

      <view class="goods_item_info_origin_price">

        <text class="text">￥</text>1{{goodItem.marketPrice}}

      </view>

      <!-- 加入购物车图片 -->

      <view class="goods_item_info_btn">

        <image class="goods_image" src="../../assets/images/buybtn.png" mode=""/>

      </view>

    </view>

  </view>

  </navigator>

</view>

2.完成goods-list组件 

// goods-list.js

Component({

  /**

  * 组件的属性列表

  */

  properties: {

    // 列表标题

    title: {

     type: String,

     value: ''

    },

   // 传递的列表数据

   list: {

   type: Array,

   value: [{}, {}, {}]

   }

   },

   /**

   * 组件的初始数据

   */

   data: {}, 

     /**

     * 组件的⽅法列表

     */

    methods: {}

})

 // goods-list.json

{

  "component": true,

  "usingComponents": {

    "goods-card":"/components/goods-card/goods-card"// 引入goods-card组件

  }

}

 // goods-list.scss

.goods_container{

  width: 95%;

  margin: 0 auto;

  .goods_title{

    // 设置文本居中

    text-align: center;

    font-size: 48rpx;

    line-height: 52rpx;

    font-weight: bold;

    color: #232628;

    padding: 20rpx 0 0rpx 0rpx;

  }

  .goods_card_list{

    display: flex;

    // 设置换行

    flex-wrap: wrap;

    // 设置元素在主轴上的排列方式

    justify-content: space-between;

    .goods_card_list::after{

      content: '';

      width: 350rpx;

    }

  }

  .goods_more_btn{

    height: 40px;

    width: 95%;

    background-color: white;

    border-radius: 20px;

    margin: 0 auto;

    // 以下三句话设置元素垂直居中显示

    text-align: center;

    display: block;

    color: rgba(35,38,40,0.7);

  }

  .goods_more{

    margin: 20rpx 0;

  }

}

 // goods-list.wxml

<!--components/goods-list/goods-list.wxml-->

<view class="goods_container">

  <!-- 标题 -->

  <view class="goods_title">{{title}}</view>

  <!-- 列表区域 -->

  <view class="goods_card_list">

    <block wx:for="{{ 3 }}" wx:key="index">

      <goods-card/>

    </block>

  </view>

  <!-- 查看更多 -->

  <view class="goods_more">

    <navigator url="" class="goods_more_btn" url="/pages/goods/list/list" hover-class="navigator-hover" open-type="navigate">

      查看更多

    </navigator>

  </view>

</view>

// index.json

{

  "usingComponents": {

    "banner": "./banner/banner",

    "entrance": "./entrance/entrance",

    "goods-list": "../../components/goods-list/goods-list"

  }

}

 // index.wxml

<!-- 商品列表 -->

    <goods-list title="猜你喜欢"></goods-list>

    <goods-list title="人气推荐"></goods-list>

 

五. 分类页面

// category.scss

/* pages/category/category.wxss */

.category-container{

  display: flex;

  // 左侧⼀级分类

  .category-left-view {

    width: 220rpx;

    height: 100vh;

    background-color: white;

    .left-view-item {

      // 文本间隔

      line-height: 100rpx;

      // 文本的排列方式

      text-align: center;

      // 文字大小

      font-size: 30rpx;

    }

    .active {

      background-color: #ffffff;

      position: relative;

      color: #f3514f;

      // &表示当前标签

      // :::before是伪元素选择器

      // 在指定元素前添加内容

      &::before {

        content: " ";

        display: block;

        width: 6rpx;

        height: 66rpx;

        background-color: #f3514f;

        position: absolute;

        // 沿着Y轴平移

        transform: translateY(25%);

      }

    }

  }

  // 右侧⼆级分类

  .category-right-view {

    width: 100%;

    height: 100vh;

    flex-wrap: wrap;

    background: #fff !important;

    margin-left: 8rpx;

    &::before{

      content: " ";

      display: block;

      width: 6rpx;

      height: 100vh;

      background-color: black;

      position: absolute;

    }

    .right-view-item {

      width: 33%;

      float: left;

      margin-top: 30rpx;

      .navigator{

        display: flex;

        // 设置纵轴方向上排列

        flex-direction: column;

        align-items: center;

      }

      image{

        width: 90rpx;

        height: 90rpx;

      }

      text{

        font-size: 26rpx;

        margin-top: 18rpx;

      }

    }

  }

}

 // category.wxml

<!--pages/category/category.wxml-->

<view>

  <view class="category-container">

    <!-- 左侧的滚动视图区域 -->

    <scroll-view class="category-left-view" scroll-y>

    <!-- active:被选中的内容 -->

      <view class="left-view-item active">爱礼精选</view>

      <view class="left-view-item">鲜花玫瑰</view>

      <view class="left-view-item">永生玫瑰</view>

      <view class="left-view-item">玫瑰珠宝</view>

    </scroll-view>

    <!-- 右侧的滚动视图区域  -->

    <scroll-view class="category-right-view" scroll-y>

    <!-- 二级分类 -->

      <view class="test">

      <view wx:for="{{ 10 }}" wx:key="index" class="right-view-item">

        <navigator class="navigator" url="/pages/goods/list/list?category2Id=1">

          <image class="" src="../../assets/images/cate-1.png" mode=""/>

          <text class="goods_item_name">真情告白</text>

        </navigator>

      </view>

      </view>

    </scroll-view>

  </view>

</view>

 

元素定位 

 伪元素选择权

Hls@
关注
  • 37
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序入门笔记-1
毛毛毛的博客
08-16 240
WXML WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。 主要功能：数据绑定、列表渲染、条件渲染、模板、事件、引用 WXSS WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者...
微信小程序笔记
Jennybiu的博客
02-22 767
API开发 请求服务器数据 发起请求 wx.request：发起https请求。同时只能有5个网络请求连接。 代码示例 wx.request({ url: 'http://www.baidu.com', data: { x: '' , y: '' }, header: { ...
黑马微信小程序学习笔记
MissXu666的博客
11-30 1458
默认情况下，在小程序内安装的第三方的包，是安装在node_module目录内的，且安装完包后也是不能马上使用的，因为小程序比较特殊，它是无法直接读取node_module软件包的，那小程序该如何使用安装的包呢？需要注意的是：每安装一个新包，就需要重新构建npm一次，且在构建之前，为了防止出现一些不必要的未知错误，可以先把之前安装包后构建生成的miniprogram_npm目录删除，然后再点击构建npm重新生成；物理（设备）像素：真实存在的，物理硬件屏幕上的最小显示单元，屏幕的分辨率，像素越高越清晰。
微信小程序笔记--数据库
m0_69287579的博客
08-25 2164
学习微信小程序 -- 数据库。
微信小程序开发学习笔记①
tutgxu的博客
12-29 1026
微信小程序开发学习笔记
微信小程序——云笔记（截图+源码）.zip
05-05
微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序...
尚硅谷微信小程序课堂笔记.zip
07-02
尚硅谷微信小程序课堂笔记.zip
微信小程序笔记期末复习
07-05
微信小程序笔记期末复习
credit-card-微信小程序笔记
05-29
在"credit-card-微信小程序笔记"中，我们可以推测这是关于在微信小程序中开发信用卡相关的功能或服务的教程。信用卡功能可能包括但不限于用户信用额度查询、消费记录查看、还款提醒、在线支付等。以下是一些可能涵盖...
微信小程序笔记（黑马程序员）
05-26
1. **环境搭建**：首先，你需要安装微信开发者工具，这是进行微信小程序开发的基础。工具提供了模拟器、调试器等功能，帮助开发者完成代码编写、测试和预览。 2. **WXML与WXSS**：WXML（WeiXin Markup Language）是...
2024-07-05 base SAS programming学习笔记9(variables)
ddjdd1234的博客
07-05 315
由于SAS 每次都会执行IF THEN 语句，因此在对同一个变量进行操作时使用IF THEN ELSE IF THEN 语句来提高效率，避免重复使用IF-THEN 语句，在碰到TRUE的情况则会跳出该IF 语句。如果不存在select expression ，则会对每个when 语句判断TRUE或FALSE,SAS只会执行首次判断为TRUE的语句，一旦存在TRUE语句则跳出不对其他WHEN语句进行判断。在每次DO循环前检查是否满足WHILE的条件，只有满足WHILE的条件才继续循环，如果不满足则终止循环。
昇思MindSpore学习笔记2-01 LLM原理和实践 --基于 MindSpore 实现 BERT 对话情绪识别
muren的专栏
07-02 1000
通过识别BERT对话情绪状态的实例，展现在昇思MindSpore AI框架中大语言模型的原理和实际使用方法、步骤。
【PB案例学习笔记】-27制作一个控制任务栏显示与隐藏的小程序
再小的帆也能远航，把分享变成一种习惯
07-03 336
这是PB案例学习笔记系列文章的第27篇，该系列文章适合具有一定PB基础的读者。通过一个个由浅入深的编程实战案例学习，提高编程技巧，以保证小伙伴们能应付公司的各种开发需求。
【算法笔记自学】第 5 章 入门篇（3）——数学问题
qq_62704693的博客
07-06 158
【代码】【算法笔记自学】入门篇（3）——数学问题。
数据结构学习笔记-十大排序算法
2301_81135589的博客
07-03 440
进行S趟k路归并，把k个归并段的块读入k个输入缓冲区，用“归并排序”的方法从k个归并段中选出几个最小记录，暂存到输出缓冲区中，当输出缓冲区满时，写出外存。6）重复3）~5），直至在WA中选不出新的MINIMAX记录为止，由此得到一个初始归并段，输出一个归并段的结束标志到FO中去。设初始待排文件为FI，初始归并段输出文件为FO，内存工作区为WA，FO和WA的初始状态为空，WA可容纳w个记录到工作区WA。5）从WA中所有关键字比MINMAX记录的关键字大的记录中选出最小关键字记录，作为新的MINIMAX记录。
vb.net&cad二开自学笔记2：认识vs编辑器
最新发布
nianfen的博客
07-06 80
认识一下宇宙第一编辑器的界面图标含义还是很重要的，否则都不知道面对的是什么还怎么继续？变量长方体：变量局部变量两个矩形块：枚举预定义的枚举紫色立方体：方法橙色树状结构：类灰色块：自定义的代码片段接口/typedef向左对齐的关键字图标倒着脸的结构体图标显得规规矩矩的宏定义图标大括号的命名空间图标事件属性委托。
[笔记] 卷积 - 01 变速箱需要放置多少个加速度传感器？
含光左卫的工作笔记集
07-03 918
卷积运算以及在振动分析中的应用。一些笔记和讨论。其他的卷积运算适用的场合，如信号与系统，机械涉及，机器学习可以参考。
libusb注意事项笔记
cai742925624的专栏
07-03 461
libusb注意事项笔记
笔记12：if语句编程练习（打印输出三个数据中的最小值）
m0_71276503的博客
07-02 201
输入三个数，分别放入变量x，y，z中打印输入数据中最小的那一个数。
微信小程序开发教程大全-2022-6-18
06-28
下面是我对微信小程序开发的一些笔记，包括微信小程序的概述和新增属性等内容。这些笔记将帮助你更好地理解微信小程序开发的基本概念和技术要点，为你的实际开发工作提供指导和帮助。 微信小程序开发 - 1 微信小...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值