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事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。