微信小程序_快速入门02

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

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

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

三、input 输入框,同HTML中的输入框。
常用属性:

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

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

我写的例子:

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

您好,先生! ------------------------------------------------------------- 效果: ![](https://img2018.cnblogs.com/blog/1455762/201811/1455762-20181120150954266-1283843020.png) --------------------------------------------------------------- --------------------------------------------------------------- 2. input --------------------------------------------------------------- ![](https://img2018.cnblogs.com/blog/1455762/201811/1455762-20181120152548230-352294210.png) --------------------------------------------------------------- 因为默认的input和背景融为了一体,所有自己写了class添加了边框颜色和外边距,预显示的提示文字以及居中等属性,小程序的password属性和html中的不太一样,小程序有自己的 password属性,是个布尔值,而HTML中是一种type. ---------------------------------------------------------------- 效果: ![](https://img2018.cnblogs.com/blog/1455762/201811/1455762-20181120151427567-558490690.png) ---------------------------------------------------------------- 3. button ---------------------------------------------------------------- ![](https://img2018.cnblogs.com/blog/1455762/201811/1455762-20181120152621874-331539758.png)

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

效果:


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

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



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

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

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

posted @ 2018-11-20 14:59  四叶笔记  阅读(173)  评论(0编辑  收藏  举报