页面体验

.env.development

@@ -1 +1 @@
-VUE_APP_TEST=我是development模式的环境变量
+VUE_APP_BASE_URL=https://zhuoka.izouma.com

.env.production

@@ -1 +1 @@
-VUE_APP_TEST=我是production模式的环境变量
+VUE_APP_BASE_URL=https://zhuoka.izouma.com

src/App.vue

@@ -1,38 +1,39 @@
 <script>
 export default {
   onLaunch(options) {
-    // wx.login({
-    //   success: res => {
-    //     console.log(res);
-    //     this.$http
-    //       .post("/auth/maLogin", { code: res.code })
-    //       .then(res => {
-    //         this.$http.setToken(res.token);
-    //         this.$store.commit("setSessionKey", res.sessionKey);
-    //         this.$store
-    //           .dispatch("getUserInfo")
-    //           .then(() => {
-    //             this.globalData.initialize = true;
-    //             console.log(this.globalData);
-    //             if (this.globalData.initializeCallback) {
-    //               this.globalData.initializeCallback();
-    //             }
-    //           })
-    //           .catch(() => {
-    //             this.globalData.initialize = true;
-    //           });
-    //       })
-    //       .catch(e => {
-    //         console.log(e);
-    //       });
-    //   }
-    // });
+    wx.login({
+      success: res => {
+        console.log(res);
+        this.$http
+          .post("/auth/maLogin", { code: res.code })
+          .then(res => {
+            this.$http.setToken(res.token);
+            // this.$store.commit("setSessionKey", res.sessionKey);
+            this.$store
+              .dispatch("getUserInfo")
+              .then(() => {
+                this.globalData.initialize = true;
+                console.log(this.globalData);
+                if (this.globalData.initializeCallback) {
+                  this.globalData.initializeCallback();
+                }
+              })
+              .catch(() => {
+                this.globalData.initialize = true;
+              });
+          })
+          .catch(e => {
+            console.log(e);
+          });
+      }
+    });
     // wx.getSystemInfo({
     //   success: res => {
     //     console.log(res);
     //     this.$store.commit("setSystemInfo", res);
     //   }
     // });
+
     // Do something initial when launch.
   },
   onShow(options) {

src/components/HelloWorld.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="hello">
-    <h1 :style="'color:' + color">{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    color: String,
-    msg: {
-      default: "Welcome to Megalo"
-    }
-  },
-  data() {
-    return {};
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.hello {
-  font-size: 16px;
-  text-align: center;
-}
-</style>

src/components/add.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>1111</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="less" scoped></style>

src/main.js

@@ -2,7 +2,7 @@ import App from "./App";
 import Vue from "vue";
 import VHtmlPlugin from "@megalo/vhtml-plugin";
 import Vuex from "vuex";
-// import http from "./plugins/http";
+import http from "./plugins/http";
 // import Dialog from "./vant/dialog/dialog";
 import common from "./mixins/common";
 import "./styles/font.less";
@@ -18,7 +18,7 @@ Vue.use(Vuex);
 
 const store = require("./store").default;
 Vue.prototype.$store = store;
-// Vue.use(http);
+Vue.use(http);
 const app = new Vue(App);
 Vue.mixin(common);
 app.$mount();
@@ -26,20 +26,20 @@ app.$mount();
 export default {
   config: {
     // pages 的首个页面会被编译成首页
-    pages: ["pages/hello", "pages/my/my", "pages/vuex/vuex", "pages/Home"],
+    pages: ["pages/news", "pages/vuex/vuex", "pages/Home"],
     tabBar: {
       color: "#333",
       selectedColor: "#007d37",
       list: [
         {
-          pagePath: "pages/hello",
+          pagePath: "pages/Home",
           text: "home",
           iconPath: "native/tabbar/home.png",
           selectedIconPath: "native/tabbar/home_on.png"
         },
         {
-          pagePath: "pages/my/my",
-          text: "my",
+          pagePath: "pages/news",
+          text: "news",
           iconPath: "native/tabbar/mine.png",
           selectedIconPath: "native/tabbar/mine_on.png"
         },
@@ -51,6 +51,39 @@ export default {
         }
       ]
     },
+    usingComponents: {
+      "van-image": "/vant/image/index",
+      "van-button": "/vant/button/index",
+      "van-tabs": "/vant/tabs/index",
+      "van-tab": "/vant/tab/index",
+      "van-notice-bar": "/vant/notice-bar/index",
+      "van-icon": "/vant/icon/index",
+      "van-grid-item ": "/vant/grid-item/index",
+      "van-count-down": "/vant/count-down/index",
+      "van-dialog": "/vant/dialog/index",
+      "van-search": "/vant/search/index",
+      "van-empty": "/vant/empty/index",
+      "van-sticky": "/vant/sticky/index",
+      "van-loading": "/vant/loading/index",
+      "van-action-sheet": "/vant/action-sheet/index",
+      "van-picker": "/vant/picker/index",
+      "van-cell-group": "/vant/cell-group/index",
+      "van-cell": "/vant/cell/index",
+      "van-field": "/vant/field/index",
+      "van-uploader": "/vant/uploader/index",
+      "van-checkbox": "/vant/checkbox/index",
+      "van-panel": "/vant/panel/index",
+      "van-overlay": "/vant/overlay/index",
+      "van-stepper": "/vant/stepper/index",
+      "van-steps": "/vant/steps/index",
+      "van-rate": "/vant/rate/index",
+      "van-popup": "/vant/popup/index",
+      "van-area": "/vant/area/index",
+      "van-goods-action": "vant/goods-action/index",
+      "van-goods-action-icon": "vant/goods-action-icon/index",
+      "van-goods-action-button": "vant/goods-action-button/index",
+      "van-calendar": "vant/calendar/index"
+    },
     window: {
       backgroundTextStyle: "light",
       navigationBarBackgroundColor: "#fff",

src/pages/Home.vue

@@ -1,13 +1,29 @@
 <config>
 {
-    "navigationBarTitleText": "常见问题",
+    "navigationBarTitleText": "首页",
     "backgroundColor":"#F5F7FA"
 }
 </config>
 <template>
-  <div>111</div>
+  <div class="con">
+    <van-button type="primary">朴素按钮</van-button>
+    <van-image
+      width="10rem"
+      height="10rem"
+      fit="contain"
+      src="https://img.yzcdn.cn/vant/cat.jpeg"
+    />
+    <add></add>
+  </div>
 </template>
 <script>
-export default {};
+import add from "../components/add.vue";
+export default {
+  components: { add }
+};
 </script>
-<style lang="less"></style>
+<style lang="less">
+.con {
+  background: @success;
+}
+</style>

src/pages/hello.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="app">
-    <img
-      class="img"
-      src="../static/imgs/megalo_logo.png"
-      @touchstart="changeStat"
-    />
-    <hello-world :color="color"></hello-world>
-    <!-- <h1 class="txt" v-show="t%2==1">click logo::{{t}}</h1> -->
-    <div>111</div>
-  </div>
-</template>
-
-<script>
-import HelloWorld from "@/components/HelloWorld.vue";
-export default {
-  components: {
-    HelloWorld
-  },
-  data() {
-    return {
-      t: 1,
-      color: "#007d37"
-    };
-  },
-  beforeCreate() {
-    console.log("Page [hello] Vue beforeCreate");
-  },
-  created() {
-    console.log("Page [hello] Vue created");
-    var appInstance = getApp();
-    console.log(appInstance.globalData); // I am global data
-  },
-  beforeMount() {
-    console.log("Page [hello] Vue beforeMount");
-  },
-  mounted() {
-    console.log("Page [hello] Vue mounted");
-  },
-  onLoad(options) {
-    // Do some initialize when page load.
-    console.log("Page [hello] onLoad");
-  },
-  onReady() {
-    // Do something when page ready.
-    console.log("Page [hello] onReady");
-  },
-  onShow() {
-    // Do something when page show.
-    console.log("Page [hello] onShow");
-  },
-  onHide() {
-    // Do something when page hide.
-    console.log("Page [hello] onHide");
-  },
-  onUnload() {
-    // Do something when page close.
-    console.log("Page [hello] onUnload");
-  },
-  /**
-   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
-   */
-  methods: {
-    changeStat() {
-      this.t++;
-      this.color = "#" + Math.floor(Math.random() * 0xffffff).toString(16);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.app {
-  padding-top: 100px;
-  .img {
-    display: block;
-    height: 120px;
-    width: 138px;
-    margin: 20px auto;
-  }
-  .txt {
-    color: #567567;
-    font-size: 13px;
-    text-align: center;
-  }
-}
-</style>

src/pages/my/my.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="app">
-    <img class="img" :src="logo" @touchstart="changeStat" />
-    <hello-world :msg="acc" :color="color"></hello-world>
-  </div>
-</template>
-
-<script>
-import HelloWorld from "@/components/HelloWorld.vue";
-export default {
-  components: {
-    HelloWorld
-  },
-  data() {
-    return {
-      logo:
-        "https://user-images.githubusercontent.com/20720117/48262986-80e02780-e45f-11e8-8426-2872916adad9.png",
-      color: "#007d37",
-      acc: "hello bigMeow"
-    };
-  },
-  beforeCreate() {
-    console.log("Page [my] Vue beforeCreate");
-  },
-  created() {
-    console.log("Page [my] Vue created");
-    var appInstance = getApp();
-    console.log(appInstance.globalData); // I am global data
-  },
-  beforeMount() {
-    console.log("Page [my] Vue beforeMount");
-  },
-  mounted() {
-    console.log("Page [my] Vue mounted");
-  },
-  onLoad(options) {
-    // Do some initialize when page load.
-    console.log("Page [my] onLoad");
-  },
-  onReady() {
-    // Do something when page ready.
-    console.log("Page [my] onReady");
-  },
-  onShow() {
-    // Do something when page show.
-    console.log("Page [my] onShow");
-  },
-  onHide() {
-    // Do something when page hide.
-    console.log("Page [my] onHide");
-  },
-  onUnload() {
-    // Do something when page close.
-    console.log("Page [my] onUnload");
-  },
-  /**
-   * for other event handlers, please check https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
-   */
-  methods: {
-    changeStat() {
-      this.t++;
-      this.color = "#" + Math.floor(Math.random() * 0xffffff).toString(16);
-    }
-  }
-};
-</script>
-
-<style lang="less">
-.app {
-  padding-top: 100px;
-  .img {
-    display: block;
-    height: 120px;
-    width: 138px;
-    margin: 20px auto;
-  }
-  .txt {
-    color: #567567;
-    font-size: 13px;
-    text-align: center;
-  }
-}
-</style>

src/pages/news.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {};
+</script>
+<style lang="less"></style>

src/store/counter.js

@@ -1,53 +0,0 @@
-// root state object.
-// each Vuex instance is just a single state tree.
-const state = {
-  count: 0
-};
-
-// mutations are operations that actually mutates the state.
-// each mutation handler gets the entire state tree as the
-// first argument, followed by additional payload arguments.
-// mutations must be synchronous and can be recorded by plugins
-// for debugging purposes.
-const mutations = {
-  increment(state) {
-    state.count++;
-  },
-  decrement(state) {
-    state.count--;
-  }
-};
-
-// actions are functions that cause side effects and can involve
-// asynchronous operations.
-const actions = {
-  increment: ({ commit }) => commit("increment"),
-  decrement: ({ commit }) => commit("decrement"),
-  incrementIfOdd({ commit, state }) {
-    if ((state.count + 1) % 2 === 0) {
-      commit("increment");
-    }
-  },
-  incrementAsync({ commit }) {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        commit("increment");
-        resolve();
-      }, 1000);
-    });
-  }
-};
-
-// getters are functions
-const getters = {
-  evenOrOdd: state => (state.count % 2 === 0 ? "even" : "odd")
-};
-
-// A Vuex instance is created by combining the state, mutations, actions,
-// and getters.
-export default {
-  state,
-  getters,
-  actions,
-  mutations
-};

src/store/index.js

@@ -1,8 +1,60 @@
 import Vuex from "vuex";
-import counter from "./counter";
-
+import http from "../plugins/http";
 export default new Vuex.Store({
-  modules: {
-    counter
+  state: {
+    sessionKey: "",
+    safeArea: {
+      top: 0,
+      botton: 0
+    },
+    systemInfo: {
+      statusBarHeight: 44
+    },
+    userInfo: null,
+    userStoreInfo: null
+  },
+  mutations: {
+    setUserInfo(state, userInfo) {
+      state.userInfo = userInfo;
+    },
+    setSessionKey(state, sessionKey) {
+      state.sessionKey = sessionKey;
+    },
+    setSystemInfo(state, systemInfo) {
+      state.systemInfo = systemInfo;
+    },
+    setUserStoreInfo(state, userStoreInfo) {
+      state.userStoreInfo = userStoreInfo;
+    }
+  },
+  actions: {
+    getUserInfo(context) {
+      return http.http.get("/user/my").then(res => {
+        if (res.sex || res.nickname.indexOf("用户") === -1) {
+          context.commit("setUserInfo", res);
+        } else {
+          context.commit("setUserInfo", null);
+        }
+
+        return Promise.resolve(res);
+      });
+    }
+    // getUserStore(context) {
+    //   return http.http
+    //     .postJson("/store/all", {
+    //       query: {
+    //         userId: context.state.userInfo.id
+    //       }
+    //     })
+    //     .then(res => {
+    //       if (res.empty) {
+    //         context.commit("setUserStoreInfo", null);
+    //         return Promise.reject();
+    //       } else {
+    //         context.commit("setUserStoreInfo", res.content[0]);
+    //         return Promise.resolve(res.content[0]);
+    //       }
+    //     });
+    // }
   }
 });

src/store/vuex.js

@@ -1,60 +0,0 @@
-// import Vuex from "vuex";
-// import http from "../plugins/http";
-// export default new Vuex.Store({
-//   state: {
-//     sessionKey: "",
-//     safeArea: {
-//       top: 0,
-//       botton: 0
-//     },
-//     systemInfo: {
-//       statusBarHeight: 44
-//     },
-//     userInfo: null,
-//     userStoreInfo: null
-//   },
-//   mutations: {
-//     setUserInfo(state, userInfo) {
-//       state.userInfo = userInfo;
-//     },
-//     setSessionKey(state, sessionKey) {
-//       state.sessionKey = sessionKey;
-//     },
-//     setSystemInfo(state, systemInfo) {
-//       state.systemInfo = systemInfo;
-//     },
-//     setUserStoreInfo(state, userStoreInfo) {
-//       state.userStoreInfo = userStoreInfo;
-//     }
-//   },
-//   actions: {
-//     getUserInfo(context) {
-//       return http.http.get("/user/my").then(res => {
-//         if (res.sex || res.nickname.indexOf("用户") === -1) {
-//           context.commit("setUserInfo", res);
-//         } else {
-//           context.commit("setUserInfo", null);
-//         }
-
-//         return Promise.resolve(res);
-//       });
-//     },
-//     getUserStore(context) {
-//       return http.http
-//         .postJson("/store/all", {
-//           query: {
-//             userId: context.state.userInfo.id
-//           }
-//         })
-//         .then(res => {
-//           if (res.empty) {
-//             context.commit("setUserStoreInfo", null);
-//             return Promise.reject();
-//           } else {
-//             context.commit("setUserStoreInfo", res.content[0]);
-//             return Promise.resolve(res.content[0]);
-//           }
-//         });
-//     }
-//   }
-// });