小程序常用代码

Posted 2021-03-22 一个年轻淫

微信小程序真的是谁做谁知道，还不如用原生js

阻止事件冒泡

<view bindtap="industry">
    <view catchtap="industryCatchtap">
        industryCatchtap这个方法不需要写，只要标注就行
    </view>
</view>

常用代码

// 取数据，data不能不写
this.data.xx

// 更新数据，普通的值，对象里的对象
this.setData({
   'card.industry': str,
   'industryCheckbox': arr,
   'card.industryLabel': []
})

// 如果是修改动态数组
let index = e.currentTarget.dataset.index  // 获取数据的索引
let temp = 'goodsList[' + index +'].num'  // 获取goodsList[index].num
this.setData({
   [temp]:this.data.goodsList[index].num + 1
})

// 从标签上获取data值，在标签上绑定事件
<view bindtap="play" data-xx="xx"></view>
play:function(event){
     var xx= event.currentTarget.dataset.xx;
}

小程序没有下拉框

// 两个事件，两个数据
<picker mode="multiSelector" 
        bindcolumnchange="bindMultiPickerColumnChange" 
        bindchange="bindPickerChange" 
        value="{{industry}}"
        range="{{multiArray}}">
    <view>{{industry}}</view>
</picker>

小程序的复选框
我都不知道一个复选框的控制会这么难

<view class='line-row line-row_this' bindtap="industry">
    <text>行业</text>
    <text style="flex:1;text-align:right;">{{industry}}</text>
</view>

// 每次控制显示隐藏数据都会重新渲染
<view class='industry' wx:if="{{industryShow}}" bindtap="industry">
    <view class="industryCatchtap" catchtap="industryCatchtap">
       <checkbox-group bindchange="industryCheckboxChange">
         <view wx:for="{{multiArray}}" wx:for-item="item">
           <view class="industry1">{{item.name}}</view>
           <label class="industry2" wx:for="{{item.child}}"  wx:for-item="child">
              <checkbox value="{{child.id}}" checked="{{multiObj[child.id].checked}}"> {{child.name}} </checkbox>
          </label>
        </view>
      </checkbox-group>
    </view>
</view>

data:{
    // 接口返回值
    industry: "前端,后端",
    // 接口返回值
    industryArr: ["aa", "dd"],
    industryShow: false,
    multiObj: {},
    // 接口返回值
    multiArray: [{
      name: "it",
      child: [{ name: "前端", id: "aa" }, { name: "后端", id: "bb" }],
    }, {
      name: "it2",
      child: [{ name: "前端", id: "cc" }, { name: "后端", id: "dd" }],
    }]
},
// 接口的数据处理，把内容转成带有checked
dataFilter() {
    var arr = this.data.multiArray
    var obj = {}
    arr.map((x) => {
      x.child.map((y) => {
        console.log(this.data.card)
        if (this.data.industryArr.indexOf(y.id) !== -1) {
          obj[y.id] = Object.assign(y, { checked: true })
        } else {
          obj[y.id] = Object.assign(y, { checked: false })
        }
      })
    })
    this.setData({
      multiObj: obj
    })
},
industry() {
    this.setData({
      industryShow: !this.data.industryShow
    })
},
industryCheckboxChange(x) {
    var arr = x.detail.value;
    var obj = {}
    var arr2 = []
    var industry = ""
    for (var i in this.data.multiObj) {
      if (arr.indexOf(i) !== -1) {
        obj['multiObj.' + i + '.checked'] = true
        arr2.push(this.data.multiObj[i].name);
      } else {
        obj['multiObj.' + i + '.checked'] = false
      }
    }
    obj.industryArr = arr;
    obj.industry = arr2.join(",");
    this.setData(obj)
}

