如何写一个自己的脚手架 - 一键初始化项目 介绍 脚手架的作用：为减少重复性工作而做的重复性工作 即为了开发中的：编译 es6，js 模块化，压缩代码，热更新等功能，我们使用[代码]webpack[代码]等打包工具，但是又带来了新的问题：初始化工程的麻烦，复杂的[代码]webpack[代码]配置，以及各种配置文件，所以就有了一键生成项目，0 配置开发的脚手架 本文项目代码地址 本文以我司的脚手架工具 简化之后为基础 本系列分 3 篇，详细介绍如何实现一个脚手架： 一键初始化项目 0 配置开发环境与打包 一键上传服务器 首先说一下个人的开发习惯 在写功能前我会先把调用方式写出了，然后一步一步的从使用者的角度写，现将基础功能写好后，慢慢完善 例如一键初始化项目功能 我期望的就是 在命令行执行输入 [代码]my-cli create text-project[代码]，回车后直接创建项目并生成模板，还会把依赖都下载好 我们下面就从命令行开始入手 创建项目 [代码]my-cli[代码]，执行 [代码]npm init -y[代码]快速初始化 bin [代码]my-cli[代码]： 在 [代码]package.json[代码] 中加入： [代码]{ "bin": { "my-cli": "bin.js" } } [代码] [代码]bin.js[代码]： [代码]#!/usr/bin/env node console.log(process.argv); [代码] [代码]#!/usr/bin/env node[代码]，这一行是必须加的，就是让系统动态的去[代码]PATH[代码]目录中查找[代码]node[代码]来执行你的脚本文件。 命令行执行 [代码]npm link[代码] ，创建软链接至全局，这样我们就可以全局使用[代码]my-cli[代码]命令了，在开发 [代码]npm[代码] 包的前期都会使用[代码]link[代码]方式在其他项目中测试来开发，后期再发布到[代码]npm[代码]上 命令行执行 [代码]my-cli 1 2 3[代码] 输出：[代码][ '/usr/local/bin/node', '/usr/local/bin/my-cli', '1', '2', '3' ][代码] 这样我们就可以获取到用户的输入参数 例如[代码]my-cli create test-project[代码] 我们就可以通过数组第 [2] 位判断命令类型[代码]create[代码]，通过第 [3] 位拿到项目名称[代码]test-project[代码] commander [代码]node[代码]的命令行解析最常用的就是[代码]commander[代码]库，来简化复杂[代码]cli[代码]参数操作 （我们现在的参数简单可以不使用[代码]commander[代码]，直接用[代码]process.argv[3][代码]获取名称，但是为了之后会复杂的命令行，这里也先使用[代码]commander[代码]） [代码]#!/usr/bin/env node const program = require("commander"); const version = require("./package.json").version; program.version(version, "-v, --version"); program .command("create <app-name>") .description("使用 my-cli 创建一个新的项目") .option("-d --dir <dir>", "创建目录") .action((name, command) => { const create = require("./create/index"); create(name, command); }); program.parse(process.argv); [代码] [代码]commander[代码] 解析完成后会触发[代码]action[代码]回调方法 命令行执行：[代码]my-cli -v[代码] 输出：[代码]1.0.0[代码] 命令行执行： [代码]my-cli create test-project[代码] 输出：[代码]test-project[代码] 创建项目 拿到了用户传入的名称，就可以用这么名字创建项目 我们的代码尽量保持[代码]bin.js[代码]整洁，不将接下来的代码写在[代码]bin.js[代码]里，创建[代码]create[代码]文件夹，创建[代码]index.js[代码]文件 [代码]create/index.js[代码]中： [代码]const path = require("path"); const mkdirp = require("mkdirp"); module.exports = function(name) { mkdirp(path.join(process.cwd(), name), function(err) { if (err) console.error("创建失败"); else console.log("创建成功"); }); }; [代码] [代码]process.cwd()[代码]获取工作区目录，和用户传入项目名称拼接起来 （创建文件夹我们使用[代码]mkdirp[代码]包，可以避免我们一级一级的创建目录） 修改[代码]bin.js[代码]的[代码]action[代码]方法： [代码]// bin.js .action(name => { const create = require("./create") create(name) }); [代码] 命令行执行： [代码]my-cli create test-project[代码] 输出：[代码]创建成功[代码] 并在命令行所在目录创建了一个[代码]test-project[代码]文件夹 模板 首先需要先列出我们的模板包含哪些文件 一个最基础版的[代码]vue[代码]项目模板： [代码]|- src |- main.js |- App.vue |- components |- HelloWorld.vue |- index.html |- package.json [代码] 这些文件就不一一介绍了 我们需要的就是生成这些文件，并写入到目录中去 模板的写法后很多种，下面是我的写法： 模板目录： [代码]|- generator |- index-html.js |- package-json.js |- main.js |- App-vue.js |- HelloWorld-vue.js [代码] [代码]generator/index-html.js[代码] 模板示例： [代码]module.exports = function(name) { const template = ` { "name": "${name}", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {}, "devDependencies": { }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.10" } } `; return { template, dir: "", name: "package.json" }; }; [代码] [代码]dir[代码]就是目录，例如[代码]main.js[代码]的[代码]dir[代码]就是[代码]src[代码] [代码]create/index.js[代码]在[代码]mkdirp[代码]中新增： [代码]const path = require("path"); const mkdirp = require("mkdirp"); const fs = require("fs"); module.exports = function(name) { const projectDir = path.join(process.cwd(), name); mkdirp(projectDir, function(err) { if (err) console.error("创建失败"); else { console.log(`创建${name}文件夹成功`); const { template, dir, name: fileName } = require("../generator/package")(name); fs.writeFile(path.join(projectDir, dir, fileName), template.trim(), function(err) { if (err) console.error(`创建${fileName}文件失败`); else { console.log(`创建${fileName}文件成功`); } }); } }); }; [代码] 这里只写了一个模板的创建，我们可以用[代码]readdir[代码]来获取目录下所有文件来遍历执行 下载依赖 我们平常下载[代码]npm[代码]包都是使用命令行 [代码]npm install / yarn install[代码] 这时就需要用到 [代码]node[代码] 的 [代码]child_process.spawn[代码] api 来调用系统命令 因为考虑到跨平台兼容处理，所以使用 cross-spawn 库，来帮我们兼容的操作命令 我们创建[代码]utils[代码]文件夹，创建[代码]install.js[代码] [代码]utils/install.js[代码]： [代码]const spawn = require("cross-spawn"); module.exports = function install(options) { const cwd = options.cwd || process.cwd(); return new Promise((resolve, reject) => { const command = options.isYarn ? "yarn" : "npm"; const args = ["install", "--save", "--save-exact", "--loglevel", "error"]; const child = spawn(command, args, { cwd, stdio: ["pipe", process.stdout, process.stderr] }); child.once("close", code => { if (code !== 0) { reject({ command: `${command} ${args.join(" ")}` }); return; } resolve(); }); child.once("error", reject); }); }; [代码] 然后我们就可以在创建完模板后调用[代码]install[代码]方法下载依赖 [代码]install({ cwd: projectDir }); [代码] 要知道工作区为我们项目的目录 至此，解析 cli，创建目录，创建模板，下载依赖一套流程已经完成 基本功能都跑通之后下面就是要填充剩余代码和优化 优化 当代码写的多了之后，我们看上面[代码]create[代码]方法内的回调嵌套回调会非常难受 [代码]node 7[代码]已经支持[代码]async，await[代码]，所以我们将上面代码改成[代码]Promise[代码] 在[代码]utils[代码]目录下创建，[代码]promisify.js[代码]： [代码]module.exports = function promisify(fn) { return function(...args) { return new Promise(function(resolve, reject) { fn(...args, function(err, ...res) { if (err) return reject(err); if (res.length === 1) return resolve(res[0]); resolve(res); }); }); }; }; [代码] 这个方法帮我们把回调形式的[代码]Function[代码]改成[代码]Promise[代码] 在[代码]utils[代码]目录下创建，[代码]fs.js[代码]： [代码]const fs = require(fs); const promisify = require("./promisify"); const mkdirp = require("mkdirp"); exports.writeFile = promisify(fs.writeFile); exports.readdir = promisify(fs.readdir); exports.mkdirp = promisify(mkdirp); [代码] 将[代码]fs[代码]和[代码]mkdirp[代码]方法改造成[代码]promise[代码] 改造后的[代码]create.js[代码]： [代码]const path = require("path"); const fs = require("../utils/fs-promise"); const install = require("../utils/install"); module.exports = async function(name) { const projectDir = path.join(process.cwd(), name); await fs.mkdirp(projectDir); console.log(`创建${name}文件夹成功`); const { template, dir, name: fileName } = require("../generator/package")(name); await fs.writeFile(path.join(projectDir, dir, fileName), template.trim()); console.log(`创建${fileName}文件成功`); install({ cwd: projectDir }); }; [代码] 结语 关于进一步优化： 更多功能与健壮 例如指定目录创建项目，目录不存在等情况 [代码]chalk[代码]和[代码]ora[代码]优化[代码]log[代码]，给用户更好的反馈 通过[代码]inquirer[代码]问询用户得到更多的选择：模板[代码]vue-router[代码]，[代码]vuex[代码]等更多初始化模板功能，[代码]eslint[代码] 更多的功能： 内置 webpack 配置 一键发布服务器 其实要学会善用第三方库，你会发现我们上面的每个模块都有第三方库的身影，我们只是将这些功能组装起来，再结合我们的想法进一步封装 虽然有[代码]vue-cli[代码]，[代码]create-react-app[代码]这些已有的脚手架，但是我们还是可能在某些情况下需要自己实现脚手架部分功能，根据公司的业务来封装，减少重复性工作，或者了解一下内部原理

