01我们学习了环境的准备和简单的demo,现在是时候来学习简单的页面编写了,首先我们来学习一些常用的基础标签:

一、view盒子,就是类似于div的盒子,可以用来存其他元素的容器。

二、text 文本域,可长按复制,显示文本。

三、input 输入框,同HTML中的输入框。

常用属性:

四、button按钮,同同HTML中的按钮。

五、navigator 链接,相当于html的a标签。

我写的例子:

  1. view容器+test文本显示域

您好,先生!

效果:


  1. input

因为默认的input和背景融为了一体,所有自己写了class添加了边框颜色和外边距,预显示的提示文字以及居中等属性,小程序的password属性和html中的不太一样,小程序有自己的

password属性,是个布尔值,而HTML中是一种type.

效果:

  1. button

登录


默认是个灰色的按钮,这里添加了颜色样式

效果:


4.navigator,给上面的按钮套一个链接,当点击按钮的时候跳转

<navigator url='../home/home' open-type='navigate>

登录




url为跳转的目标路径,这里按钮和上面一步看起来没什么区别,但是多了跳转的功能,实际中登录可不是这样的简单,这里是为了模拟。

好了,完成上面的学习后,得到下面的结果:

点击【登录】跳转到home页面:

微信小程序_快速入门02的更多相关文章

  1. 微信小程序_快速入门01

    这段时间,嗯,大四课程已经结束了,工作也已经找到了,但是呢,到公司报道的时间还没到,哈哈,马上就开始人生的第一份工作了,怎么说确实有点期待~ 在这段时间一方面为第一份工作做各种准备,另一方面也没有停止 ...

  2. 不走弯路,微信小程序的快速入门?

    微信小程序下载注册地址:https://mp.weixin.qq.com/cgi-bin/wx 微信小程序登开发者平台地址(可以查看小程序APPID):https://mp.weixin.qq.com ...

  3. 史诗手册!微信小程序新手自学入门宝典!

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  4. 微信小程序_(校园视)开发视频的展示页_下

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  5. 微信小程序_(校园视)开发上传视频业务

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  6. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  7. 微信小程序_(校园视)开发用户注册登陆

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  8. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  9. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

随机推荐

  1. ubuntu中用update-alternatives进行软件多版本设置、切换,以python配置为例

    以Python2.7和Python3.5设置为例: 在系统中添加Python2.7.Python3.5的选项,默认为Python3.5 sudo update-alternatives --insta ...

  2. spring boot 系列之七:SpringBoot整合Mybatis

    springboot已经很流行,但是它仍需要搭配一款ORM框架来实现数据的CRUD,之前已经分享过JdbcTemplete和JPA的整合,本次分享下Mybatis的整合. 对于mybatis的使用,需 ...

  3. kubernetes 使用 PV 和 PVC 管理数据存储

    文章链接 容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题.首先,当容器崩溃时,kubelet 会重启它,但是容器中的文件将丢失--容器以干净的状态(镜像最初的状态)重 ...

  4. K8S的核心概念

    1.Pod -- 是最小部署单元 -- 是一组容器的集合 -- Pod中的容器共享网络 -- 生命周期是短暂的 2.controller -- 确保预期的pod副本的数量 -- 确保所有的node运行 ...

  5. Identity用户管理入门五(登录、注销)

    一.建立LoginViewModel视图模型 using System.ComponentModel.DataAnnotations; namespace Shop.ViewModel { publi ...

  6. Optional容器类

    一.Optional 容器类:用于尽量避免空指针异常 方法 /* * Optional.of(T t) : 创建一个 Optional 实例 * Optional.empty() : 创建一个空的 O ...

  7. 羽夏看Win系统内核——简述

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  8. 1137. 第 N 个泰波那契数

    1137. 第 N 个泰波那契数 泰波那契序列 Tn 定义如下: T0 = 0, T1 = 1, T2 = 1, 且在 n >= 0 的条件下 Tn+3 = Tn + Tn+1 + Tn+2 给 ...

  9. python math详解(1)

    python math详解(1) 一.导入 python要调用math要进行导入 import math 二.返回值 math包里有一些值 比如 math.pi 返回pi的值 约为3.14 math. ...

  10. Django学习day01随堂笔记

    每日测验 """ 每日测验 1.你所知道的前端框架和实用插件有哪些,他们各有什么特点 2.使用bootstrap需要注意什么,常用的bootstrap样式有哪些 &quo ...