微信小程序登录页面怎么开发

之所以大家都能使用微信小程序这么多功能，其实是开发者努力的结果。小程序开发技术要求不高，但是每一项都需要一个具体的教程，所以小编会给你提供微信小程序登录页面的开发教程，希望能帮到你。

微信小程序登录页面渲染：

小程序目录结构：

图像资源：

name.png

key.png

loginlog.jpg

login.wxml:

账号

密码

注册

login.wxss:

页面{ height : ；}。容器{ height : ；display: flexflex-direction:柱；padding:0框尺寸：边框；背景色： #f2f2f2}

/*登录图像*/。登录图标{ flex: none} .log in-img { width : 750 rpx；}

/* applet表单的内容*/。登录-from { margin-top : 20px；flex: auto高度：；}。inputview { background-color : # fff；线高： 44px；}/*输入框*/。nameimage，key image { margin-left : 22px；width: 14px高度： 14px}。loginlab { margin : 15px 15px 15px 10px；color: # 545454font-size: 14px}。inputtext { flex:块；向右浮动：text-align : right；margin-right : 22px；margin-top : 11px；color: # ccccccfont-size: 14px}。线{ width : ；height: 1px背景-color : # cccccc；margin-top :1 px；}/*按钮*/。loginbtview { width : ；height: auto背景-color : # f2 f2；margin-top : 0px；margin-bottom : 0px；padding-bottom : 0px；}。login btn { width : 80%；margin-top : 35px；}

login.js:

第({ data: { phone: ' '，password:'' })页，//获取输入账号phone input : function(e){ this . set data({ phone : e . detail . value })}。

//获取输入密码password input : function(e){ this . set data({ password : e . detail . value })}。

login:函数{if (this。data.phone.length==0 | | this。data . password . length==0){ wx . show toast({ title : '用户名和密码不能为空'，icon :' loading '，duration : 2000})} else {//此处，页面wx . show toast({ title : ' log in successful '，icon :' success '，duration : 2000 })})

以上是开发微信小程序登录页面所需的小程序代码。只要你有这个代码，按照源代理网小程序通道提供的正确流程，就可以成功开发微信小程序登录页面。来试试。

下面是题目的开头。微信小程序如何存储数据？标题到此结束

微信小程序如何存储数据？微信小程序的数据怎么存储？自从微信小程序问世以来，很多微信微信账号都开发了微信小程序。其实每个微信小程序都可以存储数据。那么微信小程序如何存储数据呢？

微信小程序的数据怎么存储？本地缓存可以通过wx . setstorage(wx . setstorageync)、wx . getstorage(wx . getstorageync)和wx . clearstorage(wx . clearstorageync)进行设置、获取和清理。本地缓存为10mb。

注意：localstorage是长期存储的，但我们不建议将所有密钥信息都存储在localstorage中，以防止用户更换设备。

wx.setstorage(对象)

将数据存储在本地缓存中指定的密钥中会覆盖与该密钥对应的原始内容，这是一个异步接口。

对象参数的描述：

示例代码

wx.setstoragesync(密钥，数据)

将数据存储在本地缓存中指定的密钥中会覆盖该密钥对应的原始内容，这是一个同步接口。

对象参数的描述：

示例代码

wx.getstorage(对象)

从本地缓存异步获取指定键对应的内容。

对象参数的描述：

示例代码：

wx.getstoragesync(密钥)

从本地缓存中同步获取指定密钥对应的内容。

参数描述：

示例代码：

wx.getstorageinfo(对象)

关于当前存储信息的异步获取

对象参数的描述：

成功返回的参数描述：

示例代码：

同步并获取当前存储的相关信息

示例代码：

wx.removestorage(对象)

从本地缓存异步移除指定的密钥。

对象参数的描述：

示例代码：

wx.removestoragesync(密钥)

从本地缓存中同步删除指定的键。

参数描述：

示例代码：

wx.clearstorage

清理本地数据缓存。

示例代码：

同步清理本地数据缓存

示例代码：