智能提醒助理系列-小程序分享到朋友圈

news2024/9/20 5:50:34

本系列文章记录“智能提醒助理”wx公众号建设历程，记录实践经验、巩固知识点、锻炼总结能力。

本篇介绍微信小程序如何分享到朋友圈，以及遇到的登录无权限问题和解决方案。

一、需求出发点

智能提醒小程序的推广是一个难点，朋友圈是一个必要渠道。如果能直接把小程序分享到朋友圈，用户点击即可使用，那么这将是一个推广神器。

二、实现路径

1、全局设置分享

小程序页面默认不可被分享到朋友圈，开发者需主动设置“分享到朋友圈”。页面允许被分享到朋友圈，需满足两个条件：

首先，页面需设置允许“发送给朋友”。具体参考 Page.onShareAppMessage 接口文档
满足条件 1 后，页面需设置允许“分享到朋友圈”，同时可自定义标题、分享图等。具体参考 Page.onShareTimeline 接口文档

满足上述两个条件的页面，可被分享到朋友圈。

uniapp应用，main.js中增加：

import MixinShare from './common/share';

Vue.mixin(MixinShare);


common/share.js 文件内容如下：

export default {
    // 全局默认设置，每个页面都可以分享，可以在具体页面进行覆盖
    // 发送给朋友，默认配置项。
    onShareAppMessage(res) {
        if(res.target){// 自定义分享判断
         if(res.target.id === 'shareBtn' ){
            return {
                title: '智能提醒，贴心守护，时刻为你把握生活节奏',
                path: 'pages/scene/scene?userId='+this.$store.state.member.id
            };
         }
        }
        let curPage = getCurrentPages();
        console.log("公共分享页面 获取参数：",curPage)
        let route = curPage[curPage.length - 1]; //获取当前页面的路由
        console.log("公共分享页面 获取参数：",route)
        return {
            title: '智能提醒，贴心守护，时刻为你把握生活节奏',
            path: route.route+'?userId='+this.$store.state.member.id
        };
    },
    // 分享到朋友圈 默认配置
    onShareTimeline() {
        return {
            title: '智能提醒，贴心守护，时刻为你把握生活节奏', // 分享的标题
            query: 'from=pyq&userId='+this.$store.state.member.id // 分享的查询参数，可选
        };
    },
};

2、单页设置

场景页面的.vue文件

export default {
		components: {
      uniSwipeAction, uniSwipeActionItem,
			listCell
		},// 发送给朋友，默认配置项。
    onShareAppMessage() {
      return {
        title: "智能提醒场景,总有一个适合你",
        path: '/pages/scene/scene?userId='+this.$store.state.member.id,
      };
    },
    // 分享到朋友圈 默认配置
    onShareTimeline() {
      return {
        title: "智能提醒场景,总有一个适合你", // 分享的标题
        query: 'from=pyq&userId='+this.$store.state.member.id // 分享的查询参数，可选
      };
    },
		data() {
      return {
        tabs: [],// 分类
        typeId: 0,// 当前选中的分类id
        scenesList: {}// 场景列表
      }
		},
....

2、分享效果展示

当你打开使用时会提示 前往小程序使用完整服务。

三、小程序分享朋友圈遇到的问题

1、分享设置中不能指定path路径

用户在那个页面进行的分享，分享出去的就是当前的页面，不能进行路径指定。

2、分享到朋友圈后，不能使用登录功能

小程序页面使用了静默登录，在调用wx.login()后，报错：

提示 “login:fail rejected due to no permission current”

原因：微信给限制了。。。

用户在朋友圈打开分享的小程序页面，并不会真正打开小程序，而是进入一个“小程序单页模式”的页面，“单页模式”有以下特点：

“单页模式”下，页面顶部固定有导航栏，标题显示为当前页面 JSON 配置的标题。底部固定有操作栏，点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。
“单页模式”默认运行的是小程序页面内容，但由于页面固定有顶部导航栏与底部操作栏，很可能会影响小程序页面的布局。因此，请开发者特别注意适配“单页模式”的页面交互，以实现流畅完整的交互体验。
“单页模式”下，一些组件或接口存在一定限制，详情见下文单页模式下的限制章节

3、解决办法

看了官方文档，横竖就是不让用，那就不涉及登录，调整接口权限，把可以无状态不需要登录的放出来，让用户能看到一些引导和介绍信息当推广落地页使用。反正用户点使用，也是会提示体验完整。

4、推广时间段效果分析

推广时间选择：
一般来说，以下几个时间点用户看朋友圈的可能性较大：

**一、早上**
- 时间：7:00 - 9:00。
这个时间段人们刚刚起床，在洗漱、吃早餐或者通勤的过程中，可能会拿起手机浏览朋友圈，
了解朋友们的最新动态，为新的一天开启一个社交互动的窗口。

**二、中午**
- 时间：12:00 - 13:30。
经过一上午的工作或学习，人们在午餐时间会稍作休息，此时查看朋友圈可以放松心情，
同时也能与朋友分享自己的上午经历或者看看别人的生活趣事。

**三、傍晚到晚上**
- 时间：17:30 - 22:00。
下班或放学后，人们有更多的自由时间。在晚餐前后、休闲娱乐的时间段里，会更频繁地查看朋友圈。
比如 19:00 左右，很多人在晚饭后可能会坐在沙发上刷手机；

21:00 - 22:00，准备休息前也可能再浏览一下朋友圈，作为一天的结束。