微信如何转发朋友圈内容「必看:朋友圈直接转发文字图片操作」

小伙伴们大家好,今天卫宁辉给大家分析下关于微信如何转发朋友圈内容,朋友圈直接转发文字图片操作的事情,以及微信如何转发朋友圈这些一系列的相关干货内容,思路很重要,希望我整理分享的这篇文章对你能有一定的帮助!

最近被产品提了相关需求,过程中遇到了一些坑。作者带着踩坑经验,给大家介绍下这个功能,以及其如何实现。

概述

点击右上角分享朋友圈

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

分享到朋友圈样式

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

朋友圈打开样式

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

这个功能目前只支持Android(在IOS高版本微信支持朋友圈打开小程序能力,但不能分享)。

用户打开朋友圈分享的小程序,看到不是真正的小程序,而是原本页面的“单页模式”。

什么是“单页模式”?

以下是微信官方对于“单页模式”的描述:

“单页模式”下,页面顶部固定有导航栏,标题显示为当前页面 JSON 配置的标题。底部固定有操作栏,点击操作栏的“前往小程序”可打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。

“单页模式”默认运行的是小程序页面内容,但由于页面固定有顶部导航栏与底部操作栏,很可能会影响小程序页面的布局。因此,请开发者特别注意适配“单页模式”的页面交互,以实现流畅完整的交互体验。

限制

另外,“单页模式”存在着很多限制。以下是官方给出的禁用能力列表:

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

限制主要包括以下几点:

页面无登录态,与登录相关的接口,如wx.login均不可用

不允许跳转到其它页面,包括任何跳小程序页面、跳其它小程序、跳微信原生页面

若页面包含 tabBar,tabBar 不会渲染,包括自定义 tabBar

本地存储与小程序普通模式不共用

这些限制,让“单页模式”只适用于内容展示,不适用于有较多交互

配置

针对“单页模式”,新增了单页模式相关配置。目前这个配置里只有一个navigationBarFit属性:

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

navigationBarFit属性主要是针对原页面设置了自定义导航栏的情况。也就是原页面的json文件中配置了这个属性:

