• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序访问接口由于缺少中间证书访问失败的问题 - dongruiha发布时间:2022-07-18
下一篇:
微信小程序 实现上拉加载更多发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap