第一步，在pages下建立自己的一个文件夹：pages（右键）—>新建目录->mypages(右键)->新建page。
同理，建一个log_in文件，和上面一样，文件名不同而已。
然后我们的目标首先是做成下面的页面：
这里涉及了组件tabBar（后面还涉及了组件input和组件button）
详细看文档或者下面这个网址。
https://www.cnblogs.com/huangjialin/p/6278429.html
那么如何设置呢？
打开app.json然后增加一个板块：
1 { 2 "pages": [ 3 "pages/index/index", 4 "pages/logs/logs", 5 //你如果按照上面所说步骤的话，系统会自动写下面这两行，否则出问题。 6 "pages/mypages/page_one", 7 "pages/log_in/log_in" 8 ], 9 "window": { 10 "backgroundTextStyle": "light", 11 "navigationBarBackgroundColor": "#fff", 12 "navigationBarTitleText": "WeChat", 13 "navigationBarTextStyle": "black" 14 }, 15 //新加部分……………………………………………………………… 16 "tabBar": { 17 "color": "#888", 18 "selectedColor": "green", 19 "backgroundColor": "#333", 20 "list": [ 21 { 22 "pagePath": "pages/index/index", 23 "text": "首页", 24 "iconPath": "image/11.png", 25 "selectedIconPath": "image/12.png" 26 }, 27 { 28 "text": "logs", 29 "pagePath": "pages/logs/logs", 30 "iconPath": "image/21.png", 31 "selectedIconPath": "image/22.png" 32 }, 33 { 34 "text": "myPages", 35 "pagePath": "pages/mypages/page_one", 36 "iconPath": "image/21.png", 37 "selectedIconPath": "image/22.png" 38 } 39 ] 40 } 41 //……………………………………………………………………………… 42 }
用的时候把注释去掉。
然后点击保存并编译一下，
这样第一个页面就做好了。
这里的图片是外部资源。你们去找小一点的图片，改下名字，放在你的image文件夹里就行。最好是png格式，这样背景透明，看起来好看。
点击logs图标：
点击mypages图标：
只要这么一行字。
然后呢？我想想……
来做登陆部分，目标如下图：
给log_in.js加加代码。
查看input组件的信息，然后写。学会自己去查
<view> <input placeholder=\'请输入用户名\' bindinput=\'usernameInput\' auto-focus=\'\'/> <input placeholder=\'请输入用户密码\' bindinput=\'passwordInput\' password=\'true\'/> <button type=\'primary\' bindtap=\'loginClick\'>登陆</button> </view>
这个代码的功能就是显示上面的内容。虽然现在你点击不了登陆什么的，甚至看不了页面。
你去把app.json改下。
红圈部分改成pages/log_in/log_in.也就是显示login页面。
这样就可以看到效果了。
但是最后要记得改回来，因为你是要访问mypages里面的page_one，但是page_one检查你没有登陆，所以不给你查看的权限。
要跳转到登陆页面，于是你点击mypages按钮，应该是马上弹出来一个login的窗口，让你输入密码，登陆后再给你这个mypages页面。
始终记得你要做的逻辑，对代码的编写有一定帮助把。。
现在你输入密码账号点登陆什么反应都没有。那就来写下内部逻辑把。
注意到在这里，已经给你自动绑定了输入内容。
先在app.js里建一个全局变量来保存用户名和密码。
所以就去改函数逻辑就行。打开log_in.js
在最上面增加变量来存数据：
然后用函数去取数据：
带注释的版本：
括号你自己对齐一下。改完这个程序是这样的。
// pages/log_in/log_in.js
Page({
/**
* 页面的初始数据
*/
data: {
username: null,
password: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
usernameInput: function (e) {
this.setData({ username: e.detail.value })
},
passwordInput: function (e) {
this.setData({ password: e.detail.value })
},
loginClick: function (e) {
if (this.data.username == "admin" && this.data.password == "456") {
app.globalData.username = this.data.username
wx.switchTab({
//to do change page
url: \'../mypages/page_one\',
fail(e) {
console.log(e)
}
})
}
}
})
在调试台，你打开mypages，输入密码456，点击登陆，你希望看到下面这个。
然而还是没有反应，咋整。
因为你没有修改跳转的逻辑呗。。。
注意到，这里我们希望用户倘若没有登陆，就去登陆一个。那么，没有注册的用户是看不到页面的。要是你没登陆都能看到，那不是飞起了？？？
打开page_one.js修改这里的onload函数，用wx.redirectTo去定向。
这样如果你没有登陆，他就会要求你登陆了。这样基础就完成了。
注意log_in和page_one都要加左边那一条去获取页面实例。
后续内容： （总代码在下面网址附上）
https://www.cnblogs.com/hitWTJ/p/9866294.html
请发表评论