uni-app基于vue开发小程序与标准vue开发新增点

Vue
364
0
0
2022-03-29

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