1.前言
1.写着写着发现一篇文章太长了,那就分开2篇文章吧
2. 自定义组件
uni_moduls 里面
以常见的新闻为例
3. 一步一步操作 组件内编写组件
模板就是 h1 标题 div 内容
<template> <view class=""> <h1>{{title}}</h1> <div>{{content}}</div> </view> </template> <script> export default{ props:{ title:{ type:String, default:"" }, content:{ type:String, default:"" } }, data(){ return{ } } }
4. 使用 引入 ,组件配置
pages/index/index.vue
引入
import yzsNews from '@/uni_modules/yzs-news/components/yzs-news/yzs-news.vue'
使用
<yzs-news title="消防演练" content="生命第一"></yzs-news>
5. 组件内事件传递
<h1 @tap="tap1">{{title}}</h1>
方法
methods:{ tap1(){ console.log("调用了") this.$emit("changeTitle",this.title) }}
$emitvue的用法
6. 父组件
使用
<yzs-news title="消防演练" content="生命第一" @changeTitle="change" ></yzs-news>
实现方法
methods: { change(e){ // e就是传的参数 console.log("tap-父:",e) } },
7.请求
onLoad() { uni.showLoading({ title:"加载中..." }) uni.request({ url: 'https://unidemo.dcloud.net.cn/api/news', method: 'GET', data: {}, success: res => { console.log("res:",res) this.newsList = res.data }, fail: () => {}, complete: () => { uni.hideLoading() } }); },
8.模板结构
书接上文 安装过 这个
uni-list插件这里没有用云服务,所以用最简单的插件来讲解
<uni-list> <uni-list-item v-for="(item, index) in newsList" :key="item.id" :title="item.title" :note="item.summary" :thumb="item.author_avatar" thumb-size="lg" :rightText="item.author_name" ></uni-list-item> </uni-list>
9. 跳转方式
跳转2种方式 一种是 标签
<navigator url=""></navigator>
一种是js 逻辑
按钮
<button type="default" @tap="goToDetail" data-newsid="sss">跳转</button>
传参 通过
data-xx其实
uni-app就是vue的语法 小程序的API所以这种写法就很熟悉
跳转逻辑
goToDetail(e){ console.log("e2",e.currentTarget) let {newsid} = e.currentTarget.dataset uni.navigateTo({ url: '../detail/detail?newsid='+newsid }); }
当然详情页肯定需要自己新建的
直接在
pages右键 新建页面就行
10.具体到我这个项目
你发现标签不好使
用js跳转但是传值麻烦
<uni-list-item v-for="(item, index) in newsList" :key="item.id" :title="item.title" :note="item.summary" :thumb="item.author_avatar" thumb-size="lg" :rightText="item.author_name" clickable link :to="'/pages/detail/detail?newsid='+item.post_id" ></uni-list-item>
1.这个第三方的组件需要设置
clickable熟悉为true才可以触发点击事件2.这个参数不能通过
data-xx的形式传递3.
link会自带一些样式,也可以设置跳转方式
11.获取路由传参值
不管哪种方式,获取参数都一样
我这里
detail.vue
onLoad(e) { console.log("详情页",e) }
根据传过来的
id发请求
uni.request({ url: 'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newsid, method: 'GET', data: {}, success: res => { let {title,content} = res.data console.log("详情res:",res) this.title = title this.content = content }, fail: () => {}, complete: () => {} });
12.rich-text
返回的报文有 标签结构 不能用
view来展示
rich-text组件 属性nodes,值 为数组或者字符串
<template> <view> <view class=""> {{title}} </view> <!-- 节点 --> <rich-text :nodes="content"></rich-text> </view> </template>
这个2个接口平常也可以玩
