小程序笔记

入了小程序的坑，发现小程序的功能好少噢，不过大多都有办法解决

多页面跳转

A页面navigateTo跳转到 B页面，B页面navigateTo跳转到B1页面，此时为了回到B页面，B页面能顺利返回A页面，因此在B1页面跳转时进行以下跳转

      var pages = getCurrentPages();             //  获取页面栈
      var currPage = pages[pages.length - 1];    // 当前页面
      var prevPage = pages[pages.length - 2];    // 上一个页面
      prevPage.setData({
        newCard: app.globalData.ChangeBillCardInfo //需要带到B页面的数据，直接存在B页面的data中
      })
      wx.navigateBack({ //返回上一页
        delta: 1
      })

如跳到B页面需要重新加载，则在B页面show的时候重新加载onLoad方法

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  }

对比 angular 功能

ng-if -> wx:if="{{cardType==2}}"
ng-src -> src="{{showMumberImage}}" 
          src="{{imageRoot+newCard.newBankKey}}.png" （也可以这样哦）
ng-class -> class="bank-list  {{(depositsCards==1 )?'bor-b' : ''}}"

//应用的跳转事件bindtap，传值data-name（js中取值时e.currentTarget.dataset.name。。。差不多这样，自己点点啦），动态样式，wx:for循环（wx:for循环时记得加wx:key），wx:for-item可自定义item,可用默认，wx:for-index 同样，类ng-repeat的$last（我如此聪明，脸红。。。可爱。。）
<view bindtap="chooseCardClick" data-name="{{item}}" class="bank-list flex-box  {{(index != depositsCards.length-1 )?'bor-b' : ''}} {{(item.bankCardNo === localChangeDebitCard.oldBankNo)?'isDefault':''}}" wx:for="{{depositsCards}}" wx:for-item="item" wx:key="">

背景图片加载

wxss资源中加载不到图片，一个动态背景图片的加载

<view style="background: url('../../../images/bankCard/{{cardImg}}.png') center no-repeat;background-size:100% 100%;">

很尴尬的事情是，这样加载之后手机上还是不显示。。。之前以为wxss不能加载本地，然而。无语。乖乖的去用网络图片或者Base64吧。

wx.showToast 闪现

由于wx.showToast 与 wx.showLoading() wx.hideLoading()公用，导致真机上wx.showToast一闪而过，用以下解决

        setTimeout(() => {
            wx.showToast({
              icon: "none",
              title: 'emmmmm'
            });
          }, 0);

掉坑与埋坑之路未完，待续。。。