3 微信小程序基础使用篇1

1、基础知识：

(1).微信小程序开发中省略了page标签，其直接写标签即可；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

[3].text组件属性：selectable表示文本是否可选，默认为false; decode表示是否解码，例如>< 等html编码，其是不能识别的，所以文本中多个空格无法实现，decode=“true”完美解决了该问题；space表示是否显示连续空格，默认值为false,其也可填写ensp,emsp,nbsp;                   - - -> 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：两个页面之间进行跳转(绑定事件进行跳转)