[图片] 简介 ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 浏览GitHub：https://github.com/weilanwl/ColorUI [图片] 如何使用？ 先下载源码包 → Github 引入到我的小程序 将 /demo/ 下的 colorui.wxss 和 icon.wxss 复制到小程序的根目录下 在 app.wxss 引入两个文件 [代码]@import "icon.wxss"; @import "colorui.wxss"; [代码] 使用模板全新开发 复制 /template/ 文件夹并重命名为你的项目，微信开发者工具导入为小程序就可以使用ColorUI了 体验沉浸式导航 [图片] App.js 获取系统参数并写入全局参数。 [代码]//App.js App({ onLaunch: function() { wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; } }) } }) [代码] Page.js 页面配置获取全局参数。 [代码]//Page.js const app = getApp() Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, Custom: app.globalData.Custom } }) [代码] Page.wxml 页面构造导航。更多导航样式请下载Demo查阅 操作条组件。 [代码]<view class="cu-custom" style="height:{{CustomBar}}px;"> <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"> <navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'> <text class='icon-back'></text> <text class='icon-homefill'></text> </navigator> <view class='content' style='top:{{StatusBar}}px;'>操作条</view> </view> </view> [代码] 自定义系统Tabbar [图片] 按照官方 自定义 tabBar 配置好Tabbar (开发工具和版本库请使用最新版)。 使用ColorUI配置Tabbar只需要更改 Wxml 页的内容即可。 更多Tabbar样式请下载Demo查阅 操作条组件。 /custom-tab-bar/index.wxml [代码] <view class="cu-bar tabbar bg-white shadow"> <view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <view class='icon-cu-image'> <image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image> </view> <view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view> </view> </view> [代码] 作者叨叨 ColorUI是一个高度自定义的Css样式库，包含了开发常用的元素和组件，元素组件之间也能相互嵌套使用。我也会不定期更新一些扩展到源码。 其实大家都在催我写文档，但这个库源码就在这，所见即所得，粘贴复制就可以得到你想要的页面。当然，文档我还是要写的，也希望大家多多提意见。 现在前端的开发方向基本都是奔着Js方向的，布局和样式大家讨论的有点少。以后我会在开发者社区多聊一聊关于开发中的布局和样式。 [图片] 感谢阅读。

原生模板广告接入技巧实践篇 ~ 之前在社区写过原生模板广告的接入文章，是时候具体落实到流量主上来了 原生模板广告接入技巧? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/00046444e84a08634e4bd2ee051c13 ~其实模板广告我在之前也写过文章，但是今天看到一个身边朋友的小程序，确实广告做的惊讶到我了 图一 [图片] 图二 [图片] 具体接入细则 在一个屏内，尽量只接入一个广告，特别是在列表中，如果一屏能展示5个ITEM，那么可以按照四个ITEM+一个广告位来接入 原生模板广告选择-横幅-左图右文 [图片] ~

