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://img.wangzhan5u.com/images/5/wxxcxhjhoszwmjyj.jpg",
user: "https://img.wangzhan5u.com/images/5/wxxcx10aeo0btgtl.jpg",
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()
})
},
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!