WeUI注册页面

最新推荐文章于 2020-12-19 17:51:56 发布
最新推荐文章于 2020-12-19 17:51:56 发布
阅读量713 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JunChow520/article/details/103030482
版权
4933701-d482e5d656ffaf17.png
注册页面

1. 路由配置

系统路由配置文件：resources\web.php

Route::get('/register', function () {
    return view('register');
});

2. 模板规划

  • 基础布局模板：resources\views\layout.blade.php
  • 模板组件目录：resources\component

基础布局模板：resources\views\layout.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <title>@yield('title')</title>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/zepto.min.js"></script>
</head>
<body>
    <div id="popout">@yield('popout')</div>
    <div id="mask">@yield('mask')</div>
    <div id="navigation">@yield('navigation')</div>
    <div id="content">@yield('content')</div>
</body>
@yield('myjs')
</html>

注册模板文件：resources\views\register.blade.php

@extends('layout')
@section('title','注册')
@section('content')
    <div class="weui-cells__title">注册方式</div>
    <div class="weui-cells weui-cells_radio">
        <label class="weui-cell weui-check__label">
            <div class="weui-cell__bd">
                <p>手机注册</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="type" value="phone" checked="checked"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label">
            <div class="weui-cell__bd"><p>邮箱注册</p></div>
            <div class="weui-cell__fd">
                <input type="radio" class="weui-check" name="type" value="email"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="tel" name="phone" class="weui-input"></div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="number" name="phone_vcode" class="weui-input"></div>
            <div class="weui-cell__ft"><a class="weui-vcode-btn">获取</a></div>
        </div>
        <div class="weui-cell email">
            <div class="weui-cell__hd"><label class="weui-label">邮箱</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="email" name="email" class="weui-input"></div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="password" name="password" class="weui-input" placeholder="不少于6位"> </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">重复密码</label></div>
            <div class="weui-cell__bd weui-cell_primary"><input type="password" name="repassword" class="weui-input"> </div>
        </div>

    </div>
    <div class="weui-cells__tips"></div>
    <div class="weui-btn-area">
        <a href="" class="weui-btn weui-btn_primary">注册</a>
    </div>
    <a href="/login" class="important-tips">有账户，去登录</a>
    <script>
        $(function(){
            $('input[name=type]').on('click',function(){
               $('input[name=type]').attr('checked',false);
                $(this).attr('checked',true);
                if($(this).val()=='phone'){
                    $('input[name=phone]').parent().parent().show();
                    $('input[name=phone_vcode]').parent().parent().show();
                    $('input[name=email]').parent().parent().hide();
                }
                if($(this).val()=='email'){
                    $('input[name=email]').parent().parent().show();
                    $('input[name=phone]').parent().parent().hide();
                    $('input[name=phone_vcode]').parent().parent().hide();
                }
            });
        })
    </script>
