微信小程序开发---京东登录页面(company)

页面效果

代码

company.wxml

<form bindsubmit="formSubmit" bindreset="formReset"><view class="content"><view class="hr"></view><view class="item"><input type="text" name="loginName" placeholder="请设置4-20位用户名" placeholder-class="holder" bingblur="accountblur"/></view><view class="item flex"><input type="text" password name="password" placeholder="请设置5-20位登录密码" placeholder-class="holder"/><switch type="switch" name="switch"/></view><view class="item"><input type="text" name="company" placeholder="请填写工商局注册名称" placeholder-class="holder"/></view><view class="item"><input type="text" name="userName" placeholder="联系人姓名" placeholder-class="holder"/></view><view class="mobileInfo"><view class="mobile"><input type="text" name="mobile" placeholder="请输入手机号" placeholder-class="holder"/></view><view class="code">发送验证码</view></view><view class="item"><input type="text" name="code" placeholder="短信验证码" placeholder-class="holder"/></view><button class="btn" disabled="{{disabled}}" type="{{btnstate}}" form-type="submit">注册</button><view class="xieyi"><text class="agree">注册即视为同意</text><text class="opinion">中国用户注册协议</text></view></view></form>

company.wxss

/* pages/company/company.wxss */
.content{width: 100%;height: 700px;background-color: #f2f2f2;}
.hr{padding-top: 40px;}
.item{margin: 0 auto;border: 1px solid #cccccc;height: 40px;width: 90%;border-radius: 3px;background-color: #ffffff;margin-bottom: 15px; }.item input{height: 40px;line-height: 40px;margin-left: 10px; }.holder{font-size: 14px;color: #999999;}.flex{display: flex;flex-direction: row;}.flex input{width: 300px;}.item switch{margin-top: 5px;margin-right: 5px;}.mobileInfo{display: flex;flex-direction: row;}.mobile{margin: 0 auto;border: 1px solid #cccccc;height: 40px;width: 50%;border-radius: 3px;background-color: #ffffff;margin-bottom: 15px;display: flex;flex-direction: row;margin-left: 5%; }.mobile input{margin-top: 8px;margin-left: 10px;}.code{border: 1px solid #cccccc;height: 40px;width: 35%;background-color: #edeeec;border-radius: 3px;text-align: center;margin-left: 10px;line-height: 40px;color: #999999;font-size: 15px;margin-bottom: 15px;margin-right: 5%; }.btn{width: 90%;color: #999999;margin-top: 40px;}.xieyi{margin-top: 15px;margin-left: 15px;font-size: 13px;}.agree{margin-left: 5px;color: #666666; }.opinion{color: red;font-weight: bold;text-decoration: underline;}

company.js

// pages/company/company.js
Page({data: {disabled: true,btnstate: "default"},accountblur: function (e) {var content= e.detail.value;if(content!=""){this.setData({disabled:false,btnstate:"primary"});}else{this.setData({disabled:true,btnstate:"default"});}},formSubmit: function (e) {console.log(e);var user = new Object();user.account = e.detail.value.loginName;user.password = e.detail.value.password;user.company = e.detail.value.company;user.userName = e.detail.value.userName;user.code = e.detail.value.code;user.mobile = e.detail.value.mobile;user.switch = e.detail.value.switch;wx.setStorageSync("user",user);wx.showToast({title: "注册成功",icon: "success",duration: 1000,success:function(){wx.navigateTo({url: "../login/login",})}})}})

company.json

{"usingComponents": {},"navigationBarTitleText": "企业用户注册"
}

微信小程序开发---京东登录页面(company)相关推荐

微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
微信小程序开发笔记—设置页面密码
文章目录一.功能概述二.实现效果三.实现方法 1.新建个人登陆页面 2.设计密码获取判别函数和响应函数 1)定义变量 2)设计密码获取判别函数 3)设计响应函数 3.设计页面内容 1)input ...
微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
微信小程序入门（登录页面）
1.首先前往开发者工具下载安装开发工具: 2.安装后微信扫码,并填写自己的AppID选择自己的项目目录后登录: 登陆后点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预 ...
微信小程序开发---应用与页面的生命周期
App App() App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. object参数说明: 属性类型描述触发时机 onLaunch Functi ...
微信小程序开发实战（页面导航）
@作者 : SYFStrive @博客首页 : HomePage
微信小程序开发(5)-新闻页面制作之banner
如图: 分四步: 1.在newspage.js中准备图片数据 bannerUrl:['/images/01.png','/images/02.png','/images/03.png'] //要 ...
微信小程序开发必备的八个插件
wechat-snippet 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wxa ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...

微信小程序开发---京东登录页面(company)

微信小程序开发---京东登录页面(company)相关推荐

最新文章

热门文章