zoukankan      html  css  js  c++  java
  • 小程序基础

    事件

        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
                            })
                        }
                    })
            })
        },
    
    
    
  • 相关阅读:
    Uploadify v3.2.1 上传图片并预览
    mybatis批量操作
    500 拦截错误输出
    jsnop
    java目录
    设置360调用样式 IE调用样式
    Spring加载resource时classpath*:与classpath:的区别
    context:annotation-config 与context:component-scan
    Andriod调用http请求
    JDK环境变量
  • 原文地址:https://www.cnblogs.com/kgwei520blog/p/14215906.html
Copyright © 2011-2022 走看看