#16, 使用wx-web-view

studygolang · Mar 22, 2020 · fdc8d4f · fdc8d4f
1 parent 81e370f
commit fdc8d4f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 63 deletions.
diff --git a/src/article/Index.vue b/src/article/Index.vue
@@ -1,57 +1,34 @@
 <template>
   <div class="page_article">
-    <header class="header">
+    <!-- <header class="header">
         <h1 class="title">
             {{ article.title }}
         </h1>
         <p class="desc">
         </p>
-    </header>
-    <article class="content" v-html="article.content">
-    </article>
+    </header> -->
+    <wx-web-view :src="url"></wx-web-view>
+    <!-- <article class="content" v-html="article.content">
+    </article> -->
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import { articleDetail } from '../api/commont'
 
 export default Vue.extend({
   name: 'Article',
   data() {
     return {
       articleId: null,
-      article: {
-        author: {
-          avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
-          nickname: '昵称'
-        },
-        title: '什么是协程（goroutine），它们是怎样作的呢?',
-        description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
-        like: 6,
-        comments: 10,
-        id: 12,
-        cover: ''
-      }
+      url: 'https://studygolang.com/articles/'
     }
   },
   created() {
     // 页面创建时取到文章的ID
     this.articleId = this.$route.params.id
-    // 获取文章详情
-    this.getDetail(this.articleId)
-  },
-  methods: {
-    getDetail(id) {
-      articleDetail(id).then((res) => {
-        console.log(res)
-        if (res.code === 0) {
-          this.article = res.data.article
-        } else {
-          console.log(res.msg)
-        }
-      })
-    }
+    // 组装URL
+    this.url = this.url + this.articleId
   }
 })
 </script>

diff --git a/src/component/ListContent.vue b/src/component/ListContent.vue
@@ -9,22 +9,22 @@
         <div class="article_detail" @click="jumpToDetail('/article/' + item.id)">
           <div class="artclie_text_msg">
             <div class="article_author">
-              <img class="img"  :src="item.author.avatar" mode='widthFix' alt="" />
-              <div class="nickname">{{item.author.nickname}}</div>
+              <!-- <img class="img"  :src="item.author.avatar" mode='widthFix' alt="" /> -->
+              <div class="nickname">{{item.author}}</div>
             </div>
             <div class="article_title">{{item.title}}</div>
-            <div class="article_description">{{item.description}}</div>
+            <!-- <div class="article_description">{{item.description}}</div> -->
           </div>
           <img class="img_cover" v-if="item.cover" :src="item.cover" alt mode='widthFix' />
         </div>
         <div class="article_other">
           <div class="like">
             <img class="img" src="http://static.gocoder.top/like.png" alt="" mode="widthFix">
-            {{item.like}}
+            {{item.likenum}}
           </div>
           <div class="acticle_comments">
             <img class="img" src="http://static.gocoder.top/comment.png" style="" alt="" mode="widthFix" >
-            {{item.comments}}
+            {{item.cmtnum}}
           </div>
           <div class="acticle_share">
             <wx-button open-type="share" style="background:#fff">

diff --git a/src/home/Tabs/Index.vue b/src/home/Tabs/Index.vue
@@ -35,32 +35,7 @@ export default Vue.extend({
         { label: '付费', key: 'pay' }
       ],
       activeKey: 'newest',
-      actclieList: [
-        {
-          author: {
-            avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
-            nickname: '昵称'
-          },
-          title: '什么是协程（goroutine），它们是怎样作的呢?,什么是协程（goroutine），它们是怎样作的呢?',
-          description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
-          like: 6,
-          comments: 10,
-          id: 12,
-          cover: ''
-        },
-        {
-          author: {
-            avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
-            nickname: '昵称'
-          },
-          title: '什么是协程（goroutine），它们是怎样作的呢?什么是协程（goroutine），它们是怎样作的呢?什么是协程（goroutine），它们是怎样作的呢?',
-          description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
-          like: 6,
-          comments: 10,
-          id: 13,
-          cover: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg'
-        }
-      ]
+      actclieList: []
     }
   },
   components: {
@@ -74,7 +49,8 @@ export default Vue.extend({
   },
   created() {
     getArticles(1).then((res) => {
-      console.log(res)
+      // console.log(res)
+      this.actclieList = res.data.articles
     })
   }
 })