wx 小程序开发 [记录]

注意：

　　<view class='icon'>
　　　　<view class='icon'>
　　　　　　<image mode='aspectFit' src='/img/arrow.png'></image>
　　　　</view>
　　</view>

　　background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

　　text不要包含image  |  <text/> 组件内只支持 <text/> 嵌套。

app.js
    AJX(数据请求)  - 小程序 异步
　　 ajx: function (that, url, data, fn, fnfail) {
        const _this = this;
        try {
            wx.request({
                url: this.gData.ajxIp + url,
                header: {
                    'content-type': 'application/x-www-form-urlencoded',
                    'key': wx.getStorageSync('key') || '',
                    'sessionId': wx.getStorageSync('sessionId') || ''
                },
                data: data,
                method: 'POST',
                success: function (res) {
                    if (res.data.head.code == 0) {
                        if (fn) {
                            fn(that, res.data.body) || fn;
                        }
                    } else {
                        _this.toast(that, res.data.head.text);
                        if(fnfail){
                            fnfail(that) || fnfail;
                        }
                    }
                },
                fail: function () {
                    _this.toast(that, '接口连接失败,请重试');
                    if(fnfail){
                        fnfail(that) || fnfail;
                    }
                }
            })
        } catch (e) {
            that.data[thro] = true;
            this.toast(that, '接口异常');
        }

    },

　　app.ajx(this
  　　, 'url'
　　  , ''
 　　 , function (that, res) {
 　　   that.setData({......})
　　  }
 　　 , function (that, txt) {
  　　  that.setData({......})
　　  }
　　)

　　顶部提示框　　
　　toast: function (that, msg, t) {
    　　that.setData({
        　　user: '',
        　　toast: {
           　　 msg: msg,
            　　show: true
        　　}
   　　 })
   　　 setTimeout(function () {
        　　that.setData({
            　　['toast.show']: false
        　　})
    　　}, t || 1500)
　　},

