在開發(fā)過程中，可能需要監(jiān)聽 app 的生命周期，這就需要開發(fā)者自定義 app.js。

　　1、用法

　　1.1 修改 webpack 配置

　　首先需要在 webpack 配置中補上 app.js 的構建入口，比如下面代碼的 miniprogram-app 入口：

　　// webpack.mp.config.js

　　module.exports = {

　　entry: {

　　'miniprogram-app': path.resolve(__dirname, '../src/app.js'),

　　page1: path.resolve(__dirname, '../src/page1/main.mp.js'),

　　page2: path.resolve(__dirname, '../src/page2/main.mp.js'),

　　},

　　// ... other options

　　}

　　1.2 修改 webpack 插件配置

　　在 webpack 配置補完入口，還需要在 mp-webpack-plugin 這個插件的配置中補充說明，不然 kbone 會將 miniprgram-app 入口作為頁面處理。

　　module.exports = {

　　generate: {

　　appEntry: 'miniprogram-app',

　　},

　　// ... other options

　　}

　　如上，將 webpack 構建中的入口名稱設置在插件配置的 generate.app 字段上，那么構建時 kbone 會將這個入口的構建作為 app.js 處理。

　　1.3 補充 src/app.js

　　// 自定義 app.wxss

　　import './app.css'

　　App({

　　onLaunch(options) {},

　　onShow(options) {

　　// 獲取當前頁面實例

　　const pages = getCurrentPages() || []

　　const currentPage = pages[pages.length - 1]

　　// 獲取當前頁面的 window 對象和 document 對象

　　if (currentPage) {

　　console.log(currentPage.window)

　　console.log(currentPage.document)

　　}

　　},

　　onHide() {},

　　onError(err) {},

　　onPageNotFound(options) {},

　　})

　　PS：app.js 不屬于任何頁面，所以沒有真正的 window 和 document 對象，所有依賴這兩個對象實現的代碼在這里無法被直接使用。

　　2、案例

　　在 kbone-advanced 目錄下創(chuàng)建 06-custom-app.js-app.css 目錄，本案例在這個目錄下完成。

　　2.1 創(chuàng)建 package.json

　　cd 06-custom-app.js-app.css

　　npm init -y

　　編輯 package.json：

　　{

　　"scripts": {

　　"mp": "cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules"

　　},

　　"dependencies": {

　　"add": "^2.0.6",

　　"vue": "^2.5.11"

　　},

　　"browserslist": [

　　"> 1%",

　　"last 2 versions",

　　"not ie <= 8"

　　],

　　"devDependencies": {

　　"babel-core": "^6.26.0",

　　"babel-loader": "^7.1.2",

　　"babel-preset-env": "^1.6.0",

　　"babel-preset-stage-3": "^6.24.1",

　　"cross-env": "^5.0.5",

　　"css-loader": "^0.28.7",

　　"extract-text-webpack-plugin": "^3.0.2",

　　"file-loader": "^1.1.4",

　　"html-webpack-plugin": "^4.0.0-beta.5",

　　"mini-css-extract-plugin": "^0.5.0",

　　"optimize-css-assets-webpack-plugin": "^5.0.1",

　　"stylehacks": "^4.0.3",

　　"vue-loader": "^15.7.0",

　　"vue-template-compiler": "^2.6.10",

　　"webpack": "^4.29.6",

　　"webpack-cli": "^3.2.3",

　　"mp-webpack-plugin": "latest"

　　}

　　}

　　安裝依賴包：

　　npm install

　　2.2 配置 webpack

　　在 06-custom-app.js-app.css/build 目錄下創(chuàng)建 webpack.mp.config.js，內容如下：

　　const path = require('path')

　　const webpack = require('webpack')

　　const MiniCssExtractPlugin = require('mini-css-extract-plugin')

　　const { VueLoaderPlugin } = require('vue-loader')

　　const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

　　const TerserPlugin = require('terser-webpack-plugin')

　　const MpPlugin = require('mp-webpack-plugin') // 用于構建小程序代碼的 webpack 插件

　　const isOptimize = false // 是否壓縮業(yè)務代碼，開發(fā)者工具可能無法完美支持業(yè)務代碼使用到的 es 特性，建議自己做代碼壓縮

