mpVue记录2——写一个小demo

1.删掉src文件夹下，components & pages & utils下的所有文件，在pages下创建index文件夹，添加index.vue & main.js文件，目录结构如下

捕获.PNG

2.在src下的app.json中写入(配置小程序的app.json)

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "第一个小程序",
    "navigationBarTextStyle": "black"
  }
}

3.在src下的App.vue中写入（配置onload）

4.在src下的main.js中写入（配置模块，创建实例）

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

至此，初始值配置完毕，下面写入页面

5.在src下的pages下的index.vue中写入

main.js中写入

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

export default {
  config: {
    // 注意，页面级可配置属性相当于只是`src/main.js`中配置里的`window`部分
    'navigationBarTitleText': '文章列表页面'
  }
}

运行 npm run build，可以在微信开发者工具中同步效果