微信小程序

1.1 默認登陸頁面

entryPagePath 指定小程序的默認啓動路徑（首頁），常見情景是從微信聊天列表頁下拉啓動、小程序列表啓動等。若是不填，將默認爲 pages 列表的第一項。不支持帶頁面路徑參數。

1.2 頭部 去掉 json文件

"navigationStyle":"custom"

1.3 輪播順序的問題

 屬性 circular 	是否採用銜接滑動	
複製代碼

1.3 防止屢次提交

建立一個公共的js問問文件用來存儲公共的方法 until.js

// 重複點擊   
function isClicked(self) {
  self.setData({
      isClicked: true,

  })
  console.log('111111')
  console.log(self.data.isClicked)
  setTimeout(function () {
      self.setData({
          isClicked: false
      })      
  console.log('22222')
  console.log(self.data.isClicked)
  }, 500)

  console.log('3333')
  console.log(self.data.isClicked)
}
//導出
module.exports = { 
  isClicked: isClicked,
}複製代碼

使用頁面 index.wxml

<button bindtap ="{{!isClick? 'submit':''}}">提交</button>複製代碼

index.js

 //導入變量
 var util = require('../../until.js');
 //使用方法
 submit(){
    util.isClicked(this);
  }複製代碼

1.4 使用頁面加載的事件 配套中止加載事件

建立一個公共的js問問文件用來存儲公共的方法 until.js

  // 加載框 
  function showLoading(message) {
    if (wx.showLoading) {
        // 基礎庫 1.1.0 微信6.5.6版本開始支持，低版本需作兼容處理
        wx.showLoading({
            title: message,
            mask: true
        });
    } else {
        // 低版本採用Toast兼容處理並將時間設爲20秒以避免自動消失
        wx.showToast({
            title: message,
            icon: 'loading',
            mask: true,
            duration: 20000
        });
    }
  }
  // 隱藏加載框
  function hideLoading() {
    if (wx.hideLoading) {
        // 基礎庫 1.1.0 微信6.5.6版本開始支持，低版本需作兼容處理
        wx.hideLoading();
    } else {
        wx.hideToast();
    }
  }
 module.exports = {
  showLoading: showLoading, 
  hideLoading: hideLoading, 
}複製代碼

使用頁面

//導入
 var util = require('../../until.js'); 
複製代碼

在使用的方法請求的前面輸入

 util.showLoading("加載中...");複製代碼

在使用方法的後面使用

util.hideLoading();複製代碼

1.5 手機號校驗

建立一個公共的js問問文件用來存儲公共的方法 until.js

function isPhone(value) {
  if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) {
      return false
  } else {
      return true
  }
}

//驗證碼六位數校驗
function isSixNum(value) {
  if (!/^\d{6}$/.test(value)) {
      return false
  } else {
      return true
  }
}

module.exports = { 
  isPhone:isPhone,
  isSixNum:isSixNum, 
}複製代碼

使用頁面 login.wxml

         <input type="number" placeholder="請輸入手機號" placeholder-class="placeholderStyle" maxlength="11"
          value="{{phone}}" bindinput="phone" confirm-type="done" bindconfirm="submit"></input>複製代碼

login.js

  phone: function (e) {
    this.setData({ 
      phone: e.detail.value,

    });
  },  
複製代碼

使用的接口中

手機號

 //phone 爲文本框獲取的手機號碼
 var result = util.isPhone(phone);

if (!result) {
  wx.showToast({
    title: '請輸入正確的手機號',
    icon: 'none',
    duration: 1500,
  });
  return false;
}複製代碼

驗證碼

//獲取驗證碼

code: function (e) {
   util.isClicked(this);
   var phone = this.data.phone;
    if (phone == "") {
      wx.showToast({
        title: '請輸入手機號',
        icon: 'none',
        duration: 1500,
      }); 
      return false;
    }
	var result = util.isPhone(phone); 
    if (!result) {
      wx.showToast({
        title: '請輸入正確的手機號',
        icon: 'none',
        duration: 1500,
      }); 
      return false;
    } 
	 },     
