微信和支付宝小程序样式，页面处理细节笔记

大巨头
463 阅读2分钟

一小程序样式

多个样式页面展示处理

<view class="drawer-mask {{show?'drawer--open':''}}"></view>
    <view
      class="c-tabbar__inner {{showMore && tabList.length > 4 ? 'c-tabbar__inner_more' : ''}}"
    ></view>

样式命名规则

第三个使用双下划线"__"隔离,其他都用连字号"-"

或者

功能(模块)__组件名格式

或者

ui框架-组件_属性

aaa-bbb__ccc-ddd
search__input
tabs__item 
weui-btn_default

使用js控制的样式命名用双连字号“--”

功能(模块)--属性--属性

u-button--active--plain
微信小程序模版
.t-grid-item--hover {
  background-color: #f2f3f5;
}
.t-grid-item--horizontal .t-grid-item__content,
.t-grid-item--horizontal .t-grid-item__words {
  flex-direction: row;
}

在uniapp开发中使用的css格式

参考

这样分层

.u-button {
    height: $u-button-u-button-height;
    position: relative;
    align-items: center;
    justify-content: center;
    @include flex;
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    flex-direction: row;

    &__text {
        font-size: $u-button-text-font-size;
    }

    &__loading-text {
        font-size: $u-button-loading-text-font-size;
        margin-left: $u-button-loading-text-margin-left;
    }

    &--large {
        /* #ifndef APP-NVUE */
        width: $u-button-large-width;
        /* #endif */
        height: $u-button-large-height;
        padding: $u-button-large-padding;
    }
}

页面写法

  <text
                    class="u-button__text"
                    :style="[{ fontSize: textSize + 'px' }]"
                    >{{ text }}</text>
1. 微信和支付宝小程序页面和样式风格
  1. 微信小程序样式多层级写法
	<view class="goods-info">
			<view class="goods-number">
				<view class="goods-price">
					<price
					  wr-class="class-goods-price"
					  symbol-class="class-goods-symbol"
					  price="{{minSalePrice}}"
					  type="lighter"
					/>
					<view class="goods-price-up">起</view>
					<price wr-class="class-goods-del" price="{{maxLinePrice}}" type="delthrough" />
				</view>
				<view class="sold-num">已售{{soldNum}}</view>
			</view>
			<view wx:if="{{activityList.length > 0}}" class="goods-activity" bindtap="showPromotionPopup">
				<view class="tags-container">
					<view
					  wx:for="{{activityList}}"
					  data-promotionId="{{item.promotionId}}"
					  wx:key="index"
					  wx:if="{{index<4}}"
					>
						<view class="goods-activity-tag">{{item.tag}}</view>
					</view>
				</view>
				<view class="activity-show">
					<view class="activity-show-text">领劵</view>
					<t-icon name="chevron-right" size="42rpx" />
				</view>
			</view>
			<view class="goods-title">
				<view class="goods-name">{{details.title}}</view>
				<view class="goods-tag">
					<t-button open-type="share" t-class="shareBtn">
						<view class="btn-icon">
							<t-icon name="share" size="32rpx" />
							<view class="share-text">分享</view>
						</view>
					</t-button>
				</view>
			</view>
			<view class="goods-intro">{{intro}}</view>
		</view>

.goods-detail-page .goods-info .goods-price {
  display: flex;
  align-items: baseline;
}

.goods-detail-page .goods-info .goods-price-up {
  color: #fa4126;
  font-size: 28rpx;
  position: relative;
  bottom: 4rpx;
  left: 8rpx;
}

.goods-detail-page .goods-info .goods-price .class-goods-price {
  font-size: 64rpx;
  color: #fa4126;
  font-weight: bold;
  font-family: DIN Alternate;
}

.goods-detail-page .goods-info .goods-price .class-goods-symbol {
  font-size: 36rpx;
  color: #fa4126;
}

		<view class="goods-title">
				<view class="goods-name">{{details.title}}</view>
				<view class="goods-tag">
					<t-button open-type="share" t-class="shareBtn">
						<view class="btn-icon">
							<t-icon name="share" size="32rpx" />
							<view class="share-text">分享</view>
						</view>
					</t-button>
				</view>
			</view>


.goods-detail-page .goods-info .goods-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.goods-detail-page .goods-info .goods-title .goods-name {
  width: 600rpx;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 32rpx;
  word-break: break-all;
  color: #333333;
}
.goods-detail-page .goods-info .goods-title .goods-tag {
  width: 104rpx;
  margin-left: 26rpx;
}

