[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

从接触小程序到现在，已经一年了。小程序从原来只有微信一家，到现在各种平台都推出了小程序，这种百家争鸣的繁荣景象，很好的反应出小程序在这几年的发展速度之快。为什么小程序能够发展的如此迅速，让各大厂商都争相进军小程序呢？ 以下是我的个人见解，欢迎大家讨论交流。 一、微信小程序与传统 App 的对比 优点： 1. 开发成本 成本与收益永远是商家最关注的两个核心问题。一般传统 APP 的开发费用普遍都是 5 万以上左右，对于部分大型企业客户的收费基本是在 10 万以上。目前，微信端小程序收费不高，基本可在万元内。事实上，两者后台调用的数据库并无区别，只是传统 APP 的前端更花一些功夫罢了。传统 App 分有 Android 和 IOS 开发，而小程序开发更加接近于 Web 开发。总体而言，传统 APP 的开发成本要高出微信小程序很多。 2. 推广成本 相信大家也见过，有一类的兼职就是 App 推广，推荐一个人下载安装 App 就能得到 6-10 元的回报。而小程序并不需要这样，即点即用。主要的推广模式是靠分享推广，所以你肯定见过这样的套路：在玩某些小程序游戏的时候，如果你死了，小程序会提示你分享到一个群里就可以复活，这样由用户自发的推广，可以说是 0 成本，但是又是高收益的。 3. 安装方式 传统 APP 应用需要用户自行下载安装，微信小程序则只需要用户简单扫描一下微信二维码或自生（开发出来的）即可轻松实用，对于大量具有线下经营实体的商家而言，无疑更为合适，对于用户来说，也更简单方便。 4. 空间占用 传统 APP 安装到手机之后，或多或少会占用一定的手机空间。同时，商家为了强化自身的 APP 应用价值，开始罔顾用户需求，不断给 APP 增添各种附加功能，从而导致 APP 的体积和占用空间不断增大。诸君可曾见，哪个 APP 是越升级，体积越小？占用空间越小的？ 那小程序是否会占用手机空间呢？答案是肯定的。 小程序所占用的手机存储空间，主要有以下两个部分： 首次加载小程序时，微信从服务器上下载的小程序本体。 小程序在运行过程中，存放至本地的数据。 首先是小程序本地的大小，做过小程序开发的应该都知道，微信对小程序的体积做了限制，只有 2 MB 以内的小程序，才能提交到微信审核。也就是说，如果你无法提交代码大小超过 2MB 的小程序。 其次是小程序存放在本地的数据，这个微信限制在 10MB 以内。 一个小程序可占用存储空间的上限，大约是 12 MB。 5. 卸载残留 由于传统 APP 都需要用户下载安装，基于利益角度考量，用户在卸载的时候，传统 APP 依然或多或少地有部分内容残留在用户手机里面。 小程序删除时，微信会帮你把本地的小程序本体和本地数据删除 6. 升级维护 传统 App 升级需要用户自行下载，安装进行升级。而小程序升级省去了用户操作，开发者把要升级的版本上传到微信后台，微信后台会帮你完成所有的升级工作。 目前市场上主流的移动端系统为 Android、Ios，这意味着，App 开发商不得不考虑跨平台性，必须得开发两端的 APP。而小程序是运行在微信之上，微信本身已经处理好的跨平台性让开发者不需要考虑跨平台的问题。 缺点： 1. 不适用于复杂应用 2MB 的大小限制注定了小程序开发太复杂的应用，你不可能在小程序上面开发一款即时通讯应用。当然你开发是可以开发，只是过不了微信的审核罢了。 那有什么应用是适合用小程序开发的呢？ 查询工具这类交互性要求不强的应用是最适合用小程序开发的。 这类应用本身只提供一个核心的功能，如果用传统 APP 开发，那就显地有点杀鸡用牛刀了。微信小程序就很适合这类应用。举个很形象了例子吧！超级课程表这 APP 大家都用过吧，它最核心的功能就是提供全国大学的课程表查询。它还开发了很多其他我没用过的功能。绝大部分的大学生，都是只需要他这个查询课程表的功能，所以如果用小程序开发这个应用，首先解决的跨平台的问题、其次还解决了空间占用的问题（超级课程表在我手机中占用的空间为 136MB）、还有就是用户即点即用，不需要下载安装。 2. 入口少 目前小程序的入口主要有两种，一是分享推广、二是用户搜索。这里要说的入口少指的是第二点，用户搜索的入口。 什么意思呢？大家如果想要安装一款 APP 首先要去哪里？应用商店。那小程序呢？你得打开微信，搜索你想要的相关关键字。这样的缺点是，用户比较难找到一款优质的小程序，因为并没有一个好小程序应用商店对小程序进行分类排名和评分来保障应用的质量。一个好的应用商店对应用的质量提升是很有保障的，爱奇艺很多人都用过吧，是否很烦它那烦人的广告呢？其实如果你从谷歌应用商店下载的爱奇艺，是没有广告的，因为有广告的 APP 根本过不了谷歌应用商店的审核。 总的来说，小程序优点在于更低的成本，而缺点就是只适用于“小”场景，对于大型的应用就不合适了。 二、微信小程序的开发方式 前端 原生小程序开发 微信为小程序开发自创了一套标签语言，如果有做过小程序开发和熟悉 Vue 开发的应该知道，原生小程序的开发与 Vue 的开发有很多相似的地方。 腾讯官方开发框架 微信官方自己推出了一套小程序开发框架[代码]Wepy[代码]（名字听起来怪怪的），这个框架就让小程序开发更接近于 Vue，官方介绍说是类 Vue 开发风格。 由于本人没有[代码]Wepy[代码]的开发经验，这里也不过多阐述其优劣。 第三方开发框架 目前主流的第三方小程序开发框架主要有[代码]Taro[代码](京东)和[代码]Mpvue[代码](美团)，这里不对比他们的优劣，这就和对比[代码]React[代码]和[代码]Vue[代码]的优劣一样，是没意义的。两者都是很优秀的开发框架，选择哪一个主要看你对于React和Vue的选择。 后端 常规后端开发 你可以用Java/C++/Go任何语言进行后端开发，这和Web的后端开发无异，同样是通过http/websocket进行前后端交互。 小程序云开发 这里重点讲讲小程序云开发，这是小程序去年年底推出的功能，目的是弱化后端概念。开发者无需搭建服务器、使用微信小程序平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。 最近云开发已经开放了在其他端调用的能力，这意味着云开发不再是只能在小程序中调用。也就是说你可以同时使用常规后端开发和云开发作为你们产品的后端服务。这意味着小程序和Web之间彻底的打通，你可以直接在Web页面中访问到小程序云开发中的数据。例如自己做一个小程序的统计分析的可视化页面、实现Web客服等。 三、技术并非决定项目成败的关键 以前我认为一个产品的成败很大程度上是取决于技术，技术才是产品的核心竞争力。但是后来我发现，并不是这样的。 虽然说技术方面是一个项目中非常重要的一环，但是并不是意味着技术实现了，项目就能成功。技术是可控的，然而还有很多不可控的因素，一个项目的成与败也往往取决于这些因素。 例如团队的管理、项目的运营、市场的需求、盈利的模式等等。一个项目如果没有得到没有好的管理，那么这个产品做不出来。一个产品投产后如果没有运营，那么没有人知道这个产品的存在，没有曝光量。一个产品如果没有市场需求，那么就没有人用这个产品。一个产品如果没有良好的盈利模式，那么这个产品坚持不了多久就会走向衰亡。 当一个产品一个团队解决了核心的技术难题，并且有着合理的团队管理、运营、满足市场寻求、健康的盈利模式之后，基本上可以定义为成功了。缺少其中任何一环，都是很难走向成功。

摘要： 小程序开发技巧。 作者：小白 原文：小程序自定义单页面、全局导航栏 Fundebug经授权转载，版权归原作者所有。 需求 产品说小程序返回到首页不太方便，想添加返回首页按钮，UI说导航栏能不能设置背景图片，因为那样设计挺好看的。 [图片] 需求分析并制定方案 这产品和UI都提需求了，咱也不能反驳哈，所以开始调研，分析可行性方案；1、可以添加悬浮按钮。2、自定义导航栏。 添加悬浮按钮，是看起来是比较简单哈，但是感觉不太优雅，会占据页面的空间，体验也不太好。所以想了下第二种方案，自定义导航栏既可以实现产品的需求还可以满足UI的设计美感，在顶部空白处加上返回首页的按钮，这样和返回按钮还对称（最终如图所示，顶部导航栏是个背景图片，分两块组合起来）。 实现方案 一、实现的前提 1、首先查看文档，看文档里关于自定义导航栏是怎么规定的，有哪些限制；还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。 2、在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，只保留右上角胶囊状的按钮，如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 “navigationBarTextStyle”:“white/black” 3、还要考虑加返回按钮和返回首页的按钮，适配不同的机型 先说下两种配置方法： ①全局配置navigationStyle： 调试基础库>=1.9.0 微信客户端>=6.6.0 app.json [代码]{ "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" }, "window": { "navigationStyle": "custom" } } [代码] ②单页面配置navigationStyle 调试基础库>=2.4.3 微信客户端版本>=7.0.0 自定义的页面.json [代码]{ "window": { "navigationStyle": "default" } } { "navigationStyle": "custom", "usingComponents": { "navigationBar": "/components/navigationBar/navigationBar" } } [代码] 两者的区别就是，全局配置放在app.json文件里，单页面配置放在自定义页面配置文件里。 二、实现的步骤 以下说下几个要点： 1、自定义导航栏文本，是否显示返回，是否显示返回首页,导航栏高度 2、statusBarHeight，用来获取手机状态栏的高度，这个需要在全局app.js中的onLaunch，调用wx.getSystemInfo获取，navigationBarHeight+默认的高度，这个是设定整个导航栏的高度， 3、还有注意的，在写样式距离和大小时建议都用px，因小程序右边的胶囊也是用的px，不是rpx。 4、因为自定义导航栏每个页面都要写，所以把导航栏封装了公共组件，这样只需要在每个页面引入即可。 如下是封装的导航栏组件： wxml [代码]<view class="navbar" style="{{'height: ' + navigationBarHeight}}"> <view style="{{'height: ' + statusBarHeight}}"></view> <view class='title-container'> <view class='capsule' wx:if="{{ back || home }}"> <view bindtap='back' wx:if="{{back}}"> <image src='/images/back.png'></image> </view> <view bindtap='backHome' wx:if="{{home}}"> <image src='/images/home.png'></image> </view> </view> <view class='title'>{{text}}</view> </view> </view> <view style="{{'height: ' + navigationBarHeight}};background: white;"></view> [代码] 这里有个需注意的问题，就是一般会出现自定义导航栏，下拉页面，导航栏也随着会下拉，这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight，所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度 wxss [代码].navbar { width: 100%; background-color: #1797eb; position: fixed; top: 0; left: 0; z-index: 999; } .title-container { height: 40px; display: flex; align-items: center; position: relative; } .capsule { margin-left: 10px; height: 30px; background: rgba(255, 255, 255, 0.6); border: 1px solid #fff; border-radius: 16px; display: flex; align-items: center; } .capsule > view { width: 45px; height: 60%; position: relative; .capsule > view:nth-child(2) { border-left: 1px solid #fff; } .capsule image { width: 50%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .title { color: white; position: absolute; top: 6px; left: 104px; right: 104px; height: 30px; line-height: 30px; font-size: 14px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [代码] js [代码]const app = getApp() Component({ properties: { text: { type: String, value: 'Wechat' }, back: { type: Boolean, value: false }, home: { type: Boolean, value: false } }, data: { statusBarHeight: app.globalData.statusBarHeight + 'px', navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px' }, methods: { backHome: function () { let pages = getCurrentPages() wx.navigateBack({ delta: pages.length }) }, back: function () { wx.navigateBack({ delta: 1 }) } } }) [代码] json [代码]{ "component": true, "usingComponents": {} } [代码] 最终还需要考虑下版本兼容的问题，毕竟还有一些用户，微信版本并没有更新到最新版本。 首先可以在app.js里面获取下当前用户的微信版本，做下版本比较，如果小于这个版本，设置个全局变量，也可以在组件写个方法，在不同的页面打开显示不同的顶部导航栏，或者可以控制是否显示导航栏，这里就不详细说了。 亲自试了下，在低于7.0版本的微信中，如果采用单页面自定义导航栏，会出现两个导航栏，这时候通过判断版本号不要再渲染自定义的导航栏组件了，在页面的配置文件里写上title名，还有相应的背景色，这样就会显示自带的导航栏了。 总结 小程序开发是有些坑的地方，从不支持自定义导航栏，到支持全局自定义导航栏，再到现在的支持单页面配置，可以看出在慢慢完善。还有底部tabbar，可自己选择配置的太少了，虽然也支持自定义，但是发现自定义写的底部导航组件体验并不好，每次打开页面都会重新渲染底部的按钮，如果全部写成在一个页面里的tab切换，虽然按钮每次不用重新加载了，但是业务多肯定不行，写到一个单页面里东西也太多了。 希望微信能够多添加或放开一些功能，让开发者更好的服务于产品，给用户更好的体验。

定制左上角返回按钮一般有两个目的： 引导按钮：页面作为小程序启动后第一个页面时，左上角没有操作按钮，用户只能点击在右边胶囊更多回到首页（入口太深）。定制顶部可以引导用户很方便去其他页面。 拦截弹框：比如当用户点击返回时，弹出弹框，挽留用户。 效果： 点击查看没定制顶部录屏，发现没定制时，用户只能点击右边回到首页，考虑入口太深，故在左边做了个很奇怪的返回icon。点击可自己体验效果 点击查看有定制顶部录屏，虽然也是启动后第一个页面，但左上角有按钮返回首页，并当用户抽到红包后，返回会弹框挽留用户。点击可自己体验效果 开发顶部组件知识： 主要知识是组件开发、 wx.getMenuButtonBoundingClientRect()的使用。 代码下载说明： 由于在文章里贴代码导致文章比较乱，所以示例放在代码块里，大家可在开发工具输入链接直接获取，或直接在链接下载文件。 顶部组件代码块： https://developers.weixin.qq.com/s/A3Ki7Bmi7V9Z。 或点击下载示例代码 备注： 代码里有对应注释，我也不确定大家能不能看懂？虽然是很小的组件，代码量也不多，但如果有超过5位同学留言有必要观看视频来熟悉自定义顶部组件的开发过程，我也可录个视频。 推荐阅读 亲测有效隐藏scroll-view滚动条方法 实现自定义等间隔的tab