結束連續幾天的加班,最近的項目終於告一段落,今天抽點時間開始繼續寫我這篇拖了好久的《用weexplus從0到1寫一個app》系列文章。寫這篇文章的時候,weexplus的做者已經把weexplus重構了一下,能夠同時打包出web端和native端,我這邊的ui界面和項目結構也跟着作了一點變化。這裏有weexplus官方放出的一個電影APP的demo,有須要的能夠去下載看看,而後順便給weexplus一個star吧!css
文章可能會很長,在此分幾篇文章來寫,先佔個坑:html
在第一篇的文章《環境搭建和首頁編寫》中已經寫好了首頁的代碼,如今要從首頁的某個文章跳轉到文章詳情應該怎麼作呢?在vue裏咱們知道是用vue-router來跳轉,weexplus中也給咱們封裝好了相似的導航控制器navigator
。具體使用請看navigtor模塊文檔前端
主要用後面這段navigator.pushParam('跳轉路徑String','傳遞的參數Object')
,若是不須要傳參數直接用navigator.push('跳轉路徑String')
就行了。如下爲示例代碼:vue
//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界面:git
下面拆解一下界面佈局:github
能夠從分解圖中看到文章列表大致上分爲三個部分:文章標題,文章封面,文章發佈時間。下面廢話少說,show my coding!web
"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文章,在這裏就不貼代碼了。vue-router
//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>
在這裏須要注意幾個點:apache
<text></text>
標籤包住才能給到樣式不然無效,而且<text></text>
標籤不能多層嵌套;<img/>
有個resize
屬性默認是stretch會按照圖片區域的寬高比例縮放圖片可能圖片會變形,這裏有三個屬性分別是contain(縮放圖片以徹底裝入一樣能夠從分解圖中看到文章詳情大致上分爲兩個個部分:文章標題,文章內容(富文本)小程序
"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>
在這裏須要注意幾個點:
基於同一套ui開發出來的吉他自學小助手小程序版已經上線喜歡彈吉他的小夥伴能夠關注一波 https://minapp.com/miniapp/8327/
更多前端技術分享請關注個人博客:https://hurely.github.io