本篇文章的目标是实现分享小程序中的单张页面给其他用户,并且打开分享后的页面拥有返回按钮.
最终的效果:
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>
</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解码然后跳转.由于小程序是先进入了首页然后跳转到分享页,这样便解决了分享页没有返回键的问题.
很多同学私信反馈小程序分享完毕之后,打开页面没有数据.最后总结了有以下原因:
1. 分享按钮一定要使用button标签,并且open-type置为share
2.被分享的那个页面请求后台接口的参数,可能是从上一个页面传递过来的.
例如分享某个新闻详情给好友.它的底层原理就是,好友打开小程序,小程序启动后先进入首页,拿到跳转地址再跳到新闻详情页.而平时我们访问新闻详情页需要带着一个新闻id的,没有id就无法知道当前访问哪个新闻.由于分享后是直接从首页跳到详情页,没有新闻id,自然是无法获取到新闻数据.
所以我建议先分析一下分享的那张页面是不是含有上个页面要传过来的数据,如果确实含有就能把参数挂到路径后面,再把这种带有参数的路径分享出去.如下面代码所示:
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}`
}
}上面代码分享的是news_detail这个页面,但是这个页面需要一个news_id才能获取数据.因此在拼接url时将news_id拼接上去.
如果还有不明白的同学可以扫下面前端技术群,有任何技术问题可以在群里面与大家相互沟通.
