Merge pull request #14 from studygolang/isColt

fix #13, 增加主页内容页面

build/miniprogram.config.js

@@ -22,6 +22,9 @@ module.exports = {
         doc: [
             '/doc/index',
         ],
+        article: [
+            '/article/:id',
+        ],
     },
     redirect: {
         notFound: 'home',

build/webpack.mp.config.js

@@ -21,6 +21,7 @@ module.exports = {
     other: path.resolve(__dirname, '../src/mp/other/main.mp.js'),
     me: path.resolve(__dirname, '../src/mp/me/main.mp.js'),
     doc: path.resolve(__dirname, '../src/mp/doc/main.mp.js'),
+    article: path.resolve(__dirname, '../src/mp/article/main.mp.js'),
   },
   output: {
     path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代码目录中的 common 目录下

src/article/Index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="cnt">
+    <div>
+      首页文章内容页 id = {{this.$route.params.id}} <br>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'Article',
+})
+</script>
+<style lang="less">
+
+</style>

src/component/ListContent.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="listContent">
-    <div v-for="(item, index) in list" :key="index" class="article_list">
+    <div
+    v-for="(item, index) in list"
+    :key="index"
+    class="article_list"
+    @click="jumpToDetail('/article/' + item.id)">
       <div class="article_list_item">
         <div class="article_detail">
           <div>
@@ -18,8 +22,8 @@
           <img :src="item.cover" alt="">
         </div>
         <div class="article_other">
-          <div class="acticle_goods">
-            {{item.goods}}
+          <div class="like">
+            {{item.like}}
           </div>
           <div class="acticle_comments">
             {{item.comments}}
@@ -42,6 +46,11 @@ export default Vue.extend({
     return {
     }
   },
+  methods: {
+    jumpToDetail(url) {
+      window.location.href = url
+    },
+  },
   props: ['list'],
 })
 

src/home/Index.vue

@@ -62,7 +62,7 @@ export default Vue.extend({
         title: '测试文章1的标题',
         description: '测试文章1的描述',
         cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
-        goods: 6,
+        like: 6,
         comments: 6,
       }, {
         id: 2,
@@ -74,7 +74,7 @@ export default Vue.extend({
         title: '测试文章2的标题',
         description: '测试文章2的描述',
         cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
-        goods: 16,
+        like: 16,
         comments: 26,
       }]
     }

src/mp/article/main.mp.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import { sync } from 'vuex-router-sync'
+import App from '../../App.vue'
+import store from '../../store'
+import Article from '../../article/Index.vue'
+
+Vue.use(Router)
+
+const router = new Router({
+  mode: 'history',
+  routes: [{
+    path: '/article/:id',
+    name: 'Article',
+    component: Article,
+  }],
+})
+
+export default function createApp() {
+  const container = document.createElement('div')
+  container.id = 'app'
+  document.body.appendChild(container)
+
+  Vue.config.productionTip = false
+
+  sync(store, router)
+
+  return new Vue({
+    el: '#app',
+    router,
+    store,
+    render: h => h(App)
+  })
+}

src/router/index.js

@@ -5,6 +5,7 @@ const Home = () => import(/* webpackChunkName: "Home" */'@/home/Index.vue')
 const List = () => import(/* webpackChunkName: "List" */'@/list/Index.vue')
 const Detail = () => import(/* webpackChunkName: "Detail" */'@/detail/Index.vue')
 const Doc = () => import(/* webpackChunkName: "Doc" */'@/doc/Index.vue')
+const Article = () => import(/* webpackChunkName: "Article" */'@/article/Index.vue')
 Vue.use(Router)
 
 export default new Router({
@@ -33,5 +34,9 @@ export default new Router({
     path: '/doc/index',
     name: 'Doc',
     component: Doc,
+  }, {
+    path: '/article/:id',
+    name: 'Article',
+    component: Article,
   }],
 })