返回
快速导航关闭
当前搜索
网站分类
栏目推荐
实用工具
热门标签
子分类:
创奇学院 >微信 >小程序 >微信小程序 » 正文

微信开发者工具API,微信小程序组件化开发

微信小程序 更新时间: 发布时间: 微信小程序归档 最新发布 网站地图

前言

本来没打算写这篇文章,因为自己主要在搞Java相关的,前端的仅仅是使用。但是最近由于开发人手不够,一个人被迫开启全栈,一边写接口一边写页面,刚好项目中有一个需求,所以尝试使用自定义组件开发这块,开始前浅浅看了一下开发者文档【微信开发者文档-组件化】。下面就一起来看一下吧。

项目需求

小程序中有一个页面显示四六级相关内容,卡片内容分为如下四种样式,整体布局是一样的,差异出现在细节的样式,如果不考虑组件开发,那我们直接写完一个,其他三个改一改样式就可以了,这样做虽然没有什么不妥,但前端开发也要有所追求,精简代码必须得试试。接下来我们根据项目需求来使用一般方式和组件化方式浅试一下。


一般方式开发

第一步:分析布局

根据UI设计分析其中一个的整体布局方式;


第二步:编写代码

  1. 选择使用flex布局方式完成整体布局;实现细节不做赘述

<view class="cet-box-1"><!-- 第一块 -->  <view class="cet-boxa-s">    <view class="boxa-s-left">      <view class="boxa-left-1">        <text class="boxa-left-text-1">CET-4</text>      </view>      <text class="boxa-left-title-1">四级听力</text>    </view>    <view class="boxa-s-right-1">第一套听力</view>  </view><!-- 第二块 -->  <view class="cet-boxb-s">    <view class="boxb-s-left-1">2021.12</view>    <view class="boxb-s-right-1">      <text class="boxb-s-text-1">进入环境</text>    </view>  </view><!-- 第三块 -->  <view class="cet-boxc-s">    <view class="boxc-s-left">      <image class="jinbi" src="/images/jinbi-s-1.png"></image>      <text class="box-tip-1">2币/天 | 10币/周</text>    </view>  </view>  <image class="tag-1" src="/images/cet-1.png"></image>  </view>/* pages/CET/CET.wxss */.cet-box-1 {  /* 自动布局 */  display: flex;  flex-direction: column;  align-items: center;  width: 335px;  height: 119px;  background: linear-gradient(91.81deg, #3D4896 -0.63%, #7B85CF 69.88%);  border-radius: 10px;  margin-bottom: 22px;}.cet-boxa-s {  /* 自动布局 */  display: flex;  flex-direction: row;  justify-content: space-between;  align-items: flex-start;  width: 291px;  height: 20px;  margin-top: 14px;  /* background-color: aqua; */}.boxa-s-left {  /* 自动布局 */  display: flex;  flex-direction: row;  align-items: center;  gap: 5px;  width: 120px;  height: 20px;  /* background-color: blue; */}.boxa-left-1 {  /* 自动布局 */  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  width: 59px;  height: 20px;  background: #FFFFFF;  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);  border-radius: 56px;}.boxa-left-title-1 {  width: 56px;  height: 20px;  font-family: 'PingFang SC';  font-style: normal;  font-weight: 500;  font-size: 14px;  line-height: 20px;  color: #FFFFFF;}.boxa-left-text-1 {  width: 39px;  height: 17px;  font-family: 'PingFang SC';  font-style: normal;  font-weight: 400;  font-size: 12px;  line-height: 17px;  color: #3D4896;}.boxa-s-right-1 {  width: 70px;  height: 20px;  font-family: 'PingFang SC';  font-style: normal;  font-weight: 500;  font-size: 14px;  line-height: 20px;  text-align: right;  color: #FFFFFF;}.cet-boxb-s {  display: flex;  flex-direction: row;  justify-content: space-between;  align-items: center;  width: 291px;  height: 38px;  margin-top: 8px;  /* background-color: aquamarine; */}.boxb-s-left-1 {  width: 95px;  height: 38px;  font-family: 'PingFang SC';  font-style: normal;  font-weight: 500;  font-size: 27px;  line-height: 38px;  color: #FFFFFF;}.boxb-s-right-1 {  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;  width: 88px;  height: 28px;  background: #FFFFFF;  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);  border-radius: 56px;}.boxb-s-text-1 {  width: 64px;  height: 22px;  font-family: 'PingFang SC';  font-style: normal;  font-weight: 500;  font-size: 16px;  line-height: 22px;  color: #3D4896;}.cet-boxc-s {  display: flex;  flex-direction: row;  width: 291px;  height: 20px;  /* background-color: aqua; */  align-items: center;  margin-top: 8px;}.boxc-s-left {  display: flex;  flex-direction: row;  align-items: center;  width: 120px;  height: 14px;}.jinbi {  width: 14px;  height: 14px;}.box-tip-1 {  width: 90px;  height: 14px;  font-family: 'PingFang SC';  font-style: normal;  font-weight: 400;  font-size: 12px;  line-height: 17px;  color: #FFFFFF;  margin-left: 4px;}.tag-1 {  position: absolute;  width: 185px;  height: 55px;  z-index: 0;  margin-top: 53px;  margin-left: 115px;}

第三步:效果预览

  1. 实现的效果如图;


第四步:对比差异修改样式

  1. 对比其他三个的差异,简单修改样式后直接C、V完成;


转载请注明:文章转载自 http://www.320g.com/
本文地址:http://www.320g.com/wxxcx/16041.html
考高分网交流群

扫一扫加入QQ交流群

和更多志同道合朋友一起交流,分享干货资料!
创奇学院客服

扫一扫加客服微信

有疑问请咨询创奇学院微信号,在线为您解答!
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 Copyright 320g.com Rights Reserved. Powered · 创奇学院

ICP备案号:陇ICP备2020003353号