/*修改下默认样式，还有一种写法就是把checkbox隐藏了，通过checked的值增加class  */
/*checkbox 整体大小  */
checkbox {
  width: 240rpx;
  height: 90rpx;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 50rpx;
  height: 50rpx;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #FF525C;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

授权

//app.js
App({
    globalData: {
        userInfo: null,
        unionid:null,
        token:''
    },
    onLaunch: function () {
        /* 已授权之后，自动获取用户信息 */
        // 判断是否授权
        wx.getSetting({
            success: (res) => { //箭头函数为了处理this的指向问题 
                if (res.authSetting["scope.userInfo"]) {
                    console.log("已授权");
                    // 获取用户信息
                    wx.getUserInfo({
                        success: (res) => { //箭头函数为了处理this的指向问题
                                            // this.globalData.isok=true
                            this.globalData.token='ok'
                            var that =this
                            console.log(res.userInfo); //用户信息结果
                            wx.getStorage({
                                key: 'unionid',
                                success(res) {
                                    that.globalData.unionid=res.data
                                }
                            })
                            this.globalData.userInfo = res.userInfo;
                            if (this.userInfoReadyCallback) { //当index.js获取到了globalData就不需要回调函数了，所以回调函数需要做做一个判断，如果app.js中有和这个回调函数，那么就对这个函数进行调用，并将请求到的结果传到index.js中
                                this.userInfoReadyCallback(res.userInfo);
                            }
                        }
                    })
                }
                else{
                    console.log("未授权");
                    wx.removeStorage({
                        key: 'unionid'
                    })
                }
            }
        })
    }
})

table切换

<view>
   <text class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">tab1</text>
   <text class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">tab2 </text>
   <text class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">tab3 </text>
</view>
<swiper current="{{currentTab}}" bindchange="bindChange" class='swp' style="height: {{aheight?aheight+'px':'auto'}}">
   <swiper-item>页面1</swiper-item>
   <swiper-item>页面2</swiper-item>
   <swiper-item>页面3</swiper-item>
</swiper>
Page({
    data:{
        currentTab: 0,
        aheight: ''
    },
// 滑动切换
    bindChange: function (e) {
        var that = this;
        that.setData({
            currentTab: e.detail.current
        });
    },
    //点击tab切换
    swichNav: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current
            })
        }
    },
    // swiper 自适应高度
    onLoad: function (options) {
        var that = this
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    aheight: res.screenHeight
                });
            }
        })
    },
})

封装一个组件

// 先在app.json里声明组件
"pages": [
    "components/Dialog/Dialog"
],

// 在组件的json里配置
{
  "component": true,
  "usingComponents": {}
}

// wxml
<view class='wx_dialog_container' hidden="{{!isShow}}">
    <view class='wx-mask'></view>
    <view class='wx-dialog'>
        <view class='wx-dialog-title'>{{ title }}</view>
        <view class='wx-dialog-content'>{{ content }}</view>
        <view class='wx-dialog-footer'>
          <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
        </view>
    </view>
</view>

// js文件
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    // props
  },
  data: {
    isShow: false,  // 弹窗显示控制
    title:"",
    content:"",
    cancelText:"确认"
  },
  methods: {
    //隐藏弹框
    hideDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示弹框
    showDialog(obj) {
      this.setData({
        isShow: !this.data.isShow,
        title: obj.title || "标题",
        content: obj.content || "内容"
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _cancelEvent() {
      //触发取消回调
      this.triggerEvent("cancelEvent")
    }
  }
})

// 使用
// 在需要的page里的json里配置
{
  "navigationBarTitleText": "title",
  "usingComponents": {
    "dialog": "/components/Dialog/Dialog"
  }
}

// wxml 自定义组件标签
<dialog id='dialog' bind:cancelEvent="_cancelEvent" ></dialog>

// js
onLoad: function (options) {
  //获得dialog组件
  this.dialog = this.selectComponent("#dialog");
},
xx:function(){
  // 调用显示，传参
  this.dialog.showDialog({
     title:'提示',
     content:"pdt自定义"
   });
},
_cancelEvent() {
    // 点击取消时，隐藏
    this.dialog.hideDialog();
},