{ // … “navigationStyle”:”custom” // …}

给大家看一下普通导航栏和自定义导航栏的区别,下图是普通导航栏页面:

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

下图是自定义导航栏页面,我们在原本的导航栏位置使用了banner:

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

“navigationStyle”:”custom”这个设置在“单页模式”下也会生效。前文微信官方对“单页模式”的描述有说到“顶部导航栏与底部操作栏均不支持自定义样式”。如果我们在原页面设置了自定义导航栏。那么“单页模式”样式就会变成这样:

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

通过设置navigationBarFit为 squeezed就可以解决这个问题:

{ // … “singlePage”: { “navigationBarFit”: “squeezed” } // …}

设置后的样式:

微信如何转发朋友圈内容,朋友圈直接转发文字图片操作,微信如何转发朋友圈

开发

接下来介绍如何在小程序中实现这个功能。

第一步在需要转发朋友圈的页面中注册用户点击右上角转发功能,这是实现转发朋友圈功能的必要满足条件。

onShareAppMessage: function () { return { title: ‘转发标题’, path: ‘/pages/home/index’, imageUrl: ‘自定义图片路径’ }}

第二步注册分享朋友圈功能(从基础库 2.11.3 开始支持):

onShareTimeline: function () { return { title: ‘转发标题’, query: ‘from=pyq’, imageUrl: ‘自定义图片路径’ }}

注意,这里有个问题,分享朋友圈功能不支持自定义页面路径,意味着只能转发当前页面。如果当前页面存在较多“单页模式”限制功能,就可能让我们的页面不能按预期展示。

当页面存在限制功能时,我们存在两个方案,第一个方案,针对“单页模式”做改动,不调用那些限制的功能。第二个方案,另外写一个针对“单页模式”的页面。

这两种方案都需要能判断当前是否正处在小程序“单页模式”。

我们通过判断场景值(场景值用来描述用户进入小程序的路径)是否等于 1154 来判断当前是否正处在小程序“单页模式”。场景值可以在 App 的 onLaunch 获取。

// app.jsApp({ // … onLaunch(options) { const { scene } = options; this.isSinglePage = scene === 1154; } // …})

我们将是否正处在“单页模式”的Boolean值放入App实例,方便全局拿到值。

接下来说说两种方案。

第一种方案,在“单页模式”不调用那些限制功能(这是一种不推荐的方案,代码耦合性太强)。举个例子:

const app = getApp();Page({ // … onLoad() { if (!app.isSinglePage) { wx.login({ // … }) } } // …})

第二种方案,针对“单页模式”另写一个页面。因为分享朋友圈功能并不支持自定义页面路径,我们只能另外写一个组件来作为“单页模式”的内容承载。

将isSinglePage放入页面的初始数据,方便在wxml中拿到:

// pages/home/index.jsconst app = getApp();Page({ data: { isSinglePage: app.isSinglePage, } // …})

home-single-page就是分享到朋友圈的内容承载组件:

// pages/home/index.json{ // … “usingComponents”: { “home-single-page”: “components/home-single-page/index” },}

当“单页模式”时,我们展示 home-single-page组件,否则就展示普通页面内容:

// pages/home/index.wxml

样式上虽然搞定了,但是在原本的生命周期中可能会调用一些限制功能,或者跑一些其它“单页模式”用不上的内容。我们得停止原本生命周期函数调用。

建议对传入Page的对象进行统一处理,当“单页模式”时,不调用原本的生命周期:

// pages/home/index.jsimport ExtendPage from ‘common/extend-page/index’const app = getApp();ExtendPage({ data: { isSinglePage: app.isSinglePage, } // …})

ExtendPage函数针对“单页模式”进行统一处理:

// common/extend-page/index.jsconst app = getApp();const PAGE_LIFE = [ ‘onLoad’, ‘onReady’, ‘onShow’, ‘onHide’, ‘onError’, ‘onUnload’, ‘onResize’, ‘onPullDownRefresh’, ‘onReachBottom’, ‘onPageScroll’];export default function(option) { let newOption = {}; if(app.isSinglePage) { newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ …option, …newOption, });}

在“单页模式”下,我们将原本的生命周期都停止了调用。这样就能很好的将“单页模式”下的页面和普通页面进行解耦。

如果”单页模式“页面比较复杂,需要使用生命周期。我们也可以添加 singlePageLife属性,当处在“单页模式”下,就调用 singlePageLife内的生命周期:

// pages/home/index.jsimport ExtendPage from ‘common/extend-page/index’const app = getApp();ExtendPage({ data: { isSinglePage: app.isSinglePage, }, singlePageLife: { onLoad() { // … }, } // …})

// common/extend-page/index.jsconst app = getApp();const PAGE_LIFE = [ ‘onLoad’, ‘onReady’, ‘onShow’, ‘onHide’, ‘onError’, ‘onUnload’, ‘onResize’, ‘onPullDownRefresh’, ‘onReachBottom’, ‘onPageScroll’];export default function(option) { let newOption = {}; if(app.isSinglePage) { const { singlePageLife } = option; newOption = PAGE_LIFE.reduce((res, lifeKey) => { if (singlePageLife[lifeKey]) { res[lifeKey] = singlePageLife[lifeKey]; } else if(option[lifeKey]) { res[lifeKey] = undefined; } return res; }, {}) } return Page({ …option, …newOption, });}

文章如有疏漏、错误欢迎批评指正。

这篇文章就到这里了,不管如何,只要能帮到你我就非常开心了,看完了,如果你感觉微信如何转发朋友圈内容「必看:朋友圈直接转发文字图片操作」挺不错的话帮忙点个赞吧,浏览巢座耶学习网更多页面可以学到更多知识哈!

本文发布者:百事通,不代表巢座耶立场,转载请注明出处:https://www.chaozuoye.com/p/5534.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 jubao226688#126.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月7日 08:37
下一篇 2023年4月7日 08:40

相关推荐

  • 菜鸟驿站每月挣几万一个件多少钱 附:菜鸟驿站现状及趋势分析

    HI,小伙伴们你们好,今天何亦飞比较忙,抽个时间来说下关于菜鸟驿站每月挣几万一个件多少钱,菜鸟驿站现状及趋势分析,以及关于菜鸟驿站每月挣几万等等一系列的相关事项,先说明一下,老司机直接飘过吧,主要是讲解给新手朋友们的哈! 菜鸟驿站靠什么赚钱,有搞头吗?开一个菜鸟驿站赚钱吗?菜鸟驿站月收入多少钱?菜鸟驿站的收入谁来付?菜鸟驿站其实并不赚钱?菜鸟驿站真的赚钱吗?…

    2024年3月15日 百科
  • 化妆品网店代销在哪里找 秒懂:微商代理免费化妆品步骤

    大家好,很高兴又和你见面了,感谢你能经常过来支持褚伊纯,这次我们就来聊聊化妆品网店代销在哪里找,微商代理免费化妆品步骤,以及化妆品网店代销这些一系列的相关干货内容,思路很重要,希望我整理分享的这篇文章对你能有一定的帮助! 甚至有许多女性朋友为了拥有一个美丽的外表进行整容手术。美容产业慢慢诞生,开设美容院的成本很高,但是化妆品不同,特别是品牌化妆品特别受欢迎。…

    2023年10月7日
  • 睡衣货源在哪里 最新批发睡衣最便宜又好的渠道

    小伙伴们你们好,王小燕很高兴又和各位见面了,今天主要来讲讲睡衣货源在哪里,批发睡衣最便宜又好的渠道,还有关于睡衣货源这些的内容,希望各位能认真阅读。因为,只有这样才能真正理解和掌握! 拼多多已经不能满足糖主了,1688才是最近的本命。动不动就上百的收纳箱,1688直接打5折还不止。 1688是阿里旗下的电商平台,相当于一个批发市场,家居百货、服装服饰、工业品…

    2023年9月19日 百科
  • 暴利行业排行榜 最新盘点未来十年最紧缺的行业

    HI,大家好,废话不多说,直接上干货:暴利行业排行榜,盘点未来十年最紧缺的行业,以及暴利行业的一系列相关干货,如果你是老司机,你可能觉得很简单,但如果你是新手,你可能就不这么想了。 目前,各行各业组成了我们现在的这个社会,商业活动覆盖到了我们生活的方方面面,其中不乏一些十分暴利的行业。在这些行业当中,有没有我们普通老百姓也能投资的呢? 暴利行业都有哪些? 说…

    2023年8月28日
  • miss鞋子淘宝店叫什么「秒懂:miss大小姐外设店地址」

    HI,小伙伴们你们好,今天欣馨比较忙,抽个时间来说下关于miss鞋子淘宝店叫什么,miss大小姐外设店地址,以及关于miss鞋子淘宝店等等一系列的相关事项,其实这个内容对于新手来说还是挺重要的,因为涉及面很大。如果你认真读了,一定会有所收获! 直播间也总是充满了欢乐,而最近Miss在直播的时候居然开始秀自己1.8米的大长腿,粉丝们也是看直了眼。 大家都知道M…

    2023年4月20日
  • 香奈儿COCO可可香水专柜价格 详细讲解:世界名牌香水前十名

    今天远骏给大家带来了这篇香奈儿COCO可可香水专柜价格,世界名牌香水前十名干货,以及香奈儿COCO可可香水等等相关的各种干货,希望你们能通过这篇文章很好的掌握其中的技巧,下面我就来为大家全部一一解析! 香奈儿 coco小姐‖轻盈少女 前调:橙子 橘子 橙花 香柠檬 中调:含羞草 茉莉 玫瑰 依兰 后调:零陵香豆 广藿香 红没药 香草 香根草 麝香 ①前调用柑…

    2023年9月29日