微信小程序入门(登录页面)

1.首先前往开发者工具下载安装开发工具:


2.安装后微信扫码,并填写自己的AppID选择自己的项目目录后登录:

登陆后点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。


3.代码构成:可以看到在项目的根目录有一个 app.json 和 project.config.json,在app.json中是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等,内容如下:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

project.config.json的作用:你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。内容如下:

{
	"description": "项目配置文件。",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": true,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.4",
	"appid": "wx9cff9d70e4813ce5",
	"projectname": "page",
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}

4.app.js(交互逻辑)响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。本js中写的是获取微信的头像,显示信息(hello word!)以及点击它们时所触发的事件,代码如下:

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

下面在page中再建一个login目录用来写登录页面,login.xml中写页面的模板,相当于html:

<!--pages/login/login.wxml-->
<view class='container'>
  <view class='header'>
    <text>学生评教系统</text>
  </view>
  <form bindsubmit="formSubmit">
    <view class='section'>
      <text>学号:</text>
      <input type='number' placeholder='请输入学号' name="no" value='1635050238'/>
    </view>
    <view class='section'>
      <text>密码:</text>
      <input password='true' placeholder='请输入密码' name="pwd" value='123456'/>
    </view>
    <view class='button'>
      <button type='primary' form-type='submit'>登录</button>
    </view>
  </form>
    <view class='fpwd' bindtap='findpwd'>
      <text>忘记密码</text>
    </view>
</view>

在login.wxss中写模板的样式,相当于css:

/* pages/login/login.wxss */
form{
  width: 310px;
  height: 240px;
  line-height: 40px;
  /* border: 1px solid red;  */
}
input{
  border: 1px solid #ccc;
  width: 310px;
  height: 40px;
}
.button{
  margin-top: 20px;
}
.header text{
  font-size: 25px;
  color: #666;
}
form text{
  font-size: 20px;
  color: #666;
}
.fpwd{
  margin-top: 200px;
}
.fpwd text{
  color: #ccc;
  font-size: 18px;
}

login.js中写当点击登陆时所触发的事件:

// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },
  formSubmit: function (e) {
    // console.log(e.detail.value);
    wx.request({
      // url: 'https://www.lishuming.top/pj/index.php/student/api/login', //仅为示例,并非真实的接口地址
      url: app.globalData.url.login,
      data: {
        username: e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        if (res.statusCode == 200) {
          //访问正常
          if (res.data.error == true) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000,
            })
          } else {
            //缓存
            wx.setStorage({
              key: "student",
              data: res.data.student
            });
            wx.showToast({
              title: "登陆成功",
              icon: 'success',
              duration: 20000,
              success: function () {
                setTimeout(function () {
                  wx.switchTab({
                    url: '../teachers/teachers',
                  })
                }, 2000)
              }
            })
          }
        }

      }
    })
  }
})

页面显示:



  • 26
    点赞
  • 141
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序是一种轻量级的应用程序,可以在微信内直接运行,无需下载安装。下面是一个简单的微信小程序入门案例,供参考: 1. 创建小程序项目 首先,在微信开发者工具中创建一个小程序项目,填写相应的项目名称、AppID等信息。创建完成后,可以看到项目中已经自动生成了一些文件和目录。 2. 编写界面和逻辑代码 在小程序项目中,界面和逻辑代码被分别存储在两个不同的文件夹中,分别为 `pages` 和 `utils`。其中,`pages` 文件夹存放小程序的界面代码,而 `utils` 文件夹则存放小程序的逻辑代码。 在 `pages` 文件夹中,可以新建一个 `.wxml` 文件来定义小程序的界面结构,使用 `.wxss` 文件来设置界面的样式,使用 `.js` 文件来编写小程序的逻辑代码。 例如,下面是一个简单的小程序界面代码: ``` <!-- index.wxml --> <view class="container"> <text>欢迎使用微信小程序!</text> </view> ``` 在对应的 `.js` 文件中,可以编写小程序的逻辑代码,例如: ``` // index.js Page({ data: { message: 'Hello, World!' } }) ``` 3. 预览和调试小程序 在编写完小程序的界面和逻辑代码后,可以在微信开发者工具中进行预览和调试。在工具中,点击“预览”按钮,即可在微信客户端中查看小程序的效果。 在预览和调试过程中,可以使用工具提供的调试功能来检查小程序的运行状态和调试错误。 4. 发布小程序 当小程序开发完成后,可以将其发布到微信小程序平台,供用户使用。在微信开发者工具中,点击“上传”按钮,即可将小程序上传到微信小程序平台进行审核和发布。 需要注意的是,小程序需要经过审核才能够正式发布。因此,在上传小程序之前,需要仔细检查小程序的代码和功能,确保符合微信小程序的相关规定和要求。 以上是一个简单的微信小程序入门案例,希望对初学者有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值