[图片][图片][图片][图片] 授权URL:https://open.work.weixin.qq.com/3rdapp/install?suite_id=wwe02db659be99825c&pre_auth_code=qCSGxKL2BqkVaAwwpqDguDWoBnmJOJbsd78GC3OKcEBwJSJvhKaegUBMZepUBYvr&redirect_uri=http%3A%2F%2Fsa.rblcmall.com%2FplatformApi%2Ftp%2Fredirect%2Furl&state=33105 然后https://work.weixin.qq.com/api/doc/90001/90143/90602这个接口也调用了 本地走测试授权是没问题的 帮我看下哪里有问题？

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 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即可。

小程序提供了路由功能来实现页面跳转，但是在使用的过程中我们还是发现有些不方便的地方，通过封装，我们可以实现诸如路由管理、简化api等功能。 页面的跳转存在哪些问题呢？ 与接口的调用一样面临url的管理问题； 传递参数的方式不太友好，只能拼装url； 参数类型单一，只支持string。 alias 第一个问题很好解决，我们做一个集中管理，比如新建一个[代码]router/routes.js[代码]文件来实现alias： [代码]// routes.js module.exports = { // 主页 home: '/pages/index/index', // 个人中心 uc: '/pages/user_center/index', }; [代码] 然后使用的时候变成这样： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { wx.navigateTo({ url: routes.uc, }); }, }); [代码] query 第二个问题，我们先来看个例子，假如我们跳转[代码]pages/user_center/index[代码]页面的同时还要传[代码]userId[代码]过去，正常情况下是这么来操作的： [代码]const routes = require('../../router/routes.js'); Page({ onReady() { const userId = '123456'; wx.navigateTo({ url: `${routes.uc}?userId=${userId}`, }); }, }); [代码] 这样确实不好看，我能不能把参数部分单独拿出来，不用拼接到url上呢？ 可以，我们试着实现一个[代码]navigateTo[代码]函数： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, query }) { const queryStr = Object.keys(query).map(k => `${k}=${query[k]}`).join('&'); wx.navigateTo({ url: `${url}?${queryStr}`, }); } Page({ onReady() { const userId = '123456'; navigateTo({ url: routes.uc, query: { userId, }, }); }, }); [代码] 嗯，这样貌似舒服一点。 参数保真 第三个问题的情况是，当我们传递的参数argument不是[代码]string[代码]，而是[代码]number[代码]或者[代码]boolean[代码]时，也只能在下个页面得到一个[代码]string[代码]值： [代码]// pages/index/index.js Page({ onReady() { navigateTo({ url: routes.uc, query: { isActive: true, }, }); }, }); // pages/user_center/index.js Page({ onLoad(options) { console.log(options.isActive); // => "true" console.log(typeof options.isActive); // => "string" console.log(options.isActive === true); // => false }, }); [代码] 上面这种情况想必很多人都遇到过，而且感到很抓狂，本来就想传递一个boolean，结果不管传什么都会变成string。 有什么办法可以让数据变成字符串之后，还能还原成原来的类型？ 好熟悉，这不就是json吗？我们把要传的数据转成json字符串（[代码]JSON.stringify[代码]），然后在下个页面把它转回json数据（[代码]JSON.parse[代码]）不就好了嘛！ 我们试着修改原来的[代码]navigateTo[代码]： [代码]const routes = require('../../router/routes.js'); function navigateTo({ url, data }) { const dataStr = JSON.stringify(data); wx.navigateTo({ url: `${url}?jsonStr=${dataStr}`, }); } Page({ onReady() { navigateTo({ url: routes.uc, data: { isActive: true, }, }); }, }); [代码] 这样我们在页面中接受json字符串并转换它： [代码]// pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(options.jsonStr); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这里其实隐藏了一个问题，那就是url的转义，假如json字符串中包含了类似[代码]?[代码]、[代码]&[代码]之类的符号，可能导致我们参数解析出错，所以我们要把json字符串encode一下： [代码]function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } // pages/user_center/index.js Page({ onLoad(options) { const json = JSON.parse(decodeURIComponent(options.encodedData)); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] 这样使用起来不方便，我们封装一下，新建文件[代码]router/index.js[代码]： [代码]const routes = require('./routes.js'); function navigateTo({ url, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { routes, navigateTo, extract, }; [代码] 页面中我们这样来使用： [代码]const router = require('../../router/index.js'); // page home Page({ onLoad(options) { router.navigateTo({ url: router.routes.uc, data: { isActive: true, }, }); }, }); // page uc Page({ onLoad(options) { const json = router.extract(options); console.log(json.isActive); // => true console.log(typeof json.isActive); // => "boolean" console.log(json.isActive === true); // => true }, }); [代码] route name 这样貌似还不错，但是[代码]router.navigateTo[代码]不太好记，[代码]router.routes.uc[代码]有点冗长，我们考虑把[代码]navigateTo[代码]换成简单的[代码]push[代码]，至于路由，我们可以使用[代码]name[代码]的方式来替换原来[代码]url[代码]参数： [代码]const routes = require('./routes.js'); function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const url = routes[name]; wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } function extract(options) { return JSON.parse(decodeURIComponent(options.encodedData)); } module.exports = { push, extract, }; [代码] 在页面中使用： [代码]const router = require('../../router/index.js'); Page({ onLoad(options) { router.push({ name: 'uc', data: { isActive: true, }, }); }, }); [代码] navigateTo or switchTab 页面跳转除了navigateTo之外还有switchTab，我们是不是可以把这个差异抹掉？答案是肯定的，如果我们在配置routes的时候就已经指定是普通页面还是tab页面，那么程序完全可以切换到对应的跳转方式。 我们修改一下[代码]router/routes.js[代码]，假设home是一个tab页面： [代码]module.exports = { // 主页 home: { type: 'tab', path: '/pages/index/index', }, uc: { path: '/pages/a/index', }, }; [代码] 然后修改[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; if (route.type === 'tab') { wx.switchTab({ url: `${route.path}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${route.path}?encodedData=${dataStr}`, }); } [代码] 搞定，这样我们一个[代码]router.push[代码]就能自动切换两种跳转方式了，而且之后一旦页面类型有变动，我们也只需要修改[代码]route[代码]的定义就可以了。 直接寻址 alias用着很不错，但是有一点挺麻烦得就是每新建一个页面都要写一个alias，即使没有别名的需要，我们是不是可以处理一下，如果在alias没命中，那就直接把name转化成url？这也是阔以的。 [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : name; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 在页面中使用： [代码]Page({ onLoad(options) { router.push({ name: 'pages/user_center/a/index', data: { isActive: true, }, }); }, }); [代码] 注意，为了方便维护，我们规定了每个页面都必须存放在一个特定的文件夹，一个文件夹的当前路径下只能存在一个index页面，比如[代码]pages/index[代码]下面会存放[代码]pages/index/index.js[代码]、[代码]pages/index/index.wxml[代码]、[代码]pages/index/index.wxss[代码]、[代码]pages/index/index.json[代码]，这时候你就不能继续在这个文件夹根路径存放另外一个页面，而必须是新建一个文件夹来存放，比如[代码]pages/index/pageB/index.js[代码]、[代码]pages/index/pageB/index.wxml[代码]、[代码]pages/index/pageB/index.wxss[代码]、[代码]pages/index/pageB/index.json[代码]。 这样是能实现功能，但是这个name怎么看都跟alias风格差太多，我们试着定义一套转化规则，让直接寻址的name与alias风格统一一些，[代码]pages[代码]和[代码]index[代码]其实我们可以省略掉，[代码]/[代码]我们可以用[代码].[代码]来替换，那么原来的name就变成了[代码]user_center.a[代码]： [代码]Page({ onLoad(options) { router.push({ name: 'user_center.a', data: { isActive: true, }, }); }, }); [代码] 我们再来改进[代码]router/index.js[代码]中[代码]push[代码]的实现： [代码]function push({ name, data }) { const dataStr = encodeURIComponent(JSON.stringify(data)); const route = routes[name]; const url = route ? route.path : `pages/${name.replace(/\./g, '/')}/index`; if (route.type === 'tab') { wx.switchTab({ url: `${url}`, // 注意tab页面是不支持传参的 }); return; } wx.navigateTo({ url: `${url}?encodedData=${dataStr}`, }); } [代码] 这样一来，由于支持直接寻址，跳转home和uc还可以写成这样： [代码]router.push({ name: 'index', // => /pages/index/index }); router.push({ name: 'user_center', // => /pages/user_center/index }); [代码] 这样一来，除了一些tab页面以及特定的路由需要写alias之外，我们也不需要新增一个页面就写一条alias这么麻烦了。 其他 除了上面介绍的navigateTo和switchTab外，其实还有[代码]wx.redirectTo[代码]、[代码]wx.navigateBack[代码]以及[代码]wx.reLaunch[代码]等，我们也可以做一层封装，过程雷同，所以我们就不再一个个介绍，这里贴一下最终简化后的api以及原生api的映射关系： [代码]router.push => wx.navigateTo router.replace => wx.redirectTo router.pop => wx.navigateBack router.relaunch => wx.reLaunch [代码] 最终实现已经在发布在github上，感兴趣的朋友可以移步了解：mp-router。

