小程序加入分包和组件

micro-app/app.json

@@ -1,13 +1,21 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
     "pages/logs/logs",
     "pages/example/example"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "subPackages": [
+    {
+      "root": "packageMore",
+      "pages": [
+        "pages/conclude/conclude"
+      ]
+    }
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "WeChat",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle": "black"
   }
-}
+}

micro-app/components/week/week.js

@@ -0,0 +1,26 @@
+// components/week/week.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    dateArray: {
+      type: Array,
+      value: []
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    privateData: {}
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

micro-app/components/week/week.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

micro-app/components/week/week.wxml

@@ -0,0 +1,6 @@
+<!--components/week/week.wxml-->
+<view class="date-container">
+  <div wx:for="{{dateArray}}" class="date-item">
+    <text class="date-num">week组件{{item.dateNum}}</text>
+  </div>
+</view>

micro-app/components/week/week.wxss

@@ -0,0 +1,15 @@
+/* components/week/week.wxss */
+.date-container {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.date-item {
+  flex: 1;
+  text-align: center;
+}
+.date-num {
+  color: forestgreen
+}

micro-app/packageMore/pages/conclude/conclude.js

@@ -0,0 +1,66 @@
+// packageMore/pages/conclude.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log('page conclude in packageMore is loaded')
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

micro-app/packageMore/pages/conclude/conclude.json

@@ -0,0 +1 @@
+{}

micro-app/packageMore/pages/conclude/conclude.wxml

@@ -0,0 +1,2 @@
+<!--packageMore/pages/conclude.wxml-->
+<text>packageMore/pages/conclude.wxml</text>

micro-app/packageMore/pages/conclude/conclude.wxss

@@ -0,0 +1 @@
+/* packageMore/pages/conclude.wxss */

micro-app/pages/example/example.js

@@ -1,7 +1,13 @@
 const app = getApp()
 Page({
   data: {
-
+    dateArray: []
+  },
+  onLoad: function () {
+    console.log('example page loaded');
+    this.setData({
+      dateArray: [{ dateNum: 1 }, { dateNum: 2 }, { dateNum: 3 }]
+    })
   },
   showShareMenu: function (e) {
     wx.showShareMenu({
@@ -43,4 +49,9 @@ Page({
   listenSwiper(e) {
     console.log('change swipe')
   },
+  goToConcludePage() {
+    wx.navigateTo({
+      url: '/packageMore/pages/conclude/conclude',
+    })
+  }
 })

micro-app/pages/example/example.json

@@ -1 +1,5 @@
-{}
+{
+  "usingComponents": {
+    "custom-week": "/components/week/week"
+  }
+}

micro-app/pages/example/example.wxml

@@ -27,4 +27,8 @@
     <cover-view class="place_info_order">66666</cover-view>
     </cover-view>
   </map>
+  <view><button bindtap='goToConcludePage'>跳转到另外一个包</button></view>
+  <view>
+    <custom-week dateArray="{{dateArray}}"></custom-week>
+  </view>
 </scroll-view>

micro-app/pages/index/index.js

@@ -16,6 +16,7 @@ Page({
     })
   },
   onLoad: function () {
+    console.log('index page loaded');
     if (app.globalData.userInfo) {
       this.setData({
         userInfo: app.globalData.userInfo,

micro-app/pages/index/index.wxml

@@ -13,4 +13,5 @@
   <view class='examples'>
     <button bindtap='goToExampleList'>示例demos</button>
   </view>
+  <div><p style="color: #f00">hello world</p></div>
 </view>

micro-app/pages/logs/logs.js

@@ -6,6 +6,7 @@ Page({
     logs: []
   },
   onLoad: function () {
+    console.log('log page loaded');
     this.setData({
       logs: (wx.getStorageSync('logs') || []).map(log => {
         return util.formatTime(new Date(log))

webpack4/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

webpack4/README.md

@@ -0,0 +1,22 @@
+# vue2
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

webpack4/build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

webpack4/build/check-versions.js

@@ -0,0 +1,49 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

webpack4/build/dev-client.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+'use strict'
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})