加入了激励视频后，进入页面可以看到明显的卡顿，为了增加体验，我们需要做些优化。 首先，广告模板代码会让你在onLoad()函数中初始化广告代码。这里，我们需要将其封装在一个独立函数中。 [图片] 然后，我们定义一个全局变量hasLoadAd，默认为false，当调用播放按钮时，先判断该变量是否为真，当不是真时，我们调用上面封装的loadAd()函数加载广告。 经实践，发现第一次调用vAd.show()时，通常会失败，此时，可参考模板中的示例代码，进行第二次加载。代码如下： [图片] 这样有个弊端，就是第一次会初始化加载两次，并且时间有点长，为了用户体验，我们在调用前，就调用wx.showLoading()。 最后，在onUnload()函数中，将vAd =null ；这样可以避免退出再进入时卡顿。 你有好的想法和建议，欢迎留言。

微信小程序默认提供了一个标准的导航栏，但是有些时候我们需要自定义导航栏来满足我们的业务需求。本文将介绍如何自定义微信小程序导航栏，并且讲解自定义导航栏的优缺点。 自定义导航栏与微信自带导航栏的区别 微信小程序自带导航栏具有固定的样式和布局，开发者无法更改其外观和功能。而自定义导航栏可以根据业务需求自由定义样式和功能，例如可以在导航栏中添加搜索框、返回按钮等功能。 自定义导航栏的优缺点 自定义导航栏可以帮助开发者更好地控制小程序的样式和功能，提高小程序的用户体验。自定义导航栏可以将品牌特色和设计元素融入到导航栏中，从而提高品牌曝光度和用户满意度。但是自定义导航栏也存在一些缺点，例如在处理页面返回时需要自己处理逻辑，并且需要适配不同设备的宽度和高度。 如何配置自定义导航栏 要自定义微信小程序导航栏，需要在app.json文件中设置导航栏的样式和功能。例如，以下代码将创建一个自定义导航栏，其中包含一个返回按钮和一个标题： [代码]{ "navigationBarTitleText": "自定义导航栏", "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "usingComponents": { "custom-nav": "/components/custom-nav/custom-nav" } } [代码] 在自定义导航栏的组件中，可以使用wx.getSystemInfoSync()获取当前设备的信息，以适配不同设备的宽度和高度。例如，以下代码将创建一个适配所有设备的自定义导航栏组件： [代码]<view class="custom-nav" style="height: {{statusBarHeight + 44}}px; width: {{screenWidth}}px;"> <view class="custom-nav__back" wx:if="{{showBack}}" bindtap="goBack"> <image src="/images/back.png" mode="aspectFit"></image> </view> <view class="custom-nav__title">{{title}}</view> <view class="custom-nav__right"></view> </view> [代码] 在自定义导航栏组件的js文件中，可以使用wx.getSystemInfoSync()获取设备信息，例如获取状态栏高度： [代码]const systemInfo = wx.getSystemInfoSync(); const statusBarHeight = systemInfo.statusBarHeight; [代码] 这样就完成了适配各种机型的导航栏

前言 navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。 思路 隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。 [代码]"window": { "navigationStyle": "custom" } [代码] 让我们看看隐藏后的效果： [图片] 可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。 二、准备工作 1.获取胶囊按钮的布局位置信息 我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点： [代码]const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); [代码] width height top right bottom left 宽度 高度 上边界坐标 右边界坐标 下边界坐标 左边界坐标 下面是官方给的示意图，方便大家理解几个坐标。 [图片] 2.获取系统信息 用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 [代码]const systemInfo = wx.getSystemInfoSync(); [代码] 三、计算公式 我们先要知道导航栏高度是怎么组成的， 计算公式：导航栏高度 = 状态栏高度 + 44。 实例 【源码下载】 自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子： app.js [代码]App({ onLaunch: function(options) { const that = this; // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏高度 + 44 that.globalData.navBarHeight = systemInfo.statusBarHeight + 44; that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; that.globalData.menuHeight = menuButtonInfo.height; }, // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器 globalData: { navBarHeight: 0, // 导航栏高度 menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致） } }) [代码] app.json [代码]{ "pages": [ "pages/index/index" ], "window": { "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" } [代码] 下面为组件代码： /components/navigation-bar/navigation-bar.wxml [代码]<!-- 自定义顶部栏 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <!-- 内容区域： 自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距 --> <view class="content" style="margin-top:{{navBarHeight}}px;"></view> [代码] /components/navigation-bar/navigation-bar.json [代码]{ "component": true } [代码] /components/navigation-bar/navigation-bar.js [代码]const app = getApp() Component({ properties: { // defaultData（父页面传递的数据-就是引用组件的页面） defaultData: { type: Object, value: { title: "我是默认标题" }, observer: function(newVal, oldVal) {} } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight, }, attached: function() {}, methods: {} }) [代码] /components/navigation-bar/navigation-bar.wxss [代码].nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;} [代码] 以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml [代码]<navigation-bar default-data="{{defaultData}}"></navigation-bar> [代码] /pages/index/index.json [代码]{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } } [代码] /pages/index/index.js [代码]const app = getApp(); Page({ data: { // 组件参数设置，传递到组件 defaultData: { title: "我的主页", // 导航栏标题 } }, onLoad() { console.log(this.data.height) } }) [代码] 效果图： [图片] 好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！ 下面附几张其它小程序的效果图，大家也可以尝试照着做： [图片][图片] 总结 本文写了自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。 由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！ 大家有什么疑问，欢迎评论区留言！

目前小程序激励视频广告组件为单例模式（小程序是单页面单例，小游戏是全局单例），也就是说，尽管使用多个广告位id创建多个激励视频广告，返回的仍然是第一个创建的广告实例，所以广告数据只会统计到第一个创建的广告位里面。官方正在计划把激励视频广告改成多例模式，后续请关注开发者文档的更新。更多内容请参考文档：https://ad.weixin.qq.com/guide/1209 [图片]

[图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片]

这样子点击就能将文件分享出去 [图片] 可以加上请求就不行了。。，在线请问应该怎么才能成功，谢谢各位大佬 [图片]

前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递，下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。 案例：A页面带参数跳转到B页面 A页面跳转代码 [代码]goB(){ wx.navigateTo({ url: '/pages/B/index?id=value', }) }, [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', options.id) } [代码] 上面的案例是字符串参数，但是很多情况下需要传递对象，如下方代码。 [代码]Page({ data: { userInfo:{ name:'cym', age:16 } }, goB(){ wx.navigateTo({ url: '/pages/B/index?id='+this.data.userInfo, }) }, }) [代码] 如果使用上面同样的方式结构，输出的结果是：[object Object] 这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。 A页面跳转代码 [代码] goB(){ let userStr = JSON.stringify(this.data.userInfo) wx.navigateTo({ url: '/pages/B/index?id='+userStr, }) } [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', JSON.parse(options.id)) } [代码] 全局变量 通过App全局对象存放全局变量。 app.js代码 [代码]App({ // 存放对象的全局变量 globalData:{}, }) [代码] A页面跳转代码 [代码]// 获取App对象 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo: { name: 'cym', age: 16 } }, goB() { app.globalData.userInfo = this.data.userInfo wx.navigateTo({ url: '/pages/B/index', }) }, }) [代码] B页面接收代码 [代码]// 获取全局对象 const app = getApp() Page({ onLoad: function (options) { console.log(app.globalData.userInfo) } }) [代码] 存放在 App 全局变量里面，可以被多个页面使用，直接从 App 对象获取即可。这个数据是保持在内测中，每次小程序销毁就没有了。 数据缓存 通过存储到数据缓存中。 A页面跳转代码 [代码] goB() { wx.setStorageSync('userInfo', this.data.userInfo) wx.navigateTo({ url: '/pages/B/index', }) } [代码] B页面接收代码 [代码] onLoad: function (options) { let userInfo = wx.getStorageSync('userInfo', this.data.userInfo) console.log(userInfo) } [代码] 存放在数据缓存里面，可以被多个页面使用，直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中，除非清楚数据缓存或者删除小程序否则一直存在。 事件通信 通过事件通信通道。 A页面跳转代码 [代码]goB() { wx.navigateTo({ url: '/pages/B/index', success:(res)=>{ // 发送一个事件 res.eventChannel.emit('toB',{ userInfo: this.data.userInfo }) } }) } [代码] B页面接收代码 [代码]onLoad: function (options) { // 获取所有打开的EventChannel事件 const eventChannel = this.getOpenerEventChannel(); // 监听 index页面定义的 toB 事件 eventChannel.on('toB', (res) => { console.log(res.userInfo) }) } [代码] 总结 大家可以针对具体业务场景来进行选择合适自己的传参方式。

[图片][图片]这种视频号广告无论看没看完点击左上角的叉关闭后都不会调用onClose,导致用户看了广告后没得到奖励也没任何提示，该如何解决？

适用范围该文档适用于友盟+微信小程序统计SDK 2.3.2 及以上版本。 微信小程序统计SDK快速集成[图片] 1. 注册友盟+账号登录友盟+官网，按照引导注册友盟+账号 [图片] 特别提醒：我们建议开发者在注册账号时使用企业邮箱，避免使用个人邮箱注册，防止由于个人离职带来的问题，建议使用的账号形式 ：umeng@企业域名、apps@企业域名、dev@企业域名 2. Appkey申请进入小程序统计后台创建Appkey，按要求填写小程序名称及类型：[图片] 您也可通过OpenAPI批量申请Appkey，具体文档参考：https://developer.umeng.com/open-api/docs/com.umeng.umini/umeng.umini.createMiniApp/1 行业分类请参考：https://developer.umeng.com/docs/147615/detail/169442若创建应用数超过300，请联系在线客服 3. 创建微信小程序并接入SDK3.1 安装SDK代码: 复制代码到剪切板 npm install umtrack-wx --save 注：在微信小程序内使用npm请参考https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html3.2 集成在app.js文件内，添加如下代码，即可进行基础指标的统计： 代码: 复制代码到剪切板 import 'umtrack-wx'; App({ umengConfig: { appKey: 'YOUR_UMENG_APPKEY', //由友盟分配的APP_KEY useOpenid: false, // 是否使用openid进行统计，此项为false时将使用友盟+随机ID进行用户统计。使用openid来统计微信小程序的用户，会使统计的指标更为准确，对系统准确性要求高的应用推荐使用OpenID。 autoGetOpenid: false, // 是否需要通过友盟后台获取openid，如若需要，请到友盟后台设置appId及secret debug: true, //是否打开调试模式 uploadUserInfo: true // 自动上传用户信息，设为false取消上传，默认为false } }); 注意：切记一定要正确设置umengConfig，不要拼写错误3.3 使用 OpenID（可选）当[代码]useOpenid: true[代码]时 方法一：开发者需要额外添加代码上传openid，否则数据不会上报 代码: 复制代码到剪切板 // 开启后必须额外添加代码上传OpenID，否则数据不会上报 wx.uma.setOpenid(openid) 参数： id(string): 开发者获取到的用户openid返回值： 无方法二：开启[代码]autoGetOpenid: true[代码]并在友盟后台设置有效appId及secret信息。友盟后台配置地址：https://mp.umeng.com/setting/appset 代码: 复制代码到剪切板 App({ umengConfig: { appKey: 'YOUR_UMENG_APPKEY', //由友盟分配的APP_KEY useOpenid: true, // 授权友盟+通过后台自动获取openid，可防止数据统计过程中因未采集到OpenID而造成 // 数据丢失的情况。开启后请到友盟+小程序应用设置中添加appId及secret信息 autoGetOpenid: true } }) 3.4 增加友盟+数据服务域名在微信开发者后台添加request合法域名：umini.shujupie.com 操作步骤：登录微信公众平台，进入小程序的 设置->开发->开发设置->服务器域名，把 umini.shujupie.com 加入 request合法域名，如图： [图片] 3.5 demo具体集成方式可参考demo：https://github.com/umeng/mp-demos 高级功能如需使用其他API，需要添加如下代码： 代码: 复制代码到剪切板 import uma from 'umtrack-wx'; App({ umengConfig: { appKey: 'test5d886faf4ca357bfc900', useOpenid: true, autoGetOpenid: false, debug: true }, globalData: { uma // 请将uma模块绑定在gloabalData下，以便后续使用 } }); 1. setUnionid开发者自行设置用户的unionid 代码: 复制代码到剪切板 setUnionid(id) 参数： id(string): 开发者获取到的用户unionid返回值： 无2. 自定义事件代码: 复制代码到剪切板 trackEvent(eventId, params) 参数： id(string): 事件ID需在官网申请，长度在128个字符内params(object|string):object不能为数组当params为object类型时，每个key长度不能超过256个字符当params为object类型时，其携带key的个数不能超过100个存在规则不合法情况时，丢弃整条事件返回值： * 无 2.1 仅统计事件，无属性时，使用如下方法：代码: 复制代码到剪切板 wx.uma.trackEvent('事件ID'); 2.2 统计带属性的事件时，使用如下方法：代码: 复制代码到剪切板 wx.uma.trackEvent('事件ID', { '属性1':'属性值1','属性2':'属性值2' }); // 字符型属性值 wx.uma.trackEvent('ViewProductDetails', { 'Category':'家电','ItemName':'西门子冰箱' }); // 数值型属性值 wx.uma.trackEvent('Pay', { 'PayAmount':6999 }); 注意：params为object类型时，属性值仅支持字符串和数值两种类型;请在App.onLaunch之后调用事件。2.3 自定义事件添加流程进入U-MiniProgram后台“自定义事件”页面，点击“事件管理”；点击“添加事件”，输入小程序埋点的事件ID和名称；返回小程序自定义事件页面查看该事件数据。3. 设置应用用户ID当用户在您的小程序上注册以后，您的应用服务端会在用户数据库里添加一条记录并且分配一个用户ID，可以通过 [代码]setUserid[代码] 接口设置该用户ID，以便后续做数据打通或基于应用用户ID做计算时使用。 代码: 复制代码到剪切板 setUserid(userId, provider) 参数： userId(string): 您的应用为用户生成的唯一IDprovider(string): ID提供方，兼容老接口使用，无特殊需要应忽略该参数返回值：无示例：代码: 复制代码到剪切板 wx.uma.setUserid('custom_userid'); 4. 上传用户信息开发者可通过在配置中添加 [代码]uploadUserInfo: true[代码] 选项来使友盟自动上报用户信息。将 [代码]uploadUserInfo[代码] 设置为 [代码]false[代码] 则取消上报用户信息。上传的用户信息为小程序平台公开可获取的用户基础信息，例如昵称、头像、性别、地区、语言等，这些信息将用于U-MiniProgram产品中与用户相关的功能统计中。示例： 代码: 复制代码到剪切板 import 'umtrack-wx'; App({ umengConfig: { appKey: 'YOUR_UMENG_APPKEY', //由友盟分配的APP_KEY useOpenid: false, // 是否使用openid进行统计，此项为false时将使用友盟+随机ID进行用户统计。使用openid来统计微信小程序的用户，会使统计的指标更为准确，对系统准确性要求高的应用推荐使用OpenID。 autoGetOpenid: false, // 是否需要通过友盟后台获取openid，如若需要，请到友盟后台设置appId及secret debug: true, //是否打开调试模式 uploadUserInfo: true // 自动上传用户信息，设为false取消上传，默认为false } }); SDK成功接入验证方法该方案仅提供验证是否集成成功的方法，由于在开发环境下可能会存在数据不完整的情况，请您正式发布小程序后在验证数据正确性。 按照上述描述方法引入SDK；进入IDE打开调试工具中的[代码]console[代码]选项，若看到有 [代码][umeng] -- 集成SDK成功[代码]提示 即表示SDK集成成功。说明事项慎重调用[代码]wx.clearStorage()[代码]以及[代码]wx.clearStorageSync()[代码]接口！SDK会将用户相关操作数据缓存在客户端数据存储模块，在特定时间启动发送策略。若调用该接口可导致数据统计不准确的问题；若用户在使用小程序过程强制关闭微信有可能会造成统计数据丢失的情况。第三方框架支持目前小程序SDK支持以下第三方框架，具体使用方法请参考demo：https://github.com/umeng/mp-demos uniapptarochameleonmpvuewepy2微信小游戏目前只有2.2.0及以上版本的SDK才支持以上第三方框架视频引导视频引导教程 FAQ:Q: 注册应用时，提示应用名称已存在A：【友盟+】后台的应用名与实际应用名和包名无关，建议命名为应用名+平台，例如：友盟+小程序（微信）、友盟+小程序（支付宝）Q: 我忘记我的Appkey了，在哪里能查到A：进入小程序统计-应用设置页面，可看到当前小程序的Appkeyhttps://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

请开发者先自查出现404异常的资源响应头部，检查content-length是否小于2048， 如果小于2048，建议在出现404异常的html 末尾增加一个隐藏的 div标签，display设置为none： <div> this is padding data: xxxx 填充整个页面content-length到2048字节以上即可 </div> 以上是暂时的解决策略，我们会在后续的版本解决。