本文是我的小程序开发日记的其中一篇，刚兴趣的读者可以前往 GitHub 收看更多，欢迎star，感谢万分！ 前言 众所周知，前端一大坑就是回调函数。 相信很多人是从[代码]async/await[代码]的温柔乡，掉到小程序重新写回调的大坑里的。 由于开发者工具新增了 增强编译 从而原生支持了[代码]async\await[代码]，避免了我们仍需通过webpack等第三方打包工具实现。因此我们需要做的就是将官方API的 异步调用 方式改成 Promise的方式 即可。 分析与实践 大致上可以有两种思路，第一种就是，逐个函数封装： [代码]let promisify = func => args => new Promise((resolve, reject) => { func(Object.assign(args, { success: resolve, fail: reject, })) }) let _login = promisify(wx.login) // 将wx.login转成Promise形式的方法 _login().then(res => console.log) [代码] 这种方式比较麻烦，每次调用都需要手动转换。 劫持WX 第二种就类似[代码]Page[代码]封装那样，劫持[代码]wx[代码]对象，进行全局统一封装。但有一点比较棘手的是，需要分析清楚哪些是函数，哪些函数是异步而不是同步的，一开始我的思路是这样的： 同步方法是以[代码]Sync[代码]结尾的 通过[代码]typeof[代码]判断是否为函数 [代码]// promisify.js let originalWX = wx let props = Object.keys(wx) for (let name of props) { let fn = wx[name] if (typeof fn === 'function' && !name.endsWith('Sync')) { wx[name] = promisify(fn) } } [代码] 尝试封装之后，发现报错了。因为[代码]wx.drawCanvas[代码]只有[代码]getter[代码]没有[代码]setter[代码]，无法给它赋值。相当于这个方法是[代码]readonly[代码]。 [图片] 既然存在没有[代码]setter[代码]的方法，那么我看有多少方法是有[代码]setter[代码]的： [代码]Object.keys(wx).filter(name => { let descriptor = Object.getOwnPropertyDescriptor(wx, name) return typeof descriptor.set === 'function' }) [代码] 结果是[代码][][代码]，相当于无法改变[代码]wx[代码]对象的每个属性值。 [图片] 复制模式 虽然[代码]wx[代码]的属性都是[代码]readonly[代码]，不能劫持[代码]wx[代码]，但我发现[代码]wx[代码]是[代码]writable[代码]的。 那么可以采用复制模式，将它的所有异步方法拷贝一份并[代码]promisify[代码]之后赋值到新对象，最后再将整个对象赋值给[代码]wx[代码]即可： [代码]let props = Object.keys(wx) let jwx = {} for (let name of props) { let fn = wx[name] if (typeof fn === 'function' && !name.endsWith('Sync')) { jwx[name] = promisify(fn) } else { jwx[name] = fn } } wx = jwx [代码] 这种方式虽可行，但是挺冗余的，因为将很多可能没用上的方法也进行了[代码]promisify[代码]。 代理模式 熟悉ES新特性的读者应该知道[代码]Proxy[代码]。 它可以用来定义对象的自定义行为，顾名思义，就是给对象挂上[代码]Proxy[代码]之后，对这个属性的任何行为都可以被代理。 那么我们就可以给[代码]wx[代码]挂上代理： [代码]let originalWX = wx wx = new Proxy({}, { get(target, name) { if (name in originalWX ) { let fn = originalWX[name] let isSyncFunc = name.endsWith('Sync') // 同步函数 let isNotFunc = typeof fn !== 'function' // 非函数 if (isSyncFunc || isNotFunc) return fn return promisify(fn) } } }); [代码] 代理的方式虽解决了复制模式的冗余问题，但是仍有一个问题待解决：异步方法的判断。 在实践中，我发现并不是所有同步方法都是以[代码]Sync[代码]结尾的。比如：[代码]wx.getMenuButtonBoundingClientRect[代码]。 因此打算手动维护一个同步方法列表，将这项方法过滤掉： [代码]let syncFuncList = ['getMenuButtonBoundingClientRect'] // name为函数名 let isSync = name.endsWith('Sync') || syncFuncList.includes(name) [代码] 优化 考虑到要兼容已上线的小程序，若匆忙替换[代码]wx[代码]，必会导致全局报错，因此可以如下处理： 当用户调用API时，如果传入了[代码]success[代码]、[代码]fail[代码]、[代码]complete[代码]等回调方法的话，则仍继续使用回调的方式继续执行。那么[代码]promisify[代码]可以如下优化： [代码]let originalWX = wx let hasCallback = obj => { let cbs = ['success', 'fail', 'complete'] return Object.keys(obj).some(k => cbs.includes(k)) } wx = new Proxy({}, { get(target, name) { if (name in originalWX ) { let fn = originalWX[name] let isSyncFunc = name.endsWith('Sync') // 同步函数 let isNotFunc = typeof fn !== 'function' // 非函数 if (isSyncFunc || isNotFunc) return fn return (obj) => { if (!obj) return fn() if (hasCallback(obj)) return fn(obj) return promisify(fn)(obj) } } } }); [代码] 由于本文的前提是开启 增强编译，而该模式下也新增支持[代码]Array.prototype.includes[代码]，因此可以放心使用该ES7的新特性。 后续 由于发现了微信官方也提供了一个 API Promise化 的工具类库，因此增加了本章节。 通过阅读源代码，发现官方的工具类库提供两个方法：[代码]promisify[代码] 和 [代码]promisifyAll[代码] 其中[代码]promisify[代码]与前文的同名方法是几乎一致的。而[代码]promisifyAll[代码]则是接收两个参数，第一个是被封装的对象，第二个则是封装之后的对象，如下使用将和前文我提到的封装方式类似： [代码]import { promisifyAll } from 'miniprogram-api-promise'; let jwx = {} promisifyAll(wx, jwx) wx = jwx [代码] 另外还有一点需要提到的是，官方这个工具类库，判断是否为异步函数的方式是维护了一个异步方法列表，会存在遗漏新API的可能。 相当于我的做法是黑名单机制，而官方采用了白名单机制。 最后再提醒下，开发者工具记得打开 增强编译