.goods-detail-page .goods-info .goods-title .goods-tag .shareBtn {
  border-radius: 200rpx 0px 0px 200rpx;
  width: 100rpx;
  height: 96rpx;
  border: none;
  padding-right: 36rpx !important;
}

.goods-detail-page .goods-info .goods-title .goods-tag .shareBtn::after {
  border: none;
}

.goods-detail-page .goods-info .goods-title .goods-tag .btn-icon {
  font-size: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 96rpx;
  color: #999;
}

.goods-detail-page .goods-info .goods-title .goods-tag .btn-icon .share-text {
  line-height: 32rpx;
}
  1. 微信自定义组件事件方法

组件

<!-- 在自定义组件中 -->
<button bindtap="onTap" data-index="8888">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(event){
      var myEventDetail = event.currentTarget.dataset; // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

页面

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的 detail 对象
    //这里获得8888
  }
})

options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  },
  1. 页面底部横线 不使用border-bottom的方法
.comments-card-item::after {
  content: '';
  position: absolute;
  bottom: 0rpx;
  width: 686rpx;
  height: 2rpx;
  background-color: #f5f5f5;
}

还可以用view

  <view class="commodity-divider"></view>

css代码

.commodity-divider {
  border-top: 1rpx solid #eee;
  margin: 20rpx 24rpx;
}
  1. 处理滚动
 -webkit-overflow-scrolling: touch;

参考文章：www.cnblogs.com/xiahj/p/803…

  1. 支付宝小程序样式 多层次写法
<view class="commodity-info">
      <image
        class="commodity-info__cover"
        src="{{currentCommodity.cover}}"
        mode="scaleToFill"
      />
      <view class="commodity-info__right">
        <view class="commodity-info__price-section">
          <view class="commodity-info__price-icon">¥</view>
          <view class="commodity-info__price">{{currentCommodity.price}}</view>
        </view>
        <view class="commodity-info__storage">库存{{currentCommodity.storage}}件</view>
        <view class="commodity-info__type">已选：{{currentCommodity.type}}</view>
      </view>
    </view>

.commodity-info {
  display: flex;
  padding: 32rpx 24rpx 36rpx;
}
.commodity-info__cover {
  width: 220rpx;
  height: 220rpx;
  flex-shrink: 0;
}
.commodity-info__right {
  margin-left: 30rpx;
}
.commodity-info__price-section {
  padding-top: 61rpx;
  display: flex;
  align-items: baseline;
}
.commodity-info__price-icon,
.commodity-info__price {
  color: #ff5000;
  line-height: 36rpx;
}
.commodity-info__price-icon {
  font-size: 26rpx;
  margin-right: 5rpx;
}
.commodity-info__price {
  font-size: 40rpx;
}
.commodity-info__storage {
  margin-top: 13rpx;
  font-size: 24rpx;
  color: #999;
  line-height: 24rpx;
}
.commodity-info__type {
  font-size: 24rpx;
  color: #333;
  line-height: 24rpx;
  margin-top: 40rpx;
}
  1. 判断列表选中方法

页面展示

<view class="select-group">
  <view
    a:for="{{options}}"
    class="select-col"
  >
    <view
      data-id="{{item.id}}"
      onTap="onSelectOption"
      class="select-item {{selectedOptionId===item.id?'select-item--active':''}}"
    >
      {{item.name}}
    </view>
  </view>
</view>

js代码

Component({
  mixins: [],
  data: {},
  props: {
    options: [],
    selectedOptionId: "",
    onSelectOption: () => {},
    identifyId: "99",
  },
  didMount() {},
  didUpdate() {},
  didUnmount() {},
  methods: {
    onSelectOption(e) {
      console.log("aaa",e,e.target.dataset.id+"88888",this.props.identifyId+"-n7");
      this.props.onSelectOption(e.target.dataset.id, this.props.identifyId);//调用父级页面方法
    },
  },
});
2 微信和支付宝小程序页面结构
components公共组件
页面目录1
|
|--页面目录二
   |
   |components组件目录
   |	|
   |	|内部组件一
   |	|内部组件二
   |页面.js
   |页面.axml/wxml
   |页面.json
   |页面.acss/wxml
  1. 微信判断提示信息
 confirm() {
    const { minVal, maxVal } = this.data;
    let message = '';
    if (minVal && !maxVal) {
      message = `价格最小是${minVal}`;
    } else if (!minVal && maxVal) {
      message = `价格范围是0-${minVal}`;
    } else if (minVal && maxVal && minVal <= maxVal) {
      message = `价格范围${minVal}-${this.data.maxVal}`;
    } else {
      message = '请输入正确范围';
    }
    if (message) {
      Toast({
        context: this,
        selector: '#t-toast',
        message,
      });
    }
    this.pageNum = 1;
    this.setData(
      {
        show: false,
        minVal: '',
        goodsList: [],
        loadMoreStatus: 0,
        maxVal: '',
      },
      () => {
        this.init();
      },
    );
  },
  1. 行数截断
