小程序基础

事件

    touchstart	手指触摸动作开始
    touchmove	手指触摸后移动
    touchcancel	手指触摸动作被打断,如来电提醒,弹窗	
    touchend	手指触摸动作结束	
    tap	        手指触摸后马上离开	
    longpress	手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发	1.5.0
    longtap	    手指触摸后,超过350ms再离开(推荐使用longpress事件代替)	
    transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发	
    animationstart	会在一个 WXSS animation 动画开始时触发	
    animationiteration	会在一个 WXSS animation 一次迭代结束时触发	
    animationend	会在一个 WXSS animation 动画完成时触发
    touchforcechange	在支持 3D Touch 的 iPhone 设备,重按时会触发

可以通过bind 和 catch 来绑定事件catch 会阻止事件向上冒泡。

1. 页面上通过自定义属性传递参数;
    <view bindtap="getCityagent" data-index="3" class="posr z-col-xs-3 z_mb15">
        <view class="z_font12 z_color_6">城市代理</view>
    </view>

    getCityagent(e) {
        let type = this.data.userInfo.type;
        let ctiyURL = "/pages/storeEntryApplication/storeEntryApplication"
        let index = e.currentTarget.dataset['index'];  //3   获取data-index绑定的值
    },

2. 默认是单向数据绑定 <input value="{{a}}" />

3.input 获取值 双向数据绑定
    <1> 通过事件 bindinput 事件,可以是对象属性形式  
        <input bindinput="changName" value="{{userInfo.name}}" />
        changName(e){
            this.setData({
                "userInfo.name":e.detail.value
            })
        }
    <2> 只支持单一字段 <input model:value="{{a}}" /> 


普通picker组件快速结构

// .wxml  jobList数组对象  “name”显示的key
<picker bindchange="bindPickerChange" data-type="1" value="{{jobValue}}" range="{{jobList}}" range-key="name">
   <view class="picker">
     <input type="text" placeholder="请选择行业" disabled value="{{jobValue}}" class="z_input z_font14" />
   </view>
</picker>
// .js
bindPickerChange: function(e) {
  let that = this;
  let type = e.currentTarget.dataset['type'];
  let index = e.detail.value;
  if(type ==1){
      let filterList = that.data.jobList.filter((item,key)=>{
          return index == key
      })
      this.setData({
          "userInfo.job_id": filterList[0].id,
          jobValue:filterList[0].name
      })
  }
  if(type ==2){
    let filterList = that.data.educationList.filter((item,key)=>{
      return index == key
      })
    this.setData({
        "userInfo.education_id": filterList[0].id,
        educationValue:filterList[0].name
    })
  }
  
},

请求方法封装

1、http请求封装

// 签名方式根据实际情况而定;
app.ajax = (url,data={},isloading=1,method="post")=>{
    if(!url){return false}

    if(isloading){
        wx.showLoading({title: '加载中'})
    }

    let userobj = app.myCookie('userobj', '');
    if(userobj){
        data["user_id"] = userobj.id;
        data["token"] = userobj.token;
    }else{
        data["user_id"] = ""
        data["token"] = ""
    }

    let dataJsonString = JSON.stringify(data)
    let apisign = md5('加密的key'+ dataJsonString)

    let sendData={
        data:dataJsonString,
        apisign:apisign
    }

   return new Promise((resolve,reject)=>{
        wx.request({
          url: URlList.host + url,
          method:method,
          dataType:"json",
          data:sendData,
          header: {
            'Content-Type': 'application/json'
        },
          complete:()=>{
              if(isloading){
                wx.hideLoading();
              }
          },
          fail:(res)=>{
            app.myalert('请求失败,请稍后再试!')
            reject(res)
          },
          success:(res)=>{
            let result = res.data

            if (result.status == 1010) {
                wx.clearStorageSync();
                myalert(result.info);
                wx.reLaunch({
                    url: "/page/login/login",
                })
            }
            if(result.status !=1){
                wx.showToast({
                  title: result.info,
                  icon: 'none'
                })
            }
             resolve(result)
          }
        })
   })
}
// 调用
    myapp.ajax(url)
    .then(res=>{
        ....
    })

2、上传文件封装
    cardImageEdit() {
        let that = this;
        new Promise((resolve, reject) => {
            wx.chooseImage({
                count: 1, // 默认9  最多可以选择的图片张数
                sizeType: ['original', 'compressed'], // 所选的图片的尺寸
                sourceType: ['album', 'camera'], //选择图片的来源
                success: function (res) {
                    resolve(res)
                },
                fail: function(err){
                    reject(err)
                }
            });
        }).then(res => {
            let filePath = res.tempFilePaths;
            myapp.showLoading("上传中...", true)
            return new Promise((resolve, reject) => {
                wx.uploadFile({
                    filePath: filePath[0],
                    name: "file",
                    url: api.host + api.Upload.fileUpload,
                    formData: {
                        name: 'file',
                        return_array: 0
                    },
                    success: (res) => {
                        resolve(res)
                    },
                    fail(err) {
                        myapp.myalert(err)
                        reject(err)
                    },
                    complete() {
                        myapp.hideLoading()
                    }
                })
            })

        }).then(res => {
            console.log('地址', res)
            let result = JSON.parse(res.data);
            let data = {
                image: result.data.url
            }
            myapp.ajax(api.Card.cardImageEdit, data)
                .then(res => {
                    if (res.status == 1) {
                        myapp.myalert(res.info)

                        that.setData({
                            "cardData.image": result.data.url
                        })
                    }
                })
        })
    },


原文地址:https://www.cnblogs.com/kgwei520blog/p/14215906.html