微信小程序official-account组件的使用及样式设置

释放双眼,带上耳机,听听看~!

official-account组件说明:

用户扫码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内。
先说明一个重点啊:想使用这个组件,小程序基础库要在2.3.0及以上,要不然是不会显示的。文档上那一行小字太容易让人忽视了,反正我打眼一看是没看到。。。

使用注意事项:

  1. 使用组件前,需前往小程序后台,在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。
    注:设置的公众号需与小程序主体一致。
  2. 在一个小程序的生命周期内,只有从以下场景进入小程序,才具有展示引导关注公众号组件的能力:
    当小程序从扫二维码场景(场景值1011)打开时
    当小程序从扫小程序码场景(场景值1047)打开时
    当小程序从聊天顶部场景(场景值1089)中的“最近使用”内打开时,若小程序之前未被销毁,则该组件保持上一次打开小程序时的状态
    当从其他小程序返回小程序(场景值1038)时,若小程序之前未被销毁,则该组件保持上一次打开小程序时的状态
  3. 每个页面只能配置一个该组件。

具体使用:

<view style="width:100%;position:relative;height:400rpx;background:gray;">
 <official-account style=""></official-account>
</view>

 

根据上面的注意事项我们知道,它并不是什么情况下都显示的,所以我在开发者工具上配置了一个场景值为1011的编译场景:
在这里插入图片描述
那么再次说明,基础库要选对啊,要不然可是显示不出来的!!!
在这里插入图片描述
设置完这两步,之前写好的official-account组件就可以显示出来了:
在这里插入图片描述
显示出来就是这样的,很省事有没有,连基本的样式都有了,但是还是想看看它的样式什么的是我们能控制的嘛,然后就又去试了一下。

样式设置

<view style="width:100%;position:relative;height:400rpx;background:gray;">
  <official-account style="position:absolute;top:0;width:81%;height:168rpx;border:1rpx solid black;"></official-account>
</view>

在这里插入图片描述
正如你们所看到的,这个组件的位置我们是可以尽情控制的,在它的外面包裹上一层view,想放哪放哪,但是我试过了,其他的样式好像是不那么轻易能改的,它的宽度还稍微能改动一下,可以缩小到屏幕的81%,但是高度是怎么样都改不了,我试了一下大概高度为168rpx,再小就不行了,而且就算你把它的高度设置的很小,他也是变不了,奇葩的是当高度设置的太小,再来个overflow:hidden的时候,人家还能直接把超出的部分隐藏掉,但是就不让你改,算了算了,这个样式我接受,我们产品怎样我就不知道了,hhhhh……
给你们看看我上面说到的情况:
高度设置为168的一半,然后让溢出隐藏
在这里插入图片描述
而且它的背景色设置了是没有用的:

<view style="width:100%;position:relative;height:400rpx;background:gray;">
 <official-account style="position:absolute;top:0;background-color:red;width:81%;height:168rpx;font-size:50rpx;overflow:hidden;border:1rpx solid black;"></official-account>
</view>
  • 1
  • 2
  • 3

在这里插入图片描述

样式设置总结

上面啰嗦了那么多,样式部分总的来说,其实我们能控制的只有它的位置和宽度(宽度还是只能缩小那么一点点),然后其他的什么背景色/字体尺寸/高度啥的我们都控制不了。

人已赞赏
PHP微信小程序

小程序开发之场景值及使用方法

2020-9-21 16:54:41

微信小程序

微信小程序云开发教程-墨刀原型工具入门

2020-11-23 12:50:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索