.goods-list-wrap .wr-goods-card .wr-goods-card__content .wr-goods-card__title {
  overflow: hidden;
  margin-bottom: 24rpx;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  font-size: 26rpx;
  line-height: 36rpx;
  font-weight: 400;
}
  1. 字符串大小转换
 if (String(code).toUpperCase() === 'SUCCESS') {
        const { popularWords = [] } = data;
        this.setData({
          popularWords,
        });
      }

let code="aaa"; 
let b=String(code).toUpperCase();
b
'AAA

参考文章 juejin.cn/post/701131…

  1. 判断利用空为false展示数据
	<view class="category-goods-list" wx:if="{{goodsList.length}}">
		<goods-list
		  wr-class="wr-goods-list"
		  goodsList="{{goodsList}}"
		  bind:click="gotoGoodsDetail"
		  bind:addcart="handleAddCart"
		/>
	</view>
  1. 空格处理和使用
	<text decode>&nbsp;</text>
	<text class="bold-price" decode="{{true}}">实付&nbsp;</text>
  1. setData中的值可以是函数(方法)
			<text class="order-no normal-color">{{formatCreateTime}}</text>

  import { formatTime } from '../../../utils/util';
this.setData({
        order,
        _order,
        formatCreateTime: formatTime(
          parseFloat(`${order.createTime}`),
          'YYYY-MM-DD HH:mm',
        ), // 格式化订单创建时间
        countDownTime: this.computeCountDownTime(order),
        addressEditable:
          [OrderStatus.PENDING_PAYMENT, OrderStatus.PENDING_DELIVERY].includes(
            order.orderStatus,
          ) && order.orderSubStatus !== -1, // 订单正在取消审核时不允许修改地址（但是返回的状态码与待发货一致）
        isPaid: !!order.paymentVO.paySuccessTime,
        invoiceStatus: this.datermineInvoiceStatus(order),
        invoiceDesc: order.invoiceDesc,
        invoiceType:
          order.invoiceVO?.invoiceType === 5 ? '电子普通发票' : '不开发票', //是否开票 0-不开 5-电子发票
        logisticsNodes: this.flattenNodes(order.trajectoryVos || []),
      });
  1. 依赖包在package.json文件中

如

 "dayjs": "^1.9.3",
 "tdesign-miniprogram": "^0.7.1",

{
  "name": "supermarket-pages",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint --cache --fix --ext .js",
    "check": "node config/eslintCheck.js"
  },
  "author": "",
  "license": "ISC",
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && npm run check"
    }
  },
  "lint-staged": {
    "*.{js, ts}": "eslint --cache --fix",
    "*.{js,ts,css,less}": "prettier --write"
  },
  "dependencies": {
    "dayjs": "^1.9.3",
    "tdesign-miniprogram": "^0.7.1",
    "tslib": "^1.11.1"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.3.0",
    "lint-staged": "^10.0.8",
    "prettier": "^2.1.2"
  }
}
  1. 页面可以多用 wxs处理逻辑
<wxs module="tools">
	function isBigValue(value) {
	var values = (value + '').split('.');
	if (values[1] && values[0].length >= 3) return true;
	else return false
	}

	function getBigValues(value) {
	return value.split('.');
	}

	module.exports = { isBigValue: isBigValue, getBigValues: getBigValues };
</wxs>

二 js的push和concat区别

let ab=["a","b"];
let ad=["c","d"];
let tempA=ab.concat(ad);
tempA
(4) ['a', 'b', 'c', 'd']
let ac=["e","f"];
let tempB=ac.push(...ad);
tempB
4
ac
(4) ['e', 'f', 'c', 'd']

说明

concat 返回是新的数组，原数组不变。

push 返回的是长度，原来的数组发生改变。

参考：blog.csdn.net/sd4015700/a…

avatar
文章
阅读
粉丝