调侃 某萌新：为什么我在社区提问的问题都没人回答啊 某大佬：社区的问题质量是越来越低了，真不想看社区的问题了 如何提问 今天，在下就来告诉大家如何优雅的提问： 在提问之前，先想好自己遇到的问题是什么，让想要帮助你的人，知道你的问题所在 提问语言简洁明了，详细说明重现步骤及可能存在的问题 附上问题截图，比如调试工具报错信息、提审被驳回信息 写明代码环境，如工具版本、手机版本、基础库版本等 如果调用接口报错，请直接把接口的官方文档地址贴出来，标明调用接口地址，附上请求的参数以及返回的数据 必要时请提供代码截图或代码片段 点击查看如何创建代码片段 最重要的一点：提问时请务必注意礼貌。这一点特别重要，因为这关乎到回答者决定要不要回答以及以怎么样的态度来回答 依然是重要的一点：请务必给认真回答协助解决问题的回答者一个“赞”，这会更加激起他们回答的积极性 千万不要投机，把问题提到“文章”版块，这样会被直接隐藏。不仅不会加快被解答的速度，还会耽误解答机会 示例 （仅为示例，不代表该问题实际存在） 标题：picker组件多级联动会出现选项为 null 的情况？ 内容： 使用picker组件，设定为多级联动，仅滚动一级栏后确定，后面的栏目获取到的值为 null，能麻烦帮忙看下吗？最新版开发者工具，基础库版本 2.9.2 代码片段：xxxxxxxxxxxxxxxx 继续调侃 某萌新：诶？真的诶，这样提问，好多问题都被解决了 某大佬：这问题问得是真的好，多来点这样的问题，回答也舒坦

