微信小程序组件使用手册地址:

1. 百度搜索“微信公众平台”,扫码登录之后,点击帮助文档里面的普通小程序。

2. 接着选择“开发”--》“组件”

3. 左侧可以根据需要查询自己需要使用的控件

那么接下来就写一个简单的注册页面。

1. New Folder(reg) --> New Page(reg)

2. 修改reg.wxml文件

<!--miniprogram/pages/reg/reg.wxml-->
<view class="fnt-weight">注册信息填写</view> <view>
<icon type="info"></icon>
<text> 用户名:</text>
</view>
<input placeholder="请输入"></input> <view>
<icon type="info"></icon>
<text> 密码:</text>
</view> <input password placeholder="请输入密码"></input>
<button type="primary">提交</button>
<button type="warn">重填</button>

注册信息填写的样式在reg.wxss文件中

/* miniprogram/pages/reg/reg.wxss */
.fnt-weight{
font-weight:bold;
}

可以看到只是加粗了字体。

效果图:

标题还是“我的微信”,如果想让标题变成当前页面的标题,那么需要修改reg.json,否则会使用app.json中的标题

{
"usingComponents": {},
"navigationBarTitleText": "用户注册"
}

效果图:

这就是一个简单的注册页面了,只用了几个基本的组件:icon, button, text, input。可以在组件手册中学习更多功能哦。

微信小程序组件学习 -- 注册页面的更多相关文章

  1. 微信小程序组件学习中

    一.轮播图 wxml代码: <swiper indicator-dots="true" autoplay="true" duration="10 ...

  2. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

  4. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  5. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  6. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  7. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  8. 微信小程序生命周期、页面生命周期、组件生命周期

    1. 生命周期 App(全局) 位置:项目根目录app.js文件 App({ onLaunch (options) { // console.log('小程序初始化') }, onShow(optio ...

  9. 微信小程序入门学习

    前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...

随机推荐

  1. 【NX二次开发】Block UI 线型

    属性说明 常规         类型 描述     BlockID     String 控件ID     Enable     Logical 是否可操作     Group     Logical ...

  2. C# Net Core 使用 itextsharp.lgplv2.core 把Html转PDF

    C# Net Core 使用 itextsharp.lgplv2.core 把Html转PDF 只支持英文(中文我不知道怎么弄,懂的朋友帮我看一下)!!!!![补充:评论区的小伙伴已解决] 引入包it ...

  3. 音视频点播服务基础系列(Fmpeg常用命令)

    前言 公司业务中有一些场景需要用到服务端音视频剪辑技术,最开始为了快速上线使用的是某公有云的商用解决方案,但由于费用太高所以我们团队经过一个星期的冲刺,给出了一个FFmpeg+Serverless的解 ...

  4. Spring Cloud专题之三:Hystrix

    在微服务架构中,我们将系统拆分成很多个服务单元,各单位的应用间通过服务注册与订阅的方式相互依赖.由于每个单元都在不同的进程中运行,依赖通过远程调用的方式执行,这样就有可能因为网络原因或是依赖服务自身问 ...

  5. Docker与k8s的恩怨情仇(三)—后浪Docker来势汹汹

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上一节我们为大家介绍了Cloud Foundry等最初的PaaS平台如何解决容器问题,本文将为大家展示Doc ...

  6. 技术如何转产品01——1+1>2?

    当业务复杂到一定阶段的时候,效率问题会首当其冲,基本解法是化整为零.分赛道,对应的产物可以是子公司>>事业部>业务单元>项目组. ​好处是目标聚焦.所以问题也会聚焦,工作内容闭 ...

  7. 什么是CAP?

    1. 什么是CAP 是一种定理,多用于描述分布式架构,CAP这三个字母对应三种理念,且这三种理念只能两两组合,不能CAP三种理念同时共存(为什么?下面说). C:Consisteny(一致性) A:A ...

  8. React中使用react-file-viewer,实现预览office文件(pdf,word,xlsx等文件)前端实现

    最近做一个项目要求在前端浏览器可以直接打开office文件(pdf,doc,xlsx等文件).pdf浏览器可以直接打开(可以直接用a标签href="文件地址"或者iframe标签s ...

  9. NoSql非关系型数据库之MongoDB应用(二):安装MongoDB可视化工具

    业精于勤,荒于嬉:行成于思,毁于随. 我们上次说到NoSql非关系型数据库之MongoDB应用(一):安装MongoDB服务 这次我们介绍安装  NoSQL Manager for MongoDB 可 ...

  10. Python自动化之封装日志模块(一)

    ------------恢复内容开始------------ 简介: 自己也在训练营学习之中,闲来之余,自己写着玩的,主要还是为了学习,希望和前辈和大佬相互学习共进. 日志模块主要有四大组件:日志器, ...