微信小程序学习之旅
微信小程序学习之旅
- navigate标签之open-type:跳转方式
- 涉及的生命周期
- 样式变化
- wx之列表渲染
- wx之条件渲染
- 事件绑定
- 事件传参
- 数据修改
navigate标签之open-type:跳转方式
- navigate:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
- redirect:关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
- switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- reLaunch: 关闭所有页面，打开到应用内的某个页面
- navigateBack:关闭当前页面，返回上一页面或多级页面
涉及的生命周期
- tabBar页面之间切换，页面不会销毁
- 左上角返回行为，销毁当前页面，返回上级页面
- redirect 销毁当前页面，跳转下一页面
- navigate 保留当前页面，跳转下一页面
样式变化
样式有部分是网页不兼容的，不过大部分是可以正常用的
需要注意的有
- background-image: url(//http…);不能是本地的资源
- rpx响应单位，rpx是微信小程序独有的、解决屏幕自适应的尺寸单位，可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx，通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
wx之列表渲染
//wxml
<view wx:for="{{list}}" wx:key="id" wx:for-item='i'>
{{i}}
</view>//js
data:{list:[1,2,3,4,5,6]
}
默认子元素使item，可以用wx:for-item重命名
wx之条件渲染
与正常语言差不多，无非加个wx:前缀
<view wx:if="{{1==1}}">1</view>
<view wx:elif="{{1==2}}">1</view>
<view wx:else>1</view>
事件绑定
在微信小程序里用tap代替click事件，应为这样翻译更准确
一般有两种写法
- bind:事件名=“触发函数”
- bind事件名=“触发函数”
bind是开启冒泡的，也就是子元素触发，父元素也会触发 如果想用捕获的改成catch就行
触发的函数可以接受事件event，如果想要获取当前元素，会有target属性，如果要外层则用currentTarget
事件传参
- 用data-前缀定义在标签里如
<button type="primary" bind:tap="hander" data-id="11" >绑定</button>
- 用mark:XX=‘XX’
<view data-q="12" mark:age='10' bind:tap="hander"></view>
用mark也可以获取到祖先元素的mark
数据修改
直接修改数据是不会改变视图的，可以用setData()方法，为方法中添加要修改的数据，我认为最后是会个源数据合并渲染视图
可以用model进行数据双向绑定
后续会接着更新学习记录