3 微信小程序基础使用篇1
1、基础知识：
(1).微信小程序开发中省略了page标签，其直接写<view><text>标签即可；page等同于html, image等同于img, text等同于span, 微信小程序中的标签大多为快元素(text为行元素，image行内快)，样式兼容css2.0/ css3.0,js兼容es6.0,内部可转换为es5.0； ->其需要遵循系列规范，小程序中的标签称之为“组件”，样式，js都兼容，就是使用方法上会存在些差异而已，聚焦点：组件、API的使用；
(2).最常用组件view、image、text；
[1].view组件属性：hover-class表示点击态(点击后的样式，等同于div:hover{})，属性值填写类名,默认值hover-class="none"；hover-stop-propagation表示是否阻止其的祖先节点出现点击态，默认值为false；hover-start-time: 50,表示按住多少毫秒后出现点击态，单位毫秒；hover-stay-time: 400, 手指松开后点击态保留时间，单位毫秒；
[2].image组件属性：其可使用绝对路径；mode表示模式，mode="widthFix"表示宽度不变，高度自适应，保持原图宽高比不变； -> 使用单标签也OK<image/>
[3].text组件属性：selectable表示文本是否可选，默认为false; decode表示是否解码，例如>< 等html编码，其是不能识别的，所以文本中多个空格无法实现，decode=“true”完美解决了该问题；space表示是否显示连续空格，默认值为false,其也可填写ensp,emsp,nbsp; - - -> text组件中只支持<text>嵌套，而且除了文本节点以外的其它节点都无法长按选中；
(3).微信小程序的响应式开发 -> 巧妙利用“单位rpx”
[1].微信小程序的开发需要在不同机型上保证用户体验是相同的，其巧妙使用rpx单位，小程序中默认所有机型宽为750rpx,高为1334rpx,例如iphone6 375px*750px,那在iphone6上1px=2rpx; 也就是若一张图片设置12px*12px,iphone6的小程序开发中需设置为24rpx*24rpx;
[2].wx.getSystemInfo({});接口
(4).微信小程序中绑定事件：小程序中没有dom元素，所以其不能通过获取dom元素后绑定事件处理函数，其只有”句柄“方式绑定事件处理函数； -> 事件处理函数在page({}),配置项中直接使用就OK，vue中是写在methods:{}中；
[1].bind:tap或者bindtap都OK，tap表示用户点击事件；
[2].bindtap与catchtap的区别：catch绑定事件可阻止向父元素冒泡 ->建议使用catch绑定事件； [注：原生组件绑定事件处理函数只能使用bindtap;不能使用catch,以及bind:tap;不能有冒号]
(5).微信小程序的路由接口：
wx.navigateTo({ url: });//保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面；使用wx.navigateBack();返回到原页面；
wx.navigateBack({ delta: number });//关闭当前页面，返回上个页面或多级页面，delta表示返回的页面数，若大于现有页面数目，直接返回首页；
wx.redirectTo({});//关闭当前页面，跳转到应用内的某个页面，但不允许跳转到tabbar页面；
wx.switchTab({});//跳转到tabBar页面，并关闭其它所有非tabBar页面；
wx.reLaunch({});//关闭所有页面，打开到应用内的某个页面；
(6).app.json以及局部json文件：
[1].属性名必须加引号，属性值末尾以及属性值内的属性值末尾也不能加标点符号，其会报错；
[2].开发过程中可调换pages属性中的属性值顺序，若将"pages/connet/logs"放到首位，编译后首先展示的是logs.wxml页面，方便测试；
- - - >>> 学完基础使用篇1后，可完成小demo：两个页面之间进行跳转(绑定事件进行跳转)
