自定义导航栏的一些常见问题： 1、怎么适配手机状态栏高度，使导航栏与胶囊按钮对齐？ 2、写了导航栏组件但是用了fixed定位，脱离普通文档流，要麻烦的去每个页面加padding-top。 3、怎么让导航栏跟page融合到一起，跟随page滚动，这样就不用在这个页面单独适配状态栏了。 4、怎么自动识别非首页启动的小程序，在自定义导航栏加个返回首页的引导？ 使用案例可导入代码片段【现在导入】查看。 子页面 [图片][图片] [图片] 非首页启动的小程序 [图片] 跟随页面，不置顶。 [图片] 监测滚动切换导航栏的显示或隐藏。 [图片] -----------------------------------------------------------------------------------------------------------------------------------------

自定义导航栏在刚出的时候已经有很多实现方案了，但是还有大哥在问，那这里再贴下代码及原理： 首先在App.js的 onLaunch中获取当前手机机型头部状态栏的高度，单位为px，存在内存中，操作如下： [代码]onLaunch() { wx.getSystemInfo({ success: (res) => { this.globalData.statusBarHeight = res.statusBarHeight this.globalData.titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2) }, failure() { this.globalData.statusBarHeight = 0 this.globalData.titleBarHeight = 0 } }) } [代码] 然后需要在目录下新建个components文件夹，里面存放此次需要演示的文件 navigateTitle WXML 文件如下： [代码]<view class="navigate-container"> <view style="height:{{statusBarHeight}}px"></view> <view class="navigate-bar" style="height:{{titleBarHeight}}px"> <view class="navigate-icon"> <navigator class="navigator-back" open-type="navigateBack" wx:if="{{!isShowHome}}" /> <navigator class="navigator-home" open-type="switchTab" url="/pages/index/index" wx:else /> </view> <view class="navigate-title">{{title}}</view> <view class="navigate-icon"></view> </view> </view> <view class="navigate-line" style="height: {{statusBarHeight + titleBarHeight}}px; width: 100%;"></view> [代码] WXSS文件如下： [代码].navigate-container { position: fixed; top: 0; width: 100%; z-index: 9999; background: #FFF; } .navigate-bar { width: 100%; display: flex; justify-content: space-around; } .navigate-icon { width: 100rpx; height: 100rpx; display: flex; justify-content: space-around; } .navigate-title { width: 550rpx; text-align: center; line-height: 100rpx; font-size: 34rpx; color: #3c3c3c; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /*箭头部分*/ .navigator-back { width: 36rpx; height: 36rpx; align-self: center; } .navigator-back:after { content: ''; display: block; width: 22rpx; height: 22rpx; border-right: 4rpx solid #000; border-top: 4rpx solid #000; transform: rotate(225deg); } .navigator-home { width: 56rpx; height: 56rpx; background: url(https://qiniu-image.qtshe.com/20190301home.png) no-repeat center center; background-size: 100% 100%; align-self: center; } [代码] JS如下： [代码]var app = getApp() Component({ data: { statusBarHeight: '', titleBarHeight: '', isShowHome: false }, properties: { //属性值可以在组件使用时指定 title: { type: String, value: '青团公益' } }, pageLifetimes: { // 组件所在页面的生命周期函数 show() { let pageContext = getCurrentPages() if (pageContext.length > 1) { this.setData({ isShowHome: false }) } else { this.setData({ isShowHome: true }) } } }, attached() { this.setData({ statusBarHeight: app.globalData.statusBarHeight, titleBarHeight: app.globalData.titleBarHeight }) }, methods: {} }) [代码] JSON如下： [代码]{ "component": true } [代码] 如何引用？ 需要引用的页面JSON里配置： [代码]"navigationStyle": "custom", "usingComponents": { "navigate-title": "/pages/components/navigateTitle/index" } [代码] WXML [代码]<navigate-title title="青团社" /> [代码] 按上面步骤操作即可实现一个自定义的导航栏。 如何实现通栏的效果默认透明以及滚动更换title为白色背景，如下图所示: [图片] [图片] [图片] [图片] 最后代码片段如下： https://developers.weixin.qq.com/s/wi6Pglmv7s8P。 以下为收集到的社区老哥们的分享： @Yunior: 小程序顶部自定义导航组件实现原理及坑分享 @志军: 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能 @✨o0o有脾气的酸奶💤 [有点炫]自定义navigate+分包+自定义tabbar @安晓苏 分享一个自适应的自定义导航栏组件

1.引言 在小程序应用开发过程中，导航栏作为页面标题性的存在，不但起到了用户指引路由的作用，更是在应用功能较为完善和复杂的情况下，起到了进一步的功能性作用，小程序的原生导航栏如下： [图片] 显然，原生的导航栏除了能够提供标题，返回键等功能外，其他功能到目前为止并没有浮出水面。而为了定制符合我们自己开发要求的导航栏，此时，我们就需要对导航栏进行自定义的设计开发。自定义开发过导航栏效果如图： [图片] 2.原理及思路 （1）原理 首先我们要知道几个概念：状态栏，导航栏，导航栏胶囊，导航栏胶囊在导航栏中的上下边距 状态栏:是指通常手机顶部显示手机运营商，手机信号，手机电量等等信息的最顶层一栏。 导航栏：是指在小程序中显示胶囊按钮，返回键，标题的一栏。 导航栏胶囊：是指小程序中导航栏右部出现的胶囊状按钮，小程序中会一直置顶显示，在不同的机型中，胶囊的高度是固定的，目前均为32px。 导航栏胶囊在导航栏中的上下边距：胶囊按钮在导航中不是上下撑满的，是上下居中布局的，所以存在上下相等的边距。 效果说明图如下： [图片] 在小程序开发中，我们可以获取以下数据： 胶囊的布局位置及尺寸信息：（详情点击查看https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html） wx.getMenuButtonBoundingClientRect() （2）思路 原理我们都已经介绍过了，现在需要我们想一想设计的思路。 最常规的思路就是来个和导航栏一样宽度，一样高度的页面容器绝对定位覆盖在导航栏上面就可以了。然后在这个覆盖容器里面进行自定义发挥就可以了，保准自定义的内容和胶囊对齐的准准的，不会有任何问题。 那么，该怎么获取导航栏的高度和定位信息呢（宽度肯定是满宽，100vw）。 从上面的效果演示图我们可以知道，导航栏的高度是等于 胶囊高度+胶囊上边距 * 2 的，这个应该不难理解，胶囊高度上文已经提过，是固定的：32px,所以，我们只要再求出胶囊的上边距就可以了。上边距我们可以通过由 wx.getMenuButtonBoundingClientRect() 获取的胶囊距顶部的距离减去状态栏高度获取。从而计算出状态栏的高速。而后就可以实现我们一开始的思路，将一高度与导航栏相同，绝对定位在距屏幕顶部一个状态栏高度的距离便可以实现完全的导航栏精确覆盖。 3.代码实现 //胶囊上边框距顶部距离       const capsuleTop = wx.getMenuButtonBoundingClientRect().top;       //状态栏高度       const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;       //药囊上边距状态栏下边的距离，即药囊在导航内容栏中的上下边距       const capsuleGap = capsuleTop - statusBarHeight;       //导航内容栏的高度动态计算       const navContentHeight = capsuleGap * 2 + this.data.capsuleHeight; 4.注意事项。 （1）在定位好的自定义导航栏里编写内容时，不要与胶囊重合，否则会被胶囊覆盖，此时需要计算可使用区域的宽度，在计算宽度时，为了达到各机型效果的一致，需要根据当前模拟机型的宽度进行px对rpx的换算，才能使自定义组件中的内容的宽度在各个机型中效果一致。 （2）本文所述自定义导航栏的创建方法必须基于该自定义导航栏针对页面fixed绝对定位的基础上才可以。 5.结语 在编写自定义导航栏之前也查了很多材料，感觉都不太准，自己借鉴着摸索了一套自己的方法，请大家评判一番，我已将该自定义导航栏封装成了微信小程序自定义组件，插之即用，以供大家提高生产效率： NPM安装：https://www.npmjs.com/package/russell-weapp github:https://github.com/RussellCao824/russell-weapp

// 这段代码，我在Android手机真机调试可以下载并且打开文件，但是在pc（我的是windows系统）只能到文件下载成功那一步，微信开发者工具中如果 //没有云储存接口（wx.cloud.downloadFile）下载之后本地接口（wx.downloadFile）再下载一遍的话也只能到文件下载成功那一步。 //现在可以在微信开发者工具和Android下载并打开文件。如下我再逐步列一下我的主要问题： // 1.wx.getFileSystemManager().saveFile接口中filePath后不能直接添加上边定义的常量和变量，包括正则表达式。(主要问题1） // 2.将常变量放到data里后可以放在filePath中，但只有手机端和微信开发者工具可用，但大文件还是想在pc端下载整合。 // 3.如果不适用正则表达式或添加文件名，直接在wx.env.USER_DATA_PATH后加储存位置的字符串，三者都可用，但是文件打不开，后期操作难度大。 // 4.后期操作无后缀文件的话，手机端可以放在相册里添加后缀，PC端直接就无法下载，打开后也是一个pdf文件，无法下载也无法编辑。对用户的操作难度加大，很不方便。 // 5.总结问题4：PC端想尽一切办法都不能加后缀打开文件，为什么手机可以PC不可以呢？(主要问题2）  wx.cloud.downloadFile({   fileID: fileID, // 文件 ID   // 下载云存储里的文件   success(res){     console.log("文件下载成功",res)     // return     // 因为直接调用wx.getFileSystemManager().saveFile接口没反应，我只好又加了个下载本地缓存的文件     wx.downloadFile({       url: res.tempFilePath,       success(res){         console.log(res)         // return         let zhanwei_id = that.data.array[0].zhanwei_id // 因为直接添加几个变量运行函数没有反应，所以我把几个变量都整合到一起存到data中         that.setData({           filePath: '/' + bianliangming（这个是变量名） + "文件名"（这个是字符串） + /\.[^\.]+$/.exec(res.tempFilePath)[0]（这个是正则表达式）,         }) // 现在获取到的tempFilePath才可以用了，我就开始调用全局文件接口         wx.getFileSystemManager().saveFile({           tempFilePath: res.tempFilePath, // 一开始直接把变量写在wx.env.USER_DATA_PATH后，没反应，然后就把东西放在data里，这个时候手机端可以下载并打开了，但是windows还是没反应           filePath: wx.env.USER_DATA_PATH + that.data.filePath, // 下边这条语句是我一开始用的           // filePath: wx.env.USER_DATA_PATH + "/" + bianliangming（这个是变量名） + "文件名"（这个是字符串） + /\.[^\.]+$/.exec(res.tempFilePath)[0]（这个是正则表达式）           success(res) {             console.log('save ->', res) // 上传文件结果             wx.showToast({               title: '文件已保存至：' + res.savedFilePath,               icon: 'none',               duration: 1500             })             // 打开该文件             wx.openDocument({              filePath: res.savedFilePath,               success: function (res) {                 console.log('打开文档成功')               }             })           }         })      }     })                  },   fail(err){     console.log("文件下载失败",err)   } })

 wx.getFileSystemManager().rename({           oldPath:tempPath,           newPath:newPath         })         wx.openDocument({           filePath:newPath,           showMenu:true,           type:type,           success(){             wx.showToast({               title: '读取成功',             })           },           fail(res){             wx.showToast({               title: "打开失败",             })           }         }) 我先从云服务器下载了文件，如果直接用打开的api是没任何问题的。但是如果先进行了重命名，如上代码所示，则在模拟器端（PC端）一切运行正常，可以 打开下载的文档，会弹出“去读成功”的提示，但是安卓端进行打开的时候，则吐司了“打开失败”。请官方核实

前言 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的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。 由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！ 大家有什么疑问，欢迎评论区留言！

本文背景最近做了几个小程序，其中小程序内部都有一个共性的模块就是学习资料，我翻出之前体验过的一个小程序，分享给大家，这个小程序就是微附件 实用场景该小程序的使用场景就是在公众号内分享文件，方便大家下载，截图如下所示 [图片] [图片] 本文内容微附件是一个文件图床，用来给公众号添加附件，不得不说这个主意非常棒，在一些教育类公众号经常会分享一些资料，但是公众号本身并不提供这种服务， 我把小程序截图下 截图一 [图片] 截图二 [图片] 截图三 [图片] 截图四 本文总结一啰嗦写了这么多，我其实一方面想做个记录，方便以后查找，另一方面，我想把这个功能，集成到目前的答题小程序产品中，在答题小程序中，运营者经常会通过小程序分享一些资料

好几次想动笔写一下这个小程序，回头就忘记了，今天在学校公众号又看到这个小程序的使用场景，趁机写一下 [图片] 由于目前公众号还不能上传附件，但是这个场景是刚需，真实存在的 微附件这个小程序主要提供公众号上传附件使用，通过这种形式可以让用户直接看到附件 内容， 截图 1 [图片] 1 [图片] 1 [图片] 公众号点击附件 [图片] [图片] 1 [图片] 1 [图片] 1 [图片] 1 [图片] [图片] 1 参考文章 1）实用小程序推荐-微附件? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000604467540088effea9d68253413 2）微附件小程序帮助文档—手机端&电脑端微信保存功能 https://mp.weixin.qq.com/s/oWir0Uf4Zt9Eg9iGNdGLOg 3）微附件小程序使用教程—安利一款好用的工具 https://mp.weixin.qq.com/s/CXI-3N4e1kV5yi9ehaEsQw

源码 点此领取 技术栈 云开发 CloudBase：云端一体化的 Serverless 后端服务解决方案。Taro：一套遵循 React 语法规范的 多端开发 解决方案开发工具 建议提前安装好 微信开发者工具Node LTS 版本VS Code 编辑器CloudBase VS Code 插件需求分析 只考虑基本的功能： 商品列表与下单：展示商品信息，创建订单订单列表：展示订单列表 资源准备 1. 在微信开发者工具中开通云开发，请选择按量付费 如果你的环境是预付费，请到设置中，将支付方式转换为按量付费 [图片] 2. 安装 CMS 系统 （1）更新到最新的 Nightly 版本工具，在工具顶部 Tab 栏中，点击「更多」-「内容管理」。 [图片] （2）点击开通，勾选同意协议后，点击确定。 [图片] （3）开通内容管理需要填写管理员账号，填写账号后，点击「确定」完成。 [图片] （4）开通拓展需要一定时间，请耐心等待。 （5）完成后，点击「更多」-「内容管理」，即可看到内容管理的入口和相关信息。点击访问地址，即可在弹出的窗口中进行内容管理的相关配置。 [图片] 3. 登录 CMS 系统，创建资源 CloudBase CMS 已经部署在当前环境下的静态网站托管中，访问地址的格式如下：云开发静态托管默认域名/部署路径，例如 https://envid.ap-shanghai.app.tcloudbase.com/tcb-cms/（结尾有 / 符号）。默认域名可以访问控制台查看。 打开 CloudBase CMS 后，你需要先登录，账号密码为安装时设置的管理员账号和密码。 在开始管理内容数据前，我们需要先创建一个项目。CloudBase CMS 使用项目划分不同类的内容，便于区分内容数据用途，进行权限管理。 首先，我们需要点击新建项目下方的创建新项目按钮，创建一个名为小商店，Id 为 shop 的项目。 [图片] 创建完项目后，点击项目卡片，进入项目的管理页面，我们会看到项目的欢迎页面。 [图片] 创建商品类型，管理商品信息 创建一个名称为商品的内容模型，数据库名为 goods，即将商品数据存储到 goods 数据集合中。如果新建内容的时候指定的集合不存在，CloudBase CMS 会自动新建集合。 [图片] 在创建完内容模型后，我们会得到一个空的内容模型。接下来，我们需要为商品添加商品名称，商品图片，价格，库存数量等字段。 为商品添加商品名称属性，因为商品名称通常是比较短的文字，所以我们可以选择单行字符串字段，点击右侧的单行字符串卡片，填写商品名称的字段信息。除了基本的名称，数据库字段名之外，我们还可以为此字段添加其他的限制，如最大长度，限制填写商品名称时的最大长度，创建商品时，是否必需填写商品等。 [图片] 类似的，我们可以创建数字类型的价格字段以及库存数量，图片类型的商品图片字段。在创建图片字段时，考虑到商品的图片可能有多张，我们可以打开允许多个内容按钮，表明可以上传多张图片。 [图片] 创建的 goods 数据库集合的结构如下： [图片] 同上，类似的创建一个名称为订单列表，数据库集合名为 order 的内容模型，来管理订单信息。创建的 order 数据库集合的结构如下： [图片] 添加一个商品 [图片] 创建项目 1、拉取模板 # 安装 taro cli 工具 npm install -g @tarojs/cli@2.2.7 # 拉取模板 git clone https://github.com/TencentCloudBase/cloudbase-minishop.git 使用微信开发者工具导入项目，进入 client 目录，安装依赖： npm i 项目目录 cloud/functions 包含写好的微信支付的两个云函数， pay 和接收支付消息推送的 pay-callback 云函数。使用时需使用微信开发者工具上传这两个云函数。 2、项目目录 . ├── client // 小程序源码 │ ├── config │ └── src │ ├── assets │ ├── components │ └── pages │ ├── index │ └── order-list └── cloud // 云开发相关源码 │ └── functions │ ├── pay │ └── pay-callback ├── cloudbaserc.json // 云开发配置 ├── project.config.json // 小程序配置  微信支付下单流程 1、小程序调用云函数，在云函数中调用统一下单接口，参数中带上接收异步支付结果的云函数名和其所在云环境 Id。 const cloud = require("wx-server-sdk"); const res = await cloud.cloudPay.unifiedOrder({ envId: '', subMchId: '', body: "商品名", totalFee: 100, outTradeNo: '订单号', spbillCreateIp: "127.0.0.1", functionName: "pay-callback" }); // 返回 res.payment 支付结果回调的云函数必须返回如下一个对象，否则会视为回调不成功，云函数会收到重复的支付回调。 { errcode: '', errmsg: '', } 2、统一下单接口返回的成功结果对象中有 payment 字段，该字段即是小程序端发起支付的接口（wx.requestPayment）所需的所有信息。 3、小程序端拿到云函数结果，调用 wx.requestPayemnt 发起支付 wx.requestPayment({ ...payment, success (res) { }, fail (res) { }tt })https://docs.cloudbase.net/ 4、支付完成后，在统一下单接口中配置的云函数将收到支付结果通知。 多端支持 - 跨平台 小程序Web 相关文献 云开发文档 云开发微信支付 支付接口