南京小程序开发教程(5)-小程序开发样式和组件

发表日期：2025-09-14 14:31:22 文章编辑：seo阿苏哥 浏览次数：

在开发web网站的时候：页面的结构由html进行编写，列如：经常会使用到p，p，span，img，a等标签，页面的样式由css进行编写，列如：经常会使用.class,#id,element等选择器。

但在小程序中不能使用HTML标签，也就没有DOM和BOM，CSS也仅仅支持部分选择器，

小程序提供了WXML进行页面结构编写，同时提供了WXSS进行页面的样式编写

WXLL提供了view，text，image，navigator等标签来构建页面结构，只不过在小程序中将标签称为组件

WXSS对CSS扩充和修改，新增了尺寸单位rpx，提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分CSS选择器

1.样式

(1)尺寸单位rpx

不同型号设计宽度不同：单位px适用于不同型号展示页面效果不同

rpx：是小程序新增的自适应单位，它可以根据不同设备的屏幕宽度进行自适应缩放。

小程序规定如何型号手机：屏幕宽度为750px

<!-- 需求：绘制一个盒子，让盒子的宽度占据屏幕的一半 -->
<!-- view 是小程序提供的组件，是容器组件，类似于p，也是一个块级元素 ，占据一行-->
<!-- 如果想实现需求，不能使用px，px是固定单位，不呢个实现自适应，需要使用小程序提供的rpx单位 -->
<!-- 微信小程序规定不管是什么型号的手机，宽度为750rpx -->
<!-- rpx单位能够实现自适应的 -->
<view class="box">商场</view>
.box{
  width: 375rpx;
  height: 300rpx;
  background-color: red;
}
	 

开发建议：

  1. 开发微信小程序时设计师可以用iPhone6作为视觉标准，IPhone6设计稿一般为750px

  2. 如果IPhone6作为视觉稿的标准量取多少px，直接写多少rpx即可，开发起来更方便，也能适配屏幕的宽度

(2)全局样式和局部样式

在进行网页开发时，我们常用创建gobal.css，base.css，或者reset.css作为全局样式文件进行重置颜色或者样式统一，然后每一个页面或者组件中写当前页面或组件的局部样式，小程序中也存在全局样式和局部样式。

2.组件

小程序常用的组件：

  1. view组件

  2. swiper和swiper-item组件

  3. image组件

  4. text组件

  5. navigator组件

  6. scroll-view组件

  7. 字体图标

(1)划分页面结构

将页面划分为4个区域：

配置首页背景色：

<!--index.wxml-->
<!-- view 小程序提供的容器组件，可以直接当成p使用即可 -->
<!-- 轮播图区域 -->
<view class="swiper"></view>
<!-- 公司信息 -->
<view class="info"></view>
<!-- 商品导航 -->
<view class="good-nav"></view>
<!-- 推荐商品 -->
<view class="good-hot"></view>
page {
   height: 100vh;
   display: flex;
   background-color: #efefef !important;
 }

 

(2)轮播图区域绘制

在进行网页开发时，实现轮播图的时候，我们通常先使用HTML，CSS实现轮播图的结构样式，然后使用JS控制轮播图的效果，或者直接使用插件实现轮播图的功能，而在小程序中实现小程序功能则相对简单很多。

在小程序中，提供了swiper和swiper-intem组件实现轮播图：

swiper：滑块视图容器，其中只能放置swiper-item组件。

swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的一项。
 


<!-- 轮播图区域 -->
 <view class="swiper">

	 <!-- autoplay 自动轮播 

	  interval 自定义轮播间隔时间

	  indicator-dots 显示面板指示点

	  indicator-color指示点颜色

	  indicator-active-color选中指示点颜色

	  circular衔接滑动-->

	   <swiper 

	     autoplay 

	     circular

	     indicator-dots

	     interval="2000"  

	     indicator-color="#fff"

	     indicator-active-color="#f3514f">

	         <swiper-item>

	             1

	         </swiper-item>

	         <swiper-item>

	             2

	         </swiper-item>

	         <swiper-item>

	             3

	         </swiper-item>

	     </swiper>

	 </view>


