小程序中分享功能

423 阅读1分钟
  1. 封装一个分享的组件
<view class='share'>
   <view class='like'>
      <view class='iconfont icon-aixin'></view>
   </view>
   <view class='weixin'>
       <button open-type="share" class='iconfont icon-weixin'></button>
   </view>

如果想在页面上实现点击按钮分享,那么这个点击的按钮必须使用button标签,并且open-type置为share

2.在想要分享的页面中引入上面组件,并在页面的js中Page所包含的对象里增加一个方法onShareAppMessage

Page({

 /**
  * 页面的初始数据
  */
 data: {
  news_id:12
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
   let url = encodeURIComponent('/packageNews/pages/news_detail/news_detail?news_id=' + this.data.news_id);
   return {
     title: "热点详情",
     path:`/pages/index/index?url=${url}` 
   }
 }
})

将当前页面的路径包括参数使用encodeURIComponent进行编码并作为url的参数,path设置为小程序的首页.当我们将该页面

分享给其他人时,他们打开的首先是首页,然后跳转到我们分享的这个页面

3.要想分享后的页面打开先进入首页再跳转到分享的页面,首页的js要做如下设置

//index.js
Page({
  data: {
  },
  onLoad: function (options) {
    if(options.url){
      let url = decodeURIComponent(options.url);
      wx.navigateTo({
        url
      })
    }
  }
})

说明:

在onLoad的方法中先判断有没有url参数,如果有的话就使用decodeURIComponent对url解码然后跳转,由于小程序是先进入了首页然后跳转到分享页,这样解决了分享页没有返回键的问题。

还是有一些问题,会继续改进,大家多多指导,本人虚心接受。