uni-app基于vue开发小程序与标准vue开发新增点
1、路由跳转传参
uni.navigateTo({
url: `/pages/transition/spreadTextAction?t=${this.options.t}&rt=${this.options.rt}&l=${this.options.l}`
});
uni.navigateBack({
delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
});
2、cover-view 、cover-image
cover-view: 覆盖在原生组件上的文本视图。为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。
cover-image: 覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。支持的事件：click。属性名：src、@load、@error。
tip: 1、App端vue页面cover-view、cover-image中不支持嵌套其它组件，包括再次嵌套cover-view，仅可覆盖video、map。App端nvue页面自2.1.5起没有这些限制。
3、小程序原生分享
// 页面处理函数--用户点击右上角分享
onShareAppMessage() {
return Util.shareMessage(this.options.t, this.options.rt, this.options.l, this.bannerData.studentName, this.bannerData.subject);
}
function shareMessage(t, rt, l, name, subject) {
const copywriting = {
11: `${name}个性化学习规划，了解一下`,
13: `${name}的${subject}学科诊断报告，了解一下`,
14: `${name}的${subject}学科诊断报告，了解一下`,
15: '基因诊疗学习法，了解一下'
};
console.log(`/pages/index/index?t=${t}&rt=${rt}&l=${l}&isShare=true`);
return {
title: copywriting[rt],
path: `/pages/index/index?t=${t}&rt=${rt}&l=${l}&isShare=true`
};
};
4、image标签的mode属性：图片裁剪、缩放的模式
5、动态绑定类名
:class="{'uni-bg-blue': tabNames[activeNameIndex] ==='易错点',
'uni-bg-red': tabNames[activeNameIndex] === '提分点',
'uni-bg-orange': tabNames[activeNameIndex] === '重点'}";
6、小程序页面生面周期：
// 页面周期函数--监听页面加载
onLoad() {
},
// 页面周期函数--监听页面初次渲染完成
onReady() {},
// 页面周期函数--监听页面显示
onShow() {},
// 页面周期函数--监听页面隐藏
// 页面周期函数--监听页面卸载
onUnload() {},
// 页面处理函数--监听用户下拉动作
onPullDownRefresh() {},
// 页面处理函数--监听用户上拉触底
onReachBottom() {}
// 页面处理函数--监听页面滚动
/* onPageScroll(event) {}, */
// 页面处理函数--用户点击右上角分享
/* onShareAppMessage(options) {}, */
7、uni-app打电话
uni.makePhoneCall({
phoneNumber: e.currentTarget.dataset.phone,
success: function() {
console.log('call ok');
}
});
8、findIndex
const index = dataArr.findIndex(v => v.id === item.moduleId);
9、设置导航title
uni.setNavigationBarTitle({
title: this.module.title
});
10、tap和click的区别
- tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。
- 另外，click事件是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。
- 而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。