// 轮播图区域样式
 .swiper{
     swiper{
         height: 360rpx;
         background-color: skyblue;
 ​
         swiper-item{
             // &在scss中代表的是父选择器，引用的意思
             // swiper-item：first-child
             &:first-child{
                 background-color:cyan ;
             }
             &:last-child{
                 background-color: lightgreen;
             }
         }
     }
 }

(3)轮播图图片添加

在小程序当中，如果需要渲染图片，需要使用image组件，常用的属性有4个：

  1. src属性：图片资源地址。

  2. mode：图片剪裁，缩放的模式。

  3. show-menu-longpress：长按图片显示菜单。

  4. lazy-load：图片懒添加。

注意事项：

  1. image默认具有宽度和高度，宽是320px 高度是240px。

  2. image组件不给src属性设置图片地址，也占据宽和高。



swiper-item{
             image{
                 height: 100%;
                 width: 100%;
             };




<swiper-item>
             <image src="/assets/banner/banner-1.jpg" mode=""/>
          </swiper-item>
         <swiper-item >
             <image src="/assets/banner/banner-2.jpg" mode=""/>
         </swiper-item>
             <image src="/assets/banner/banner-3.jpg" mode=""/>
          </swiper-item>
 < !-- src:图片的资源地址 -- >
 < !-- mode：图片的剪裁和缩放模式 -- > 
 < !-- show-menu-by-longpress：长按显示菜单，菜单中有转发给朋友，收藏，保存等功能 -- >

(4)绘制公司信息区域

在小程序中，如果需要渲染文本，需要使用text组件，常用的属性有2个：

  1. user-select：文本是否可选，用于长按选择文本。

  2. space：显示连续空格。

注意事项：

  1. 除了文本节点以外的其他节点都无法长按选中。

  2. text组件内只支持text嵌套。

  1. 演示：

    

 
 < text user-select space="nbsp">商    品商场</text>


page {
     display: block;
     flex-direction: column;
   height: 100vh;
     background-color: #efefef !important;
     box-sizing: border-box;
     padding: 16rpx;
     
     view{
         // 为page第二个以及后面的view添加上边框
         &:nth-child(n+2){
             margin-top: 16rpx;
         }
     }
 }
 .info{
     display: flex;
     justify-content: space-between;
     background-color: #ee7d6e;
     padding: 16rpx;
     border-radius: 10rpx;
     // border-radius你设置元素的外边框圆角
     font-size: 24rpx;
 }



<view class="info"><text>同城配送</text>
 <text>行业龙头  </text>
 <text>半小时配送 </text>
 <text>100% 好评 </text>


 

(5)商品导航区域

商品导航区域由5个商品导航组成

 

用view，image，text组件实现

.good-nav{
     display: flex;
     justify-content: space-between;
     background-color: #efefef;
     padding: 5rpx 16rpx;
     // padding一次性设置元素所有四条边的内边距区域
     border-radius: 10rpx;
     view{
         display: flex;
         flex-direction: column;
         image{
             width: 85rpx;
             height: 85rpx;
         }
         text{
             font-size: 24rpx;
             margin-top: 12rpx;
         }
     }
 }




 <view class="good-nav">
   <view>
       <img mode="" src="/assets/images/cate-1.png" />
        <text>鲜花玫瑰 </text>
     </ view>
     <view>
         <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰  </text>
    </ view>
     <view>
         <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰 </text>
   </ view>
     <view>
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰 </text>
     </ view>
     <view>
         <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰 </text>
     </ view>
</ view>

(6)跳转到商品列表

在小程序中，如果需要进行跳转，需要使用navigation组件，常用属性有2个：

  1. url：当前小程序内的跳转链接。

  2. open-type:跳转方式

    • navigate：保留当前页面，跳转到应用内的那个页面，但是不能跳到tabbar页面。

    • redirect：关闭当前页面，跳转到应用内的那个页面，但是不能跳到tabbar页面。

    • switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面。

    • raLaunch：关闭所有页面，打开到应用内的那个页面。

    • navigateBack：关闭当前页面，放回上一页面或多级页面。

注意事项：

  1. 路径后可以带参数。参数与路径之间使用？分隔，参数键与参数值用=相连，不同参数用&分隔

    列如：/list？id=10&name=hua，在onLoad（options）生命周期函数中获取传递的数据

  2. open-type=“switchTab”时不支持传参。

常见跳转方式：

 < !-- -- -- 在进行页面跳转时 需要在路径前加/斜线---- -->
 <navigator url="/pages/list/list">到商品列表页面</navigator>
 ​
  < !-- -- -- navigator：只能跳转到非TabBar页面，不能跳转到TabBar页面，保留上一级页面 ---- -->
 <navigator open-type="navigate" url="/pages/list/list">到商品列表页面</navigator>
 <navigator url="/pages/cate/cate">到商品分类页面</navigator-->
 ​
 < ! -- -- redirect：只能跳转到非TabBar页面，不能跳转到TabBar页面，关闭上一级页面 --- ->
 <navigator open-type="redirect" url="/pages/list/list">到商品列表页面</navigator>
 ​
  < ! -- switchTab：只能跳转到TabBar页面，不能跳转到非TabBar页面，关闭所有页面 -- >
 <navigator open-type="switchTab" url="/pages/list/list">到商品列表页面</navigator>
 <navigator open-type="switchTab" url="/pages/cate/cate">到商品分类页面</navigator>
 ​
 < ! -- relauch：关闭所有页面，然后打开小程序中某一个页面 -- >
 <navigator open-type="reLaunch" url="/pages/list/list">到商品列表页面</navigator>
 <navigator open-type="reLaunch" url="/pages/cate/cate">到商品分类页面</navigator>

在list.wxml文件中：


< !-- navigateBack：返回上一页或者前几页，默认只能返回上一页 -- >
 < !-- delta：返回的层级，默认为1，如果想返回几级，就写几 -- >
 ​
 <navigator open-type="navigateBack">返回上一页（1）</navigator>
 <navigator delta="1" open-type="navigateBack">返回上一页（1）</navigator>

传参事列：


<navigator url="/pages/list/list?id=10&num=hua">到商品列表页面</navigator>
 <navigator open-type="switchTab" url="/pages/cate/cate?id=10&num=hua">到商品分类页面</navigator>

功能实现：


<view>
     <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
    </navigator>
</view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
    </navigator>
</view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
 </navigator>
</view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
  </navigator>
</view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
</navigator>
</view>

写完跳转功能后页面会出现格式不齐，在修改一下index.scss弹性布局。将原来的布局套上navigator。


navigator{
             display: flex;
         flex-direction: column;
         }

(7)推荐商品区域

在小程序中想实现内容滚动，需要使用scroll-view组件

scroll-view：可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。

  1. scroll-x：允许横向滚动

  2. scroll-y：允许纵向滚动

基础：


 <scroll-view class="scroll-x" scroll-x="">
     <view>1</view>
     <view>2</view>
     <view>3</view>
</scroll-view>
 <scroll-view class="scroll-y" scroll-y="">
     <view>1</view>
     <view>2</view>
     <view>3</view>
</scroll-view>



.scroll-x{
     width: 100%;
     // nowrap阻止源码中的文本换行
      white-space: nowrap;
     background-color: skyblue;
     view{
         display: inline-block;
         width: 300rpx;
         height: 80rpx;
         &:last-child{
             background-color: lightgreen;
         }
         &:first-child{
             background-color: lightpink;
         }
     }
 }
 .scroll-y{
     height: 400rpx;
     background-color: lightseagreen;
     margin-top: 10rpx;
 ​
     view{
         height: 400rpx;
     &:last-child{
         background-color: rgb(45, 98, 167);
     }
     &:first-child{
         background-color: lightpink;
     }
 }
 }

功能实现：



   <view>
     <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
     </navigator>
    </view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
     </navigator>
    </view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
     </navigator>
    </view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
     </navigator>
    </view>
     <view>
         <navigator url="/pages/list/list">
       <img mode="" src="/assets/images/cate-1.png" />
         <text>鲜花玫瑰</text>
     </navigator>
    </view>
</view>
 
 <view class="good-hot">
 < scroll-view class="scroll-x" scroll-x="">
 <view>
     <view class="good-item">
       <img mode="" src="/assets/floor/1.jpg" />
         <text>粉玫瑰</text>
         <text>99</text>
    </view>
</view>
 ​
 <view>
     <view class="good-item">
       <img mode="" src="/assets/floor/3.jpg" />
         <text>粉玫瑰</text>
         <text>99</text>
    </view> 
</view>
 ​
 ​
 <view>
     <view class="good-item">
       <img mode="" src="/assets/floor/4.jpg" />
         <text>粉玫瑰</text>
         <text>99</text>
    </view>
</view>
 ​
 <view>
     <view class="good-item">
       <img mode="" src="/assets/floor/5.jpg" />
         <text>粉玫瑰</text>
         <text>99</text>
    </view>
</view>
 ​
 <view>
     <view class="good-item">
       <img mode="" src="/assets/floor/2.jpg" />
         <text>粉玫瑰</text>
         <text>99</text>
    </view>
</view>
 ​
</scroll-view>
</view>





// 推荐商品区域
 .good-hot{
     background-color: #efefef;
     border-radius: 10rpx;
     font-size: 24rpx;
     margin-top: 26rpx;
  .scroll-x{  width: 100%;
      white-space: nowrap;
      view{
          display: inline-block;
          width: 320rpx;
          height: 420rpx;
          margin-right: 16rpx;
          .good-item{
              display: flex;
              flex-direction: column;
              justify-content:space-between;
              text{
                 //  第一个text加粗
                  &:nth-of-type(1){
                      font-weight: bold;
                  }
                 }
             }
          image{
              width: 100%;
              height: 320rpx;
          }
          &:last-child{
             margin-right: auto;
         }
      }
  }
}

(8)字体图标的使用

 小程序中的字体图标使用方式与web相似

iconfont平台

1.在平台上获取代码

在搜索框搜索需要的图标

选中图标点击添加入库

点击后右上角购出现物车图标上提示点开

点击添加到项目（没有项目新建一个即可）

这里是点击了wx小程序项目

点击更新代码

点击确认

点击生成的//….css,得到代码

2.将代码放入项目中

新建文件夹和文件：在案例中放入了icon/iconfont.wxss文件中

在app.wxss中添加@import  用于图标使用

3.使用图标

class=“inconfont icon-haoping”中icon-haoping 为图标的名称 在保存下来的代码中（iconfont.wxss）可以找到每个图标对应的名称

效果展示：

(9)背景图片的使用

在微信小程序中，我们可以使用background-image属性来设置元素的背景图片。

注意事项：

小程序的background-image不支持本地路径！需要使用网络图片，或者base64，或者使用<image/>组件。


.bg-image{
	height: 400rpx;
	// 小程序背景图的地址不能写本地路径,不能实现
	// background-image: url(../../assets/banner/banner-1.jpg);
 
	// 可以使用网络途径替换本地途径，可以实现
	// background-image: url(http://8.131.91.46:6677/bgimage.png);
 
	// 也可以将图片转换成base64的格式，然后使用（不建议）
	background-image: url();
}




<view class="bg-image"></view>

如没特殊注明，文章均为常州建网站公司原创,转载请注明来自：http://www.dujujiangxin.cn/news/wechat/1135.html

文章关键词
小程序开发教程
南京网站建设_无锡小程序APP开发_微信分销商城开发-独居匠心科技公司
网站建设微信公众账号

扫一扫微信二维码

文章列表
上一篇
下一篇