简单的可上网微信小程序创建和布局——课程四

第一步，在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

转载于:https://www.cnblogs.com/hitWTJ/p/9865940.html