1.前言

1.写着写着发现一篇文章太长了,那就分开2篇文章吧

---

2. 自定义组件

uni_moduls 里面
以常见的新闻为例

1.png

---

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)
         }}

$emit vue的用法

---

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个接口平常也可以玩

---

参考资料

uni-app轻松入门-1
uni-app官网

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