微信小程序official-account组件的使用及样式设置
大家下午好,作为一只写了好几个月小程序的猿,微信关注了‘微信公众平台’的公众号是必然的,所以头天晚上就收到了这厮推送的消息,说是扫码打开小程序新增公众号关注组件。讲真的,我真的没打开看,困成狗的我心想:反正现在也不用,就先这样吧,用的时候再说,然后就碎了。然而今天早上到了公司,正在认真码字,我们产品经理一个消息发过来了,打开一看,简单明了,于是就有了以下的对话……
唉~心痛的无法呼吸,没办法,那就研究一下,多了解了解也挺好的其实。。。
那就先去看一下文档好了:
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>
根据上面的注意事项我们知道,它并不是什么情况下都显示的,所以我在开发者工具上配置了一个场景值为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>
样式设置总结
上面啰嗦了那么多,样式部分总的来说,其实我们能控制的只有它的位置和宽度(宽度还是只能缩小那么一点点),然后其他的什么背景色/字体尺寸/高度啥的我们都控制不了。
看过来看过来看过来
小程序在日渐强大,我能感知到的也有限,大家有什么新发现,记得要分享出来给萍子哦。
好啦,马上就到下班时间了,中秋节假日倒计时,提前祝大家中秋节快乐,假日愉快咯!
微信小程序official-account组件的使用及样式设置相关推荐
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信小程序授权登录 组件的封装
微信小程序授权登录 组件的封装 新建components文件 写wxml文件 wxss部分 js部分 json引用 页面使用 页面js 授权登录 流程如下: 因为多个页面功能需要登录状态 所以做了个组 ...
- 微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
- 【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性 共同的属性 时间选择器time 参考 [微信小程序]选择器组件picker picke ...
- 微信小程序的父子组件传值
微信小程序的父子组件传值 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...
- A095_day01_微信小程序入门与组件
目录 微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
- 微信小程序引入vant-weapp组件遇到的bug以及解决方法
微信小程序引入vant-weapp组件遇到的bug问题 原本百度了一波,说只要安装了node还有npm之后,使用gitBash命令行工具直接cd到根目录下然后直接引入以下代码: npm i vant- ...
- 微信小程序上传组件(可同时长传图片+视频)
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
- 微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库 链接: vant开发指南. ...
最新文章
- Mysql5.7-CentOS7安装
- shufflenet-centernet
- BT5下使用Armitage的一些问题
- Blazor 应用如何使用 Azure Active Directory 认证登录
- Win7下的C盘重新划分为两个盘
- vue 切换页面没有改变滚动条_Web前端高级Vue学习笔记(三)
- 牛客网算法工程师能力评估
- 理解Lucene中的Query
- 驱动外置+原版安装方式『XLOS_Windows8_Pro_X86纯净版_V1.0』
- 关于AngularJS:
- (转)GridView固定表头
- 计算机主板的1117标识,AMS1117封装尺寸图_AMS1117引脚图及功能
- c#图片反色,取底色,照片底色效果
- 国外的大龄程序员在干什么?
- magento常用插件
- java求因子_一个数恰好等于它的因子之和java
- JavaScript简单的数据总计怎么做?
- 数据库常用的sql语句名称大全
- CommandArgument的一种用法
- 计算机组成原理(静态随机存取存取器)
热门文章
- CVE-2013-3346Adobe Reader和Acrobat 内存损坏漏洞分析
- Verilog HDL 学习笔记3-Latch
- Android ADT插件更新后程序运行时抛出java.lang.VerifyError异常解决办法
- 坚果云开发团队分享高效代码审查经验
- 基础知识—表达式与语句-语句
- 学棋五年的我输给了昇腾CANN
- 主干开发前要知道的,4错误认识+3优势
- 从保证业务不中断,看网关的“前世今生”
- 关于服务发现和负载均衡,你想知道的都在这儿
- 【华为云技术分享】敏捷开发落地不实际?原因可能在于你的 IDE 工具