精华内容
下载资源
问答
  • 微信小程序(第二十三章)- 注册页面的实现
    2022-01-28 15:36:01

    微信小程序(第二十三章)- 注册页面的实现

    页面实现

    基本和登录页面一样。
    代码如下:

    <!--定义form组件-->
    <form bindsubmit="toRegister">
        <!--输入框区块-->
        <view id="inputView">
            <!--文本框-->
            <input type="text" placeholder="用户名" name="userName"></input>
            <!--密码框-->
            <input type="text" placeholder="输入密码6~12位字母、数字组合" password name="userPwd"></input>
            <input type="text" placeholder="确认密码" password name="userPwd1"></input>
            <!--昵称-->
            <input type="text" placeholder="昵称" name="nickName"></input>
            <!--真实姓名-->
            <input type="text" placeholder="真实姓名" name="realName"></input>
            <!--手机号-->
            <input type="number" placeholder="手机号" name="phone"></input>
            <!--地址-->
            <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" name="place">
                <view class="picker">
                 来自:{{region[0]}} - {{region[1]}} - {{region[2]}}
                </view>
            </picker>
        </view>
        <!--按钮区域-->
        <view id="buttonView">
            <button form-type="submit">注册</button>
            <view>已有账号,去登录</view>
        </view>
    </form>
    
    
    /*给页面设置整体背景色*/
    page{
        background: #f0eff5;
    }
    /*输入框区域样式*/
    #inputView{
        background:#fff;
        padding:0 30rpx;
    }
    #inputView > picker{
        height:88rpx;
        line-height: 88rpx;
    }
    #inputView > input{
        height:88rpx;
        border-bottom: 1rpx solid #f1f1f1;
    }
    /*按钮区域样式*/
    #buttonView{
        width:690rpx;
        margin:80rpx auto 0;
    }
    #buttonView > button{
        width:690rpx;
        height:88rpx;
        font-size:36rpx;
        background:#87cefa;
        color:#fff;
    }
    #buttonView > view{
        font-size:28rpx;
        color:#87cefa;
        text-align: right;
        margin-top: 36rpx;
    }
    
    // pages/register/register.js
    Page({
    
        /**
         * 页面的初始数据
         */
        data: {
            region:['北京市','北京市','海淀区'],
            customItem:'全部'
        },
        bindRegionChange: function (e) {
            console.log(e.detail.value)
            this.setData({
              region: e.detail.value
            })
        },
        toRegister(e){
            console.log(e)
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
    
        },
    
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
    
        },
    
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
    
        },
    
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
    
        },
    
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
    
        },
    
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
    
        },
    
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
    
        },
    
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
    
        }
    })
    
    更多相关内容
  • 主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下
  • 微信小程序的登录注册页面完整设计,纯前台,无后台。
  • 微信小程序的一个登陆注册代码,纯前端实现效果,注册成功进行登陆,列表显示所有用户的名称,点击进入可查看具体的用户信息
  • 微信小程序注册页面

    千次阅读 2018-05-23 18:25:33
    一:微信小程序注册按钮首页代码:&lt;!--pages/face/face.wxml--&gt;&lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__...

    一:微信小程序注册按钮首页


    代码:

    <!--pages/face/face.wxml-->
    < view class= "page">
    < view class= "page__hd">
    < view class= "page__title">人脸采集与识别 </ view >
    < view class= "page__desc">学生信息(包括人像)采集,刷脸登录 </ view >
    </ view >
    < view class= "page__bd page__bd_spacing">
    < button class= "weui-btn" type= "primary" bindtap= 'message'>学生注册 </ button >
    < button class= "weui-btn" type= "warn" bindtap= 'face'>人脸识别 </ button >
    < button class= "weui-btn" type= "default" plain= "true" bindtap= 'list'>学生列表 </ button >
    </ view >
    </ view >

    js代码:

    // pages/button/button.js
    Page({
    //注册按钮跳转
    message: function () {
    wx.redirectTo({
    url: '../add/add',
    })
    },

    face: function () {
    wx.redirectTo({
    url: '../camera/camera',
    })
    },
    list: function () {
    wx.redirectTo({
    url: '../index/index',
    })
    },



    /**
    * 页面的初始数据
    */
    data: {

    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {

    },

    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {

    },

    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function () {

    },

    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function () {

    },

    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {

    },

    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {

    },

    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function () {

    }
    })

    二:学生注册(添加)信息页面


    代码:

    <!--pages/add/add.wxml-->
    <!-- <text>pages/add/add.wxml</text> -->
    <!--index.wxml-->
    < form bindsubmit= "formSubmit">
    < text class= 'one'>填写个人信息 </ text >
    < view class= "weui-cell weui-cell_input">
    < view class= "weui-cell__hd">
    < view class= "weui-label">学号 </ view >
    </ view >
    < view class= "weui-cell__bd">
    < input class= "weui-input" name= "no" placeholder= "请输入学号" value= "52415415415" / >
    </ view >
    </ view >


    < view class= "weui-cell weui-cell_input">
    < view class= "weui-cell__hd">
    < view class= "weui-label">姓名 </ view >
    </ view >
    < view class= "weui-cell__bd">
    < input class= "weui-input" name= "name" placeholder= "请输入姓名" value= "13" / >
    </ view >
    </ view >



    < view class= "weui-cell weui-cell_input">
    < view class= "weui-label">性别 </ view >
    < input class= "weui-input" name= 'sex' value= '{{sex}}' / >
    < view class= 'weui-cell_ft'>
    < switch checked bindchange= 'switch1Change'></ switch >
    </ view >
    </ view >




    < view class= "weui-cell weui-cell_input">
    < view class= "weui-cell__hd">
    < view class= "weui-label">年龄 </ view >
    </ view >
    < view class= "weui-cell__bd">
    < input class= "weui-input" name= "age" placeholder= "请输入年龄" value= "20" / >
    </ view >
    </ view >
    < view class= "button-sp-area">
    < button class= "weui-btn" type= "primary" form-type= 'submit' plain= "true">确定
    </ button >
    < button class= "weui-btn" type= "primary" bindtap= 'fanhui' plain= "true">返回上一级
    </ button >
    </ view >
    </ form >

    js代码:

    // pages/add/add.js
    //获取应用实例
    const app = getApp()
    Page({
    data: {
    sex: '女',
    },
    fanhui: function () {
    wx.redirectTo({
    url: '../button/button',
    })
    },

    switch1Change: function (e) {
    if (e.detail.value) {
    this.setData({ sex: '男' })
    } else {
    this.setData({ sex: '女' })
    }
    },
    formSubmit: function (e) {
    // console.log(e);
    wx.request({
    url:
    data: e.detail.value,
    method: 'POST',
    header: {
    'content-type': 'application/x-www-form-urlencoded'
    },
    success: (res) => {
    console.log(res.data);
    if (res.error) {
    wx.showToast({
    title: res.data.msg,
    icon: 'none',
    duration: 2000
    })
    } else {
    wx.showToast({
    title: '添加成功',
    icon: 'success',
    duration: 2000
    })
    setTimeout( function () {
    wx.navigateTo({
    url: '../headimg/headimg?id=' + res.data.id ,
    })
    }, 2000)
    }
    }
    })
    }
    })


    展开全文
  • 微信小程序中,我们不免的要设置背景图片和字体颜色。 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲 首先先说怎么设置页面背景图片: 这是博主准备的照片。 下面是在wxml中的代码 ...
  • 通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,今天带大家学习小程序登陆注册功能的开发,需要的朋友可以参考下
  • 微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talk...
  • 微信小程序登录界面设计,适合初级学者,可以实现界面登录,简单的登录微信小程序,喜欢的可以看看,微信小程序登录界面设计(可以登录)
  • 主要介绍了小程序登录/注册页面设计的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 微信小程序 实现登录 最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚...
  • 选择小程序开发---> 新建(图标 )一个项目---->填写以下信息: a.AppId:(暂无,不影响工具预览,无法手机微信预览,需要注册微信公众平台的应用号,才可具有(与开发者微信有关联,不是随便别人给一个就行))) b.项目名...
  • 微信小程序实现登录注册页面

    千次阅读 2021-07-26 08:53:44
    目录小程序中引入iconfont小程序登录注册页面实现效果 小程序中引入iconfont 1.在官网搜索需要的图标 2.将图标添加至项目 3.打开我的项目, 4.选择font class,点击下方的链接 5.拷贝生成的源码到全局样式 ...

    小程序中引入iconfont

    1.在官网搜索需要的图标

    2.将图标添加至项目

    3.打开我的项目,

    4.选择font class,点击下方的链接

    5.拷贝生成的源码到全局样式

    小程序登录注册页面

    .wxml文件:

    <view style="margin-top:40%">
      <form bindsubmit="submit">
        <view class="form_item" style="margin-bottom: 20px;">
          <i class="iconfont icon-user"></i>
          <input type="text" placeholder="用户名" />
        </view>
        <view class="form_item" style="margin-bottom: 40px;">
          <i class="iconfont icon-password"></i>
          <input type="password" placeholder="密码" />
        </view>
        <view>
          <button class="login_btn">登录</button>
          <button>注册</button>
        </view>
      </form>
    </view>
    

    .less文件:

    @formItemHeight: 36px;
    
    @themeColor: rgb(50, 100, 192);
    
    .form_item {
      margin: 0 50rpx;
      height: @formItemHeight;
      border: 1px solid @themeColor;
      border-radius: 5px;
    
      i {
        float: left;
        height: @formItemHeight;
        margin: 0 5px;
        font-size: 20px;
        color: @themeColor;
        line-height: @formItemHeight;
      }
    
      input {
        float: left;
        height: @formItemHeight;
      }
    
    }
    
    .login_btn {
      background: @themeColor;
      color: white;
      margin-bottom: 15px;
    }
    

    实现效果

    展开全文
  • 本项目木代码只有微信小程序页面,不包含后台的实现.包括用户名和密码文本和输入框,以及按钮的样式实现.
  • 微信小程序首页设计,登录界面设计,仿京东界面,抽奖界面设计,微信小程序期末大作业,有登陆界面的购物商城界面
  • 主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍,需要的朋友可以参考下
  • 1、小程序注册 2、小程序开发者工具使用教程 3、小程序配置文件 4、小程序常用组件 5、小程序的模板语法 6、小程序中的样式编写 7、小程序中的JavaScript 8、小程序应用及页的生命周期 9、小程序常用API 10、小程序...
  • 实现以下微信小程序的音乐播放器,先看下效果图 界面做的确实挺丑的,先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角...
  •  微信小程序开发框架的逻辑层是由JavaScript编写。在JavaScript的基础上,微信团队做了一些适当的修改,以便提高开发小程序的效率。主要修改包括:  :diamond_suit: 增加app和page方法,进行程序和页面注册  :...
  • 但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习 新建一个页面的步骤: 1> 必须要创建一个wxml文件和一个js文件,并且文件名要同名(例:test.wxml 和 test.js)...
  • 对于微信小程序,为了使开发更快,微信小程序采用的框架为 MINA 应用框架。MINA框架主要是负责数据交互的系统。它的结构主要包括用于显示页面的视图层结构和负责数据交互的逻辑层系统。其中,视图层负责发布事件...
  • 小程序微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本文主要还...
  • 转载... ... 1)onPullDownRefresh:下拉刷新 监听用户下拉刷新事件。 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。 可以通过wx.startPullDownRefresh触发下拉刷新,调用...

    转载https://www.cgtblog.com/wx/3297.html
    http://www.4317.org/news/?3373.html
    1)onPullDownRefresh:下拉刷新

    监听用户下拉刷新事件。

    需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。并且可设置backgroundTextStyle 为dark,则刷新时出现的是
    在这里插入图片描述
    可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
    当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

        "backgroundTextStyle": "dark",
        "enablePullDownRefresh": true
    

    2)onReachBottom:上拉触底

    监听用户上拉触底事件。

    可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。

    在触发距离内滑动期间,本事件只会被触发一次。

    3)onPageScroll:页面滚动

    监听用户滑动页面事件。

    参数为Object,包含以下字段:
    在这里插入图片描述
    4)onShareAppMessage:用户转发
    注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

    监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。
    自定义转发字段:
    示例代码

    在开发者工具中预览效果

    Page({
      onShareAppMessage: function (res) {
        if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return {
          title: '自定义转发标题',
          path: '/page/user?id=123'
        }
      }
    })
    

    onTabItemTap(Object)
    基础库 1.9.0 开始支持,低版本需做兼容处理。

    点击 tab 时触发
    在这里插入图片描述

    页面相关事件处理函数:

    1. onPullDownRefresh与onReachBottom

    onPullDownRefresh下拉刷新事件需要在app.json中window配置项中开启下拉刷新的配置项enablePullDownRefresh。

    onReachBottom上拉触底事件可以在app.json或当前页面的json文件中window配置项中设置onReachBottomDistance的值。

    ①开启下拉刷新,并设置页面上拉触底时距离页面底部的距离

    开启下拉刷新:
    在这里插入图片描述
    设置页面上拉触底时距离页面底部的距离(可以设置的稍大点,理解一下参数的意义):
    在这里插入图片描述
    ②由于需要触发上拉触底事件,因此将tst.wxml页面放一些内容,使页面可以上下拉动。
    在这里插入图片描述
    ③在onPullDownRefresh与onReachBottom事件中,分别输出文字,作为提示
    在这里插入图片描述
    ④下拉刷新事件触发
    在这里插入图片描述
    ⑤上拉触底事件触发
    在这里插入图片描述
    注意:

    1. onReachBottomDistance配置项默认为50。

    2. onReachBottom事件函数在触发距离内滑动期间,本事件只会被触发一次,只有超出范围后再滑动才触发。

    3. onPageScroll页面滚动事件函数

    onPageScroll页面滚动事件,返回页面在垂直方向已滚动的距离。

    ①在onPageScroll事件中,输出滚动的距离(tst.js文件)

    在这里插入图片描述
    ②编译,滚动页面
    在这里插入图片描述
    3. onShareAppMessage用户转发事件
    ①在onShareAppMessage事件中,输出内容并返回标题及路径(tst.js文件)
    在这里插入图片描述
    ②编译,分享触发onShareAppMessage事件
    在这里插入图片描述

    展开全文
  • 本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下 效果图: 小程序上经常会有一些注册 申请页面需要用到随机验证码。具体实现方法不多说 直接上代码 <text class='left'>{...
  • 主要介绍了微信小程序 本地存储实例详解的相关资料,需要的朋友可以参考下
  • 因为看不到全貌,所以只有登录页和系统设置页面,其他页面必须登录才可以看到,但是据我观察,应该是个很不错的小程序,假如有兴趣的,可以下载下来仔细研究。工具打开直接是登陆状态系统管理页面,可以看到一些,...
  • 1、注册一个小程序账号,得用一个没注册过公众号的邮箱注册。 2、注册过程中需要很多认证,有很多认证,比较繁琐,如果暂时只是开发测试,不进行提审、发布的话,只要完成营业执照号填写就可以了,不需要完成微信...
  • 微信小程序登录demo

    2018-06-01 12:01:47
    一款微信小程序的小demo,支持一段时间免密登录,定时清除当前用户的登录信息,安全性有保障,且代码应用场景广泛,可套用,附完整源码
  • 微信小程序设计用户注册页面

    万次阅读 多人点赞 2018-06-21 08:28:36
    * 页面的初始数据 */ data: { text: '获取验证码', //按钮文字 currentTime: 61, //倒计时 disabled: false, //按钮是否禁用 phone: '', //获取到的手机栏中的值 VerificationCode: '', Code: '', N...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,488
精华内容 11,395
关键字:

微信小程序注册页面

微信小程序 订阅