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，輪播圖