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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/MYTLJP/article/details/82804616

 

大家下午好，作为一只写了好几个月小程序的猿，微信关注了‘微信公众平台’的公众号是必然的，所以头天晚上就收到了这厮推送的消息，说是扫码打开小程序新增公众号关注组件。讲真的，我真的没打开看，困成狗的我心想：反正现在也不用，就先这样吧，用的时候再说，然后就碎了。然而今天早上到了公司，正在认真码字，我们产品经理一个消息发过来了，打开一看，简单明了，于是就有了以下的对话……

唉~心痛的无法呼吸，没办法，那就研究一下，多了解了解也挺好的其实。。。
那就先去看一下文档好了：

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

使用注意事项：
使用组件前，需前往小程序后台，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。
注：设置的公众号需与小程序主体一致。
在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:
当小程序从扫二维码场景（场景值1011）打开时
当小程序从扫小程序码场景（场景值1047）打开时
当小程序从聊天顶部场景（场景值1089）中的“最近使用”内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态
每个页面只能配置一个该组件。
具体使用：
<view style="width:100%;position:relative;height:400rpx;background:gray;">
 <official-account style=""></official-account>
</view>
1
2
3
根据上面的注意事项我们知道，它并不是什么情况下都显示的，所以我在开发者工具上配置了一个场景值为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>
1
2
3

正如你们所看到的，这个组件的位置我们是可以尽情控制的，在它的外面包裹上一层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

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