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

 时间:2024-10-12 00:24:15

上一节讲了简单的页面跳思凳框酣转,不过页面是默认的一行文字,下面通过在页面添加表单与样式,添加一个简单模拟登陆的页面

登陆页面

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

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

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

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

3、在login.wxml添加以下代码<view class="container"><form bin颊俄岿髭dsubmit='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的结构与生命周期
  • 热门搜索
    关于钓鱼岛的手抄报 呵护心灵手抄报资料 端午节手抄报简单好看 中秋节手抄报简单又好看 关于成语的手抄报 我的家庭手抄报 语言的魅力手抄报内容 好看的手抄报图片大全 手抄报字体设计 尊师重教的手抄报