微信小程序开发2.6、页面添加表单与样式-登陆

 时间:2026-04-22 08:41:59

1、添加一个目录,命名login,然后分别添加login.xx(新建一个page就可以了)

微信小程序开发2.6、页面添加表单与样式-登陆

2、在小程序根目录的app.json里面,把login这行移动到第一行上

微信小程序开发2.6、页面添加表单与样式-登陆

3、在login.wxml添加以下代码

<view class="container">

<form bindsubmit='formSubmit'>

<view class="row">

<text>账号:</text>

<input type="text" name="userName" placeholder="账号" />

</view>

<view class="log">

<text>密码:</text>

<input type="password" name="userPassword" placeholder="密码" />

</view>

<view class="log">

<button type="primary" form-type="submit">登陆</button>

</view>

</form>

</view>

微信小程序开发2.6、页面添加表单与样式-登陆

4、点击编辑,然后在模拟器,就可以预览到一个简单的登陆表单了

微信小程序开发2.6、页面添加表单与样式-登陆

微信小程序开发2.6、页面添加表单与样式-登陆

1、然后在login.wxss里面修改样式,效果如图2

微信小程序开发2.6、页面添加表单与样式-登陆

微信小程序开发2.6、页面添加表单与样式-登陆

2、格式是如下

.类名{

    属性:值;

}

微信小程序开发2.6、页面添加表单与样式-登陆

3、另外组件的格式如下

.类名 组件{

    属性:值;

}

微信小程序开发2.6、页面添加表单与样式-登陆

  • 如何使用Typora做HTML页面
  • git分支覆盖另一个分支
  • php+mysql查询数据如何排序
  • C#中的ListView控件使用教程:设计及样式
  • 小程序开发入门-2.3、app.js的结构与生命周期
  • 热门搜索
    鼠标突然不动了怎么办 良字少一点是什么字 脸上长黄褐斑怎么调理 微信如何群发消息给所有人 range rover是什么车 唯品会客服怎么联系 生活小故事 平方米的符号怎么打 电解质是什么 窗纱怎么清洗