微信小程序开发总结

标签

1、view

和div差不多

2、text

展示文字最好用这个，其他标签都不支持长按复制

3、 icon

icon可以直接用微信组件默认的图标，默认是iconfont格式的
自定义的icon推荐svg sprite格式或者iconfont

4、input

input 的类型，有效值：text, number, idcard, digit, time, date 。
input不需要设置line-height或padding来纵向居中，默认placeholder的文字是居中的。
小程序把checkbox和radio都单独做成了组件，默认的input只支持输入文本。
上传文件在小程序里需要调用chooseImage事件完成;
小程序CSS里的 :focus 不生效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。
.login .input-group input::-webkit-input-placeholder {
color: #c0c0c0;
}
.login .input-group input:focus::-webkit-input-placeholder {
color: transparent;
}

5、picker

picker默认支持普通、日期和时间三种选择器。
picker通过bindchange事件来调取range中自定义的数据数据，并展示到页面中，调用的是系统原生的select。
这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。
选择 北京 上海
{{area[index]}}
Page({
data: {
area: [‘中国’, ‘美国’, ‘巴西’, ‘日本’],
}
})

6、 navigator

navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect;
navigator仅支持5级页面的跳转;
navigator不可跳转到小程序外的链接地址;
登录页
在小程序开发工具里，默认打开新页面，工具左上角有返回按钮。加上redirect，当前页打开，不出现返回按钮。

7、image

小程序的image与HTML5的img最大的区别在于：小程序的image是按照background-image来实现的。
默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽，auto在这里不生效。(开发者说这样设置的原因是：如果设置 auto ，页面布局会因为图片加载的过程有一个闪的现象(例如高度从 0 到 height )，所以要求一定要设置一个宽度和高度。)
最新的api支持获取图片的高宽。不过这里返回的高宽是px单位，不支持屏幕自适应;
图片包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式，三种缩放模式的实现原理对应如下：
scaleToFill{
background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
}
aspectFit{
background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
}
aspectFill{
background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
}

一丶视图容器

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

二、基础内容(Basic Content)

icon 图标
text 文字
progress 进度条

三、表单组件(Form)

button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
slider 滑动选择器
switch 开关选择器
label 标签

四、操作反馈组件(Interaction)

action-sheet 上拉菜单
modal 模态弹窗
progress 进度条
toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频
image 图片
video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

事件

bindtap 点击事件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longtap 手指触摸后，超过350ms再离开

样式绑定

数据绑定

{{id}}
this.setData({
	"id": 5
});

控制多个视图容器

   view1 
   view2 

cover-image使用注意事项：

使用图片尽量使用image标签，使用cover-image标签无法改变z-index，默认图片是在最上层显示。image标签和cover-image使用方法也不太一样。image是在图片上设置宽高，cover-image是在外层容器上设置宽高
。