複製代碼

1.6 下拉刷新加載當前頁面

建立一個公共的js問問文件用來存儲公共的方法 until.js

    function getCurrentPageUrlWithArgs() {
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        const url = currentPage.route
        const options = currentPage.options
        let urlWithArgs = `/${url}?`
        for (let key in options) {
            const value = options[key]
            urlWithArgs += `${key}=${value}&`
        }
        urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
        return urlWithArgs
    }
       module.exports = { 
        progressiveLoad:progressiveLoad,
    } 
複製代碼

使用頁面

    onPullDownRefresh: function () {
      util.showLoading("刷新中...");
      let res = util.getCurrentPageUrlWithArgs();
      setTimeout(function () {
        wx.redirectTo({
          //加載頁面地址
          url: res,
          success: function (res) {
            util.hideLoading();
            wx.stopPullDownRefresh();
          }
        })
      }, 1500);
    }複製代碼

1.3 微信動畫

1.1  index.wxml，一個helloworld，一個按鈕

  <view class="container">
   <view class="usermotto" animation="{{ani}}">
    <text class="user-motto">{{motto}}</text>
   </view>
   <button bindtap='start'>動畫</button>
  </view>  
  
複製代碼

1.2 index.wxss

設計樣式

 .usermotto {
   margin-top: 100px;
   border: solid;
  }複製代碼

1.3 index.js

Page({
 data: {
  motto: 'Hello World',
 },
 start:function(){
  var animation = wx.createAnimation({
   duration: 4000,
   timingFunction: 'ease',
   delay: 1000
  });
  animation.opacity(0.2).translate(100, -100).step()
  this.setData({
   ani: animation.export()
  })
 }
})

  duration: 動畫持續多少毫秒
  timingFunction: 「運動」的方式，例子中的 'ease'表明動畫以低速開始，而後加快，在結束前變慢  
  delay: 多久後動畫開始運行

  opacity(0.2) 慢慢變透明

  translate(100, -100) 向X軸移動100的同時向Y軸移動-100

  step(): 一組動畫完成，例如想讓上例中的HelloWorld向右上方移動並變透明後，再次向左移動50能夠繼續寫 animation.translateX( -50).step() , 做用就是向右上方移動和變透明是同時進行， 這兩種變化完成以後纔會進行向左運行的一步。複製代碼

eg：淡入淡出

默認圖片的淡入淡出

index.wxml

<view class="logo" animation="{{animationData}}">
   <image src="{{logo}}"></image>
</view> 
<view class="button" animation="{{animationInput}}">
 <view class="input_div">
  <view class="input_content">
    <view class="content_list content_border">
      <view class="content_left">
        <image src="{{user}}"></image>
      </view>
      <view class="content_right">
        <input type="number" placeholder="請輸入手機號" placeholder-class="placeholderStyle" maxlength="11"
          value="{{phone}}" bindinput="phone" confirm-type="done" bindconfirm="submit"></input>
      </view>
    </view>        
   </view>
  </view> 
 </view> 
複製代碼

index.js

 data: { 
  logo: "https://beifangfuqiang-1258705300.cos.ap-beijing.myqcloud.com/loginLogo.png",
  user: "https://cz.zhudaihui.cn/images/apply/phone.png",
  animationData: {},      
  animationInput:{},      
  phone: "",
},

 // 執行方法
showLogo: function () {
//隱藏
    var animation = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
    })
    animation.opacity(0).step();
    this.setData({
      animationData: animation.export()
    })
//顯示
    animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'linear',
    })
    animation.opacity(1).step()
    this.setData({
      animationData: animation.export()
    })
//顯示以後繼續執行下一個方法
    setTimeout(()=>{
      this.showInput();
    },1000)
 },
 
 //從底部向上淡出
  showInput:function(){
      var animation = wx.createAnimation({
        duration: 2000,
        timingFunction: 'ease',
      })
      animation.translateY(-350).step();
      this.setData({
        animationInput: animation.export()
      })
 }, 
 
 
複製代碼