微信小程序开发-快捷键、标签

格式调整

界滚握面相关

***********************************************分割线*****************************************

标签

一、视图容器(View Container)：

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多散旁项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、 *** 作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态d窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image 图冲备橡片

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

1.基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2.属性类型

<ul>

<li>Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属李弊散性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number数字1

, 2.5</li>

<li>String字符串"string"</li>

<li>Array数组[ 1, "string" ]</li>

<li>Object对象{ key: value } </li>

<li>EventHandler事件处理函数名"handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any任意属性</li>

</ul>

3.共同属性类型哪氏

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选卜兄择器, switch 开关选择器, label 标签.

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频

** 地图 **

map 地图

画布Canvas

canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

1、新建目录calc

2、pages加上

"pages/calc/calc",

3、 calc.wxml

<view class="container">

<input placeholder="老码被加数" bindinput="bindInput1" />

<input placeholder="加数" bindinput="bindInput2" />

<button type="primary" bindtap="bindAdd">计算</button>

<input placeholder="侍蠢哪结果" value="{{result}}" disabled />

</view>

4、calc.wxss

/* pages/calc/calc.wxss */

.container{

justify-content: flex-start

padding: 30rpx 0

}

.container input{

background-color: #eee

border-radius:3px

text-align:left

width:720rpx

height:100rpx

line-height:100rpx

margin:20rpx

}

.container button{

width:80%

}

5、calc.json

{

"navigationBarBackgroundColor":"#00ff00",

"navigationBarTitleText":"加法计算器",

"navigationBarTextStyle"档毁:"white",

"usingComponents": {}

}

6、calc.js

// pages/calc/calc.js

Page({

/**

---