@endsection
JunChow520
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery WeUI组件微信公众号页面模板
04-25
jQuery WeUI组件微信公众号页面模板jQuery WeUI组件微信公众号页面模板
一个用weui+html+css页面的例子
03-26
卖鲜花的网站的html页面，只有html和js但是很完整，拿下来就能用
weui 必填_WeUI注册页面
weixin_39623716的博客
12-19 454
注册页面1. 路由配置系统路由配置文件：resources\web.phpRoute::get('/register', function () {return view('register');});2. 模板规划基础布局模板：resources\views\layout.blade.php模板组件目录：resources\component基础布局模板：resources\views\layo...
WeUI登录页面
JunChow
03-02 3339
登录页面 1. 创建登录路由 路由文件地址 routes\web.php Route::get('/login', function () { return view('login'); }); 2. 模块规划 基础布局模板：resources\views\layout.blade.php 模板组件目录：resources\component 基础布局...
jquery-weui微信商城全套页面模板
12-22
使用jquery-weui开发的一整套移动端商城，包括首页，购物车，订单管理，评价，分类，会员中心等页面，分享给需要的人。
weui注册页面结合js+css
03-15
weui注册页面结合js+css
注册页面weui+html+css+js
最新发布
03-21
注册页面weui+html+css+js
weui的模版
05-10
它提供了一整套与微信风格一致的UI组件，使得开发者可以快速搭建出符合用户体验和视觉感受的页面。"weui" 这个压缩包文件很可能包含了这个框架的所有必要资源，包括CSS样式文件、JavaScript脚本、图片以及示例模板等...
weui开发整套移动端微商城模板
01-10
此外，此模板还考虑到了注册协议的完善，这意味着在用户注册和登录过程中，会使用到WeUI的输入框（input）、验证（validate）等组件，同时可能有浮动提示（toast）、提示框（popup）等交互元素，确保用户能够顺畅地...
weui开发的一整套移动端商城
05-03
移动端商城涉及到用户的个人信息和交易安全，因此必须实施严格的数据加密、防止XSS和CSRF等攻击，同时制定明确的注册协议，保护用户的隐私权益。 7. **性能优化**： 对于移动端，加载速度直接影响用户体验。...
微商城模板,weui
10-16
移动商城HTML静态模板，使用weui。包含、登录、注册、订单、商品界面、用户中心等等。
weui微信商城全套页面模板.rar
04-24
包括主页，分类页，购物车，后台页等等等，效果请访问 https://blog.csdn.net/weixin_44797182/article/details/105739913
WeUI 商城模板免费下载，完整全套模板包括首页/列表/登录等。
05-26
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在WeUI基础上开发的完整全套模板包括首页/列表/登录等。
weui开发整套移动端微商城模板源码
11-13
一、源码特点 1、自适应，运用了html5新特性标签，使用weui开发的一整套移动端商城，包括首页，购物车，订单管理，评价，分类，会员中心等，全面到注册协议都弄好了。私人定制服务手机网站模板html源码下载，可进行二次修改进行开发，适合微信，值得借鉴。 文档参考地址：http://www.ui92.com/
WEUI整套移动端模板源码
03-15
WEUI整套移动端模板源码WEUI整套移动端模板源码WEUI整套移动端模板源码
微信页面设计weui（2）--操作反馈actionSheet
weixin_30326515的博客
02-24 296
微信页面的操作反馈交互功能学习，其中有很好的注释，很容易理解 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initi...
WeUI实现登录页面
沧海龙腾LV的博客
02-22 8431
利用WeUIz做的登录页： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;he...
微信WeUI常见页面模板
weixin_34101229的博客
08-31 2844
购物车模板 就是popup弹层(css样式+js)，还有slider滑动操作，还有增减的js 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" c...
微信小程序使用weui设计界面
乐乐呀的博客
03-09 2888
微信小程序使用weui设计界面 刚入门微信小程序开发，使用微信web开发者工具，对界面的设计有时会有按钮等的位置大小不好设置，但是微信web开发者工具有一个很好的工具是weui，WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一，包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要...
boostrap weui jquery页面搭建
05-28
您好！您的问题是如何使用 Bootstrap、WeUI 和 jQuery 搭建页面。以下是一个简单的步骤指南： 1. 下载并引入 Bootstrap、WeUI 和 jQuery 的 CSS 和 JavaScript 文件。您可以在官方网站上下载这些文件。 2. 创建 HTML 页面并在<head>标签中引入所需的 CSS 文件和 JavaScript 文件。 3. 使用 Bootstrap 的 class 和组件来创建页面布局，如容器、网格、导航栏、表格等。 4. 使用 WeUI 的 class 和组件来创建页面元素，如按钮、表单、卡片等。 5. 使用 jQuery 来实现动态效果，如页面滚动、表单验证、弹出框等。 6. 最后，使用 CSS 样式来美化页面，使其更加美观和易于使用。 以上是一个简单的步骤指南，您可以根据自己的需求和实际情况进行修改和调整。希望对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值