开通流量主流程 [图片] 1）点击左侧导航栏的“流量主”进入专属模块 小程序累计独立访客（UV）1000以上，且无违规记录，即可开通流量主功能。 [图片] 2）点击“新建广告位”开始创建  输入广告位名称即可，如计划插入多个广告位，需要分别新建。 [图片] 3）获取广告位代码片段  系统将生成广告位的代码片段，开发者点击“复制代码”留用。 [图片] 4）嵌入代码片段&测试&发布  嵌入代码片段至希望展示广告的位置，并在发布前通过测试预览广告位展示情况。  注：请务必完成主流机型的适配测试，由于适配原因带来的违规问题，将受到同等处罚。 ①原生模板广告 .adContainer { width: 100%; } <view class="adContainer"> <ad-custom unit-id="xxxx"></ad-custom> </view> [图片] ②插屏广告 let interstitialAd = null Page({ onLoad() { if(wx.createInterstitialAd){ //创建 interstitialAd = wx.createInterstitialAd({ adUnitId: 'xxxx' }) interstitialAd.onLoad(() => { console.log('onLoad event emit') //显示 interstitialAd.show().catch((err) => { console.error(err) }) }) interstitialAd.onError((err) => { console.log('onError event emit', err) }) interstitialAd.onClose((res) => { console.log('onClose event emit', res) }) } } }) [图片] ③激励视频广告 let rewardedVideoAd = null Page({ onLoad() { if(wx.createRewardedVideoAd){ rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' }) rewardedVideoAd.onLoad(() => { console.log('onLoad event emit') }) rewardedVideoAd.onError((err) => { console.log('onError event emit', err) }) rewardedVideoAd.onClose((res) => { console.log('onClose event emit', res) const { isEnded } = res //视频是否播放结束、可以向用户下发奖励 if (isEnded) {       //@todo 获得积分数据交互     } }) } }, showVideoAd() {     // 用户触发广告后，显示激励视频广告     if (rewardedVideoAd) {       rewardedVideoAd.show().catch(() => {         // 失败重试         rewardedVideoAd.load()           .then(() => rewardedVideoAd.show())           .catch(err => {             console.log('激励视频 广告显示失败')           })       })     }   }, }) <button type="default" bindtap="showVideoAd">观看完整视频广告</button> [图片] [图片] [图片] 总结 以上便是这次手把手教我开通小程序广告组件、接入场景与操作指引的学习笔记。多个页面接入同一种类型的流量主广告组件务必使用同一个adUnitId，不要问为什么，我也不知道，就是会提高单价曝光率。

之前的插件类目没有了导致搜不到了，重新发个文章。 image-cropper 一款高性能的小程序图片裁剪插件，支持旋转。 [图片] 优势 [代码]1.功能强大。[代码] [代码]2.性能超高超流畅，大图毫无卡顿感。[代码] [代码]3.组件化，使用简单。[代码] [代码]4.点击中间窗口实时查看裁剪结果。[代码] ㅤ 初始准备 1.json文件中添加image-cropper [代码] "usingComponents": { "image-cropper": "../image-cropper/image-cropper" }, "navigationBarTitleText": "裁剪图片", "disableScroll": true [代码] 2.wxml文件 [代码]<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper> [代码] 3.简单示例 [代码] Page({ data: { src:'', width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { //获取到image-cropper实例 this.cropper = this.selectComponent("#image-cropper"); //开始裁剪 this.setData({ src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg", }); wx.showLoading({ title: '加载中' }) }, cropperload(e){ console.log("cropper初始化完成"); }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset(); }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({ current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 }) }, }) [代码] 参数说明 属性 类型 缺省值 取值 描述 必填 imgSrc String 无 无限制 图片地址(如果是网络图片需配置安全域名) 否 disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false) 否 limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true) 否 width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度 否 height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度 否 max_width Number 300 裁剪框最大宽度 裁剪框最大宽度 否 max_height Number 300 裁剪框最大高度 裁剪框最大高度 否 min_width Number 100 裁剪框最小宽度 裁剪框最小宽度 否 min_height Number 100 裁剪框最小高度 裁剪框最小高度 否 disable_width Boolean false true/false 锁定裁剪框宽度 否 disable_height Boolean false true/false 锁定裁剪框高度 否 disable_ratio Boolean false true/false 锁定裁剪框比例 否 export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸) 否 quality Number 1 0-1 生成的图片质量 否 cut_top Number 居中 始终在屏幕内 裁剪框上边距 否 cut_left Number 居中 始终在屏幕内 裁剪框左边距 否 [代码]img_width[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置宽度，高度自适应) 图片宽度 否 [代码]img_height[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置高度，宽度自适应) 图片高度 否 scale Number 1 无限制 图片的缩放比 否 angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度 否 min_scale Number 0.5 无限制 图片的最小缩放比 否 max_scale Number 2 无限制 图片的最大缩放比 否 bindload Function null 函数名称 cropper初始化完成 否 bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等} 否 bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height} 否 函数说明 函数名 参数 返回值 描述 参数必填 upload 无 无 调起wx上传图片接口并开始剪裁 否 pushImg src 无 放入图片开始裁剪 是 getImg Function(回调函数) [代码]Object{url,width,height}[代码] 裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale) 是 setCutXY X、Y 无 设置裁剪框位置 是 setCutSize width、height 无 设置裁剪框大小 是 setCutCenter 无 无 设置裁剪框居中 否 setScale scale 无 设置图片缩放比例（不受min_scale、max_scale影响） 是 setAngle deg 无 设置图片旋转角度（带过渡效果） 是 setTransform {x,y,angle,scale,cutX,cutY} 无 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参 imgReset 无 无 重置图片的角度、缩放、位置(可以在onloadImage回调里使用) 否 GitHub https://github.com/wx-plugin/image-cropper/tree/master 如果有什么好的建议欢迎提issues或者提pr

swiper面板指示点： .wx-swiper-dots.wx-swiper-dots-horizontal｛ margin：20px //调整位置 ｝ .wx-swiper-dot｛｝//指示点未选中样式 .wx-swiper-dot-active｛｝//指示点选中样式 button去除边框： button::after { border: none; } checkbox.wx-checkbox-input｛｝//未选中的框 .wx-checkbox-input.wx-checkbox-input-checked｛｝//选中的框 .wx-checkbox-input.wx-checkbox-input-checked::before｛｝//选中的框里的小勾 radio.wx-radio-input｛｝// 未选中 .wx-radio-input.wx-radio-input-checked｛｝//选中 .wx-radio-input.wx-radio-input-checked::before｛｝//选中的小勾 progress.wx-progress-inner-bar｛｝//已选择的进度条 switch.wx-switch-input｛｝//