kbone開發熱更新后小程序刷新到首頁問題

使用 kbone 開發小程序，默認會有熱更新，且熱更新自動刷新后去了首頁，雖然目前 微信開發者工具有“添加編譯模式”的功能，但是每次熱更新后還是跳轉到了首頁。

那么為什么微信開發者工具的這個“添加編譯模式”的功能沒用呢？

 

 

主要原因是，我們小程序里面添加的目錄是 kbone 運行 npm run mp 命令行打包出來的 build/mp 文件夾。

當我們使用微信開發者工具的這個“添加編譯模式”的功能添加了一種編譯模式后，開發者工具會在 build/mp/project.config.js 配置文件中新增剛才添加配置，配置結構如下：

{
　　 ....
    "condition": {
        ...
        "miniprogram": {
            "list": [
                {
                    "id": -1,
                    "name": "typelist",
                    "pathName": "pages/typelist/index",
                    "query": "id=123412",
                    "scene": null
                },
                {
                    "id": -1,
                    "name": "pages/typelist/index",
                    "pathName": "pages/typelist/index",
                    "query": "id=123412",
                    "scene": null
                }
            ]
        }
        ...
    }
　　 ...
}

然而，當我們每次修改代碼，webpack 進行熱更新的時候，/build/mp 文件夾里面的文件都會重新生成，那么之前 微信開發者工具修改的 project.config.js 文件配置代碼自然就不在了。

對於這種情況，那我們是否可以在 webpack 打包之前就把 project.config.js 文件里面的 miniprogram 配置復制出來，然后在打包的時候再寫進去呢？

答案肯定是可以的，

 

接下來我們就對 miniprogram.config.js 配置文件進行修改：

miniprogram.config.js 修改前代碼：

module.exports = {
    ...
    projectConfig: {
        projectname: 'kbone-template-react',
        appid: '',
        ...
    }
    ...
}

　　

minigrogram.config.js 修改后代碼：

const fs = require('fs')
const path = require('path')
let mpFilePath = path.resolve(__dirname, '../build/mp/project.config.json')
let condition = {
  //   miniprogram: {
  //     current: -1,
  //     list: [
  //       {
  //         id: -1,
  //         name: 'pages/typelist/index',
  //         pathName: 'pages/typelist/index',
  //         query: 'id=1234',
  //         scene: null
  //       }
  //     ]
  //   }
}
let mp = fs.existsSync(mpFilePath);
if (mp) {
	console.log('文件建存在' + mp)
	// var data = fs.readFileSync(mpFilePath, 'utf8');
	// if (data) {
	const projectConfig = require(mpFilePath)
	// console.log('projectConfig', projectConfig)
	if (projectConfig.condition && projectConfig.condition.miniprogram) {
		condition = {
		    miniprogram: JSON.stringify(projectConfig.condition.miniprogram)
		}
	}
// }
} else {
	console.log(mpFilePath + '文件不存在')
}

module.exports = {
    ...
    projectConfig: {
        projectname: 'kbone-template-react',
        appid: '',
        condition: condition,
        ...
    }
    ...
}

　　注： 紅色的是新增或改動的代碼

 

 

 

miniprogram.config.js文件完整代碼：

/**
 * 配置參考：https://wechat-miniprogram.github.io/kbone/docs/config/
 */
const fs = require('fs')
const path = require('path')
let mpFilePath = path.resolve(__dirname, '../build/mp/project.config.json')
let condition = {
  //   miniprogram: {
  //     current: -1,
  //     list: [
  //       {
  //         id: -1,
  //         name: 'pages/typelist/index',
  //         pathName: 'pages/typelist/index',
  //         query: 'id=1234',
  //         scene: null
  //       }
  //     ]
  //   }
}
let mp = fs.existsSync(mpFilePath);
if (mp) {
	console.log('文件建存在' + mp)
	// var data = fs.readFileSync(mpFilePath, 'utf8');
	// if (data) {
	const projectConfig = require(mpFilePath)
	// console.log('projectConfig', projectConfig)
	if (projectConfig.condition && projectConfig.condition.miniprogram) {
		console.log(
		'projectConfig.condition.miniprogram',
		projectConfig.condition.miniprogram
		)
		condition = {
		miniprogram: JSON.stringify(projectConfig.condition.miniprogram)
		}
	}
// }
} else {
	console.log(mpFilePath + '文件不存在')
}

console.log('condition=======', JSON.stringify(condition))

module.exports = {
  origin: 'https://test.miniprogram.com',
  entry: '/test/aaa',
  router: {
    index: ['/test/aaa', '/test/bbb'],
    log: ['/test/aaa', '/test/bbb']
  },
  redirect: {
    notFound: 'index',
    accessDenied: 'index'
  },
  generate: {
    autoBuildNpm: 'npm'
  },
  app: {
    navigationBarTitleText: 'miniprogram-project'
  },
  appExtraConfig: {
    sitemapLocation: 'sitemap.json'
  },
  global: {},
  pages: {},
  optimization: {
    domSubTreeLevel: 10,

    elementMultiplexing: true,
    textMultiplexing: true,
    commentMultiplexing: true,
    domExtendMultiplexing: true,

    styleValueReduce: 5000,
    attrValueReduce: 5000
  },
  projectConfig: {
    projectname: 'kbone-template-react',
    appid: 'wx87063785d539c655',
    // 微信開發者工具，配置不是必須的
    condition: condition
  }
}