微信小程序前端手机验证界面代码‌可以通过以下步骤实现：

‌页面布局和样式‌：

‌手机号输入框‌：使用标签，类型设置为number，用于输入手机号。 ‌验证码输入框‌：同样使用标签，类型设置为number，用于输入验证码。 ‌获取验证码按钮‌：使用标签，绑定点击事件以获取验证码。 ‌登录按钮‌：使用标签，绑定表单提交事件以完成登录操作。

<view class="container">
    <form bindsubmit="formSubmit">
        <view class="form-item">
            <label>手机号</label>
            <input type="number" name="phone" placeholder="请输入手机号"/>
        </view>
        <view class="form-item">
            <label>验证码</label>
            <input type="number" name="code" placeholder="请输入验证码"/>
            <button bindtap="getCode">获取验证码</button>
        </view>
        <button formType="submit">登录</button>
    </form>
</view>

‌样式设计‌：

‌容器样式‌：设置背景颜色和内边距。 ‌表单项样式‌：设置标签样式、输入框样式和按钮样式。 示例样式代码：

.container {
    padding: 20px;
    background-color: #f4f4f4;
    min-height: 100vh;
}
.form-item {
    margin-bottom: 20px;
}
.form-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.form-item input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
button {
    width: 100%;
    padding: 12px;
    background-color: #1aad19;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}