　　module.exports = {

　　mode: 'production',

　　entry: {

　　'miniprogram-app': path.resolve(__dirname, '../src/app.js'),

　　page1: path.resolve(__dirname, '../src/page1/main.mp.js')

　　},

　　output: {

　　path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代碼目錄中的 common 目錄下

　　filename: '[name].js', // 必需字段，不能修改

　　library: 'createApp', // 必需字段，不能修改

　　libraryExport: 'default', // 必需字段，不能修改

　　libraryTarget: 'window', // 必需字段，不能修改

　　},

　　target: 'web', // 必需字段，不能修改

　　optimization: {

　　runtimeChunk: false, // 必需字段，不能修改

　　splitChunks: { // 代碼分隔配置，不建議修改

　　chunks: 'all',

　　minSize: 1000,

　　maxSize: 0,

　　minChunks: 1,

　　maxAsyncRequests: 100,

　　maxInitialRequests: 100,

　　automaticNameDelimiter: '~',

　　name: true,

　　cacheGroups: {

　　vendors: {

　　test: /[\\/]node_modules[\\/]/,

　　priority: -10

　　},

　　default: {

　　minChunks: 2,

　　priority: -20,

　　reuseExistingChunk: true

　　}

　　}

　　},

　　minimizer: isOptimize ? [

　　// 壓縮CSS

　　new OptimizeCSSAssetsPlugin({

　　assetNameRegExp: /\.(css|wxss)$/g,

　　cssProcessor: require('cssnano'),

　　cssProcessorPluginOptions: {

　　preset: ['default', {

　　discardComments: {

　　removeAll: true,

　　},

　　minifySelectors: false, // 因為 wxss 編譯器不支持 .some>:first-child 這樣格式的代碼，所以暫時禁掉這個

　　}],

　　},

　　canPrint: false

　　}),

　　// 壓縮 js

　　new TerserPlugin({

　　test: /\.js(\?.*)?$/i,

　　parallel: true,

　　})

　　] : [],

　　},

　　module: {

　　rules: [

　　{

　　test: /\.css$/,

　　use: [

　　MiniCssExtractPlugin.loader,

　　'css-loader'

　　],

　　},

　　{

　　test: /\.vue$/,

　　loader: [

　　'vue-loader',

　　],

　　},

　　{

　　test: /\.js$/,

　　use: [

　　'babel-loader'

　　],

　　exclude: /node_modules/

　　},

　　{

　　test: /\.(png|jpg|gif|svg)$/,

　　loader: 'file-loader',

　　options: {

　　name: '[name].[ext]?[hash]'

　　}

　　}

　　]

　　},

　　resolve: {

　　extensions: ['*', '.js', '.vue', '.json']

　　},

　　plugins: [

　　new webpack.DefinePlugin({

　　'process.env.isMiniprogram': process.env.isMiniprogram, // 注入環(huán)境變量，用于業(yè)務代碼判斷

　　}),

　　new MiniCssExtractPlugin({

　　filename: '[name].wxss',

　　}),

　　new VueLoaderPlugin(),

　　new MpPlugin(require('./miniprogram.config.js')),

　　],

　　}

　　在 06-custom-app.js-app.css/build 目錄下創(chuàng)建 miniprogram.config.js，內容如下：

　　module.exports = {

　　origin: 'https://test.miniprogram.com',

　　entry: '/',

　　router: {

　　page1: ['/a']

　　},

　　redirect: {

　　notFound: 'page1',

　　accessDenied: 'page1',

　　},

　　generate: {

　　appEntry: 'miniprogram-app',

　　// 構建完成后是否自動安裝小程序依賴。'npm'：使用 npm 自動安裝依賴

　　autoBuildNpm: 'npm'

　　},

　　runtime: {

　　cookieStore: 'memory',

　　},

　　app: {

　　navigationBarTitleText: 'miniprogram-project',

　　},

　　global: {

　　share: true,

　　},

　　pages: {

　　page1: {

　　extra: {

　　navigationBarTitleText: 'page1',

　　},

　　},

　　},

　　projectConfig: {

　　appid: '',

　　projectname: 'custom-app.js-app.css',

　　},

　　packageConfig: {

　　author: 'wechat-miniprogram',

　　},

　　}

　　2.3 創(chuàng)建 app.js 相關文件

　　在 /src/ 下創(chuàng)建 app.js 文件，內容如下：

　　import add from 'add'

　　import {printf} from './common/utils.js'

　　import './app.css'

　　App({

　　onLaunch(options) {

　　printf('I am app.js --> ' + add([1, 2]))

　　console.log('App.onLaunch --> ', options)

　　},

　　onShow(options) {

　　console.log('App.onShow --> ', options)

　　const pages = getCurrentPages() || []

　　const currentPage = pages[pages.length - 1]

　　if (currentPage) console.log('currentPage --> ', currentPage.pageId)

　　},

　　onHide() {

　　console.log('App.onHide --> ')

　　const pages = getCurrentPages() || []

　　const currentPage = pages[pages.length - 1]

　　if (currentPage) console.log('currentPage --> ', currentPage.pageId)

　　},

　　onError(err) {

　　console.log('App.onError --> ', err)

　　},

　　onPageNotFound(options) {

　　console.log('App.onPageNotFound --> ', options)

　　},

　　})

　　在 /src/ 下創(chuàng)建 app.css 文件，內容如下：

　　.header {

　　color: #888;

　　}

　　在 /src/common 下創(chuàng)建 utils.js 文件，內容如下：

　　export function printf(str) {

　　console.log('common/utils.js --> ', str)

　　}

　　2.4 創(chuàng)建 page1 相關文件

　　在 /src/page1 下創(chuàng)建 main.mp.js 文件，內容如下：

　　import Vue from 'vue'

　　import App from './App.vue'

　　export default function createApp() {

　　const container = document.createElement('div')

　　container.id = 'app'

　　document.body.appendChild(container)

　　return new Vue({

　　el: '#app',

　　render: h => h(App)

　　})

　　}

　　在 /src/page1 下創(chuàng)建 App.vue 文件，內容如下：

<template>

  <div class="cnt">

    自定義app.js, app.css。

  </div>

</template>

　　2.5 小程序端效果預覽

　　npm run mp