微信小程序代码片段

A. 代码类:

获取当前page

                        
    let page = getCurrentPages()[getCurrentPages().length - 1];
                        
                    

获取事件点击属性

                        
    let value = e.currentTarget.dataset.value;
                        
                    

解决弹窗滚动穿透

                        
    <view class="mask" catchtouchmove="true"></view>

                        
                    

iPhoneX判断

                        
    let sys = wx.getSystemInfoSync();
    this.setData({
        iPhoneX: sys.model.indexOf('iPhone X') != -1
    });
                        
                    
                        
    data: {
        iPhoneX: app.sysinfo.isIphoneX,
    },
                        
                    

时间格式化

                        
    app.WPT.formatDate(item.payTime, 'm月d日 h:i');
                        
                    

金额格式化

                        
    app.WPT.dealPrice(item.price);
                        
                    

本地存储

                        
    wx.getStorageSync('key');

    wx.setStorageSync('key', val);
                        
                    

是否显示转发功能

                        
    wx.showShareMenu({
        withShareTicket: true
    });
                        
                    

打点上报

                        
    onShow () {
        app.pageshow(this);
    },
                        
                    

停留时间上报

                        
    app.ereport('residence', {
        residenceTime:((new Date()).getTime() - this.enterTime) / 1000,
        //roomId: this.roomId
    });
                        
                    

倒计时

                        
    app.WPT.Interval.append('timer', () => {

    })
                        
                    

清除倒计时

                        
    app.WPT.Interval.clearAll();
                        
                    

创建动画

                        
    var animation = wx.createAnimation({
        duration: 600,
        timingFunction: 'ease',
    });

    this.animation = animation;
                        
                    
                        
    var animation = this.animation;
    animation.translateY(0).step();

    this.setData({
        animation: animation.export()
    });
                        
                    

B. 方法类:

登录验证

                        
    app.checkSessionToken( () => {
        this.xxx();
    });
                        
                    

formid上报

                        
    formidSubmit(e) {
        const formid = e.detail.formId;
        app.getFormid(formid);
    },
                        
                    

授权

                        
    wx.getSetting({
        success: (res) => {
            if (!res.authSetting['scope.record']) {
                // 录音授权
                wx.authorize({
                    scope: 'scope.record',
                    success: () => {

                    },
                    fail: (res) => {

                    }
                })
            }

            if (!res.authSetting['scope.camera']) {
                // 摄像头授权
                wx.authorize({
                    scope: 'scope.camera',
                    success: () => {

                    },
                    fail: (res) => {

                    }
                })
            }

            if (!res.authSetting['scope.address']) {
                // 地址授权
                wx.authorize({
                    scope: 'scope.address',
                    success: () => {

                    },
                    fail: (res) => {

                    }
                })
            }

            if (!res.authSetting['scope.writePhotosAlbum']) {
                // 相册授权
                wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: () => {

                    },
                    fail: (res) => {

                    }
                })
            }
        }
    });
                        
                    

地址选择

                        
    wx.chooseAddress({
        success: (res) => {
            let address = {};
                address.userName = res.userName;
                address.telNumber = res.telNumber;
                address.proviceFirstStageName = res.provinceName;
                address.addressCitySecondStageName = res.cityName;
                address.addressCountiesThirdStageName = res.countyName;
                address.addressDetailInfo = res.detailInfo;
                address.addressPostalCode = res.postalCode;

            this.setData({
                addressInfo: address,
            })
        }
    });
                        
                    

转发分享

                        
    onShareAppMessage(){
        return{
            title: title,
            path: '/pages/play/index?id='+ this.roomId + '&isShare=1',
            imageUrl: ''
        }
    },
                        
                    

图片上传

                        
    wx.chooseImage({
        count: 1,
        success: (res) => {
            let tempFilePaths = res.tempFilePaths;

            wx.showLoading({
                mask: true
            });

            tempFilePaths.map((item) => {
                // 图片上传
                app.upimage(item, (res) => {
                    //this._setImg(res.wptcdnId, res.xcxtemppath);
                });
            });
        }
    });
                        
                    

查看大图

                        
    previewImage(e) {
        let src = e.currentTarget.dataset.src;
        let imgs = [];

        imgs.push(src);

        wx.previewImage({
            current: src,
            urls: imgs
        });
    },
                        
                    

C. 配置类:

JSON配置-触底距离

                        
    "onReachBottomDistance": 400,
                        
                    

JSON配置-组件引用

                        
    "usingComponents": {
        "topbanner": "/components/topbanner/index",
        "login": "/components/login/index",
        "w-modal": "/components/handle/modal/index"
    }
                        
                    

D. 代码组合