背景 在做小程序时，关于默认导航栏，我们遇到了以下的问题： Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中 页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果 左上角的事件无法监听、定制 路由导航单一，只能够返回上一页，深层级页面的返回不够友好 探索 小程序自定义导航栏已开放许久>>了解一下，相信不少小伙伴已使用过这个功能，同时不少小伙伴也会发现一些坑： 机型多如牛毛：自定义导航栏高度在不同机型始终无法达到视觉上的统一 调皮的胶囊按钮：导航栏元素（文字，图标等）怎么也对不齐那该死的胶囊按钮 各种尺寸的全面屏，奇怪的刘海屏，简直要抓狂 一探究竟 为了搞明白原理，我先去翻了官方文档，>>飞机，点过去是不是很惊喜，很意外，通篇大文尽然只有最下方的一张图片与这个问题有关，并且啥也看不清，汗汗汗… 我特意找了一张图片来 [图片] 分析上图，我得到如下信息： Android跟iOS有差异，表现在顶部到胶囊按钮之间的距离差了6pt 胶囊按钮高度为32pt， iOS和Android一致 动手分析 我们写一个状态栏，通过wx.getSystemInfoSync().statusBarHeight设置高度 Android： [图片] iOS:[图片] 可以看出，iOS胶囊按钮与状态栏之间距离为：4px， Android为8px，是不是所有手机都是这种情况呢？ 答案是:苹果手机确实都是4px,安卓大部分都是7和8 也会有其他的情况(可以自己打印getSystemInfo验证)如何快速便捷算出这个高度,请接着往下看 如何计算 导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 注：由于胶囊按钮是原生组件，为表现一致，其单位在各种手机中都为px，所以我们自定义导航栏的单位都必需是px（切记不能用rpx），才能完美适配。 解决问题 现在我们明白了原理，可以利用胶囊按钮的位置信息和statusBarHeight高度动态计算导航栏的高度，贴一个实现此功能最重要的方法 [代码]let systemInfo = wx.getSystemInfoSync(); let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息 wx.getMenuButtonBoundingClientRect(); let navBarHeight = (function() { //导航栏高度 let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距 return 2 * gap + rect.height; })(); [代码] gap信息就是不同的手机其状态栏到胶囊按钮间距，具体更多代码实现和使用demo请移步下方代码仓库，代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等 胶囊信息报错和获取不到 问题就在于 getMenuButtonBoundingClientRect 这个方法，在某些机子和环境下会报错或者获取不到，对于此种情况完美可以模拟一个胶囊位置出来 [代码]try { rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null; if (rect === null) { throw 'getMenuButtonBoundingClientRect error'; } //取值为0的情况 if (!rect.width) { throw 'getMenuButtonBoundingClientRect error'; } } catch (error) { let gap = ''; //胶囊按钮上下间距 使导航内容居中 let width = 96; //胶囊的宽度，android大部分96，ios为88 if (systemInfo.platform === 'android') { gap = 8; width = 96; } else if (systemInfo.platform === 'devtools') { if (ios) { gap = 5.5; //开发工具中ios手机 } else { gap = 7.5; //开发工具中android和其他手机 } } else { gap = 4; width = 88; } if (!systemInfo.statusBarHeight) { //开启wifi的情况下修复statusBarHeight值获取不到 systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20; } rect = { //获取不到胶囊信息就自定义重置一个 bottom: systemInfo.statusBarHeight + gap + 32, height: 32, left: systemInfo.windowWidth - width - 10, right: systemInfo.windowWidth - 10, top: systemInfo.statusBarHeight + gap, width: width }; console.log('error', error); console.log('rect', rect); } [代码] 以上代码主要是借鉴了拼多多的默认值写法，android 机子中 gap 值大部分为 8，ios 都为 4，开发工具中 ios 为 5.5，android 为 7.5，这样处理之后自己模拟一个胶囊按钮的位置，这样在获取不到胶囊信息的情况下，可保证绝大多数机子完美显示导航头 吐槽 这么重要的问题，官方尽然没有提供解决方案…竟然提供了一张看不清的图片??? 网上有很多ios设置44，android设置48，还有根据不同的手机型号设置不同高度，通过长时间的开发和尝试，本人发现以上方案并不完美,并且bug很多 代码库 Taro组件gitHub地址详细用法请参考README 原生组件npm构建版本gitHub地址详细用法请参考README 原生组件简易版gitHub地址详细用法请参考README 由于本人精力有限，目前只计划发布维护好这2种组件，其他组件请自行修改代码，有问题请联系 备注 上方2种组件在最下方30多款手机测试情况表现良好 iPhone手机打电话和开热点导致导航栏样式错乱，问题已经解决啦，请去demo里测试，这里特别感谢moments网友提出的问题 本文章并无任何商业性质，如有侵权请联系本人修改或删除 文章少量部分内容是本人查询搜集而来 如有问题可以下方留言讨论，微信zhijunxh 比较 斗鱼: [图片] 虎牙: [图片] 微博: [图片] 酷狗: [图片] 知乎: [图片] [图片] 知乎是这里边做的最好的，但是我个人认为有几个可以优化的小问题 打电话或者开启热点导致样式错落，这也是大部门小程序的问题 导航栏下边距太小，看起来不舒服 搜索框距离2侧按钮组距离不对等 自定义返回和home按钮中的竖线颜色重了，并且感觉太粗 如果您看到了此篇文章，请赶快修改自己的代码，并运用在实践中吧 扫码体验我的小程序: [图片] 创作不易，如果对你有帮助，请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢 测试信息 手机型号 胶囊位置信息 statusBarHeight 测试情况 iPhoneX 80 32 281 369 48 88 44 通过 iPhone8 plus 56 32 320 408 24 88 20 通过 iphone7 56 32 281 368 24 87 20 通过 iPhone6 plus 56 32 320 408 24 88 20 通过 iPhone6 56 32 281 368 24 87 20 通过 HUAWEI SLA-AL00 64 32 254 350 32 96 24 通过 HUAWEI VTR-AL00 64 32 254 350 32 96 24 通过 HUAWEI EVA-AL00 64 32 254 350 32 96 24 通过 HUAWEI EML-AL00 68 32 254 350 36 96 29 通过 HUAWEI VOG-AL00 65 32 254 350 33 96 25 通过 HUAWEI ATU-TL10 64 32 254 350 32 96 24 通过 HUAWEI SMARTISAN OS105 64 32 326 422 32 96 24 通过 XIAOMI MI6 59 28 265 352 31 87 23 通过 XIAOMI MI4LTE 60 32 254 350 28 96 20 通过 XIAOMI MIX3 74 32 287 383 42 96 35 通过 REDMI NOTE3 64 32 254 350 32 96 24 通过 REDMI NOTE4 64 32 254 350 32 96 24 通过 REDMI NOTE3 55 28 255 351 27 96 20 通过 REDMI 5plus 67 32 287 383 35 96 28 通过 MEIZU M571C 65 32 254 350 33 96 25 通过 MEIZU M6 NOTE 62 32 254 350 30 96 22 通过 MEIZU MX4 PRO 62 32 278 374 30 96 22 通过 OPPO A33 65 32 254 350 33 96 26 通过 OPPO R11 58 32 254 350 26 96 18 通过 VIVO Y55 64 32 254 350 32 96 24 通过 HONOR BLN-AL20 64 32 254 350 32 96 24 通过 HONOR NEM-AL10 59 28 265 352 31 87 24 通过 HONOR BND-AL10 64 32 254 350 32 96 24 通过 HONOR duk-al20 64 32 254 350 32 96 24 通过 SAMSUNG SM-G9550 64 32 305 401 32 96 24 通过 360 1801-A01 64 32 254 350 32 96 24 通过

自定义导航栏在刚出的时候已经有很多实现方案了，但是还有大哥在问，那这里再贴下代码及原理： 首先在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 @安晓苏 分享一个自适应的自定义导航栏组件

为什么使用自定义导航 对比默认导航栏，我们会更需要： 统一Android、IOS手机对于页面title的展示样式及位置 更丰富的导航栏定制效果，如添加home图标等 左上角返回事件的监听处理 统一实现双击返回顶部功能 自定义导航组件实现思路 自定义导航组件实现的核心是需要计算导航栏的真实高度 这里以官方文档->扩展能力中的Navigation组件为例分析实现思路。当使用"navigationStyle": "custom"时，默认导航被移除，页面的开始位置变成了屏幕顶部，这时我们需要实现的导航栏是在状态栏下面。 导航栏的真实高度=状态栏高度+导航栏内容。 [图片] 使用wx.getSystemInfo获取到statusBarHeight便是导航栏的高度，但是导航栏内容高度呢？ 有人可能觉得导航栏内容高度顾名思义就是导航栏内容高度啊，内容撑起还用管嘛！要，必须要！ 因为右上角胶囊按钮是原生加载的，我们的导航栏内容需要正好贴在胶囊的下方且垂直居中。 导航栏内容高度=（胶囊按钮的顶部距离 - 状态高度）*2 + 胶囊高度 [图片] 如何计算胶囊的数据呢？幸运的是我们有 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的布局位置信息，那么动态计算导航栏的内容高度就很方便啦。 好了，以上就是动态计算的核心思路，我们再来看官方Navigation组件高度是怎么实现的 [代码]page{--height:44px;--right:190rpx;} .weui-navigation-bar .android{--height:48px;--right:222rpx} .weui-navigation-bar__inner{ position:fixed;top:0;left:0;z-index:5001;display:flex;align-items:center; height:var(--height);padding-right:var(--right);width:calc(100% - var(--right)) } [代码] 导航栏内容的高度是通过- -height这个css变量提前声明好的，安卓机型会重新覆盖为新的css变量值，目前没发现有适配问题。 官方就是官方啊，具体尺寸都知道，那就不用一番计算周折啦，直接拿来主义即可。 导航的布局位置已经搞定啦，剩下就是写具体的内容，不同业务实现需求不同这里就不一一赘述了。 完善官方顶部导航组件 本着拿来主义，直接使用官方Navigation组件，但在实际业务开发中还是遇到不少需要自定义的需求，就比如： loadding样式没实现 标题内容超出没有出现省略号 和原生顶部的样式不兼容，导致单个页面引入时跳转有明显差异出现 没有双击返回顶部功能开关功能 引入页面需要获取导航栏的高度，来控制其他元素距离顶部的位置， 不能根据页面栈数据动态显示隐藏back按钮， 针对以上需求，我们对官方的组件进行二次完善开发，满足常规的自定义需求绰绰有余，直接引入开箱即用。 源码使用示例 https://github.com/YuniorZen/minicode-debug/tree/master/minicode02 [图片] 使用说明 [代码]/*自定义头部导航组件，基于官方组件Navigation开发。*/ <navigation-bar title="会员中心" bindgetBarInfo="getBarInfo"></navigation-bar> [代码] 组件属性列表 属性 类型 描述 bindgetBarInfo function 组件实例载入页面时触发此事件，首参为event对象，event.detail携带当前导航栏信息，如导航栏高度 event.detail.topBarHeight bindback function 点击back按钮触发此事件响应函数 backImage string back按钮的图标地址 homeImage string home按钮的图标地址 ext-class string 添加在组件内部结构的class，可用于修改组件内部的样式 title string 导航标题，如果不提供为空 background string 导航背景色，默认#ffffff color string 导航字体颜色 dbclickBackTop boolean 是否开启双击返回顶部功能，默认true border boolean 是否显示顶部导航下边框分割线，默认false loading boolean 是否显示标题左侧的loading，默认false show boolean 显示隐藏导航，隐藏的时候navigation的高度占位还在,默认true left boolean 左侧区域是否使用slot内容，默认false center boolean 中间区域是否使用slot内容，默认false Slot name 描述 left 左侧slot，在back按钮位置显示，当left属性为true的时候有效 center 标题slot，在标题位置显示，当center属性为true的时候有效 自定义顶部导航目前存在的坑 弹窗的背景蒙层无法覆盖原生胶囊按钮 页面下拉刷新的圆点会被自定义导航遮盖 如果要自定义顶部导航，以上问题避免不了，只能忍着接受。 目前还没遇到完美的解决方案，针对下拉刷新圆点被遮挡的问题微信官方还在需求开发中，如果你有好的想法欢迎留言反馈，一起学习交流。

[代码]var[代码] [代码]socketOpen = [代码][代码]false[代码][代码];[代码][代码]var[代码] [代码]frameBuffer_Data, session, SocketTask;[代码][代码]var[代码] [代码]url = [代码][代码]'wss://...'[代码][代码];[代码] [代码]Page({[代码][代码]    [代码][代码]data: {[代码][代码]        [代码][代码]toView: [代码][代码]'green'[代码][代码],[代码][代码]        [代码][代码]windowH: [代码][代码]"1000"[代码][代码],[代码][代码]        [代码][代码]user_input_text: [代码][代码]''[代码][代码],[代码][代码]//用户输入文字[代码][代码]        [代码][代码]inputValue: [代码][代码]''[代码][代码],[代码][代码]        [代码][代码]returnValue: [代码][代码]''[代码][代码],[代码][代码]        [代码][代码]addImg: [代码][代码]false[代码][代码],[代码][代码]        [代码][代码]//格式示例数据，可为空[代码][代码]        [代码][代码]allContentList: [],[代码][代码]        [代码][代码]num: 0,[代码][代码]        [代码][代码]wo: [代码][代码]""[代码][代码],[代码][代码]        [代码][代码]ta: [代码][代码]""[代码][代码],[代码][代码]        [代码][代码]youImg: [代码][代码]""[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]//通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。[代码][代码]    [代码][代码]sendSocketMessage: [代码][代码]function[代码] [代码](msg) {[代码][代码]        [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]console.log([代码][代码]'通过 WebSocket 连接发送数据'[代码][代码], JSON.stringify(msg))[代码][代码]        [代码][代码]// debugger[代码][代码]        [代码][代码]SocketTask.send([代码][代码]            [代码][代码]{[代码][代码]                [代码][代码]data: JSON.stringify(msg)[代码][代码]            [代码][代码]},[代码][代码]            [代码][代码]function[代码] [代码](res) {[代码][代码]                [代码][代码]console.log([代码][代码]'已发送'[代码][代码], res)[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码])[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码][代码]        [代码][代码]const that = [代码][代码]this[代码][代码];[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]onReady: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]SocketTask.onOpen(res => {[代码][代码]            [代码][代码]socketOpen = [代码][代码]true[代码][代码];[代码][代码]            [代码][代码]console.log([代码][代码]'监听 WebSocket 连接打开事件。'[代码][代码], res)[代码][代码]            [代码][代码]//发送登陆信息[代码][代码]            [代码][代码]var[代码] [代码]data = {[代码][代码]                [代码][代码]// body: that.data.inputValue,[代码][代码]                [代码][代码]"Name"[代码][代码]: that.data.wo,[代码][代码]                [代码][代码]"content"[代码][代码]: [代码][代码]"login"[代码][代码],[代码][代码]                [代码][代码]"type"[代码][代码]: 4[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]that.sendSocketMessage(data);[代码][代码]            [代码][代码]//循环发送心跳[代码][代码]            [代码][代码]setInterval([代码][代码]                [代码][代码]function[代码] [代码]() {[代码][代码]                    [代码][代码]var[代码] [代码]ping = { [代码][代码]"type"[代码][代码]: [代码][代码]"ping"[代码] [代码]};[代码][代码]                    [代码][代码]that.sendSocketMessage(ping);[代码][代码]                [代码][代码]}, 20000[代码][代码]            [代码][代码]);[代码][代码]        [代码][代码]})[代码][代码]        [代码][代码]SocketTask.onClose(onClose => {[代码][代码]            [代码][代码]console.log([代码][代码]'监听 WebSocket 连接关闭事件。'[代码][代码], onClose)[代码][代码]            [代码][代码]socketOpen = [代码][代码]false[代码][代码];[代码][代码]            [代码][代码]this[代码][代码].webSocket()[代码][代码]        [代码][代码]})[代码][代码]        [代码][代码]SocketTask.onError(onError => {[代码][代码]            [代码][代码]console.log([代码][代码]'监听 WebSocket 错误。错误信息'[代码][代码], onError)[代码][代码]            [代码][代码]socketOpen = [代码][代码]false[代码][代码]        [代码][代码]})[代码][代码]        [代码][代码]SocketTask.onMessage(onMessage => {[代码][代码]            [代码][代码]console.log([代码][代码]"onMessage:::::"[代码] [代码]+ onMessage.data);[代码][代码]            [代码][代码]if[代码] [代码](onMessage.data.indexOf([代码][代码]"上线"[代码][代码]) != -1 || onMessage.data.indexOf([代码][代码]"下线"[代码][代码]) != -1) {[代码][代码]                [代码][代码]return[代码][代码];[代码][代码]            [代码][代码]}[代码][代码]            [代码][代码]console.log([代码][代码]'监听WebSocket接受到服务器的消息事件。服务器返回的消息'[代码][代码], JSON.parse(onMessage.data))[代码][代码]            [代码][代码]var[代码] [代码]onMessage_data = JSON.parse(onMessage.data)[代码][代码]            [代码][代码]if[代码] [代码](onMessage_data.toName == that.data.wo && onMessage_data.name == that.data.ta) {[代码][代码]                [代码][代码]// addmsglist1(msg1.name, msg1.content)[代码][代码]                [代码][代码]that.data.allContentList.push({[代码][代码]                    [代码][代码]"id"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码]                    [代码][代码]"hx_id"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码]                    [代码][代码]"wo"[代码][代码]: that.data.ta,[代码][代码]                    [代码][代码]"ta"[代码][代码]: that.data.wo,[代码][代码]                    [代码][代码]"content"[代码][代码]: onMessage_data.content,[代码][代码]                    [代码][代码]"voice_url"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码]                    [代码][代码]"fileurl"[代码][代码]: [代码][代码]null[代码][代码],[代码][代码]                    [代码][代码]"create_date"[代码][代码]: [代码][代码]"2019-12-03"[代码][代码]                [代码][代码]});[代码][代码]                [代码][代码]that.setData({[代码][代码]                    [代码][代码]allContentList: that.data.allContentList[代码][代码]                [代码][代码]})[代码][代码]            [代码][代码]}[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]onShow: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]if[代码] [代码](!socketOpen) {[代码][代码]            [代码][代码]this[代码][代码].webSocket()[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]webSocket: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]const that = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]// 创建Socket[代码][代码]        [代码][代码]SocketTask = wx.connectSocket({[代码][代码]            [代码][代码]url: url,[代码][代码]            [代码][代码]data: [代码][代码]'data'[代码][代码],[代码][代码]            [代码][代码]header: {[代码][代码]                [代码][代码]'content-type'[代码][代码]: [代码][代码]'application/json'[代码][代码]            [代码][代码]},[代码][代码]            [代码][代码]method: [代码][代码]'post'[代码][代码],[代码][代码]            [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]                [代码][代码]console.log([代码][代码]'WebSocket连接创建'[代码][代码], res)[代码][代码]            [代码][代码]},[代码][代码]            [代码][代码]fail: [代码][代码]function[代码] [代码](err) {[代码][代码]                [代码][代码]wx.showToast({[代码][代码]                    [代码][代码]title: [代码][代码]'网络异常！'[代码][代码],[代码][代码]                [代码][代码]})[代码][代码]                [代码][代码]console.log(err)[代码][代码]            [代码][代码]},[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]onHide: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]SocketTask.close([代码][代码]function[代码] [代码](res) {[代码][代码]            [代码][代码]console.log(res);[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]onUnload: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]SocketTask.close([代码][代码]function[代码] [代码](res) {[代码][代码]            [代码][代码]console.log(res);[代码][代码]        [代码][代码]})[代码][代码]    [代码][代码]}[代码][代码]})[代码][图片] 能够建立起连接，但是后续方法都没用，监听SocketTask.onOpen方法，监听不到，SocketTask.onMessage方法也监听不到

navigateBack的用法 [代码] wx.navigateBack({ delta: backSize // backsize表示关闭几页，从页面栈中移除几个(包含本页面) }) [代码] 项目中的需求 「 需求 」：做一个公共结果页，从其他地方跳转到这个页面，最后点击"完成按钮或者右上角返回"后，回到想回到的页面，并且控制目标页面刷新还是不刷新。 「 分析 」：想实现回到想回到的页面，通过对页面栈的管理来实现。 「 举例 」：页面栈中有1-2-3-4-5，5是公用页面，现在想跳到1，那么就可以通过navigateBack的delta值等于4来控制回到1，我们就动态改变delta的值实现动态跳转，navigateBack会让页面出栈，这样就很好地维护了页面栈。 具体思路 通过getCurrentPages( )能够拿到当前小程序页面栈的数组，数组中有个key为route，该值即是栈里页面地址。要跳转到1，4传值给5，5中通过遍历页面栈数组，判断传过来的值是否等于页面栈中的route值，相等的话，记录index，这样即可完成。 最终效果 无论是触发了ios滑屏退出、android物理按钮返回、小程序左上角返回按钮，都会回到目标页面。 但是，经真机测试后发现。点击左上角返回、手机物理返回键、滑屏返回到目标页面，效果上会关闭两个页面。但最终也可以回到目标页面。只能说功能达到了，效果上没那么完美。这没办法。毕竟页面卸载的处理本身就是一个伪处理-_- 代码说话 这是项目中用到的公用页面，就是通过navigateBack来控制跳转 注释写得很清楚了 想要更清晰地了解页面栈是怎样的，就打断点看一看 有问题欢迎留言讨论😄 [代码]Page({ data: { isInvoke: false,// 是否调用过按钮 isUnload: true,// 是否是卸载的生命周期 resultImg: "", // 图标(页面内使用) result: { title: "",// 必传(页面标题) type: 1,// 必传(0:失败 1:成功) url: "", // 必传(跳转的url),传空或者不在页面栈中，跳转到首页或指定页面 // 选传(上面文案布局，成功默认是:成功,失败默认:失败) resultUp: "", // 选传(下面文案布局，不传默认是空 resultDown: "", // 选传(按钮名称,成功默认:完成,失败默认:重试) btnName: "", // 选传(是否刷新目标页，默认刷新) isRefresh: true, } }, /** 页面初始化 */ onLoad: function (options) { }, onShow: function () { this.initData(); }, /** 页面卸载*/ onUnload: function () { // 如果点击了按钮，就不再调用它 if (!this.data.isInvoke) { this.data.isUnload = true this.targetJump() } }, /** 初始化值 */ initData: function () { var result = wx.getStorageSync("result") if (result) { // 页面标题 wx.setNavigationBarTitle({ title: result.title }) var type = result.type this.data.result.url = result.url if (typeof (result.isRefresh) != "undefined") { this.data.result.isRefresh = result.isRefresh } if (type) { // 成功 result.btnName = result.btnName ? result.btnName : "完成" this.data.resultImg = "/resources/success.png" result.resultUp = result.resultUp ? result.resultUp : "成功" } else {// 失败 result.btnName = result.btnName ? result.btnName : "重试" this.data.resultImg = "/resources/failed.png" result.resultUp = result.resultUp ? result.resultUp : "失败" } var btnName = "result.btnName" var resultUp = "result.resultUp" var resultDown = "result.resultDown" this.setData({ resultImg: this.data.resultImg, [resultUp]: result.resultUp, [resultDown]: result.resultDown ? result.resultDown : "", [btnName]: result.btnName }) } }, /** 按钮点击事件 */ btnClick: function () { this.data.isInvoke = true this.data.isUnload = false this.targetJump(); }, /** 目标页面跳转 */ targetJump: function () { // 清除缓存 wx.removeStorageSync("result") var pages = getCurrentPages() // 如果url为空或者不在页面栈中，返回首页 var backSize = 100 var target console.log(pages) for (var i = 0；i &lt; pages.length；i++) { if (this.data.result.url.substring(1) == pages[i].route) { // 自身也在栈中，所以要-1 backSize = pages.length - i - 1; target = pages[i] console.log("target", target) break } } console.log("backSize", backSize) if (backSize == 100) {// 首页或者指定页面 wx.reLaunch({ url: this.data.result.url, }) return } if (this.data.result.isRefresh) { // 刷新目标页面 target.onLoad() } if (this.data.isUnload) {// 用户点击了返回键 // 如果目标页面在页面栈中倒数第二个位置，返回 if (backSize == 1) { return } // 如果只是调用了小程序返回键，因为back键默认会关掉一页 backSize = backSize - 1 } wx.navigateBack({ delta: backSize }) } }) [代码] 以上

- 需求的场景描述（希望解决的问题） [图片] 小程序是通过自定义tabBar实现底部按钮，但是三个按钮跳转的页面都是同一个，只是后缀参数不同，现在可以实现不同按钮跳转也能获取到对应的url， 但是跳转后不会执行onshow事件，也就是说页面不会刷新 - 希望提供的能力 希望大佬看看 ，或者有没有其他方式实现

微信小程序支付，后台获取预支付时，配置了支付回调，但是我测试支付成功后，自己的支付回调并不会调用

请问下 小程序支付回调的地址   有什么要求吗   还是需要再小程序后台配置？  现在小程序支付完了 根本不走我的回调。。。