|
ic-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
|