微信小程序学习笔记02 WXML/WXSS/JS 及其和 HTML /CSS的区别

一、WXML 和 HTML 的区别:

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。与HTML相似,区别如下:

1.标签名称不同

① html中有 (div span img a)等标签
② wxml中有( view text image navigator) 等标签

2.属性节点不同
html:

<a href="#">超链接</a>

wxml:


                
  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,作为AI语言模型,我无法提供完整的微信小程序注册登录功能的代码,但我可以提供一个简单的UI示例,帮助您了解微信小程序的页面设计和样式: wxml文件: ```html <view class="container"> <image class="logo" src="/images/logo.png"></image> <form class="form" bindsubmit="onSubmit"> <view class="input-group"> <input class="input" type="text" placeholder="用户名" name="username"></input> </view> <view class="input-group"> <input class="input" type="password" placeholder="密码" name="password"></input> </view> <button class="btn" form-type="submit">登录</button> <view class="register"> <text>还没有账号?</text> <navigator url="/pages/register/register">立即注册</navigator> </view> </form> </view> ``` wxss文件: ```css .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f7f7f7; } .logo { width: 200rpx; height: 200rpx; margin-bottom: 50rpx; } .form { width: 80%; padding: 20rpx; background-color: #fff; border-radius: 10rpx; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); } .input-group { margin-bottom: 20rpx; } .input { width: 100%; height: 60rpx; padding: 0 20rpx; border: 1rpx solid #ccc; border-radius: 5rpx; font-size: 28rpx; } .btn { width: 100%; height: 60rpx; margin-top: 20rpx; background-color: #0191d8; color: #fff; border: none; border-radius: 5rpx; font-size: 30rpx; } .register { margin-top: 30rpx; display: flex; align-items: center; justify-content: center; } .register text { font-size: 28rpx; color: #666; } .register navigator { font-size: 28rpx; color: #0191d8; } ``` js文件: ```javascript Page({ onSubmit: function(event) { // 获取表单数据 const username = event.detail.value.username; const password = event.detail.value.password; // 处理登录逻辑 // ... // 跳转到首页 wx.switchTab({ url: '/pages/index/index' }) } }) ``` json文件: ```json { "navigationBarTitleText": "登录" } ``` 请注意,这只是一个UI示例,需要您自己编写逻辑代码来实现注册登录功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值