精华内容
下载资源
问答
  • 微信小程序登录界面设计,适合初级学者,可以实现界面登录,简单的登录微信小程序,喜欢的可以看看,微信小程序登录界面设计(可以登录)
  • 微信小程序登录界面input条件 我的页面 wxml页面代码 <input class="in1" bindinput="value" type="number" placeholder="请输入手机号"></input> <input class="in2" bindinput="value2" name=...

    微信小程序登录界面input条件

    我的页面

    在这里插入图片描述

    wxml页面代码

     <input class="in1" bindinput="value" type="number" placeholder="请输入手机号"></input>
      <input class="in2" bindinput="value2" name="in2" type="password" placeholder="请输入密码"></input>
      <button class="btn" bindtap="deng" type="primary">登录</button>
      <button class="btn" bindtap="zhuce" type="primary">注册</button>
    

    wxss页面代码

    .in1{
      height: 75px;
      width: 75%;
      text-align: left;
      display:block;
      margin:0 auto;
    }
    .in2{
      height: 75px;
      width: 75%;
      text-align: left;
      display:block;
      margin:0 auto;
    }
    .btn{
      float: top;
      width: 75% !important;
      margin-top: 20px;
    }
    

    js页面代码

    // pages/show/show.js
    Page({
      data:{
        test:'',
        test2:''
      },
      zhuce: function(options){
        wx.redirectTo({
          url: '../zhu/zhu',
        })},
        xie: function(options){
          wx.redirectTo({
            url: '../zhu/xie',
          })},
          value:function(e){
            this.setData({
            test:e.detail.value
            })
          },
          value2:function(e){
            this.setData({
            test2:e.detail.value
            })
          },
    
          deng:function(e){
          let content = this.data.test
          let content2 = this.data.test2
          if(content.length!=11){
        wx.showToast({
          title: '手机号不符合格式!',
          icon: 'none',
          duration: 1500
      })
      return false
    }
    else if(content2.length<1){
      wx.showToast({
        title: '密码不能为空!',
        icon: 'none',
        duration: 1500
    })
    return false
    }
    else
      if(!content ==''){
              wx.showToast({
              title: '成功',
              icon: 'success',
              duration: 2000
             })
             than:{
                wx.switchTab({
              url:'../index/index'
          })
             }
            }  
        }
    })
    

    注释

    wx.redirectTo:保留当前页面,跳转到应用内的某个页面
    wx.showToast:弹出框
    e.detail.value:动态获取input的value
    wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    展开全文
  • 用户首次登录填写信息,然后直接跳转主页;第二次登陆后判断已经填过信息,就显示自动登录页面,用的是setInterval函数,但是 有个问题就是setInterval的时间设为3s,用户第一次登录还没填写信息就自动跳转了, ...
  • 微信小程序 欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。下面将会按照以下的顺序介绍:布局的实现逻辑的实现样式的实现1.布局的实现整个布局使用swiper滑动视图...

    微信小程序 欢迎界面

    市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。

    下面将会按照以下的顺序介绍:

    布局的实现

    逻辑的实现

    样式的实现

    1.布局的实现

    整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮

    立即体验

    2.逻辑的实现

    在data中准备了一个imgs数组,数组中存放了3个图片的地址,这里还有一个start函数,该函数用来监听界面上button的点击事件。

    wx.navigateTo这个api的作用就是实现界面的跳转并有返回的按钮,url是用来指定跳转的界面

    Page({

    data:{

    imgs:[

    "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",

    "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",

    "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",

    ],

    img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",

    },

    start(){

    wx.navigateTo({

    url: '../home/home'

    })

    // wx.redirectTo({ url: '../index/index' })

    },

    })

    3.样式的实现

    swiper样式是定义滑动控件的样式:滑动控件的位置为绝对布局,宽和高为占满整个屏幕

    .swiper-image样式是定义image图片的样式:宽和高为占满整个屏幕,透明度为0.9

    .button-img样式是定义button按钮的样式:位置为绝对布局,离底部90px,透明度为0.6,..

    swiper {

    /*这个是绝对布局*/

    position: absolute;

    height: 100%;

    width: 100%;

    }

    .swiper-image {

    height: 100%;

    width: 100%;

    /*透明度*/

    opacity:0.9;

    }

    .button-img{

    /*这个是绝对布局*/

    position: relative;

    bottom: 90px;

    height: 40px;

    width: 120px;

    opacity:0.6;

    }

    感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

    更多微信小程序 欢迎界面开发的实例详解相关文章请关注PHP中文网!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!

    展开全文
  • 微信小程序登录注册界面

    万次阅读 2019-06-02 21:55:21
    微信小程序登录注册界面 第一次接触微信小程序的开发,首先就是从前端的界面开始,我要做的是一个农场管理的微信小程序,大致包括登录、注册、主要功能界面这些,这里我就分享一下我的登录注册界面的设计和功能实现...

    微信小程序登录注册界面

    第一次接触微信小程序的开发,首先就是从前端的界面开始,我要做的是一个农场管理的微信小程序,大致包括登录、注册、主要功能界面这些,这里我就分享一下我的登录注册界面的设计和功能实现

    Pages中的代码构成:xxx.js、xxx.json 、xxx.wxml、 xxx.wxss

    首先登录界面

    Login.wxml

    <!-- 农场主登录 -->

    <view class="container">

        <view class='content'>

            <image class="user-avatar" src="/image/touxiang.jpg"></image>

            <input placeholder="账户" class='user-id' bindinput='getUsername' />

            <input placeholder="密码" class='password' bindinput='getPassword' password='true' />

            <button class='login' bindtap='loginClick' hover-class='login-hover'>登录</button>

            <button class='register' bindtap='registerClick' hover-class='register-hover'>新用户请先注册</button>

        </view>

        <view class='triangle3'></view>

        <view class='triangle4'></view>

        <view class='triangle5'></view>

        <view class='triangle6'></view>

    </view>

    这是页面的组建布局设计

    下面要点击“新用户注册”跳转到农场主注册界面,需要进入login.js对按键“登录”和“新用户请先注册”进行页面跳转设置

    Login.js

    Page({

      loginClick: function () {

        wx.navigateTo({

          url: '../farmermain/farmermain',

        })

      },

      registerClick: function () {

        wx.navigateTo({

          url: '../farmerregister/farmerregister',

        })

      }

    })

    接下来每个界面流程都是同样的,按照自己的设计的模式来布置组建按钮,位置大小颜色等,对按钮点击跳转的主要方法就是在.js文件中使用

    wx.navigateTo({

          url: '../xxx/xxx',

        })

    进行跳转

    这只是一些界面相互之间的跳转,没有后台,也没连接数据库等,可以只用于前期的界面的设计,方便更改调整,后期连接后台和数据库时还需要再修改

    展开全文
  • 利用java实现一个微信小程序登录态维护功能发布时间:2020-12-08 16:56:38来源:亿速云阅读:82作者:Leah利用java实现一个微信小程序登录态维护功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编...

    利用java实现一个微信小程序登录态维护功能

    发布时间:2020-12-08 16:56:38

    来源:亿速云

    阅读:82

    作者:Leah

    利用java实现一个微信小程序登录态维护功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

    作为服务端,如果想获得到使用微信小程序的会员信息,就需要小程序作为客户端把会员的基本信息传过来。类似于手机号,openId可以作为当前小程序中用户的唯一性标志。然而如果把会员的openId信息明文直接在服务端与小程序端来回传输的话,会有安全性的问题。万一被别人得到这个openId,就相当于得到会员的手机号一样,就可以做一些其他操作了,显然是不安全的。

    为了解决这一问题微信采用了相对安全的方式。

    //app.js

    App({

    onLaunch: function() {

    wx.login({

    success: function(res) {

    if (res.code) {

    //发起网络请求

    wx.request({

    url: 'https://test.com/onLogin',

    data: {

    code: res.code

    }

    })

    } else {

    console.log('获取用户登录态失败!' + res.errMsg)

    }

    }

    });

    }

    })

    微信小程序端会调用wx.login的api,然后会得到一个code,这个code对外人来讲是没有任何意义的,可以放心的传给服务端。服务端得到code以后,加上你申请小程序时的appId, app secret,去调微信的接口

    https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

    就可以得到以下参数:openid 用户唯一标识

    session_key 会话密钥

    unionid 本字段在满足一定条件的情况下才返回

    其中openid 就是会员的唯一性标记,此时服务端可以保存下来。

    session_key 以后解密 unionId(整个开放平台会员的唯一性标识)时有用。

    服务端得到openid以后,为了后边的交互,要保存下来。一般来讲有两种方式:一种是直接入数据库,一种是采用效率高一点的缓存。楼主采用的是后者,方式是redis。

    按照微信的建议此时需要生成一个不重复值作为openId的唯一性标识。这里采用的是java的uuid。然后把这个uuid值作为key,把openid以及后面会用到的session_key作为value,存进redis。并且把uuid值返回给小程序。这样小程序就可以直接拿uuid值跟服务端交互。

    也许会有人问,如果有人得到uuid值其实跟得到openid没什么区别啊,都相当于是会员的唯一性标志。

    所以这里要对这个uuid值进行一个处理。首先存入redis时要有时效性。session_key在微信服务器有效期是30天,建议服务端缓存session_key不超过30天。当小程序传过来的uuid值过期时,认为这是过期的uuid,则重新走wx.login步骤。

    为了方便redis中不仅会寸uuid与openid的对应关系。还会再存一条openid对应uuid的记录,目的是为了下一次重新wx.login步骤时根据openid找到之前老的uuid,如果存在的话就删掉,然后查询一条新的uuid值,并且把openid对应的这条记录也更新掉。这样redis服务器中就不会有多余的脏数据,减轻服务器的负担。

    以上就是我理解的整个登录态的过程,当然还有wx.checkSession这些没有讲到,其实就是发现session_key失效是再重新走一遍上述的流程就可以了。所以没有仔细说。不知道我有没有讲清楚。我会把整个流程的关键代码贴出来,供大家参考。

    @ActionKey("/loginByWeixin")

    public void loginByWeixin() throws Exception {

    logger.info("Start getSessionKey");

    String json = HttpKit.readData(getRequest());

    JSONObject reqJson = JSON.parseObject(json);

    String jsCode = reqJson.getString("code");

    if (jsCode == null || "".equals(jsCode)) {

    logger.info("缺少必要参数");

    renderJson(new OutRoot().setCode("100").setMsg(SYS.PARAMETER_FAIL));

    } else {

    List record = appInfoService.selectAppInfo();

    String appId = record.get(0).get("app_id");

    String appSecret = record.get(0).getStr("app_secret");

    if (appId == null || "".equals(appId) || appSecret == null || "".equals(appSecret)) {

    logger.info("缺少必要参数");

    renderJson(new OutRoot().setCode("100").setMsg(SYS.PARAMETER_FAIL));

    } else {

    String url = "https://api.weixin.qq.com/sns/jscode2session";

    String httpUrl = url + "?appid=" + appId + "&secret=" + appSecret + "&js_code=" + jsCode

    + "&grant_type=authorization_code";

    String ret = HttpRequest.sendGetRequest(httpUrl);

    logger.info("微信返回的结果 {}", ret);

    if (ret == null || "".equals(ret)) {

    logger.info("网络超时");

    renderJson(new OutRoot().setCode("101").setMsg(SYS.CONTACT_FAIL));

    } else {

    JSONObject obj = JSONObject.parseObject(ret);

    if (obj.containsKey("errcode")) {

    String errcode = obj.get("errcode").toString();

    logger.info("微信返回的错误码{}", errcode);

    renderJson(new OutRoot().setCode("101").setMsg(SYS.CONTACT_FAIL));

    } else if (obj.containsKey("session_key")) {

    logger.info("调微信成功");

    // 开始处理userInfo

    String openId = obj.get("openid").toString();

    Record tbMember = new Record();

    tbMember.set("weixin_openid", openId);

    System.out.println("openId==" + openId);

    // 先查询openId存在不存在,存在不入库,不存在就入库

    List memberList = tbMemberService.selectMember(tbMember);

    if (memberList != null && memberList.size() > 0) {

    logger.info("openId已经存在,不需要插入");

    } else {

    JSONObject rawDataJson = reqJson.getJSONObject("userInfo");

    String nickName = rawDataJson.getString("nickName");

    String avatarUrl = rawDataJson.getString("avatarUrl");

    String gender = rawDataJson.getString("gender");

    String province = rawDataJson.getString("province");

    String city = rawDataJson.getString("city");

    String country = rawDataJson.getString("country");

    tbMember.set("gender", gender);

    tbMember.set("nick_name", nickName);

    tbMember.set("avatar_url", avatarUrl);

    Long openId2 = tbMemberService.addMember(tbMember);

    logger.info("openId不存在,插入数据库");

    }

    // (1) 获得sessionkey

    String sessionKey = obj.get("session_key").toString();

    logger.info("sessionKey==" + sessionKey);

    logger.info("openId==" + openId);

    // (2) 得到sessionkey以后存到缓存,key值采用不会重复的uuid

    String rsession = UUID.randomUUID().toString();

    Cache tokenCache = Redis.use("redis_00");

    // (3) 首先根据openId,取出来之前存的openId对应的sessionKey的值。

    String oldSeesionKey = tokenCache.getJedis().get(openId);

    if (oldSeesionKey != null && !"".equals(oldSeesionKey)) {

    logger.info("oldSeesionKey==" + oldSeesionKey);

    // (4) 删除之前openId对应的缓存

    tokenCache.getJedis().del(oldSeesionKey);

    logger.info("老的openId删除以后==" + tokenCache.getJedis().get(oldSeesionKey));

    }

    // (5) 开始缓存新的sessionKey: key --> uuid, value --> sessionObj

    JSONObject sessionObj = new JSONObject();

    sessionObj.put("openId", openId);

    sessionObj.put("sessionKey", sessionKey);

    tokenCache.getJedis().set(rsession, sessionObj.toJSONString());

    // (6) 开始缓存新的openId与session对应关系 : key --> openId , value --> rsession

    tokenCache.getJedis().set(openId, rsession);

    String newOpenId = tokenCache.getJedis().get(openId);

    String newrSession = tokenCache.getJedis().get(rsession);

    logger.info("新的openId==" + newOpenId);

    logger.info("新的newrSession==" + newrSession);

    // (7) 把新的sessionKey返回给小程序

    JSONObject objret = new JSONObject();

    objret.put("rdSessionKey", rsession);

    objret.put("errno", 0);

    renderJson(objret);

    }

    }

    }

    }

    }

    看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

    展开全文
  • 微信小程序中,我们大致会涉及到以下三类登录方式:自有的账号注册和登录;使用其他第三方平台账号登录;使用微信账号登录(即直接使用当前已登录的微信账号来作为小程序的用户进行登录)。第一和第二种方式是目前...
  • 本文将详细的介绍微信小程序登录流程以及在ssm框架下如何实现小程序用户登录(日后补上过滤器的配置。。。)登录流程概要主要的登录流程可以参考官方提供的一张流程图: 1.微信前台页面:在微信版本更新之后,提高了...
  • 申请微信小程序并认证的步骤参见三掌柜发布的名为“微信小程序:微信公众号申请微信小程序并认证的步骤”这篇文章,这里只介绍怎么正确登录微信小程序管理后台界面。 发现一个问题,之所以被误导就是因为没有正确....
  • 申请微信小程序并认证的步骤参见三掌柜发布的名为“微信小程序:微信公众号申请微信小程序并认证的步骤”这篇文章,这里只介绍怎么正确登录微信小程序管理后台界面。  发现一个问题,之所以被误导就是因为没有...
  • 微信小程序登录界面,有自动登录选项,忘记密码及注册,登录表单验证等
  • 引言相信大家在刚刚接触到微信小程序的开发时,首先是从前端的界面开始,而我们最熟悉的登录界面应该就是微信,那下面我将分享一下模拟微信的登陆界面的设计与功能的实现。方法介绍 目录结构首先在里面新建一个...
  • 我们在开发小程序时,难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序...
  • 本质其实就是大家在学校常写的登录界面,只是将前端界面换成了微信小程序,并不是用微信账号登录, 链接数据库 首先要导入jar包,链接数据库。 博主自己的jdbc常用链接代码。返回一个Connection对象。 需要链接...
  • 说到微信小程序,不可避免会触及到微信账号的授权登录,现在来说说一下哈!首先需要自己的一个小程序,可以到微信公众平台注册一个自己的小程序: https://mp.weixin.qq.com/wxopen/waregister?action=step1:在这里...
  • 作为一个新手,最近在编写微信小程序的时候遇到了一个问题,分享一下我的解决方案,也欢迎大佬分享更为有效的方法。 问题是这样的: 一、需求分析 用户第一次登录小程序显示登录与注册页面 登陆成功后跳转至个人...
  • 微信小程序首页设计,登录界面设计,仿京东界面,抽奖界面设计,微信小程序期末大作业,有登陆界面的购物商城界面
  • 微信小程序登录授权详解 由于微信官方修改了getUserInfo接口,现在一进入小程序无法自动弹出授权界面,所以需要我们自己写一个微信授权界面使用button按钮去触发该接口。 1.实现思路 ① 先调用wx.login获取登录凭证...
  • 前言:由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口...在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示下面“界面简介”的第一个图,让用户去执...
  • 微信小程序中,每一个界面的文件夹下有4个文件,如图: login为登录界面各文件存储的文件夹,其下有四个文件,从其后缀名可以看出其与web开发中的各种类型文件的相似之处。 wxml文件主要表示界面上有那些东西;...
  • 微信小程序+Django—登录界面交互

    万次阅读 多人点赞 2019-02-27 15:26:44
    最近有一个项目是做微信小程序的开发,由于也是刚刚学习了django,所以准备用django来做微信小程序的后台。 &amp;nbsp; &amp;nbsp;由于没有系统的学习过小程序的开发,有些坑要自己慢慢地爬,特此将自己爬...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述当新用户登录一个APP时,输入手机号获取验证码的...
  • 登录界面 注册界面 wxml代码 <view class="top-line-button {{TopIndex == 0 ? 'active':''}} " data-index="0" bindtap='changstyle'>登陆 </view> <view class="top-line-b...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 597
精华内容 238
关键字:

微信小程序登录界面

微信小程序 订阅