小程序問題記錄

1.scroll-view 橫向不滾動
2.js 中方法之間一定要加上 '怎囚,'
3.scroll-view 兩個方法bindscrolltoupper絮记、bindscrolltolower 調(diào)用問題
4.下拉刷新是顯示導(dǎo)航條動畫和刷新動畫
5.主動觸發(fā)刷新操作
6.播放音頻的方法
7.播放視頻
8.網(wǎng)絡(luò)請求
9.wx.api回調(diào)方法中使用 this.setData({})恢准,提示this.setData is not a function
10.上傳
11.同步戳气、異步、保存嘱巾、讀取數(shù)據(jù)
12.當(dāng)前位置憨琳、選擇位置、查看某一個位置
13.顯示tabbar
14.wx.reLaunch 和 wx.redirectTo
15.動畫
16.page生命周期
17.app.json 配置項列表
18.頁面正向傳值
19.頁面反向傳值,主要使用的是getCurrentPages()
20.頁面內(nèi)部傳值 (data-{key}="{value}")
21.頁面內(nèi)部傳值另一種方法, 設(shè)置 id = {}
22.關(guān)于form bindsubmit 的傳值
23.wx:for wx:if
24.wxs
25.自定義組件
26.自定義js文件
27.page調(diào)用自定義組件內(nèi)部方法
28.setInterval旬昭、setTimeout

1.scroll-view 橫向不滾動

/*
normal: 正常無變化(默認處理方式.文本自動處理換行.假如抵達容器邊界內(nèi)容會轉(zhuǎn)到下一行篙螟; 
pre: 保持HTML源代碼的空格與換行,等同與pre標(biāo)簽; 
nowrap: 強制文本在一行,除非遇到br換行標(biāo)簽问拘;
*/
.scrollView {
  width: 100%;
  height: 200px;
  background-color: blue;
  margin-top: 20px;
  overflow: hidden; // 設(shè)置1
  white-space: nowrap;// 設(shè)置2
}
.subView {
  width: 100%;
  height: 200px;
  background-color: yellow;
  display: inline-block; // 設(shè)置3
}

2.js 中方法之間一定要加上 '遍略,'??

 onShareAppMessage: function () {
  
  }, // 重中之重
  upper: function (e){
    console.log('scrolltoupper',e);
  }

3.scroll-view 兩個方法bindscrolltoupper惧所、bindscrolltolower 調(diào)用問題

在默認或設(shè)置的 upper-threshold、lower-threshold 的范圍內(nèi)绪杏,慢慢的拖動scroll-view下愈,upper和lower 會一直觸發(fā),所以不推薦使用這兩個方法進行下拉刷新蕾久、上拉加載操作
  <scroll-view class='scrollViewClass' 
              scroll-y 
              bindscrolltoupper='upper'
              bindscrolltolower='lower'
              >

4.下拉刷新是顯示導(dǎo)航條動畫和刷新動畫

onPullDownRefresh: function (){
    console.log('onPullDownRefresh')
    wx.showNavigationBarLoading() // 顯示導(dǎo)航條動畫
    //模擬加載
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //停止導(dǎo)航條動畫
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);
  },
"enablePullDownRefresh": true, // 允許刷新
"backgroundColor": "#f0145a", // 背景顏色,下拉時可以看見
"backgroundTextStyle": "dark",  // 下拉背景字體势似、loading 圖的樣式,僅支持 dark/light僧著,默認light不可見

5.主動觸發(fā)刷新操作

wx.startPullDownRefresh({
      success: function () {
        console.log('startPullDownRefreshSuccess')
      },
      fail: function () {

      }
    })

6.播放音頻的方法

  1. 帶有界面的履因,使用 audio
<audio id='myaudio' 
src='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46' 
loop 
controls poster='http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000' 
name='此時此刻' 
author='許巍' >
</audio>
onReady: function () {
// 創(chuàng)建上下文
    this.audio = wx.createAudioContext('myaudio', this)
  },
