小程序分享朋友圈

项目背景: 基于Taro框架下的React native语言的小程序项目.

基于小程序分享朋友圈的机制是.在朋友圈中打开时会先进入一个单页模式.该模式下.官方的解释是:

单页模式

为了在分享的单页中显示与小程序当前的数据保持一致!首先我们将页面相关数据转为json字符串,通过query的方式传递到单页中.这样在打开小程序的单页时.可根据query拿到对应数据并解析出来显示.

值的注意的是:

我们拼接的jsonStr字符串可能会有各种编码.若出现一些比较奇怪的字符串.使用常规的.JSON.parse(jsonStr)有可能无法正确的解析出来.这样我们就无法拿到准确的页面数据进行展示.

所以我们需要针对jsonStr做一下处理.进行Base64编码.保障它能完整的传递.并且完整的解析.

以上是大体的业务逻辑.现在我们一起看看代码.

首先在分享的页面中配置:

enableShareTimeline: true

实现该方法.组建小程序朋友圈分享的数据:

onShareTimeline数据格式如下:

shareObj: {

    title: TITLE,

    path: `/pages/ShoppingMall/ProductDetails/index?id=${id}&productDetail=` + resultStr,

    imageUrl: shareImgUrl,

    query: `id=${id}&productDetail=` + resultStr,

},

实际上分享朋友圈只需要query,title,imageUrl.为了兼容分享好友需要path.统一使用shareObj作为分享数据.

在进入小程序的单页模式时会调用onLaunch,并通过option拿到scene,当scene===1154时.为单页模式.

if(obj.scene == 1154){

    store.dispatch(globalAction.project.updateInfo({ hasSharePage: true}));

    store.dispatch(globalAction.project.updateInfo({ sharePageData: JSON.stringify(obj.query)}));

}

此时记录分享传递过来的query数据.以及单页的标识hasSharePage.可用于单页模式下的特殊定制样式.

我们拿到query数据以后.实际就是我们拼接的jsonStr为id=${id}&productDetail= + resultStr ,这时候我们可以使用JSON.parse(jsonStr),解析出想要的页面数据productDetail.

但实际应用中.解析可能会出错.所以我们在传递的时候进行Base64编码.另外因为传递过程中Base64编码产生的’+’会变为空格,导致解析出现异常.所以还需要进行一次encodeURIComponent.

相关代码:

function encodeShareWXLinePage(result){

    let resultStr = JSON.stringify(result);

    resultStr = Base64.encode(resultStr);

    resultStr = encodeURIComponent(resultStr);

    console.log('大可----------------------朋友圈分享编码数据:',resultStr);

    return resultStr

 }

function decodeShareWXLinePage(payload){

    let resultData = JSON.parse(payload);

    let productDetailBase64Str = resultData.productDetail;

    if(productDetailBase64Str !== undefined && productDetailBase64Str !== null){

        productDetailBase64Str = decodeURIComponent(productDetailBase64Str);

        let productDetailData = Base64.decode(productDetailBase64Str);

        resultData.productDetail = JSON.parse(productDetailData);

      }

    let commentListBase64Str = resultData.commentList;

    if(commentListBase64Str !== undefined && commentListBase64Str !== null){

        commentListBase64Str = decodeURIComponent(commentListBase64Str);

        let commentListStr = Base64.decode(commentListBase64Str);

        resultData.commentList = JSON.parse(commentListStr);

     }

    console.log('大可----------------------朋友圈分享解析数据:',resultData);

    return resultData

}

这样.我们调用encodeShareWXLinePage 对页面数据编码处理.拿到时.通过decodeShareWXLinePage解析.然后正常渲染到页面

对于调试.我们可以使用真机小程序的开发调试.能快速定位到问题.

实际效果