循环列表

                        
    <view class="list" wx:if="{{list.length}}">
        <view class="item" wx:for="{{list}}" wx:key="unique">
            //...
        </view>
    </view>

    <view class="no-data" wx:if="{{isLoading && !list.length}}">暂无信息</view>
                        
                    
                        
    .no-data{
        color: #999;
        font-size: 30rpx;
        text-align: center;
        &:before{
            content: '';
            display: block;
            width: 282rpx;
            height: 200rpx;
            margin: 174rpx auto 50rpx;
            background: url(../../image/order_default.png) no-repeat;
            background-size: cover;
        }
    }
                        
                    
                        
    data: {
        list: [],
        page: 1,
        isEnd: false,
        isLoading: false
    },

    onPullDownRefresh () {
        this.setData({
            list: [],
            page: 1,
            isEnd: false
        });
        this.getList();
    },

    onReachBottom() {
        this.getList();
    },

    getList() {
        if (this.isLoad) {
            return;
        }

        if (this.data.isEnd) {
            return;
        }

        this.isLoad = true;

        wx.showLoading({
            title: '加载中',
            mask: false
        });

        app.request({
            url: '',
            data: {
                page: this.data.page
            },
            success: (res) => {
                let lists = this.dealMap(res.data.items);

                let list = this.data.list.length ? this.data.list.concat(lists) : lists;

                this.setData({
                    list: list,
                    isEnd: res.data.isEnd,
                    page: res.data.page,
                    isLoading: true
                }, () => {
                    this.isLoad = false;
                    wx.hideLoading();
                    wx.stopPullDownRefresh();
                });
            }
        });
    },
                        
                    

Tab

                        
    <view class="tab-head">
        <view wx:for="{{tabMenu}}" class="item {{tabType == item.type ? 'on' : ''}}" bindtap="changeTab" data-type="{{item.type}}" data-name="{{item.name}}">{{item.name}}</view>
    </view>
                        
                    
                        
    .tab-head{
        position: fixed; top: 136rpx; left: 0; z-index: 1;
        display: flex;
        width: 100%;
        height: 100rpx;
        margin-bottom: 20rpx;
        background: #fff;
        .item{
            flex: 1;
            position: relative;
            width: 100%;
            height: 100rpx; line-height: 100rpx;
            background: #fff;
            border-bottom: 2rpx solid #eee;
            color: #999;
            font-size: 32rpx;
            text-align: center;
        }
        .on{
            border-bottom: 4rpx solid #d84e43;
            color: #d84e43;
        }
    }
                        
                    
                        
                            
                                
    data: {
        tabMenu: [
            {name: '待接单', type: 0},
            {name: '已接单', type: 2},
            {name: '已退款', type: 1}
        ],
        tabType: 0,
        tabTypeName: '待接单',
    },

    // 切换Tab
    changeTab(e) {
        let type = e.currentTarget.dataset.type;
        let name = e.currentTarget.dataset.name;

        this.setData({
            tabType: type,
            tabTypeName: name,
            list: [],
            isEnd: false,
            page: 1,
            isLoading: false
        });

        this.getList();
    },
                                
                            

F. 组件类:

组件初始化

                        
    this.modalXxx = this.selectComponent('#modalXxx');
                        
                    
                        
    this.modalXxx.close();
                        
                    

TopBanner - 头部组件

                        
    <topbanner></topbanner>
                        
                    
                        
    pageJson: {
        navigationBarTitleText: 'title',
        navigationBarBackgroundColor: '#fff',
        backgroundColor: '#fff',
        iconColor: 'dark',
        isShowHome: false
    },
                        
                    

Menu - 导航组件

                        
    <menus id="menus" wx:if="{{menuType}}" type="{{menuType}}" selected="{{menuSelected}}"></menus>
                        
                    

Login - 登录授权组件

                        
    <login bind:clicklogin="">
        //...
    </login>
                        
                    

Modal - 弹窗组件

                        
    <w-modal id="modalOrder" class="order-modal" bind:cancel="handleCancel" bind:ok="handleOk" okStyle="color:#d94136;">
        <view slot="title">
            确认接单?
        </view>
        <view slot="body">
            <view class="order-con">
                <view class="con">
                    <view class="row">货号:0020</view>
                    <view class="row">买家:{{modalName}}</view>
                    <view class="row">价格:<view class="red">¥ {{modalPrice}}</view></view>
                </view>
            </view>
        </view>
    </w-modal>
                        
                    

I. 初始化:

xml初始化

                        
    <form bindsubmit="formidSubmit" bindreset="formReset" report-submit="true">
        <button class="pagebutton wrap {{iPhoneX ? 'ipx' : ''}}" id="pagebutton" formType="submit">
            //...
    	</button>
    </form>
                        
                    

less初始化

                        
    .wrap{
        position: relative;
        min-height: 100vh;
        background: #f0f0f0;

        &.ipx{
            //top: 180rpx;
            //bottom: 68rpx;
        }
    }
                        
                    

图片

                        
    <image class="cover" mode="aspectFill" src="{{item.cover}}" bindtap="previewImage" data-src="{{item.cover}}"></image>
                        
                    

跳转小程序

                        
    <navigator class="item navigator-hover" target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">
        //...
    </navigator>
                        
                    

J. 其他:

图片拼接

                        
    `${app.config.imgHost}/img/${xxx}/w/640`