this.audio.play();
this.audio.pause();
this.audio.seek(14);
  1. 不帶界面的,適合播放背景音樂(也可以使用wx.getBackgroundAudioManager())

   const innerAudioContext = wx.createInnerAudioContext()
   innerAudioContext.autoplay = true
   innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
   innerAudioContext.onPlay(() => {
     console.log('開始播放')
   })
   innerAudioContext.onError((res) => {
     console.log(res.errMsg)
     console.log(res.errCode)
   })

// 在其他的方法里面可以使用 this.innerAudioContext控制音頻的播放狀態(tài)
 this.innerAudioContext = innerAudioContext;


// 在不需要播放的時候 destroy
// this.innerAudioContext. destroy();
this.innerAudioContext.play();
this.innerAudioContext.pause();
this.innerAudioContext.seek(14);

7.播放視頻

<video id="myVideo" 
  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" 
  danmu-list="{{danmuList}}" 
  enable-danmu 
  danmu-btn
  controls>
</video>

<view>
 <input bindblur="bindInputBlur"/>
 <button bindtap="bindSendDanmu">發(fā)送彈幕</button>

<button type='primary' bindtap='play'>開始</button>
<button type='primary' bindtap='pause'>暫停</button>
<button type='primary' bindtap='video50'>設(shè)置播放時間到14秒</button>
<button type='primary' bindtap='videoRate'>設(shè)置倍速</button>
</view>

data: {
    inputValue: '',
    danmuList: [
      {
        text: '第 1s 出現(xiàn)的彈幕',
        color: '#ff0000',
        time: 1
      },
      {
        text: '第 3s 出現(xiàn)的彈幕',
        color: '#ff00ff',
        time: 3
      }]
  },
 onReady: function () {
    this.videoContext = wx.createVideoContext('myVideo', this)
  },

  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },

  // 發(fā)送彈幕
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },
  play: function () {
    this.videoContext.play();
  }, 
  pause: function () {
    this.videoContext.pause();
  }, 
  video50: function () {
    this.videoContext.seek(50);
  }, 
  videoRate: function () {
    this.videoContext.playbackRate(1.5);
  }, 


8.網(wǎng)絡(luò)請求

request: function (){
    
    const requestTask = wx.request({
      url: 'http://baobab.kaiyanapp.com/api/v1/feed',
      data:{
        'num': 1
      },
      header:{
        'type': 'application/json'
      },
      method: 'POST',
      success: function(result){
        // 需根據(jù)返回的狀態(tài)碼自行判斷是否請求成功  200盹愚、400栅迄、500、504等等
        console.log('成功', result)
      },
      fail: function(error){
        console.log('失敗',error)
      },
      complete: function(){
        console.log('完成')
      }
      
    });

    // 中斷請求任務(wù)
    // requestTask.abort();
  }

9.wx.api回調(diào)方法中使用 this.setData({})皆怕,提示this.setData is not a function

??方法體外部定義 var that = this;
??方法體內(nèi)部使用that.setData({})

    var that = this;
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖毅舆,默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表愈腾,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        that.setData({
          tempFilePaths: res.tempFilePaths
        });
        console.log('成功', res)
      }
    })

10.上傳

upload: function () {

    var that = this;
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖憋活,默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表顶滩,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        that.setData({
          tempFilePaths: res.tempFilePaths
        })
        console.log('成功', res)

        that.upload1(res.tempFilePaths[0])
      }
    })
  },
  upload1: function (filePath){
    const uploadTask = wx.uploadFile({
      url: 'http:...',
      filePath: filePath,
      name: 'image',
      header: {
        'type': 'multipart/form-data'
      },
      formData: {
        'photo': '參數(shù)1',
        'phoneNum': '參數(shù)2',
      },
      success: function (result) {
        console.log('成功', result)
      },
      fail: function (error) {
        console.log('失敗', error)
      },
      complete: function (res) {
        console.log('完成')
      },
    })

    // 上傳進度
    uploadTask.onProgressUpdate((res)=>{
      console.log('onProgressUpdate',res)
      console.log('上傳百分比:', res.progress+'%')
    })

    // uploadTask.abort() // 取消上傳任務(wù)
  }

