uni-app学习笔记

1进官网下载HBuilderX  官网https://www.dcloud.io/hbuilderx.html

2，创建项目 （快速创建文件快捷键ctrl+n）

3、ctrl+r 运行项目

4、页面跳转有两种方法：

1）一种是标签

<navigator url="../info/info"></navigator>

2）js  通过点击事件

@ @tap="GoInfo"

uni.navigateTo({
url: '../info/info',
success: res => {}

});

跳转的页面要在pages.json里配置路径

 

5、传递每条新闻独有的id 或许新闻内容 （父页面）

:data-newsId = "item.post_id"  

js

var newsid = e.currentTarget.dataset.newsid  （取id）

uni.navigateTo({
url: '../info/info?newsid='+newsid,
success: res => {}

});

6、子页面根据id获取新闻内容

e.newsid

url: 'xxx/api/news/36kr/'+e.newsid,

7,、如果新闻内容后台给的是html页面

我们需要用<rich-text :nodes="strings"></rich-text>

nodes的参数有Array / String

8、新闻内容比较多 为了提高客户体验度可使用

  uni.showLoading （一进页面显示）

 uni.hideLoading(数据加载完成隐藏)

<template>
    <view class="content">
        <view class="title">
            {{title}}
        </view>
        <view class="artcle-content">
            <rich-text :nodes="strings"></rich-text>
        </view>
    </view>
</template>

data() {
            return {
                title:'',
                strings:''
            };
        },
        onLoad(e) {
            uni.showLoading({
                title: '数据加载中',
                mask: false
            });
            uni.request({
                url: 'xxx/api/news/36kr/'+e.newsid,
                method: 'GET',
                data: {},
                success: res => {
                    console.log(res)
                    this.title = res.data.title;
                    this.strings = res.data.content
                uni.hideLoading()
                },
            
            });
        }

9、如何安装插件

工具- 插件安装 - 选择需要的插件

2019-10-8

10、若不想要导航栏配置

 "navigationStyle":"custom",

    "path": "pages/new/new",
            "style": {
                "navigationStyle":"custom",
                "enablePullDownRefresh": true
            }

11，如何使用组件插件

将组建插件的代码复制到自己的项目中即可

12，轮播图