微幕小程序增强版添加百度follow-swan关注小程序组件

首先,需要解释下什么是follow-swan 关注小程序组件,通俗讲就是在百度小程序中增加关注组件,这样,用户下次打开小程序就可以在“百度 APP-我的”中找到我的小程序,提升用户体验!接入文档很简单,微幕小程序增强版添加添加百度follow-swan 关注小程序组件也更加简单!本功能支持最低版本为3.170.12,因在开发者工具中无法获取关注态,建议使用真机调试。

官方案例

swan

<view class="wrap">
<view class="card-area">
<view class="tip-strong">
该能力暂未全量开放,需申请后使用,且基础库 3.170.1 版本开始支持。
</view>
<view class="top-description border-bottom">
按钮样式
</view>
<form bindsubmit="addsubscribe" report-submit="true">
<view class="button-box">
<view class="button-box-inner" s-for="item in followData" >
<follow-swan size="default" type="{{item.type}}"/>
<text class="button-box-text">
{{item.type}}
</text>
</view>
</view>
</form>
</view>
</view>

js

Page({
    data: {
        followData: [
            {
                type: 'primary'
            },
            {
                type: 'default'
            },
            {
                type: 'none'
            }
        ]
    }
});

以上是官方提供的代码,如果我们小程序需要使用,直接按照官方的接入即可!

属性说明

属性名 类型 默认值 必填 说明 最低版本
size String default 组件大小 3.170.12
type String primary 组件样式 3.170.12

size有效值

说明
default 默认大小
normal 大尺寸

type有效值

说明
primary 未关注时蓝色,关注后变成白色
default 白色
none 线性,背景色透明

以上就是我们在接入过程可以自定义的属性,接下来技术宅就以将关注组件添加到微幕小程序增强版小程序的首页为例子,教大家如何添加代码!

代码添加

我们需要修改的是百度智能小程序文件中路径为/pages/index/中的swan后缀文件和js后缀文件,其他文件无需修改!

将以下代码添加到index.js文件中:

followData: [
           
            { type: 'primary' }, { type: 'default' }, { type: 'none' }
        ],

其实值default可以修改为primary和none,具体的区别为可以参考属性!具体代码添加位置参考下图:

微幕小程序增强版添加百度follow-swan关注小程序组件

将以下代码添加到index.swan文件中type的值根据自己的需要配置,和js里面的三个type值对应一个即可:

<follow-swan size="default" type="primary"/>

代码若不显示被转义,请放大图片查看!

微幕小程序增强版添加百度follow-swan关注小程序组件

其中值default可以修改为normal,这是修改按钮大小的,大家按照属性参数对照修改!

以上代码是直接调用的,没有添加任何的样式,如果需要添加样式,大家自己参考,技术宅就不赘述了!具体的效果可以查看技术宅网的百度小程序!

微幕小程序增强版添加百度follow-swan关注小程序组件

技术分享

宝塔Linux面板屏蔽特定的User-Agent

2020-7-20 20:54:02

技术分享

微信小商店初体验

2020-7-22 19:49:18

    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索