swiper组件动态渲染与点击跳转
<!--pages/swiper/swiper.wxml-->
<swiper indicator-dots="true" autoplay="true">
<block wx:for="{{list}}" wx:key="*this"
wx:for-item="r" wx:for-index="i">
<swiper-item class="swiper-item" data-url="{{r.path}}" bindtap="goNewPage">
<image src="{{r.image}}" mode="widthFix"></image>
</swiper-item>
</block>
</swiper>
/* pages/swiper/swiper.wxss */
.swiper-item{
width: 750rpx;
/* height: 320px; */
display: flex;
justify-content: center;
}
.swiper-item image{
width: 100%;
/* height: 160px; */
display: block;
}
// pages/swiper/swiper.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(wx);
this.getImageFn()
},
goNewPage(e){
let {currentTarget:{dataset:{url}}}=e;
wx.navigateTo({
url: '/pages/linkpage/linkpage?url='+url
})
},
getImageFn(){
wx.request({
url: 'https://api.apiopen.top/getWangYiNews',
method:'POST',
data:{
page: '1',
count: '5'
},
success:(res)=>{
this.setData({
list:res.data.result.slice(0,5)
})
}
})
},
<!--pages/linkpage/linkpage.wxml-->
<web-view src="{{url}}"></web-view>
// pages/linkpage/linkpage.js
Page({
/**
* 页面的初始数据
*/
data: {
url:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(options.url);
let {url}=options;
this.setData({url})
},
form表单注册与登录练习
// 注册
<!--pages/register/register.wxml-->
<view class="flex row">
<view class="label">昵称：</view>
<input placeholder="请输入昵称" bindinput="nichenCtrl"/>
</view>
<view class="flex row">
<view class="label">邮箱：</view>
<input placeholder="请输入邮箱" bindinput="emailCtrl"/>
</view>
<view class="flex row">
<view class="label">密码：</view>
<input placeholder="请输入密码" bindinput="pwdCtrl"/>
</view>
<view class="flex row">
<view class="label">确认密码：</view>
<input placeholder="请确认密码" bindinput="repwdCtrl"/>
</view>
<view style="text-align: center;">
<button plain type="primary" style="width:150px;" bindtap="registerCtrl">注册</button>
</view>
<!--pages/register/register.wxml-->
<view class="flex row">
<view class="label">昵称：</view>
<input placeholder="请输入昵称" bindinput="nichenCtrl"/>
</view>
<view class="flex row">
<view class="label">邮箱：</view>
<input placeholder="请输入邮箱" bindinput="emailCtrl"/>
</view>
<view class="flex row">
<view class="label">密码：</view>
<input placeholder="请输入密码" bindinput="pwdCtrl"/>
</view>
<view class="flex row">
<view class="label">确认密码：</view>
<input placeholder="请确认密码" bindinput="repwdCtrl"/>
</view>
<view style="text-align: center;">
<button plain type="primary" style="width:150px;" bindtap="registerCtrl">注册</button>
</view>
// pages/register/register.js
Page({
/**
* 页面的初始数据
*/
data: {
nichen:'',
email:'',
pwd:'',
repwd:''
},
nichenCtrl:function(e){
this.setValue(e,'nichen')
},
emailCtrl:function(e){
this.setValue(e,'email')
},
pwdCtrl:function(e){
this.setValue(e,'pwd')
},
repwdCtrl:function(e){
this.setValue(e,'repwd')
},
setValue:function(event,keyName){
let {detail:{value}} = event;
/* keyName是变量所以要使用中括号 */
this.setData({
[keyName]:value
})
},
registerCtrl:function(){
if(!this.data.nichen||!this.data.email||!this.data.pwd||!this.data.repwd){
wx.showToast({
title: "输入不能为空",
icon:"error"
})
return
}
if(this.data.pwd!=this.data.repwd){
wx.showToast({
title: "密码不一致",
icon:"error"
})
return
}
wx.request({
url: 'https://api.shop.eduwork.cn/api/auth/register',
method:'POST',
data:{
name:this.data.nichen,
email:this.data.email,
password:this.data.pwd,
password_confirmation:this.data.repwd
},
success:function(res){
// console.log(res);
if(res.statusCode==201){
wx.showToast({
title: "注册成功",
icon:"success"
})
setTimeout(()=>{
wx.navigateTo({
url: 'pages/login/login',
})
},2000)
}else{
wx.showToast({
title: "注册失败",
icon:"error"
})
}
}
})
},
// 登录
<!--pages/login/login.wxml-->
<view class="flex row">
<view class="label">邮箱：</view>
<input placeholder="请输入邮箱" bindinput="emailCtrl"/>
</view>
<view class="flex row">
<view class="label">密码：</view>
<input placeholder="请输入密码" bindinput="pwdCtrl" type="password"/>
</view>
<view style="text-align: center;" class="flex">
<button plain type="primary" style="width:100px;margin-right: 10px;"
bindtap="loginFn">登录</button>
<button plain type="primary" style="width:100px;margin-left: 10px;" bindtap="registerFn">注册</button>
</view>
/* pages/login/login.wxss */
.row{
padding:5px;
margin:25px;
padding-bottom: 20px;
border-bottom: 1px dashed #ccc;
}
.row .label{
line-height: 30px;
width: 80px;
text-align: center;
}
.row input{
border:1px solid #ccc;
width: 220px;
height: 30px;
padding-left:5px;
border-radius: 10px;
}
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
email:'',
pwd:''
},
emailCtrl(e){
this.setValue(e,'email')
},
pwdCtrl(e){
this.setValue(e,'pwd')
},
setValue(event,key){
this.data[key] = event.detail.value
},
loginFn(){
if(!this.data.email||!this.data.pwd){
wx.showToast({
title: '输入项不能为空',
icon: 'error'
})
return
}
wx.request({
url: 'https://api.shop.eduwork.cn/api/auth/login',
method: 'POST',
data:{
email: this.data.email,
password: this.data.pwd
},
success:(res)=>{
console.log(res);
if(res.statusCode==200){
let {data:{access_token}} = res;
wx.setStorageSync('token', access_token)
wx.showToast({
title: '登录成功',
icon: 'success'
})
setTimeout(()=>{
wx.navigateTo({
url: '/pages/showpage/showpage'
})
},1500)
return
}else{
wx.showToast({
title: '登录失败',
icon: 'error'
})
return
}
}
})
},
registerFn:function(){
wx.navigateTo({
url: '/pages/register/register',
})
},
