微信小程序

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()
      })
 }, 
 
 
复制代码