1.当从一个tab跳往另一个tab页面时应使用wx.switchTab,此方法不能携带参数。
2.当我们想从当前页回到上一页时,我们不能简单的使用wx.navigateTo,应该使用wx.navigateBack,其原因在于小程序中页面栈最多十层。使用wx.navigateBack时,很不幸我们无法让其携带参数,我们可以通过以下代码实现:1
2
3
4
5
6
7
8
9let pages = getCurrentPages(); // 当前页的数据,可以输出来看看有什么东西
let prevPage = pages[pages.length - 2]; // 上一页的数据,也可以输出来看看有什么东西
/** 设置数据 这里面的 value 是上一页你想被携带过去的数据,后面是本方法里你得到的数据,我这里是detail.value,根据自己实际情况设置 */
prevPage.setData({
hadConfirm: true,
})
wx.navigateBack({
delta: 2
})
3.假如你使用过Vue,相信你一定知道动态组件,代码如下1
<component v-bind:is="currentTabComponent"></component>
幸运的小程序中也提供了相似的功能,语法模板,代码如下:1
2
3
4
5
6
7
8
9
10<template name="odd" data="{{item1}}">
<view> {{item1}} </view>
</template>
<block>
<template is="odd" data={{item1}}/>
</block>
<block>
<template is="odd" data={{item2}}/>
</block>
相信你已经看出了这段代码和官方给出的示例有所不同,这里我想说明的一点是,当你想使用同一个模板,却向模板传不同的数据,这种方法是行不通的,你只能获取到item1的传递的数据。(这里经过尝试,的确如此,不知道是我没有领悟其精髓还是模板本就如此)
4.微信小程序中有和Vue中v-if,v-show相似的东西,他们分别是公共属性hidden和条件渲染wx:if,微信官方对他们两个进行了比较
wx:if vs hidden因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
相信聪明的你已经看出的了,这四者中的异同。
5.在微信小程序中当我们想更改数组对象中的值时我们不能直接修改,我们需要像下面一下去操作:
1 | var sex = 'project[' + index + '].sex'; |
6.小程序中的button组件会有默认的边框,它不是通过border去实现的,是用::after伪元素实现的,我猜测可能跟1px有关。
1 | ::after { |
7.最近在写弹窗内容时发现一个问题,示例:
在图中,左侧是在实现右侧效果的过程中而得到的暂时页面效果,为了实现右侧效果,我可以将其背景色取消掉,这很容易,但是我忽略了一点,原本多出来的白色部分还在那里,只不过它是透明的而已,当用户点击看起来是弹窗遮罩的那部分内容时,原本遮罩上应触发的事件却没触发,会让人很困惑。除了改布局,这里我还想到的就是去给这个白色背景加事件。但是这里有个好用的css样式pointer-events,虽然在ie中的兼容性差点,但是我在小程序中就不需要考虑这个问题,我们只需要给白色背景添加pointer-events:none然后再给图片添加pointer-events: auto; 就OK了。
8.在uni-app中1
2// 建议使用 uni-app 的 onReady代替 vue 的 mounted。
// 建议使用 uni-app 的 onLoad 代替 vue 的 created。
9.chooseService(item.Id)
的Id要与:key="item.Id"
的Id相同,奇怪的问题。
1 | <view class="serve-item" v-for="(item, index) in timeAppoint" :key="item.Id"> |
10.onUnload()页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
通过这个生命周期可以曲线的实现监听左上角返回按钮
11.在less中使用calccalc(~'100% - 110rpx')
,在less中使用calccalc(100% - 110rpx)
12.在微信小程序中使用原生的swiper中有display-multiple-items属性,当swiper-item数量小于display-multiple-items属性值,swiper会不显示。动态class是个很有用的功能。
13.uni-app中修改上一页数据:
修改数据
1 | let pages = getCurrentPages(); // 当前页的数据,可以输出来看看有什么东西 |
响应数据的修改
1 | let pages = getCurrentPages(); |
14.微信小程序的页面生命周期
属性 | 类型 | 说明 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | function | 生命周期回调—监听页面加载 |
onShow | function | 生命周期回调—监听页面显示 |
onReady | function | 生命周期回调—监听页面初次渲染完成 |
onHide | function | 生命周期回调—监听页面隐藏 |
onUnload | function | 生命周期回调—监听页面卸载 |
onPullDownRefresh | function | 监听用户下拉动作 |
onReachBottom | function | 页面上拉触底事件的处理函数 |
onShareAppMessage | function | 用户点击右上角转发 |
onPageScroll | function | 页面滚动触发事件的处理函数 |
onResize | function | 页面尺寸改变时触发,详见 响应显示区域变化 |
onTabItemTap | function | 当前是 tab 页时,点击 tab 时触发 |
其他 | any | 生命周期回调—监听页面加载 |
15.微信小程序fixed定位的input输入框placeholder随屏幕滚动bug,把input输入框改为textarea然后加上属性 fixed=”true”就可以了
1 | <textarea placeholder='想跟他说点什么' bindinput="bindContent" value='{{content}}' fixed="true" show-confirm-bar="{{false}}" /> |