Wechat Mini | Note-2

微信小程序开发 Note-2

@ 2018年8月15日 20:54:19

小程序的flex布局

小程序建议使用flex布局进行排版（响应式、自适应）；

flex是一个盒装弹性布局（盒子中依然含有多个大小不一的盒子）；

flex是一个容器，所有子元素都是他的成员；

定义布局：display:flex

flex容器的属性 flex-direction:排列方向，flex-wrap：换行规则 ，justify-content：对齐方式；

flex-direction

row：从左到右 row-reverse：从右到左

column：从上到下 column-reverse：从下到上

.container {
  display: flex;
  flex-direction: row;
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: row-lolumn-reverse;
}

flex-wrap

nowrap：默认不换行（根据所设置的长度进行压缩

wrap：换行（顶满则换行） wrap-reverse：倒序换行（从下开始换行）

.container {
  display: flex;
  flex-wrap: nowrap;
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}

justify-content

决定内容的对齐方式；

flex-start：左对齐； flex-end：右对齐； center：居中对齐；

space-between：从左往右，平均分配，用空格分隔成员；

space-around：从左往右，平均分配，用空格包围成员；

.container {
  display: flex;
  justify-content: flex-start;
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
}

flex成员元素的样式设置

order：成员之间的显示顺序；

flex：成员所占屏幕的比例（会导致width和height失效，并且将一行按比例分配给每个成员）；

.a {
  background-color: red;
  order: 1;
  flex: 3;
}

小程序的组件介绍

组件是视图层的基本组成单元，多个组件构成一张试图页面；

组件包含<开始标签></结束标签>；

每个组件都包含一些共有属性；

属性类型

Boolean Number String Array Object EventHandler 事件处理函数名 Any 任意属性

共同属性类型

id(String) class(String) style(String) hidden(Boolean) data-*(Any) bind*/catch*(EventHandler)

视图组件 view

视图容器 view

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

scroll-view 可滚动视图

scroll-view 可滚动视图区域

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（px）,触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（px）,触发 scrolltolower 事件
bindscrolltoupper	EventHandle		滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边,会触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条的默认位置
enable-back-to-top	Boolean	false	iOS点击顶部状态栏/安卓双击标题栏时,滚动条返回顶部,只支持竖向
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
scroll-into-view	String		值应为某子元素id（id不能以数字开头）.设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-left	Number		设置横向滚动条位置

<!scroll.wxml-->
<scroll-view scroll-y="true" style='height:300rpx' bindscrolltoupper="scrolltoupper"     bindscrolltolower="scrolltolower" upper-threshold="0" lower-threshold="0"
enable-back-to-top="true" scroll-with-animation="true"
bindscroll="bindscroll" scroll-into-view="e">
  <view id="a"class='a size'>a</view>
  <view id="b"class='b size'>b</view>
  <view id="c"class='c size'>c</view>
  <view id="d"class='d size'>d</view>
  <view id="e"class='e size'>e</view>
</scroll-view>

<scroll-view class="container" scroll-x="true" style='margin-top:250rpx' scroll-left="150">
  <view id="a"class='a size'>a</view>
  <view id="b"class='b size'>b</view>
  <view id="c"class='c size'>c</view>
  <view id="d"class='d size'>d</view>
  <view id="e"class='e size'>e</view>
</scroll-view>

//scroll.js
Page({
  data:{
  },
  scrolltolower:function(){
    console.log("滚动到底部");
  },
  scrolltoupper:function(){
    console.log("滚动到顶部");
  },
  bindscroll:function(){
    console.log("滚动");
  }
})

/**index.wxss**/

.container {
  display: flex; white-space: nowrap;
}

.size {
  width: 250rpx; height: 350rpx; display: inline-block;
}

.a {
  background-color: red; order: 1; flex: 3;
}
.b c d e{
    ...
}

swiper 轮播图

swiper 滑块视图容器

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长

movable-area/movable-view

movable-view 需要在movable-area成员之间；

属性名	类型	默认值	说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动
x/y	Number / String		定义x/y轴方向的偏移，如果x/y的值不在可移动范围内，会自动移动到可移动范围；改变x/y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内
scale-min/max	Number	0.5	定义缩放倍数最小/大值
bindchange	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）

<movable-area class="father-size">
  <movable-view class='e size' direction='all' inertia='true' out-of-bounds='true' x='50' y='100' damping='100' friction='60' bindchange='doChange' scale='true' bindscale='doScale'>
  </movable-view>
</movable-area>

Page({
  doChange:function(){
    console.log("Moving");
  },
  doScale:function(){
    console.log("Scaling");
  }
})

icon

icon 图标

属性名	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

<icon type='success' size='66'></icon>
<icon type='success' size='66' color='blue'></icon>
<icon type='success_no_circle' size='66'></icon>
<icon type='info' size='66'></icon>
<icon type='warn' size='66'></icon>
<icon type='waiting' size='66'></icon>
<icon type='cancel' size='66'></icon>
<icon type='download' size='66'></icon>
<icon type='search' size='66'></icon>
<icon type='clear' size='66'></icon>

text

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
space	String	false	显示连续空格
decode	Boolean	false	是否解码

space 有效值：

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

Tips

decode可以解析的有   < > & ' &ensp; &emsp;
各个操作系统的空格标准并不一致。
<text/> 组件内只支持 <text/> 嵌套。
除了文本节点以外的其他节点都无法长按选中。

<view>
  <view>this a view text</view>
  <text selectable='true'>this is a text</text>
</view>

<view>
  <text space='ensp'>this is a spac             e text</text>
</view>

<view>
  <text decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>

rich-text（富文本）

rich-text 富文本

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降；

属性	说明	类型	必填	备注
name	标签名	String	是	支持部分受信任的HTML节点
attrs	属性	Object	否	支持部分受信任的属性，遵循Pascal命名法
children	子节点列表	Array	否	结构和nodes一致

Bug & Tip

nodes 不推荐使用 String 类型，性能会有所下降；

rich-text 组件内屏蔽所有节点的事件；

attrs 属性不支持 id ，支持 class ；

name 属性大小写不敏感；

如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除；

img 标签仅支持网络图片；

如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效；

<!-- String -->
<rich-text nodes='{{mycontent}}'></rich-text>
<!-- Array -->
<rich-text nodes='{{mycontent2}}'></rich-text>

Page({
  data: {
    mycontent: '<img class="course-banner" src="//img3.mukewang.com/szimg/5a9ca4e80001786305400300.jpg">',
      
    mycontent2: [{
      name: "img",
      attrs: {
        class: "course-banner",
        src: "//img3.mukewang.com/szimg/5a9ca4e80001786305400300.jpg"
      }
    }]
  }
})

progress

progress 进度条

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色（请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播

1 2	<progress percent="{{percentdata}}" show-info='true' stroke-width="20" color="orange" backgroundColor='white' active='true'active-mode='forwards'/> <view bindtap='addPercent'>addPercent</view>

Page({
  data: {
    percentdata: 15
  },
  addPercent: function () {
    var newPercent = this.data.percentdata + 10;
    this.setData({
      percentdata: newPercent
    })
  }
})

@ 2018年8月16日 11:22:28