uni-app實戰教程-創建項目/自定義ulistMedia代碼塊/模擬直達某頁面場景/富文本處理

一、創建基本項目並運行

網絡請求--模板語法--打開頁面--頁面傳參

（1）新建--》項目--》uni-app--》項目名稱--》默認模板--》創建

（2）從hello-uni項目中復制uni-app公共文件common放到新項目，包括components組件內容。app.vue引入公共樣式文件uni.css

（3）運行,報錯，uni.css引入有uni.ttf字體文件，需將hello-uni項目static下字體文件放到新項目同等目錄下。

HBuilderX開發工具實現自定義生成代碼塊功能：

uListMedia代碼塊為例：

工具--》代碼塊設置--》vue代碼塊，將設置代碼復制粘貼在vue.json文件內，保存即可。index.vue輸入uli彈出ulistMedia代碼塊

"uListMedia": {
            "body": [
                "<view class=\"uni-list\">",
                     "\t<view class=\"uni-list-cell\" hover-class=\"uni-list-cell-hover\" v-for=\"(item,index) in list\" :key=\"index\">",
                          "\t\t<view class=\"uni-media-list\">",
                              "\t\t\t<image class=\"uni-media-list-logo\" :src=\"item.img\"></image>",
                              "\t\t\t<view class=\"uni-media-list-body\">",
                                  "\t\t\t\t<view class=\"uni-media-list-text-top\">{{item.title}}</view>",
                                  "\t\t\t\t<view class=\"uni-media-list-text-bottom uni-ellipsis\">{{item.content}}</view>",
                              "\t\t\t</view>",
                          "\t\t</view>",
                     "\t</view>",
                 "</view>"
            ],
            "prefix": "ulistmedia",
            "project": "uni-app",
            "scope": "source.vue.html"
        }

二、啟動模式配置：用於模擬直達某頁面的場景，僅開發期間有效

（1）設置文件：pages.json

"condition": { //模式配置，僅開發期間生效
    "current": 0, //當前激活的模式（list 的索引項） 這里默認設置第一個頁面
    "list": [{
                "name": "test", //模式名稱
                "path": "pages/info/info", //啟動頁面，必選
                "query": "newsid=5158607" //啟動參數，在頁面的onLoad函數里面得到。
            }
        ]
}

（2）運行文件：設置成功之后，ctrl+r運行至直達頁面

 

 （3）改變編譯模式：微信開發工具手動改變編譯模式， App 里真機運行可直接打開配置的頁面

 

 

三、富文本支持html格式

使用rich-text將html string轉化為nodes數組

<rich-text class="richText" :nodes="strings"></rich-text>  //template


this.strings = res.data.content  //js

 

 四、其他

快捷方式：ureq--->request,

點擊事件：@tap="openinfo"

頁面傳參：

peninfo(e){
          var newsid = e.currentTarget.dataset.newsid 
          uni.navigateTo({
               url: '../info/info?newsid=' + newsid // ?字符串= +字符串

　　　　　　});
 }