应用场景 灵感源于 [图片] 目标用户 情侣，夫妻 原型图 [图片] 架构图 [图片] 效果截图 主流程 [图片] 模块 模版 [图片] 我的 [图片] 项目演示视频 地址：https://v.qq.com/x/page/v3153g8zs5p.html 功能代码展示 云函数代码（卡券云函数） [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() if (event.action && ticketHelper[event.action]) { const result = await ticketHelper[event.action](wxContext, event) return result } return { message: 'This action was not found', error: -1, } } const db = cloud.database(); const ticketHelper = { // 添加卡券 async addTicket(context, params) { params.ticket._openid = context.OPENID let res = await db.collection('tickets').add({ data: params.ticket }) return res }, // 查看我的卡券 async queryMyTicket(context, params) { const { OPENID } = context let res = await db.collection('tickets').where({ _openid: OPENID }).orderBy('createdAt', 'desc').get() return res }, // 查看卡券详情 async queryCurrentTicket(context, params) { let res = await db.collection('tickets').doc(params.ticketId).get() return res }, // 删除卡券 async removeTicket(context, params) { let res = await db.collection('tickets').doc(params.ticketId).remove() return res }, } [代码] 页面代码（首页） [代码]<!--index.wxml--> <view class="container"> <view class="top-img"> <image class="top-img" src="../../images/top_img.png"></image> </view> <view class="ticket-list"> <view bindtap="toAdd" class="create"> + 添加自定义模版 </view> <view wx:for="{{myTemplates}}" class="custom" style="background-image: url({{item.backgroundurl}});" bindtap="toInfo" data-item="{{item}}"> <view class="custom-title" style="color:{{item.color}}">{{item.title}}</view> <view class="custom-info" style="color:{{item.color}}">{{item.info}}</view> </view> </view> <view class="ticket-list"> <view wx:for="{{templates}}" bindtap="toInfo" data-item="{{item}}" class="ticket-item {{index%2==0?'ticket-pink-bg':'ticket-blue-bg'}}"> <text class="ticket-title">{{item.title}}</text> <view class="ticket-info {{index%2==0?'ticket-pink-info':'ticket-blue-info'}} ">{{item.info}}</view> </view> </view> </view> [代码] 逻辑代码（首页） [代码] // 首页 const app = getApp() import { queryPrivateTemplate, queryPublicTemplate } from '../../api/template' Page({ data: { }, onLoad: function (opt) { // 领取路径跳转 if (opt.type == 1) { wx.navigateTo({ url: '/pages/giveList/giveList?ticket=' + opt.ticket, }) } // 查询公用的卡券模版 queryPublicTemplate().then(res => { this.setData({ templates: res.result.data, }) }); }, onShow() { // 查询私有的卡券模版 queryPrivateTemplate().then(res => { this.setData({ myTemplates: res.result.data, }) }); }, // 去添加模版 toAdd() { if (app.authorized !== true) { wx.navigateTo({ url: '/pages/authorize/authorize' }); return; } wx.navigateTo({ url: '/pages/selectBackground/selectBackground', }) }, // 查看详情 toInfo(res) { // 没有授权就先去授权 if (app.authorized !== true) { wx.navigateTo({ url: '/pages/authorize/authorize' }); return; } let item = res.currentTarget.dataset.item var templateInfo = JSON.stringify(item); wx.navigateTo({ url: '/pages/add/add?action=update&templateInfo=' + templateInfo }) } }) [代码] 样式代码（app.js） [代码].container{ width: 100vw; /* height: 100vh; */ background-color: #FFFFFF; display: flex; flex-direction: column; align-items: center; } page{ background: #f6f6f6; --color-p: #F58B98; } button { padding-left: 0rpx; padding-right: 0rpx; border-radius: 0rpx; } button::after { border: none; } /* 底部按钮 */ .next-btn { position: absolute; bottom: 0rpx; left: 0rpx; width: 750rpx; height: 120rpx; background: var(--color-p); text-align: center; line-height: 120rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: 600; color: #FFFFFF; } /* 已使用样式 */ .image-gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opacity:0.9; } /* 所有输入框，未输入文字的样式 */ .placeholder { font-size: 26rpx; font-family: PingFang SC; font-weight: 400; color: #CCCCCC; } /* 卡券样式：主页、添加页、我收到的、我赠送的、详情页 */ .custom { width: 670rpx; height: 240rpx; margin-top: 25rpx; background: #FFF7F7; border-radius: 20rpx; background-size: 100% 100%; position: relative; } .custom-title { margin-left: 40rpx; padding-top: 40rpx; font-size: 40rpx; font-weight: 600; color: #FFFFFF; } .custom-info { margin-left: 40rpx; padding-top: 25rpx; font-size: 26rpx; font-weight: 600; color: #FFFFFF; } /* 头部样式：选择背景、添加页、详情页 */ .top { width: 690rpx; display: flex; flex-direction: row; margin: 20rpx 30rpx; align-items: center; justify-content: space-between } .top-title { font-size: 34rpx; font-family: PingFang SC; font-weight: 600; color: #2A2A2A; } .top-right-text { font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: var(--color-p); } [代码] 作品体验二维码 [图片] 团队简介 夫妻档 陈宇明：负责产品与开发 王丝雨：负责设计与交互 觉得不错那就【点赞】支持一下

好像视频是按曝光，图片是按点击

看到有一些小程序有这种广告, 为什么我去选就没有呢. [图片] 这应该就是官方提供的原生模板广告. 跳转其他小程序都没有弹窗提示的.