福州搜外科技专业从事微信小程序开发、百度智能小程序定制,专业化打造新生态营销渠道、新零售市场。
福州小程序开发-打开客服菜单
福州搜外科技
福州小程序开发首页 > 小程序答疑 > 微信小程序的收藏、点赞、页面交互功能
微信小程序的收藏、点赞、页面交互功能
时间 : 2018-12-17 18:55 浏览量 : 79

微信小程序现在已经可以使用很多网页上面的功能了,比如收藏和点赞这两个常用的增加用户粘性的功能。

微信小程序的收藏功能,微信小程序点赞功能、微信小程序页面交互功能

一.收藏

focusFavoriteTab: function (e) {        var that = this;        var isFocus = that.data.isFocus;        console.log("isFocus", isFocus)        var itemId = that.data.itemId;        if (isFocus) {
          favoriteService.cancel(that, itemId).then((res) => {
            wx.showToast({
              title: "取消收藏",
              icon: 'success',
              duration: 1000
            });            that.setData({
              isFocus: false,
            });
          })
        } else {
          favoriteService.add(that, itemId).then((res) => {
            wx.showToast({
              title: res.data == 1 ? "收藏成功" : "收藏失败",
              icon: 'success',
              duration: 1000
            });            that.setData({
              isFocus: true,
            });
          });
        }
      },

二.点赞

focuslikeTab: function (e) {    var that = this;    var isLike = that.data.isLike;    let itemDetail = this.data.itemDetail 
    var itemId = that.data.itemId;    if (isLike) {
      itemService.cancellike(that, itemId).then((res) => {
        wx.showToast({
          title: "点赞取消",
          icon: 'success',
          duration: 1000
        });
        itemDetail.liked--;        that.setData({
          itemDetail:itemDetail,
           isLike: false
        });
       })
    } else {
      itemService.addlike(that, itemId).then((res) => {
        wx.showToast({
          title: res.data == 1 ? "点赞成功" : "点赞失败",
          icon: 'success',
          duration: 1000
        });
        itemDetail.liked++;        that.setData({
          itemDetail: itemDetail,
          isLike: true
        });
       });
    }
  },



三.页面交互

小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等。


当前页面打开新的页面

打开新的页面可以通过 navigator 组件来实现,通过url传参来实现,例如

<navigator url="../search/search?id=123" open-type="redirect">搜索</navigator>

在新的页面 onLoad 事件可以拿到传过来的参数 options

onLoad: function(options) {
  console.log(options.id);
}

新的页面回传数据到当前页面

在当前页面定义一个方法

searchRet(results) {  console.log(results);
}

在搜索页面获取到的结果,由于小程序页面是通过栈来存储的,所以可以通过 getCurrentPages() 获取获取当前页面栈的实例,第一个元素为首页,最后一个元素为当前页面

let pages = getCurrentPages();let homePage = pages[pages.length - 2];if (homePage) {
  homePage.searchRet(results);
}

生命周期和storage

通过 wx.setStorageSync() 方法可以在本地存储数据,在 page 的 onShow 回调里获取 storage 的值后做相应的处理,例如

// index.jswx.setStorageSync('refresh', true);// mycenter.jsif (wx.getStorageSync('refresh')) {  // 做更新操作
  wx.removeStorageSync('refresh');
}


这样小程序的页面交互就算完成了,有兴趣探讨微信小程序开发的问题的朋友欢迎规则我们福州小程序开发

相关文章

对侵权小程序如何举报,对恶意举报又该如何处理?小程序开发公司 ...

浅谈:小程序虚拟支付整改通知

小程序对商家有什么用,小程序有什么经营方式?

欢迎在线留言
您的姓名 :
联系电话 :
邮箱地址 :
联系地址 :
留言内容 :
cache
Processed in 0.038032 Second.