Simple code for WeChat applet login and registration page

<view class="container">
  <form>
    <view class="input-wrapper">
      <input type="text" placeholder="请输入用户名" />
    </view>
    <view class="input-wrapper">
      <input type="password" placeholder="请输入密码" />
    </view>
    <view class="button-wrapper">
      <button type="primary" form-type="submit">登录</button>
    </view>
  </form>
  <view class="link-wrapper">
    <navigator url="/pages/register/register">没有账号?点击注册</navigator>
  </view>
</view>

The corresponding style can be modified using the style library or custom style provided by the WeChat applet, and more functions such as form validation and logic control can be added to improve the page

input {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

In the above code, borderthe attribute defines the width, style and color of the border, paddingthe attribute defines the padding around the input box, border-radiusthe attribute defines the corner radius of the border, and box-shadowthe attribute defines the shadow effect of the input box. Using similar codes can easily add the same style to multiple elements, which greatly simplifies the writing of page styles.

Guess you like

Origin blog.csdn.net/m0_57790713/article/details/130470030