胡伟明

最近在设计一个微信小程序，记录一下自己犯过的错误：

1：获取的数字如果想加一个另外一个数的话，需要*1后再加

比如this.data.num1的值为60，如果写成下面的形式的话得出的值为60273

this.data.num1+273

而正确的写法是：

this.data.num1*1+273

2：下拉框

wxml代码

<view class='top'>
    <view class='top-text'> 选择接收班级</view>
    <!-- 下拉框 -->
    <view class='top-selected' bindtap='bindShowMsg'>
      <text>{{grade_name}}</text>
      <image src='/images/icon/down.png'></image>
    </view>
    <!-- 下拉需要显示的列表 -->
    <view class="select_box" wx:if="{{select}}">
      <view wx:for="{{grades}}" wx:key="unique">
        <view class="select_one" bindtap="mySelect" 
    data-name="{{item}}">{{item}}
           </view> 
        </view> 
    </view> 
</view>

wxss代码

/* 顶部 */
.top{
  width: 100vw;
  height: 80rpx;
  padding: 0 20rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  border-bottom: 1px solid #000;
}
.top-text{
  float: left
}
/* 下拉框 */
.top-selected{
    width: 50%;
    display: flex;
    float: right;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0 10rpx;
    font-size: 30rpx;
}
/* 下拉内容 */
.select_box {
    background-color: #fff;
    padding: 0 20rpx;
    width: 50%;
    float: right;
    position: relative;
    right: 0;
    z-index: 1;
    overflow: hidden;
    text-align: left;
    animation: myfirst 0.5s;
    font-size: 30rpx;
}
.select_one {
    padding-left: 20rpx;
    width: 100%;
    height: 60rpx;
    position: relative;
    line-height: 60rpx;
    border-bottom: 1px solid #ccc;
}
/* 下拉过度效果 */
@keyframes myfirst {
    from {
        height: 0rpx;
    }
 
    to {
        height: 210rpx;
    }
}
/* 下拉图标 */
.top-selected image{
  height:50rpx;
  width:50rpx;
  position: absolute;
  right: 0rpx;
  top: 20rpx;
}

js代码

/**
   * 页面的初始数据
   */
  data: {
    select:false,
    grade_name:'--请选择--',
    grades: [
        '猛犸机器人1班',
        '猛犸机器人2班',
        '口才1班',
      ]
  },/**
 *  点击下拉框
 */
  bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },
/**
 * 已选下拉框
 */
  mySelect(e) {
    console.log(e)
    var name = e.currentTarget.dataset.name
    this.setData({
      grade_name: name,
      select: false
    })
  },

效果如下图：

3.函数对应关系

LN在小程序里面是Math.log在VB里面是log

4.函数调用

this+函数名

6.定义固定长度的数组

var r = new Array(5);长度为5

7.将变量转为字符串

.toString()

比如：

this.data.grade_name1.toString()

8.生成json文件不能用text改后缀来生成，最好是用网上的工具来生成，要不然中文会乱码。

9.表格源码

table.wxml
<view class="table">
  <view class="tr bg-w">
    <view class="th">head1</view>
    <view class="th">head2</view>
    <view class="th ">head3</view>
  </view>
  <block wx:for="{{listData}}" wx:key="{{code}}">
    <view class="tr bg-g" wx:if="{{index % 2 == 0}}">
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td">{{item.code}}</view>
      <view class="td">{{item.text}}</view>
      <view class="td">{{item.type}}</view>
    </view>
  </block>
</view>

table.wxss

.table {
  border: 0px solid darkgray;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
    width:40%;
    justify-content: center;
    text-align: center;
}
.bg-w{
  background: snow;
}
.bg-g{
  background: #E6F3F9;
}
.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

table.js

Page({
  data: {
    listData:[
      {"code":"01","text":"text1","type":"type1"},
      {"code":"02","text":"text2","type":"type2"},
      {"code":"03","text":"text3","type":"type3"},
      {"code":"04","text":"text4","type":"type4"},
      {"code":"05","text":"text5","type":"type5"},
      {"code":"06","text":"text6","type":"type6"},
      {"code":"07","text":"text7","type":"type7"}
    ]
  },
  onLoad: function () {
    console.log('onLoad') 
  }

})

效果图如下