悦读APP
- 多页面
主要页面由三个页面组成：index.vue为入口页面，write.vue为写作页面，my.vue为登录页面
底部导航栏：
Page.json中底部导航栏样式：
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#C3b8b4",
"selectedColor": "#99bbff",
"borderStyle": "#ffff77",
"backgroundColor": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/shouye1.jpg",
"selectedIconPath": "static/shouye2.jpg"
},
{
"pagePath": "pages/write/write",
"text": "写作",
"iconPath": "static/xiezuo1.jpg",
"selectedIconPath": "static/xiezuo2.jpg"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/wo1.jpg",
"selectedIconPath": "static/wo2.jpg"
}
]
},- 入口页面
效果如图：
1.轮播图实现：
<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
<swiper-item>
<image src="../../static/lb01.jpg" class="cp01" mode="widthFix" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../static/lb02.jpg" class="cp01" mode="widthFix" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../static/lb03.jpg" class="cp01" mode="widthFix" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../static/lb04.jpg" class="cp01" mode="widthFix" style="width: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../static/lb05.jpg" class="cp01" mode="widthFix" style="width: 100%;"></image>
</swiper-item>
</swiper>2.分类点击页面跳转：
以四六级分类举例：
<view class="f1">
<image class="pic" src="../../static/slj.jpg" @click="fl1()"></image>
<text class="t" >四六级</text>
</view>
方法实现：
fl1(){
uni.navigateTo({
url:'/pages/fl1/fl1'
})
},3.图书详情（以物联网导论为例）：
<view class="r2">
<image class="img" src="../../static/wlwdl.jpg" mode="widthFix" @click="xq()"></image>
<text class="book">物联网导论</text>
</view>
//方法实现：
xq(){
uni.navigateTo({
url:'/pages/xq/xq'
})
}- 写作页面
效果如图：
显示部分：
<input class="input" type="text"
placeholder="请输入标题" v-model="title" />
</view>
</view>
<view class="form">
<view class="luiyanWappar">
<input class="input" type="text" placeholder="作者" v-model="username" />
</view>
</view>
<view class="form">
<view class="luiyantext" rows="8" cols="10" >
<textarea class="in_text" placeholder="写作内容" rows="8" cols="10" v-model="content" ></textarea>
</view>逻辑控制：
<script>
export default{
data(){
return{
title:'',
username:'',
content:''
}
},
onLoad(){},
methods:{
mClick(){
uni.request({
url:"http://（自己电脑的IP地址）/test/jsb.php",
method:'POST',
data:{
title:this.title,
username:this.username,
content:this.content
},
success:res =>{
console.log(res.data);
console.log(res.data.title);
},
fail:() =>{},
complete: () => {}
})
uni.navigateTo({
url: '/pages/book/book?title='+this.title+'&username='+this.username+'&content='+this.content
});
}
}
}
</script>点击确认发布后效果：
控制台显示：
服务器端代码：
<?php
header('Content-Type: text/html; charset=utf-8');
$json = file_get_contents("php://input");
$jsondata = json_decode($json, true);
$title = $jsondata['title'];
$content = $jsondata['content'];
$username = $jsondata['username'];
echo '{"title":"'.$title. '","content":"'.$content.'","username":"'.$username.'"}';
?>- 登录页面
效果如图：
显示部分：
<view class="form">
<view class="inputWrapper">
<input class="input" type="text" placeholder-class="wrapper" placeholder="请输入用户名" v-model="userid"/>
</view>
<view class="inputWrapper">
<input class="input" type="text" placeholder-class="wrapper" placeholder="请输入密码" v-model="password"/>
</view>
<view class="loginBtn">
<button class="btnValue" type="default" @tap="checklogin()">登录</button>
</view>
<view class="forgotBtn">
<button class="zcdl" @click="mClick()">注册</button>
</view>逻辑部分：
<script>
export default {
data() {
return {
userid: '',
password: ''
}
},
methods: {
mClick(){
uni.navigateTo({
url:'/pages/zc/zc'
})
},
checklogin(){
uni.request({
url: 'http://（自己电脑的IP地址）/test/1.php',
method: 'GET',
data: {
userid: this.userid,
password: this.password
},
success: res => {
console.log(res.data);
console.log(res.data.userid);
console.log(res.data.password);
if(res.data.status == 'ok'){
uni.showToast({
title:'登录成功',
icon:'success'
});
}
},
fail: () => {},
complete: () => {}
});
uni.navigateTo({
url:'/pages/zhanghu/zhanghu?userid='+this.userid
});
}
}
}
</script>控制台显示：
服务端代码：
<?php
$name = $_GET['userid'];
$pwd = $_GET['password'];
$status = 'ok';
echo '{"userid":"'.$name.'","password":"'.$pwd.'","status":"'.$status.'"}';
?>注册页面：
登录成功后进入个人账户页面：
效果如图：
显示部分：
<view class="welcome">
欢迎：{{userid}}
</view>
逻辑控制部分：
<script>
export default {
data() {
return {
userid:''
}
},
onLoad(option) {
this.userid = option.userid
},我的作品显示：
显示部分：<button class="b1" @click="mClick()">我的作品</button>
逻辑控制：mClick(){
uni.navigateTo({
url:'/pages/zuoping/zuoping'
})
},退出登录：
前一次登录用户名及密码保存
显示部分：<button class="b1" type="warn" @click="login()">退出登录</button>
逻辑部分：login(){
uni.switchTab({
url:'/pages/my/my'
})
},
8311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
