微信小程序实战（一）---实现登录界面

最新推荐文章于 2023-09-15 17:30:09 发布

杨小事er

最新推荐文章于 2023-09-15 17:30:09 发布

阅读量7w

点赞数 28

分类专栏：小程序文章标签：前端微信

本文链接：https://blog.csdn.net/qq_25936689/article/details/53044178

版权

本文介绍了微信小程序的实战应用，通过实例展示了如何创建一个登录界面。文章提及了WXML文件的结构，使用input组件及bindInput事件监听输入，以及在JS文件中通过Page的data进行状态管理。此外，还讲解了利用button组件的bindTap事件触发登录函数logIn，该函数获取用户输入并使用微信小程序的请求API模拟Ajax发送请求。在请求成功后，页面会跳转到welcome页面。

摘要由CSDN通过智能技术生成

昨天小程序第一天公测，就下载个小程序自带IDE玩了玩，看了看API，撸出了个登录界面给大家分享下。

下面是主界面和代码。

index.wxml

<view class="container">
  <view class="usermotto">
    <text class="user-motto">{
  {motto}}</text>
    用户名：
    <input type="text" bindinput="userNameInput"/>
    密码：
    <input type="text" bindinput="userPasswordInput" password="true"/>
    <button bindtap="logIn">登录</button>
  </view>
</view>

index.js

var app = getApp()
Page({
  data: {
    motto: '欢迎登录WXapp',
    userName:'',
    userPassword:'',
    id_token:'',//方便存在本地的locakStorage
    response:'' //存取返回数据

最低0.47元/天解锁文章