　　.toast{width: 100%; position:fixed;top: -88rpx;left: 0; background: rgba(88,88,88,0.8);height: 88rpx; line-height: 88rpx; text-align: center;color: #fff;font-size: 24rpx;z-index: 9;}
　　.toast.in{top: 0;}

　　强制登陆
　　compelLogin: function () {
   　　 wx.reLaunch({
        　　url: '/pages/login/login'
    　　})
　　}

　　强制首页
　　cantBack:function () {
   　　 const pages = getCurrentPages();
    　　if(pages.length == 1){
       　　 wx.reLaunch({url: '/pages/index/index'})
    　　}
　　}

页面url传参 取值

onLoad: function (param) {
  console.log(param)
    // this.setData({
    //     title: options.title
    // })
},



页面跳转   参考：https://www.cnblogs.com/nosqlcoco/p/6195572.html
　　注意：01 小程序最多只能有五个页面同时存在，意思是在不关闭页面的情况，最多新开五个页面，页面深度为5。
　　　　　02 navigateTo会重复打开page　
　　　　　03 重定向也 可以/会 重复打开page
　　　　　04 返回 只会减小页面个数

　　　　第一种：wx.navigateTo(OBJECT)
　　　　　　保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
　　　　第二种：wx.redirectTo(OBJECT)
　　　　　　关闭当前页面，跳转到应用内的某个页面。
　　　　第三种：wx.navigateBack(OBJECT)
　　　　　　关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

　　页面场景：

　　　　页面List 开页面Detail -- 页面Detail关闭页面List刷新数据

　　　　页面List　

　　　　　　acrossPage(){
    　　　　　　const i=this.data.itab;
    　　　　　　const more = this.data.moreArr[i];
    　　　　　　this.setData({
        　　　　　　[more.list]: [],
        　　　　　　['moreArr[' + i + '].next']: true,
        　　　　　　['moreArr[' + i + '].page']: 1,
        　　　　　　['moreArr[' + i + '].btn']: 2
    　　　　　　})
   　　　　　　 this.ajxGetList(this.data.itab);
    　　　　　　setTimeout(function () {
        　　　　　　wx.navigateBack({delta: 1})
    　　　　　　},2000)
　　　　　　}

　　页面Detail

　　　　　　const pages = getCurrentPages();
　　　　　　if(pages.length > 1){
    　　　　　　const prePage = pages[pages.length - 2];
   　　　　　　 if(prePage.acrossPage){
       　　　　　　 prePage.acrossPage();
   　　　　　　 }
　　　　　　}

scroll-view
    
    横向（禁止折行）
        <scroll-view scroll-x="true" class='imgList'>
            <view style='background-image: url("http://58pic.ooopic.com/58pic/17/90/73/45958PICCgf.jpg")'></view>
        </scroll-view>
　　　　　.imgList{width: 100%;white-space: nowrap;display: flex;padding: 20rpx 0 15rpx;background: #fbfbfb;}
　　纵向（定高度）
　　　　<scroll-view scroll-y="true" class="scrollY" lower-threshold='150' bindscrolltolower='addList'>
　　　  </scroll-view>

页面tab切换

　注意：tab 初始化 !=0 那么 会走一次切换（if（i==0）{ 初始化开始 }）

　　wx For循环参考 https://www.cnblogs.com/JdsyJ/p/8603891.html

　！！！！tab切换安卓卡且不可控 - 更换click　　

！！！！hidden - 且不于block上否则无效

！！！！hidden - 图片listWrap 定高度否则消失

　　　　<scroll-view scroll-x="true" class='imgList'>   Css | height：140rpx;
   　　　　 <block wx:for='{{el.goodsInfo}}' wx:key='*this' wx:for-index='ii' wx:for-item='ell'>
        　　　　<view style='background-image: url("{{ell.picUrl}}")'></view>
    　　　　</block>
　　　　</scroll-view>

<view class='tab flex'>
    <view class='flexItem' data-curtab="0" catchtap="tabClk">
        <text class='{{itab==0?"act":""}}'>全部</text>
    </view>
    <view class='flexItem' data-curtab="1" catchtap="tabClk">
        <text class='{{itab==1?"act":""}}'>待接单</text>
    </view>
</view>

<scroll-view scroll-y='true' class='scrollY'>
    <view class='listWrap' hidden='{{itab!=0}}'>
       代码开始
    </view>
    <view class='listWrap' hidden='{{itab!=1}}'>
       代码开始
    </view>
</scroll-view>

showListAll: [],
　　showListPay: [],
　　showListPaying: [],
　　showListTake: [],
　　moreArr: [
　　　　{i: 0, type: '', btn: 2, page: 1, next: true, list: 'showListAll'},
　　　　{i: 1, type: '2', btn: 2, page: 1, next: true, list: 'showListPay'},
　　　　{i: 2, type: '1', btn: 2, page: 1, next: true, list: 'showListPaying'},
　　　　{i: 3, type: '3', btn: 2, page: 1, next: true, list: 'showListTake'}
　　],
　　itab: 0,
　　
　　/*用户界面操作*/
　　tabClk: function (e) {
　　　　const i = e.currentTarget.dataset.curtab;
　　　　this.setData({itab: i});
　　},
　　tabSwitch: function (e) {
　　　　const i = e.detail.current
　　　　const list = this.data.moreArr[i].list;
　　　　this.setData({itab: i})
　　　　if (this.data[list].length < 1 && this.data.moreArr[i].next) {
　　　　　　this.ajxGetList(i);
　　　　}
　　},
　　/*非用户界面操作*/
　　loadMore(e) {
　　　　const i = e.currentTarget.dataset.mark;
　　　　this.setData({['moreArr[' + i + '].btn']: 2})
　　　　this.ajxGetList(i);
　　},
　　
　　ajxGetList: function (i) {
　　　　const more = this.data.moreArr[i];
　　　　app.ajx(this
　　　　　　, '接口url /a/b'
　　　　　　, 'pageIndex=' + more.page
　　　　　　+ '&pageSize=' + 15
　　　　　　+ '&transactionType=' + more.type
　　　　　　, function (that, res) {
　　　　　　　　let arrNew = that.data[more.list].concat(res.walletPaymentsVOList || []);
　　　　　　　　const next = arrNew.length >= res.totalCount ? false : true
　　　　　　　　that.setData({
　　　　　　　　　　[more.list]: arrNew,
　　　　　　　　　　['moreArr[' + i + '].next']: next,
　　　　　　　　　　['moreArr[' + i + '].page']: parseInt(more.page) + 1,
　　　　　　　　　　['moreArr[' + i + '].btn']: next ? 1 : 0
　　　　　　　　})
　　　　　　}
　　　　　　,null
　　　　)
　　}
 
　　
WXML:
<view class='container contSwiper'>
    <view class='tab flex'>
        <view class='flexItem' data-curtab='0' catchtap='tabClk'><text class='{{itab==0?"act":""}}'>全部</text></view>
        <view class='flexItem' data-curtab='1' catchtap='tabClk'><text class='{{itab==1?"act":""}}'>结算(已到账)</text></view>
    </view>
    <swiper current='{{itab}}' duration='300'  bindchange='tabSwitch' class='tabCon'>
　　　　<swiper-item>
    　　　　<scroll-view scroll-y='true' class='scrollY'>
       　　　　 <view class='listWrap'>
         　　　　   <view class='tlist' wx:if='{{showListAll.length>0}}'>
            　　　　    <block wx:for='{{showListAll}}' wx:key='*this' wx:for-index='i' wx:for-item='el'>
                　　　　    <view class='lyt' catchtap='detail'>
                   　　　　     <view class='lytCon'>
                    　　　　        <view>{{el.typeName}}</view>
                     　　　　       <text>{{el.time}}</text>
                  　　　　      </view>
                     　　　　   <view class='lytR'><text class='{{el.arrivalStatus==1?"cue":""}}'>{{el.amount}}</text></view>
                 　　　　   </view>
              　　　　  </block>
          　　　　  </view>
           　　　　 <template is="more" data='{{...moreArr[0]}}'/>
     　　　　   </view>
  　　　　  </scroll-view>
　　　　</swiper-item>
        <swiper-item>
            第二个盒子
        </swiper-item>
    </swiper>
</view>

tab切换