微信小程序-项目记

• radio
• 自定义组件
• 事件绑定
• 属性绑定
• 路由跳转
• wx:for="{{}}"

radio

在使用radio的时候，遇到了一些问题。

1. 外层包裹radio-group
2. js中使用setData
3. radio 样式写在radio .wx-radio-input里
4. 选中样式写在radio .wx-radio-input.wx-radio-input-checked
5. 选中样式的background 一定要加 !important
6. 伪类radio .wx-radio-input.wx-radio-input-checked::before 有一个默认缩放，所以如果想全部填充满，需要设置 transform: scale(1);
7. 微信单选默认的对号√ ，在伪类:: before 的 content 中
8. 想像原生一样通过label隐藏input自定义单选按钮样式在微信小程序是不可行的。
   9.值在 e.detail.value

效果图

.wxml

<view class="radioGroupWrap">
  <view class="radioGroupTitle">事件类型</view>
  <view class="radioGroup">
  <radio-group class="radioGroup" bindchange="radioChange">
    <label class="radioGroupCell">
      <radio value="1"></radio>
      <view class="radio">
        <image src="/static/image/xuanzhong.png" class="radioBg"></image>
      </view>疫情求助
    </label>
    <label class="radioGroupCell">
      <radio value="2"></radio>
      <view class="radio"></view>线索反馈
    </label>
    <label class="radioGroupCell">
      <radio value="3"></radio>
      <view class="radio"></view>其他情况
    </label>
  </radio-group>
  </view>
</view>

.wxss

/* radio */
.radioGroupWrap {
  border-bottom: 1rpx solid #d8d8d8;
}
.radioGroupTitle {
  margin-top: 38rpx;
  width: 100%;
  color: #333;
  font-size: 30rpx;
  line-height: 36rpx;
}
.radioGroup {
  display: flex;
  flex-wrap: wrap;
  font-size: 36rpx;
  color: #333;
  line-height: 88rpx;
  min-height: 88rpx;
}
.radioGroupCell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: 30rpx;
}
radio {
  font-size: 0;
  outline: none;
  padding: 0;
}
radio .wx-radio-input {
  /* display: none; */
  display: inline-block;
  position: relative;
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
  border: 1rpx solid #c2c2c2;
  background: #efefef;
  border-radius: 50%;
  /* border-radius: 0; */
  box-sizing: border-box;
  overflow: visible;
}
.radioGroupCell .radio {
  display: inline-block;
  position: relative;
  width: 36rpx;
  height: 36rpx;
  margin-right: 8rpx;
  border: 1rpx solid #c2c2c2;
  background: #efefef;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
radio .wx-radio-input.wx-radio-input-checked {
  background: #005EF8!important;
  /* background: transparent!important; */
  border: 0;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  position: absolute;
  width: 36rpx!important;
  height: 36rpx!important;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: scale(.7);
}

使用组件

使用自定义的组件时，按照文档写完引入，引入路径是相对目录，引入完成后页面却加载不出组件，多方查看，发现使用的页面最外层写的标签是 <text> 换成 <view> 标签后组件出现。

事件绑定

使用微信小程序时与之前使用react、vue进行数据绑定有很大区别。

1. 使用 bind+事件 进行绑定，且绑定后面只能有函数名，不能带参数。
2. 如果需要进行传参，需要使用 `data-参数名 = 参数`` 的形式进行数据绑定。

<li
	class="item"
	bindtap="go"
	data-path="/home">
	home
</li>

js中

go(e) {
  console.log(e.currentTarget.dataset)
}

三元运算符

bindtap="{{unclick?'':'query'}}"

必须加单引号

属性绑定

之前使用vue习惯绑两个class，一个公共的一个私有的，发现微信如果属性名如果出现两次，后面的会覆盖前面的。

路由跳转

跳转带的参数，在 this.options 中