微信小程序广告组件功能详细介绍

为了满足用户的需要，微信小程序广告组件正在内测中，同时还更新了其他功能，让微信的功能日渐完善。下面我们一起来了解下这次更新的具体内容。

微信小程序本次更新的主要内容有：

1、内测小程序广告组件

为满足小程序开发者变现需求，小程序广告组件已启动内测。

开发者开通流量主模块后，可通过创建广告单元，使用广告组件将广告卡片灵活配置在小程序页面内。

同时，微信广告已面向广告主开放品牌活动推广、电商推广、公众号推广及应用推广等类目能力，支持小程序广告资源位投放。

2、新增快速创建小程序接口

为帮助已有公众号用户快速接入小程序服务，公众平台新增“快速注册小程序”权限集。

公众号可授权第三方平台快速注册并认证小程序。

3、新增插件管理接口

为方便小程序开发者使用插件，新增插件管理接口，包括添加插件及管理插件使用申请。

新增“插件管理权限集”，支持小程序授权第三方平台添加插件。

4、更新基础能力

为保护用户隐私并优化体验，开发者在不获取用户信息的情况下，无需用户授权，即可在页面上展示当前用户的昵称和头像等内容。

当前用户小程序版本过低，无法获得最佳使用体验时，开发者可将其更新到最新版本。

小程序新增异步任务处理能力。

新手在第一次自定义组件的时候，首先写出来需要定义的组件的内容和布局，防止不熟练而出错。

一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。

二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。

三、在新建的文件夹内新建一个Component文件 命名也是自定义。

四、在xxx里面把事先写好的ml和ss以及js文件复制进去。

1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样  {{}}是插值表达式。这里可以直接使用js里面定义的数据。

eg:

1、组件自定义的属性列表写在 properties里面。需要写成对象的形式 

eg:

2、组件的方法列表写在 methods里面

eg:

五、在需要引用自定义组件页面文件的xxxjson里面引用。

注意：引用的时候，不可以以/开头。前面命名可以自命名，不必和后面名字一样。

六、在需要引用的页面里的的xxxwxml里写已经命名好的组件。

组件的名字为自定义命名。

eg:

因为组件是自己写的，并非微信提供的官方组件，所以如果想要获取触发事件的话 ，需要写一个同步组件回传数据

触发自定义事件用triggerEvent。在需要调用的方法内写thistriggerEvent(“自定义属性名”，‘需要更新的数据’)

eg:

然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”

利用data-active="变量名"属性添加需要变化的变量

eg:

xxxwxml内写法：

注意：想要在页面中使用自定义的组件属性时，必须要现在定义组件的文件夹内的js文件中，先去定义属性，然后才可以引入使用。

如上图所示，这个界面中整个页面是父级页面， 2个块级是子组件

1父 --- 子（第一级子组件） custom-adoption-agency

1父属性在子组件中存入properties，后写属性的数据类型

2由于父直接修改properties值，如果子想要重刷新，需要取

this属性名称

微信小程序image组件中的bindload不触发问题

原因分析

        做小程序预加载功能的时候，发现切换页面后总是停留在预加载的上，多次调试后发现，是因为第一次加载的时候可以正常触发bindload，但是刷新之后有缓存，就不会再执行bindload了。

解决办法

解决方法是前端加载url的时候，在后面加一串随机数，这样小程序每次都会认为是新，不会有缓存

链接：>

pagejs

一：components/adDialogjs

二：components/adDialogwxml

三：components/adDialogjson

四：components/adDialogwxss

组件使用

下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：

通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 ：

主要实现（点击跳转查看源码）

1复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）

4在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的 Tab 和 Page

7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 indexwxml 中：

样式文件 indexwxss 中

布局文件 indexwxml 中

PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 thistriggerEvent("updata") 触发

可能出现问题：

1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决？

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）

2当 item-page 或 item-tab 中调用 thissetData ( ) 之后，发现自定义属性 item 获取值为 null

出现该种情况，应在 thissetData ( ) 之后，执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。

iOS数据监听很简单，比如登录成功之后首页、个人中心页等很多页面都需要更新数据，只需要首页和个人中心页注册通知，登录成功之后发送通知，首页和个人中心页就能接收到该通知，此时就可以更新数据及界面，退出登录同理。

小程序更新页面数据就比较费劲，之前我都是获取上级页面，然后调用上级页面自定义方法 loadNewData 方法来刷新上级页面数据。

这种方法说实话也挺好用的，但是只能更新 wxnavigateTo 打开的页面。

官方也有页面间通信方法 EventChannel ，同样只能和 wxnavigateTo 打开的页面进行通信。

今天遇到的需求是 tabbar 切换的页面更新首页列表数据，只能各种百度，最终也实现的功能。

在首页调用

在其他页面修改 reloadIndex 的值

小程序组件有 数据监听器 ，也实现了某个功能。

参考文章：

小程序实现数据监听

小程序如何在其他页面监听globalData中值的变化？

微信小程序设置简单的监听器

以上就是关于微信小程序广告组件功能详细介绍全部的内容，包括:微信小程序广告组件功能详细介绍、小程序自定义组件、微信小程序- 父组件传值给子组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！