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

如题 可复现

[代码]/**[代码][代码] [代码][代码]* 设置[代码][代码] [代码][代码]* k 键key[代码][代码] [代码][代码]* v 值value[代码][代码] [代码][代码]* t 秒[代码][代码] [代码][代码]*/[代码][代码]function[代码] [代码]putLS(k, v, t) {[代码][代码]  [代码][代码]try[代码] [代码]{[代码][代码]    [代码][代码]wx.setStorageSync(k, v)[代码][代码]    [代码][代码]var[代码] [代码]seconds = parseInt(t)[代码][代码]    [代码][代码]if[代码] [代码](seconds > 0) {[代码][代码]      [代码][代码]var[代码] [代码]newtime = Date.parse([代码][代码]new[代码] [代码]Date())[代码][代码]      [代码][代码]newtime = newtime / 1000 + seconds;[代码][代码]      [代码][代码]wx.setStorageSync(k + [代码][代码]'xz'[代码][代码], newtime + [代码][代码]""[代码][代码])[代码][代码]    [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]      [代码][代码]wx.removeStorageSync(k + [代码][代码]'xz'[代码][代码])[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]} [代码][代码]catch[代码] [代码](e) {[代码][代码]    [代码][代码]// console.log(e);[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码]/**[代码][代码] [代码][代码]* 获取[代码][代码] [代码][代码]* k 键key[代码][代码] [代码][代码]*/[代码][代码]function[代码] [代码]getLS(k) {[代码][代码]  [代码][代码]try[代码] [代码]{[代码][代码]    [代码][代码]var[代码] [代码]deadtime = parseInt(wx.getStorageSync(k + [代码][代码]'xz'[代码][代码]))[代码][代码]    [代码][代码]if[代码] [代码](deadtime) {[代码][代码]      [代码][代码]if[代码] [代码](parseInt(deadtime) < Date.parse([代码][代码]new[代码] [代码]Date()) / 1000) {[代码][代码]        [代码][代码]//wx.removeStorageSync(k);[代码][代码]        [代码][代码]remLS(k)[代码][代码]        [代码][代码]console.log([代码][代码]"过期了"[代码][代码])[代码][代码]        [代码][代码]return[代码] [代码]false[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]var[代码] [代码]res = wx.getStorageSync(k)[代码][代码]    [代码][代码]if[代码][代码](res){[代码][代码]      [代码][代码]return[代码] [代码]res[代码][代码]    [代码][代码]}[代码][代码]else[代码][代码]{[代码][代码]      [代码][代码]return[代码] [代码]false[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]} [代码][代码]catch[代码] [代码](e) {[代码][代码]    [代码][代码]// console.log(e);[代码][代码]  [代码][代码]}[代码][代码]}[代码][代码] [代码] [代码]/**[代码][代码] [代码][代码]* 删除[代码][代码] [代码][代码]*/[代码][代码]function[代码] [代码]remLS(k) {[代码][代码]  [代码][代码]try[代码] [代码]{[代码][代码]    [代码][代码]wx.removeStorageSync(k);[代码][代码]    [代码][代码]wx.removeStorageSync(k + [代码][代码]'xz'[代码][代码]);[代码][代码]  [代码][代码]} [代码][代码]catch[代码] [代码](e) {[代码][代码]    [代码][代码]// console.log(e);[代码][代码]  [代码][代码]}[代码][代码]}[代码] [代码]/**[代码][代码] [代码][代码]* 清除所有key[代码][代码] [代码][代码]*/[代码][代码]function[代码] [代码]remAllLS() {[代码][代码]  [代码][代码]try[代码] [代码]{[代码][代码]    [代码][代码]wx.clearStorageSync();[代码][代码]  [代码][代码]} [代码][代码]catch[代码] [代码](e) {[代码][代码]    [代码][代码]// console.log(e);[代码][代码]  [代码][代码]}[代码][代码]}[代码]module.exports = {   putLS,   getLS,   remLS,   remAllLS } [代码][代码]

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。