用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写

说明

结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的《用weexplus从0到1写一个app》系列文章。写这篇文章的时候,weexplus的作者已经把weexplus重构了一下,可以同时打包出web端和native端,我这边的ui界面和项目结构也跟着做了一点变化。这里有weexplus官方放出的一个电影APP的demo,有需要的可以去下载看看,然后顺便给weexplus一个star吧!

新版UI展示

文章可能会很长,在此分几篇文章来写,先占个坑:

开始写代码

页面跳转和接收参数

在第一篇的文章《环境搭建和首页编写》中已经写好了首页的代码,现在要从首页的某个文章跳转到文章详情应该怎么做呢?在vue里我们知道是用vue-router来跳转,weexplus中也给我们封装好了类似的导航控制器navigator。具体使用请看navigtor模块文档

  • 页面传参数跳转

主要用后面这段navigator.pushParam('跳转路径String','传递的参数Object'),如果不需要传参数直接用navigator.push('跳转路径String')就好了。以下为示例代码:

//commponet/home/news.vue省略n多代码
const navigator = weex.requireModule("navigator");//先引入navigator模块
gotonews(item) {
    if (item.category) {
        if (item.category.name == "专题") {
            //navigator传参数跳转页面
            navigator.pushParam(
              "root:/busi/news/list.js", {
                cid: item.id,
                from: "zhuanti"
              }
            );
          }
          if (item.category.name != "专题") {
            navigator.pushParam("root:/busi/news/detail.js", {
              id: item.id
            });
          }
        } else {
          navigator.pushParam("root:/busi/news/detail.js", {
            id: item
        });
    }
},
  • 接收参数
//busi/news/detail.vue省略n多代码
const navigator = weex.requireModule("navigator");//先引入navigator模块
created(options) {
    const globalEvent = weex.requireModule("globalEvent");
    globalEvent.addEventListener("onPageInit", () => {
        const query = navigator.param();//接收上一个页面传递的参数
        this.query = query;
    });
},

文章列表和文章详情

先来看文章列表和文章详情的UI界面:

文章列表和文章详情的UI界面

下面拆解一下界面布局:

文章列表和文章详情的UI界面

文章列表界面

可以从分解图中看到文章列表大体上分为三个部分:文章标题,文章封面,文章发布时间。下面废话少说,show my coding!

文章列表数据结构
"article_list": [
    {
        "id": "7019",//文章id
        "title": "Super Star吉他谱_S.H.E_弹唱谱扫弦版",//文章标题
        "haslitpic": 1,
        "pic": {
            "src": "/180203/21562a414_lit.jpg",
            "url": "/180203/21562a414_lit.jpg"
        },//文章封面
        "description": "Super Star吉他谱,扫弦版编配",//文章简介
        "pubdate": "2018-02-03 21:55:23",//文章发布时间
        "category": {
            "name": "图片谱"//文章分类
        },
    }]

列表布局代码

weex默认是flex布局,css方面就很简单了,对flex不熟悉的推荐看一下阮一峰的flex文章,在这里就不贴代码了。

//component/news-item.vue省略n多代码
<template>
  <div class="news-items">
    <div v-if="type==1" class="item-box" @click="gotonews(item.id)" v-for="(item,index) in newsItems" :key="index">
      <div class="item-left">
        <text class="left-text">{{item.title}}</text>
        <div class="left-line"></div>
        <text class="left-time" v-if="item.category && item.category.name && item.category">{{item.category.name}}</text>
        <text class="left-time" v-else>{{item.pubdate}}</text>
      </div>
      <div class="item-right">
        <img :src="item.pic.src" mode="aspectFill" class="litpic">
      </div>
    </div>
    <div class="item-box2" v-if="type==2" @click="gotonews(item.id)">
      <img :src="item.pic.src" mode="aspectFill" class="litpic2" />
      <!-- <img src="../../static/assets/nav1.png" mode="aspectFill" class="litpic2"> -->
      <text class="box2-text">{{item.title}}</text>
    </div>
  </div>
</template>

<script>
  const navigator = weex.requireModule("navigator");
  
  export default {
    name: 'news-item',
    props: {
      item: {
        pic: {
          default: ''
        },
        title: {
          default: ''
        },
        publishTime: {
          default: ''
        },
      },
      type: {
        default: 1
      },
      newsItems: {
        type: Array,
        default: []
      }
    },
    methods: {
      gotonews(item) {
        //省略代码
      },
    }
  }
</script>

<style lang="less" scoped>
</style>

在这里需要注意几个点:

  • 一个是在weex中文字必须被<text></text>标签包住才能给到样式否则无效,并且<text></text>标签不能多层嵌套;
  • 另外图片标签<img/>有个resize属性默认是stretch会按照图片区域的宽高比例缩放图片可能图片会变形,这里有三个属性分别是contain(缩放图片以完全装入<image>区域,可能背景区部分空白)、cover(缩放图片以完全覆盖<image>区域,可能图片部分看不见)、stretch(默认值. 按照<image>区域的宽高比例缩放图片)。具体表现样式参见weex文档image组件