11.同步余掖、異步、保存礁鲁、讀取數(shù)據(jù)


    wx.setStorage({
      key: 'key1',
      data: 'value1',
      success: function(res) {
        console.log('異步保存數(shù)據(jù)成功')
      },
      fail: function(res) {},
      complete: function(res) {},
    })

    try{
      wx.setStorageSync('key2', 'value2')
    }catch(e){

    }
    console.log('同步保存數(shù)據(jù)成功')
    wx.getStorage({
      key: 'key1',
      success: function(res) {
        console.log('異步獲取數(shù)據(jù)成功:',res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })

    var value = wx.getStorageSync('key2')
    console.log('同步獲取數(shù)據(jù)成功:',value)

12.當(dāng)前位置盐欺、選擇位置、查看某一個位置

// 當(dāng)前位置(經(jīng)緯度仅醇、速度冗美、精度、高度)
 wx.getLocation({
      type: 'wsg84',
      altitude: true,
      success: function(res) {
        console.log('獲取當(dāng)前位置成功',res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })
// 選擇位置,彈出地圖界面(模糊搜索析二、拖動地圖選擇位置粉洼、當(dāng)前位置附近的建筑)
 wx.chooseLocation({
      success: function(res) {
        console.log('選擇當(dāng)前位置成功', res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })
//使用微信內(nèi)置地圖查看位置
 wx.openLocation({
      latitude: 39.965985,
      longitude: 116.289073,
      scale: 12,
      name: '火器營[地鐵站]',
      address: '北京市海淀區(qū)地鐵10號線',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

13.顯示tabbar

// 所有的頁面都要在pages里面進行注冊
 "pages":[
    "pages/index/index",
    "pages/apiTest/apiTest"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#f0145a",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "red",
    "borderStyle": "black",
    "backgroundColor": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "tab2",
        "iconPath": "iconPath",
        "selectedIconPath": "selectedIconPath"
      },
      {
        "pagePath": "pages/apiTest/apiTest",
        "text": "tab1",
        "iconPath": "iconPath",
        "selectedIconPath": "selectedIconPath"
      }
    ]
  }

14. wx.reLaunch 和 wx.redirectTo

??wx.reLaunch:關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面叶摄,無法返回
??wx.redirectTo:關(guān)閉當(dāng)前頁面属韧,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面,可以返回

15.動畫

<view class='view' animation='{{animation}}' bindlongpress='longTag'></view>

animal:function (){
    // ??1.創(chuàng)建一個動畫實例animation

    /**
        linear  動畫從頭到尾的速度是相同的
        ease    動畫以低速開始蛤吓,然后加快宵喂,在結(jié)束前變慢
        ease-in 動畫以低速開始
        ease-in-out 動畫以低速開始和結(jié)束
        ease-out    動畫以低速結(jié)束
        step-start  動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束
        step-end    動畫一直保持開始狀態(tài),最后一幀跳到結(jié)束狀態(tài)
     */
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    // ??2.調(diào)用實例的方法來描述動畫


    /**
     * 樣式
      opacity   value   透明度会傲,參數(shù)范圍 0~1
      backgroundColor   color   顏色值
      width length  長度值锅棕,如果傳入 Number 則默認使用 px拙泽,可傳入其他自定義單位的長度值
      height    length  長度值,如果傳入 Number 則默認使用 px裸燎,可傳入其他自定義單位的長度值
      top   length  長度值顾瞻,如果傳入 Number 則默認使用 px,可傳入其他自定義單位的長度值
      left  length  長度值德绿,如果傳入 Number 則默認使用 px荷荤,可傳入其他自定義單位的長度值
      bottom    length  長度值,如果傳入 Number 則默認使用 px脆炎,可傳入其他自定義單位的長度值
      right length  長度值梅猿,如果傳入 Number 則默認使用 px,可傳入其他自定義單位的長度值
     */

    /**
     * 旋轉(zhuǎn)
      rotate    deg deg的范圍-180~180秒裕,從原點順時針旋轉(zhuǎn)一個deg角度
      rotateX   deg deg的范圍-180~180,在X軸旋轉(zhuǎn)一個deg角度
      rotateY   deg deg的范圍-180~180钞啸,在Y軸旋轉(zhuǎn)一個deg角度
      rotateZ   deg deg的范圍-180~180几蜻,在Z軸旋轉(zhuǎn)一個deg角度
      rotate3d  (x,y,z,deg) 同transform-function rotate3d
     */

    /**
     * 縮放
      scale sx,[sy] 一個參數(shù)時,表示在X軸体斩、Y軸同時縮放sx倍數(shù)梭稚;兩個參數(shù)時表示在X軸縮放sx倍數(shù),在Y軸縮放sy倍數(shù)
      scaleX    sx  在X軸縮放sx倍數(shù)
      scaleY    sy  在Y軸縮放sy倍數(shù)
      scaleZ    sz  在Z軸縮放sy倍數(shù)
      scale3d   (sx,sy,sz)  在X軸縮放sx倍數(shù)絮吵,在Y軸縮放sy倍數(shù)弧烤,在Z軸縮放sz倍數(shù)
     */

    /**
     * 偏移
      translate tx,[ty] 一個參數(shù)時,表示在X軸偏移tx蹬敲,單位px暇昂;兩個參數(shù)時,表示在X軸偏移tx伴嗡,在Y軸偏移ty急波,單位px。
      translateX    tx  在X軸偏移tx瘪校,單位px
      translateY    ty  在Y軸偏移tx澄暮,單位px
      translateZ    tz  在Z軸偏移tx,單位px
      translate3d   (tx,ty,tz)  在X軸偏移tx阱扬,在Y軸偏移ty泣懊,在Z軸偏移tz,單位px
     */

    /**
     * 傾斜
      skew  ax,[ay] 參數(shù)范圍-180~180麻惶;一個參數(shù)時馍刮,Y軸坐標(biāo)不變,X軸坐標(biāo)延順時針傾斜ax度用踩;兩個參數(shù)時渠退,分別在X軸傾斜ax度忙迁,在Y軸傾斜ay度
      skewX ax  參數(shù)范圍-180~180;Y軸坐標(biāo)不變碎乃,X軸坐標(biāo)延順時針傾斜ax度
      skewY ay  參數(shù)范圍-180~180姊扔;X軸坐標(biāo)不變,Y軸坐標(biāo)延順時針傾斜ay度
     */

    /**
     * 矩陣變形
      matrix    (a,b,c,d,tx,ty) 同transform-function matrix
      matrix3d      同transform-function matrix3d
     */

    animation.scale(2, 2)
    .rotate(45)
    .step()  // ??step表示一組動畫的完成,動畫同時播放

    // ??分開寫則按順序播放動畫
    animation.opacity(0.5)
      .backgroundColor('blue').step()

    // ??step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數(shù)
    // ??可以指定當(dāng)前動畫的配置屬性
    animation.width(200).step({ duration: 2000, timingFunction: 'linear'})


    //??3.最后通過動畫實例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation屬性
    this.setData({
      animation: animation.export()
    })


  }

16.page生命周期

page生命周期

17.app.json 配置項列表

app.json 配置項列表

18.頁面正向傳值

// ??傳object對象梅誓,將object轉(zhuǎn)成字符串傳遞
var info = [{ id: '1', name: '餃子', price: '299元' },
      { id: '2', name: '面包', price: '99元' },
      { id: '3', name: '面條', price: '199元' },
      { id: '4', name: '饅頭', price: '499元' },
      { id: '5', name: '熱菜', price: '2999元' }]

或

 var info = { id: '123', name: '餃子', price: '299元' }
    wx.navigateTo({
      url: '../viewTest/viewTest?goodInfo=' + JSON.stringify(info),
    })

// ??傳單個數(shù)據(jù)
    wx.navigateTo({
      url: '../viewTest/viewTest?goodInfo=' + 'beautiful',
    })
onLoad: function (options) {
// ??將字符串轉(zhuǎn)成object
    var info = JSON.parse(options.goodInfo);
    console.log('info:', info.id)
    console.log('info:', info.name)
    console.log('info:', info.price)

// ??單個value直接輸出對應(yīng)的key即可
  console.log('info:',options.goodInfo)
  },

19.頁面反向傳值,主要使用的是getCurrentPages()

??getCurrentPages()獲取頁面棧,第一個元素為首頁,最后一個元素為當(dāng)前頁面
??var currentPage = arr[arr.length - 1],這個是獲取的當(dāng)前頁面
??var upPage = arr[arr.length - 2],這個是獲取的上一個頁面
??使用 upPage 可以操作上一個頁面內(nèi)部的方法等恰梢,比如可以setData,可以調(diào)用page里面的方法
??反向傳值就是使用的這種方法梗掰,調(diào)用setData

當(dāng)前頁面

 var arr = getCurrentPages();
    console.log('upPages路徑:', arr[arr.length-2].route);

    var upPage = arr[arr.length - 2]

    // ??1.可以調(diào)用上一個頁面的方法進行傳值
    upPage.nextPageCallingThisClick('哈哈嵌言,這是從下一個頁面?zhèn)鬟^來的值')

// ??2.調(diào)用上一個頁面的setData方法進行傳值
    wx.navigateBack({
      success:function(){
        upPage.setData({
          nextComeValue: '這是從下一個頁面?zhèn)鬟^來的值'
        })
      }
    })
  }

上一個頁面

// ??onShow方法會被調(diào)用,進行賦值操作
 onShow:function(){
    console.log('nextComeValue1111111=',this.data.nextComeValue)
    this.setData({
      nextComeValue: this.data.nextComeValue
    })
  },

// ??下一個頁面調(diào)用當(dāng)前頁面的方法進行傳值
  nextPageCallingThisClick:function(value){
    console.log('nextPageCallingThisClick=', value)
    this.setData({
      nextComeValue1: value
    })
  }

20.頁面內(nèi)部傳值 (data-{key}="{value}")

比如有好幾個標(biāo)簽及穗,通過wx:for 添加摧茴,點擊標(biāo)簽獲取標(biāo)簽的內(nèi)容

image.png
image.png
click: function (e){
    console.log(e)
    console.log(e.currentTarget.dataset.price)
    console.log(e.currentTarget.dataset.title)
  }

21.頁面內(nèi)部傳值另一種方法, 設(shè)置 id = {}

<text id='{{index}}' data-title='{{item.name}}' data-price='{{item.price}}' bindtap='click'>

// 根據(jù)得到的 id,去data里面找對應(yīng)的具體數(shù)據(jù)
var id = e.currentTarget.id;

22.關(guān)于form bindsubmit 的傳值

??form 的內(nèi)部組件需要設(shè)置 name 屬性

<input name='input' >
<slider name='slider'>
<switch name='switch' >
image.png

23.wx:for wx:if

<view wx:for="{{list}}" wx:item="item" wx:index="index">
  <view class='subView' wx:if='{{item.price < 1000}}'>
    <text id='{{index}}' data-title='{{item.name}}' data-price='{{item.price}}' bindtap='click'>{{index+1}}.  {{item.name}} : {{item.price}}元</text>
  </view>
  <block wx:else>
    <view class='subView' >
      <text>大于1000元的食品</text>
      <text id='{{index}}' data-title='{{item.name}}' data-price='{{item.price}}' bindtap='click'>{{index+1}}.  {{item.name}} : {{item.price}}元</text>
    </view>
  </block>
</view>
因為 wx:if 是一個控制屬性埂陆,需要將它添加到一個標(biāo)簽上苛白。
如果要一次性判斷多個組件標(biāo)簽,可以使用一個 <block/> 標(biāo)簽將多個組件包裝起來焚虱,
并在上邊使用 wx:if 控制屬性购裙。
因為 wx:if 之中的模板也可能包含數(shù)據(jù)綁定,
所有當(dāng) wx:if 的條件值切換時鹃栽,
框架有一個局部渲染的過程躏率,
因為它會確保條件塊在切換時銷毀或重新渲染。

同時 wx:if 也是惰性的民鼓,
如果在初始渲染條件為 false薇芝,
框架什么也不做,
在條件第一次變成真的時候才開始局部渲染摹察。

相比之下恩掷,hidden 就簡單的多,
組件始終會被渲染供嚎,只是簡單的控制顯示與隱藏黄娘。

一般來說,wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗克滴。
因此逼争,如果需要頻繁切換的情景下,用 hidden 更好劝赔,
如果在運行時條件不大可能改變則 wx:if 較好誓焦。

24.wxs

??WXS增強了wxml的功能,相當(dāng)于頁面中的腳本語言,
我們可以將比如檢查手機格式杂伟、郵箱格式的函數(shù)放在wxs中來使用(根據(jù)是否正確來改變相應(yīng)的樣式)移层,
而不用跑到在js中去檢查。

??wxs目前似乎并不支持ES6(至少let不能使用)
??wxs文件不能被js文件引用赫粥。wxml文件能引用wxs文件观话。

wxs

var appent = function (value){
  return value+'元'
}
var message = 'hello world'

module.exports = {
  appent: appent,
  message: message
}

wxml

<wxs src="./appentYuan.wxs" module="util" />

或者

<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>

<view wx:for='{{prices}}'>
<text>{{util.appent(item)}}</text>
<view> {{m1.message}} </view>
</view>

比如:輸入框里面要輸入郵箱,正確的郵箱輸入框顏色為綠色越平,不正確的郵箱輸入框顏色為紅色,就可以使用wxs來判斷

// 正則來檢驗郵箱是否有效
var isEmail = function(email) {
    var reg = getRegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')
    return reg.test(email)
}

module.exports = {
    isEmail: isEmail
}

<wxs src="./inputValidate.wxs" module="util" />
 // 這個應(yīng)該放在 style 里面進行判斷...
<input class="{{util.isEmail(email)?'email_input_success':'email_input_error'}}" 
placeholder='請輸入郵箱' value='{{email}}' bindinput='emailInputClick' />

25.自定義組件

26.自定義js文件

1.新建js文件

/**
 * request 有一個參數(shù) {}
 * 
 * url:       網(wǎng)絡(luò)請求地址
 * data:      網(wǎng)絡(luò)請求參數(shù)
 * success:   網(wǎng)絡(luò)請求成功回調(diào)
 * fail:      網(wǎng)絡(luò)請求失敗回調(diào)
 * complete:  網(wǎng)絡(luò)請求完成回調(diào)
 * 
 */
const request = ({ url: url, data: data, success: success, fail: fail, complete: complete }) => {
  const requestTask = wx.request({
    url: url,
    data: data,
    header: {
      'type': 'application/json'
    },
    method: 'POST',
    success: function (result) {
      // 需根據(jù)返回的狀態(tài)碼自行判斷是否請求成功  200频蛔、400、500秦叛、504等等
      console.log('http成功', result)
      success()
    },
    fail: function (error) {
      console.log('http失敗', error)
      fail()
    },
    complete: function () {
      console.log('http完成')
      complete()
    }

  });
}

module.exports = {
  request: request
}

2.在需要的地方引用
??var httpRequest = require('../../utils/http.js')

 /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    console.log('onReady');

    httpRequest.request({
      url: 'http://',
      data: {
        'num': 1
      },
      success: (result) => {
        console.log('成功', result)
      },
      fail: (error) => {
        console.log('失敗', error)
      },
      complete: () => {
        console.log('完成')
      }
    })
  },

27.page調(diào)用自定義組件內(nèi)部方法

this.selectComponent("#componentID").componentFunc();

page

<questionItem id="questionItem"  />

questionItem

<view animation='{{animation}}'>
...
</view>
showAnimation: function () {
...
}

調(diào)用
this.selectComponent("#questionItem").showAnimation();

28.setInterval晦溪、setTimeout

settimeout()是隔一段時間執(zhí)行函數(shù)且執(zhí)行一次

clearTimeout(this.time)

setinterval()是每隔一段時間便執(zhí)行

停止clearInterval(this.interval)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市挣跋,隨后出現(xiàn)的幾起案子三圆,更是在濱河造成了極大的恐慌,老刑警劉巖避咆,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嫌术,死亡現(xiàn)場離奇詭異,居然都是意外死亡牌借,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進店門割按,熙熙樓的掌柜王于貴愁眉苦臉地迎上來膨报,“玉大人,你說我怎么就攤上這事适荣∠帜” “怎么了?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵弛矛,是天一觀的道長够吩。 經(jīng)常有香客問我,道長丈氓,這世上最難降的妖魔是什么周循? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮万俗,結(jié)果婚禮上湾笛,老公的妹妹穿的比我還像新娘。我一直安慰自己闰歪,他們只是感情好嚎研,可當(dāng)我...
    茶點故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著库倘,像睡著了一般临扮。 火紅的嫁衣襯著肌膚如雪论矾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天杆勇,我揣著相機與錄音贪壳,去河邊找鬼。 笑死靶橱,一個胖子當(dāng)著我的面吹牛寥袭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播关霸,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼传黄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了队寇?” 一聲冷哼從身側(cè)響起膘掰,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎佳遣,沒想到半個月后识埋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡零渐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年窒舟,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诵盼。...
    茶點故事閱讀 38,683評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡惠豺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出风宁,到底是詐尸還是另有隱情洁墙,我是刑警寧澤,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布戒财,位于F島的核電站热监,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏饮寞。R本人自食惡果不足惜孝扛,卻給世界環(huán)境...
    茶點故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望骂际。 院中可真熱鬧疗琉,春花似錦、人聲如沸歉铝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至柠贤,卻和暖如春香浩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背臼勉。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工邻吭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宴霸。 一個月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓囱晴,卻偏偏與公主長得像,于是被迫代替她去往敵國和親瓢谢。 傳聞我的和親對象是個殘疾皇子畸写,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 謝謝作者的文章 非常喜歡 請允許收藏! 博客園首頁博問閃存新隨筆訂閱管理 vue之better-scroll的封裝...
    peng凱閱讀 16,514評論 2 5
  • 簡介: 提供一個讓有限的窗口變成一個大數(shù)據(jù)集的靈活視圖氓扛。 術(shù)語表: Adapter:RecyclerView的子類...
    酷泡泡閱讀 5,148評論 0 16
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫枯芬、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,066評論 4 62
  • 1.辜負了大好時光采郎,沒有把衣服晾出去~ 2.生活中總要經(jīng)歷很多挫折的千所。本該下車時又被推回去。蒜埋。淫痰。
    我要勇敢面對每一天閱讀 148評論 0 0
  • 本文將展開對藍牙低功耗從掃描藍牙設(shè)備,建立連接到藍牙數(shù)據(jù)通信的詳細介紹整份,以及詳細介紹GATT Profile(Ge...
    青晨點支煙閱讀 9,758評論 0 4