第一次写微信小程序记录学习点<一>

1、子类组件：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    itemArray: {
      type: Array,
      default: []
    },
    isShow: {
      type: Boolean,
      default: false
    },
    rightBtnTitle: {
      type: String,
      default: '修改订单数量'
    }
  },

组件事件回调:

methods: {
    // 订单详情
    handleOrderDetail: function (e) {
      console.log('订单', e, this.data.orderItem.id)
      wx.setStorage({
        key: "isNewMallOrder",
        data: this.data.orderItem.isNewMallOrder,
      });
      // 1 获取点击的id
      const { id } = e.currentTarget.dataset;
      // 2 触发 父组件中的事件 自定义
      this.triggerEvent("handleOrderDetail", { id });
    },

在要使用组件类导入，使用:

{
  "usingComponents": 
    "cartPopup": "../../components/cart-popup/cart-popup",
  },
  "navigationBarTitleText": ""
}

<cartPopup itemArray="{{alertDataArray}}"></cartPopup>

2、debugger进行调试、抓包调试：

3、使用Vant Weapp快速构建UI:

https://youzan.github.io/vant-weapp/#/quickstart

4、textarea、input等控件安卓真机出现莫名其妙的黑线：

注意css样式是否设置了line-height。
或者添加overflow：hidden;即可。
或者是textarea的滚动条，设置line-height高一点。

5、textarea展示placeholder对齐问题：

<textarea wx:if="{{showTextarea || detailInputAddress}}" value="{{detailInputAddress}}" focus="{{focus}}" bindinput="handleDetailAddressInput" placeholder="填写详细地址，不少于5个字" placeholder-style="color:#cccccc;margin-top: 10rpx;" bindblur="handleInputEnd" maxlength="100" auto-height="true"></textarea>
    <view class="textareaTextBox" style="{{detailInputAddress ? 'color:#1E1E1E;' : ''}}" wx:else bindtap="handleFocus">{{detailInputAddress || '填写详细地址，不少于5个字'}}
</view>

6、textarea设置不展示滚动条：

textarea::-webkit-scrollbar {
  display:none
}

7、utils工具类使用：

 // 验证手机号是否有误
  isPhoneAvailable: function (phone) {
    var myreg = /^[1][1-9][0-9]{9}$/;
    if (!myreg.test(phone)) {
      return false;
    } else {
      return true;
    }
  },

使用:

const Utils = require("../../utils/utils");

if (!Utils.isPhoneAvailable(this.data.inputTelValue.trim())) {
    wx.showToast({
    title: "请输入正确的联系电话",
    icon: "none",
    });
    return;
    }

8、wx.showToast()注意点:

wx.showToast({
    title: "收货地址不能少于5个字",
    icon: "none",
});

注意设置icon是“none”，不然默认是success的图标。

9、跳转页面传参数：

一个属性之类直接拼接url后即可；
传值过多使用缓存即可;
还可以使用传json。

wx.setStorage({
  key: 'operateAddress',
  data: {
    address: item  // 当前操作地址信息
  }
})
app.nav.navigateTo({
  url: '../addAddress/addAddress?addressType=1',
})

let json = JSON.stringify(this.data.orderDetailInfo)
    navigator.navigateTo({
      url: '../refund/refund?refundType=1&orderDetailInfo=' + json
});

// 使用:
let orderDetailInfo = JSON.parse(options.orderDetailInfo);

10、当后端不做分页，小程序渲染页面很卡，前端处理分页使用：

// 1、获取数据setData：
 this.setData({
    loading: false,
    allList:allList,
    allOrderList: allList.slice(0, 5),
    }, () => {
    this.handleFilterData();
})

// 2、递归实现分页数据：
handleFilterData() {
    if (this.data.allList.length > this.data.allOrderList.length) {
      this.data.pageNum+=1;
      let currNum = this.data.pageNum * 5 > this.data.allList.length?this.data.allList.length : this.data.pageNum * 5;
      let currList = this.data.allList.slice((this.data.pageNum -1) * 5, currNum);
      console.log('pageNum = ', this.data.pageNum)
      let allOrderList= [...this.data.allOrderList, ...currList]
      this.setData({
        allOrderList
      }, () => {
        this.handleFilterData();
      })
    }
  },

11、小程序支付，注意处理支付成功之后的跳转：

handleRequestPayInfo(e) {
    console.log('e = ', e);
    // 1 获取被点击的id
    const { id } = e.detail;
    console.log('orderId = ', id);
    let params = {
      orderId: id,
      openId: app.globalData.openId,
      payType: 'WECHAT_APPLET_PAY'
    }
    console.log('请求支付信息参数：' + JSON.stringify(params))
    app.ajax.post(app.urlConfig.pay, params).then(res => {
      console.log('请求支付信息结果：' + JSON.stringify(res))
      let data = JSON.parse(res.data)
      wx.requestPayment({
        nonceStr: data.nonceStr,
        package: data.package,
        paySign: data.paySign,
        timeStamp: data.timeStamp,
        signType: 'MD5',
        success(res) {
          this.getOrderListInfo(this.data.currentTab);
        }
      })
    }).catch(err => {
      console.log(JSON.stringify(err))
    })
  },