文章详情界面

同样可以从分解图中看到文章详情大体上分为两个个部分:文章标题,文章内容(富文本)

文章列表数据结构
"article": {
    "id": 7019,//文章id
    "cid": "2",//分类id
    "title": "Super Star吉他谱_S.H.E_弹唱谱扫弦版",//文章标题
    "author": "爱尚吉他",
    "haspic": 1,
    "pic": {
        "url": "/21562a414_lit.jpg"//封面
    },
    "keywords": "Super,Star,吉他,S.H.E,弹唱,谱扫,弦版",//关键词
    "description": "Super Star吉他谱,扫弦版编配",//描述
    "pubdate": "2018-02-03 21:55:23",
    "postime": "1517666123",
    "good": "0",
    "bad": "0",
    "favorite": "0",
    "comments": 0,
    "body": "Super ",//文章详情(富文本)
}
详情布局代码
//busi/news/detail.vue省略n多代码
<template>
  <div class="app" style="background-color: #fff">
    <my-header title="文章详情" @rightClick="refresh">
      <image slot="right" src="root:img/assets/refresh.png" style="width:40px;height:40px;position:absolute;right:30px;bottom:30px;"/>
    </my-header>
    <scroller>
      <div class="publish">
        <text class="title">{{item.title==''?'爱尚吉他':item.title}}</text>
        <div class="sub">
          <text class="author theme-font">{{item.author}}</text>
          <text class="line">|</text>
          <text class="pubdate">{{item.pubdate}}</text>
        </div>
      </div>
      <div class="content-box">
        <rich-text :content="item.body"></rich-text>
      </div>
      <div class="border-b-5"></div>
      <title-item v-if="aboutItems.length>0" title="相关阅读"></title-item>
      <news-item v-if="aboutItems.length>0" :newsItems="aboutItems"></news-item>
      <title-item title="推荐谱单" url="root:busi/topic/list.js?type=2"></title-item>
      <topic-item showLength="4" type="2"></topic-item>
      <homeSinger-item></homeSinger-item>
      <back-item v-if="show"></back-item>
    </scroller>
  </div>
</template>

<script>
  import myHeader from "../../component/header.vue";//头部组件
  import titleItem from "../../component/title-item.vue";//标题组件
  import newsItem from "../../component/news-item.vue";
  import backItem from "../../component/back-item.vue";
  import richText from "../../component/rich-text.vue";//富文本
  import topicItem from "../../component/vtopic-item.vue";
  import homeSingerItem from "../../component/home/singer.vue";//歌手列表组件

  const navigator = weex.requireModule("navigator");
  const modal = weex.requireModule("modal");
  
  import apis from "./../util/api";
  import {
    htmlTOJson
  } from "./../util/util";//解析富文本
  import request from "./../util/request";//数据请求封装
  
  export default {
    components: {
      titleItem,
      newsItem,
      backItem,
      richText,
      myHeader,
      topicItem,
      homeSingerItem
    },
    data() {
      return {
        item: {
          body: [{
              type: "icon",
              src: ""
            },
            {
              type: "text",
              value: "",
              theme: "yellow"
            }
          ],
          title: "",
          pubdate: "",
          pic: "",
          author: "",
          normalBody: ""
        },
        show: false,
        aboutItems: [],
        query: {}
      };
    },
    created(options) {
      const globalEvent = weex.requireModule("globalEvent");
      globalEvent.addEventListener("onPageInit", () => {
        const query = navigator.param();//拿到传递的参数
        this.query = query;
        this.refresh();
      });
    },
    methods: {
      refresh(){
        this.loadData(this.query.id);
      },
      loadData(id) {
        //请求初始数据
        const that = this;
        let arr = [];
        let data = request.get(apis.articleDetails, {
          id: id
        }).then(data => {
          //数据组装
        });
      },
      gotonews(id) {
        // console.log(id);
        navigator.pushParam("./detail.js", {
          id: id
        });
        // this.loadData(id);
      },
      share() {}
    }
  };
</script>

<style src="../../css/style.css"></style>

<style scoped></style>

在这里需要注意几个点:

  • weex目前对富文本支持不太友好,官方是有个richtext组件,但是需要前端自己重新解析富文本内容为指定的格式,具体参见richtext文档,对这一块目前我这边也没有完美的解决方案,这里只有几个思路:1.按照官方的按照richtext组件需要的数据结构前端自己解析;2.写一个H5页面显示富文本,任何用webview嵌入;3.接口返回数据按照richtext组件需要的数据结构处理好数据。

一点私货

基于同一套ui开发出来的吉他自学小助手小程序版已经上线喜欢弹吉他的小伙伴可以关注一波 https://minapp.com/miniapp/8327/

更多

更多前端技术分享请关注我的博客:https://hurely.github.io

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容