使用Weex仿制一个掘金的登录页互动效果，和YoYo互动起来吧~

思乡码农
1,774 阅读3分钟

我正在参与掘金创作者训练营第6期， 点击了解活动详情

在本文中，你可以学会拿weex写一个掘金的登录页，马上开始吧~

前言

本文是Weex入门级寓教于乐项目，通过这个项目，你可以了解Weex的基本语法以及使用限制，因为笔者的认知深度的原因，或有谬误，欢迎指正。

线上开发环境体验

Weex官方为我们提供了 Online Editor + Weex Playground 应用的方式帮助我们快速的在线体验Weex, 本文就是以这种形式进行讲解说明，如果不仅仅想要尝鲜的同学，可以查看下一节 # 本地开发环境搭建

本地开发环境搭建

本节是讲解 Weex 在本地进行开发环境搭建，只是尝鲜的同学可以跳过本节

Weex官方也提供了Weex CLI这样的工具帮助我们快速搭建本地化的开发环境，Weex开发依赖node环境，所以如果没有node 环境的同学需要先去nodeJs 官网，如果是windows环境的同学可以直接下载安装长期支持版即可，如果是mac或者liunx，请查看官方文档 Node.js 官方信息 自行下载安装

安装完 nodeJs 后，会自动安装 npm 包管理工具，如果你有 yarn 等其他包管理工具，也可以使用 yarn 来下载安装我们的工具

  • OSX环境
$ sudo chmod -R 777 /usr/local/lib/node_modules/
$ npm i -g weex-toolkit // 安装不要使用sudo执行
$ weex -v // 查看当前weex工具版本
  • #Windows环境
$ npm i -g weex-toolkit 
$ weex -v // 查看当前weex工具版本

安装结束后你可以直接使用 weex help 命令验证是否安装成功，它会显示 weex 支持的所有指令，同时，你也可以通过 weex doctor 命令检查你的本地开发环境

页面布局

Weex 有内置的一些组件和语法，这里我们先不管他，先用平平无奇的 vue2.x 先去实现我们的登录页面，这里我们就用一个页面实现即可`

添加掘金主题色

首先我们使用白色，作为我们登录页的背景色，juejin-box是个div，宽高百分百

.juejin-box{
  width: 100%;
  height: 100%;
  position: relative;
}

image.png

在页面上方添加掘金Logo

我们在掘金页面上复制一下掘金的Logo，然后放在页面上。

tips1: Weex里图片的话需要用内置组件<image> , 而且必须有宽、高、src

tips2: 这里的css单位 wx 假如不希望受屏幕宽度和 viewPortWidth 影响，建议使用。

<div class="juejin-box">
   <div class="jj-logo-box">
      <image style="width:100wx;height:100wx" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6c61ae65d1c41ae8221a670fa32d05aa.svg"></image>
    </div>
  </div>
//css
.jj-logo-box{
  width: 100wx;
  height: 100wx;
  position: absolute;
  top: 50wx;
  left: 0;
  right: 0;
  margin: auto;
}

image.png

登录窗体及输入框

登录窗体我们依然使用定位的方式将div放置在屏幕中间即可，然后使用内置组件<input>实现输入框的功能

<div class="login-box">
       <div class="title">手机号登录</div>
       <input  ref="range" class="input" type="text" placeholder="请输入手机号码"   ></input>
    </div>
/css
.login-box{
  width: 80%;
  border: 1wx solid #eee;
  position: absolute;
  top: 300wx;
  left:0;
  right:0;
  margin:auto;
  padding: 20wx;
}
.input{
    width: 100%;
    height:100wx;
    border-width: 1px;
    border-style: solid;
    border-color: #d9d9d9;
    placeholder-color: #41B883;
    padding-left: 20px;
    font-size: 40wx;
  }

image.png

添加YOYO 并响应输入框激活状态

这里我们需要做的是，声明一个变量，然后监听输入框focus和blur，切换变量的状态来控制我们的两张YOYO照片的显示隐藏即可

<div class="login-box">
       <div class="title">手机号登录</div>
       <input  ref="range" class="input" type="text" placeholder="请输入手机号码" @focus="onFocus" @blur="onBlur" ></input>
      <image class="yoyo" v-if="!focus"  src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ad7fa76844a2df5c03151ead0ce65ea6.svg"  style="width:300wx;height:300wx;"/>
      <image class="yoyo" v-if="focus" src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/500c1180a96859e5c54a5359f024a397.svg"  style="width:300wx;height:300wx;"/>
    </div>
// js
 module.exports = {
  name: 'PageDemo',
  
  data: {
    focus: false
  },
  methods: {
    onFocus:function (e) {
      this.focus= true
    }, 
    onBlur:function (e) {
      this.focus= false
    },
  }
}
//css
.yoyo{
  position: absolute;
  top: -230wx;
   left:0;
  right:0;
  margin:auto;
  
}

1.gif

本节内容的完整代码

<template>
  <div class="juejin-box">
   <div class="jj-logo-box">
      <image style="width:100wx;height:100wx" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6c61ae65d1c41ae8221a670fa32d05aa.svg"></image>
    </div>
    <div class="login-box">
       <div class="title">手机号登录</div>
       <input  ref="range" class="input" type="text" placeholder="请输入手机号码" @focus="onFocus" @blur="onBlur" ></input>
      <image class="yoyo" v-if="!focus"  src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ad7fa76844a2df5c03151ead0ce65ea6.svg"  style="width:300wx;height:300wx;"/>
      <image class="yoyo" v-if="focus" src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/500c1180a96859e5c54a5359f024a397.svg"  style="width:300wx;height:300wx;"/>
    </div>
  </div>
</template>

<script>
 module.exports = {
  name: 'PageDemo',
  
  data: {
    focus: false
  },
  methods: {
    onFocus:function (e) {
      this.focus= true
    }, 
    onBlur:function (e) {
      this.focus= false
    },
  }
}
</script>

<style scoped >
.juejin-box{
  width: 100%;
  height: 100%;
  position: relative;
}
.jj-logo-box{
  width: 100wx;
  height: 100wx;
  position: absolute;
  top: 50wx;
  left: 0;
  right: 0;
  margin: auto;
}
.login-box{
  width: 80%;
  border: 1wx solid #eee;
  position: absolute;
  top: 400wx;
  left:0;
  right:0;
  margin:auto;
  padding: 20wx;
}
.input{
    width: 100%;
    height:100wx;
    border-width: 1px;
    border-style: solid;
    border-color: #d9d9d9;
    placeholder-color: #41B883;
    padding-left: 20px;
    font-size: 40wx;
  }
.yoyo{
  position: absolute;
  top: -230wx;
   left:0;
  right:0;
  margin:auto;
  
}
.title{
  font-size: 50wx;
  font-weight: 600;
  text-align: left;
  margin-bottom: 15px;
}
</style>

技术要点总结

  • 图片加载需要使用image标签，并且需要指定宽高和src属性
  • 文本输入框需要使用内置组件input,并且需要监听事件来处理值和样式
  • vue实例是以module.exports commonjs的规范进行导出的
  • vue内的data不是函数而是对象
  • methods内的函数不能用简写形式

结语

好啦，以上就是我们使用 Weex 来实现的YoYo交互动效啦，喜欢的朋友动起手来吧！代码可以直接在Online Editor 中跑起来哟！

avatar
文章
阅读
粉丝