目标

掌握微信小程序项目的基本架构。

背景

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

任务

请编写一个用户登录页面，提示输入用户名和密码进行登录

1，页面配置文件 index.wxml

<view class="login-container"><view class="title">微信小程序App</view><view class="login-box"><label>用户名</label><input placeholder="请输入用户名"/><label>密码</label><input placeholder="请输入密码"/><button class="login-btn">立即登录</button><view class="three-line">一一一一一第三方登录一一一一一</view><button class="login-btn" style="background-color:green;">微信登录</button></view>
</view>

2，样式配置文件 index.wxss

/* pages/login/login.wxss */
page{height: 100%;    /* 使用page的height可以使页面占全屏 */background-color: #fafafa;}
.login-container{padding: 0 10%;height: 100%;
}
.title{font-size: large;text-align: center;padding-top: 10%;font-weight: bold;
}
.login-box{margin-top: 10%;padding: 10% 5%;background-color: white;border-radius: 10px;box-shadow: 0 4px 4px #888888;
}
.login-box>input{margin: 5% 0 8% 0;border-bottom: 1rpx solid lightgray;
}
.login-btn{width: 100%!important;background-color: #2f6afd;color: white;font-weight: normal;
}.three-line{margin: 8% 0;text-align: center;font-size: 12px;color: gray;
}

3，index.json

{"navigationBarTitleText": "用户登录"
}

4，事件函数

index.js

Page({submit: function(e) {wx.request({method:'post',url: 'http://127.0.0.1:3000/',data: e.detail.value,success:function(res){console.log(res)}})}
})

5，连接服务器

打开命令提示符，在D盘下新建文件夹：D:/wxapp/server/project

6，server.js

const express  = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
//处理POST请求
app.post('/',(req,res) =>{console.log(req.body)res.json(req.body)
})//监听3000端口
app.listen(3000,() =>{console.log('server running at http://127.0.0.1:3000')
})

7，服务器数据交互

关闭验证

用命令提示符切换到改目录下：D:/wxapp/server/project
执行如下命令：

8，实现效果

如果你觉得本文写得不错，顺手点个赞，感谢老铁！

1.2 微信小程序开发-用户登录页面设计相关推荐

微信小程序开发---京东登录页面(company)
页面效果代码 company.wxml <form bindsubmit="formSubmit" bindreset="formReset">& ...
微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)
如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...
Python 实现微信小程序的用户登录
小程序可以通过官方提供的登录能力来获取用户身份的标示,具体文档可以参考这里,通过流程时序可以看到,对于需要和前端配合的服务端开发,主要实现的就是通过小程序提供的 code 换取用户的 openid ...
微信小程序中用户登录和登录态维护
微信小程序和以前的web项目不同,他是前后端分离的应用,之前我们的传统登录有web服务器提供Session维护, 后端在返回结果给前端web项目时,带上cookie,且以cookie值为key存储用户 ...
微信小程序开发 - 用户授权登陆
本篇将帮助读者实现基于微信开发者工具 & C#环境下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/mini ...
微信小程序实现用户登录授权java代码
1.微信官方文档 auth.code2Session | 微信开放文档 2.我们来实现这个登录功能, 直接上完整代码 controller  & ...

1.2 微信小程序开发-用户登录页面设计

目标

背景

任务

1，页面配置文件 index.wxml

2，样式配置文件 index.wxss

3，index.json

4，事件函数

index.js

5，连接服务器

6，server.js

7，服务器数据交互

8，实现效果

1.2 微信小程序开发-用户登录页面设计相关推荐

最新文章

热门文章