小程序小tips

零碎知识

var命令存在变量提升效用，let命令没有这个问题。let优于var，完全可以替换。

设置文本指定长度

超出部分隐藏

在当前网页前面

<wxs module="intercept">
  var substr = function (val, len) {
    if (val.length == 0 || val == undefined) {
      return false;
    } else if (val.length > len) {
      return val.substring(0, len) + "...";
    } else {
      return val;
    }
  }
  module.exports.substr = substr
</wxs>

在网页中

<view class="invitation">
  <view class="invitation_1">
    <view class="invitation_1_1" wx:for="{{json.invitation.length / 2}}" wx:key="index" data-index="{{index}}">
      <view>
        <image style="border-radius: 50%;" src="{{json.invitation[index*2] == '' ? image_url : json.invitation[index*2]}}" mode=""/>
      </view>
      <view>
        <text style="font-size: small;">{{intercept.substr(json.invitation[index*2+1], 3)}}</text>
      </view>
    </view>
  </view>
</view>

效果图

一行内容指定宽度后面隐藏

CSS

.text_width {
  position: relative;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

网页中

<view class="qa">
  <view class="qa_1">
    <view style="font-size: larger;width: 100%;height: 20px;">
      <text style="position: relative;float: left;width: 50%;">最新问答</text>
      <text style="position: relative;float: right;width: 50%;text-align: right;font-size: smaller;" bindtap="flash_qa">刷新</text>
    </view>
    <view class="qa_2 border" wx:for="{{json.qa}}" wx:if="{{index == random}}" wx:key="index" data-index="{{index}}" bindtap="aq">
      <view>
        <view class="qa_q">
          <text>问</text>
        </view>
        <view class="text_width qa_a">
          <text>{{item[1]}}</text>
        </view>
      </view>
      <view>
        <view class="qa_q">
          <text>答</text>
        </view>
        <view class="text_width qa_a">
          {{item[2]}}
        </view>
        <view>
          <text style="position: relative;font-size: smaller;color: grey;">>>>全部{{item.length-1}}条回答</text>
        </view>
      </view>
    </view>
  </view>
</view>

效果图

flex比例布局

css

.recommend {
  position: relative;
  margin: 2%;
  margin-top: 5%;
}
.recommend_1 {
  position: relative;
  margin: 2%;
  width: 96%;
  padding-bottom: 5px;
}
.recommend_1 view view {
  position: relative;
  padding: 2px 0;
}

网页中

<view class="recommend">
  <view class="recommend_1 border" wx:for="{{json_2}}" wx:key="index" bindtap="to_select_num" data-index="{{index}}">
    <view style="position: relative;display: flex;">
      <view style="position: relative;width: 70px;float: left;padding-top: 10px;flex: 2;">
        <image style="position: relative;width: 50px;height: 50px;left: 10px;" src="{{image_url}}" mode="" />
      </view>
      <view style="position: relative;float: left;flex: 8;">
        <view>{{item.other[1]}} {{item.other[2]}}</view>
        <view>{{item.other[3]}}</view>
        <view class="text_width" style="width: 100%;"><text wx:for="{{item.content}}" wx:key="index">{{item}} </text></view>
        <view>{{item.other[4]}}</view>
        <view style="position: relative;width: 100%;">
          <view style="position: relative;width: 25%;margin: 0 8%;float: left;text-align: center;background-color: rgb(102, 243, 125);border-radius: 40px;" bindtap="to_q">去提问</view>
          <view style="position: relative;width: 25%;margin: 0 8%;float: left;text-align: center;background-color: rgb(109, 184, 255);border-radius: 40px;" bindtap="to_c">合作</view>
        </view>
      </view>
    </view>
  </view>
</view>

效果图

对话聊天布局

css

image {
  width: 40px;
  height: 40px;
}
.border {
  border-radius: 20px;
  border-color: rgb(198, 228, 255);
  border-width: 1px;
  border-style: solid;
}
.details {
  position: relative;
  margin: 2%;
}
.left_chat {
  position: relative;
  float: left;
  background-color: rgb(101, 187, 245);
}
.right_chat {
  position: relative;
  float: right;
  background-color: rgb(109, 255, 72);
}
/* .chat {
  position: relative;
} */
.text_center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text_row {
  position: relative;
  max-width: 250px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: auto;
}

网页

<view class="details">
  <view class="border" style="height: 50px;border-radius: 0;border-width: 0 0 1px 0;">
    <view style="position: relative;float: left;width: 15%;">
      <image src="{{image_url}}" mode="" />
    </view>
    <view style="position: relative;float: left;">
      <text style="line-height: 50px;">不愿透露真名的帅哥</text>
    </view>
  </view>
  <view style="position: relative;width: 100%;top: 20px;display: flex;flex-direction: column;" wx:for="{{json[num].length}}" wx:if="{{index != 0}}" wx:key="index" data-index="{{index}}">
    <view style="position: relative;margin: 5px 0;">
      <view style="position: relative;width: 10%; {{index % 2 == 1 ? 'float: left;' : 'float: right;'}}">
        <image class="border" style="border-radius: 50%;width: 40px;height: 40px;" src="{{image_url}}" mode="" />
      </view>
      <view style="position: relative;width: 90%;">
        <view class="chat {{index % 2 == 1 ? 'left_chat' : 'right_chat'}}" style="position: relative;padding: 10px 10px; {{index % 2 == 1 ? 'float: left;left: 10px;' : 'float: right;right: 10px;'}}" class="border text_center text_row">
          {{json[num][index]}}
        </view>
      </view>
    </view>
  </view>
</view>

效果图

图片比例放缩

css

img{
	width: 50px;
	height: 50px;
	object-fit: contain;
}

效果图

图片放缩