說明
結束連續幾天的加班,最近的專案終於告一段落,今天抽點時間開始繼續寫我這篇拖了很久的《用weexplus從0到1寫一個app》系列文章。寫這篇文章的時候,weexplus的作者已經把weexplus重構了一下，可以同時打包出web端和native端，我這邊的ui介面和專案結構也跟著做了一點變化。這裡有weexplus官方放出的一個電影APP的demo，有需要的可以去下載看看，然後順便給weexplus一個star吧！
文章可能會很長，在此分幾篇文章來寫，先佔個坑：
- 用weexplus從0到1寫一個app(1)-環境搭建和首頁編寫
- 用weexplus從0到1寫一個app(2)-引數跳轉和文章列表及文章詳情、搜尋頁面的編寫
- 用weexplus從0到1寫一個app(3)-視訊列表和視訊詳情的編寫
開始寫程式碼
頁面跳轉和接收引數
在第一篇的文章《環境搭建和首頁編寫》中已經寫好了首頁的程式碼,現在要從首頁的某個文章跳轉到文章詳情應該怎麼做呢?在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介面：
下面拆解一下介面佈局:
文章列表介面
可以從分解圖中看到文章列表大體上分為三個部分：文章標題，文章封面，文章釋出時間。下面廢話少說，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（縮放圖片以完全裝入區域，可能背景區部分空白）、cover（縮放圖片以完全覆蓋
區域，可能圖片部分看不見）、stretch（預設值. 按照
區域的寬高比例縮放圖片）。具體表現樣式參見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開發出來的吉他自學小助手小程式版已經上線喜歡彈吉他的小夥伴可以關注一波 minapp.com/miniapp/832…
更多
更多前端技術分享請關注我的部落格:hurely.github.io