<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)

          2018-5-23    seo達人

          如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

          1.把wxParse文件全部放入項目。

          2.在wxml中import wxParse.wxml,并把template插入到到對應(yīng)的位置上

          [html] view plain copy
          1. <!--wxml-->  
          2. <import src="../../../wxParse/wxParse.wxml"/>  
          3. <view class="view-title">{{title}}</view>  
          4. <view class="view-time-box">  
          5.   <text class="view-date">{{date}}</text>  
          6.   <text class="view-time">{{time}}</text>  
          7. </view>  
          8. <template is="wxParse" data="{{wxParseData:article.nodes}}"/>  

          3.在wxss中import wxParse.wxss,并設(shè)置樣式;比如‘wxParse-image’是富文本圖片轉(zhuǎn)化成image組件之后的類名,‘wxParse-p’是p標(biāo)簽轉(zhuǎn)化成view組件后設(shè)置的類名

          [css] view plain copy
          1. <!--wxss-->  
          2. @import "../../../wxParse/wxParse.wxss";  
          3. page{  
          4.   background#fff;  
          5. }  
          6. .view-title{  
          7.   line-height80rpx;  
          8.   font-size48rpx;  
          9.   color:#0C0C0C;  
          10.   overflowhidden;  
          11.   text-overflow: ellipsis;  
          12.   display: -webkit-box;  
          13.   -webkit-line-clamp: 2;  
          14.   -webkit-box-orient: vertical;  
          15.   max-height190rpx;  
          16.   min-height80rpx;  
          17.   width:690rpx;  
          18.   padding:30rpx 30rpx 0;  
          19. }  
          20. .view-time-box{  
          21.   height66rpx;  
          22.   line-height66rpx;  
          23.   font-size30rpx;  
          24.   color:#999999;  
          25.   margin-bottom40rpx;  
          26.   padding:0 30rpx;  
          27. }  
          28. .view-date{  
          29.   margin-right20rpx;  
          30. }  
          31. .wxParse-img{  
          32.   margin-top:20rpx;  
          33.   displayblock;  
          34.   position:relative;  
          35.   top:0;  
          36.   left:50%;  
          37.   transform: translateX(-50%);  
          38. }  
          39. .wxParse-p{  
          40.   text-indent2em;  
          41.   margin-top:20rpx;  
          42.   color:#0C0C0C;  
          43.   line-height:50rpx;  
          44.   font-size:34rpx;  
          45.   padding:0 30rpx 30rpx;  
          46.   text-alignjustify;  
          47. }  

          4.js

          [javascript] view plain copy
          1. var WxParse = require('../../../wxParse/wxParse.js');  
          2. Page({  
          3.   
          4.   /** 
          5.    * 頁面的初始數(shù)據(jù) 
          6.    */  
          7.   data: {  
          8.     title: '',  
          9.     date: "",  
          10.     time: "",  
          11.     id: ''  
          12.   },  
          13.   
          14.   /** 
          15.    * 生命周期函數(shù)--監(jiān)聽頁面加載 
          16.    */  
          17.   onLoad: function (options) {  
          18.     this.setData({  
          19.       id:options.id  
          20.     })  
          21.   },  
          22.   onShow: function () {  
          23.     wx.showLoading({  
          24.       title: '加載中...',  
          25.     })  
          26.     var that = this;  
          27.   
          28.     // 模擬獲取數(shù)據(jù)  
          29.     setTimeout(function () {  
          30.       that.setData({  
          31.         title:'僑寶柑普茶新會陳皮僑寶柑',  
          32.         date:"2018-03-01",  
          33.         time:"13:20:53"  
          34.       })  
          35.       var article = `  
          36.         <img src="../../../imgs/index/s.png"></img>  
          37.     <p>微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)</p>  
          38.     <p>微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)</p>  
          39.         <img src="../../../imgs/index/s.png"></img>  
          40.     <p>近兩年,小青柑的火爆有目共睹,嬌小玲瓏的產(chǎn)品形態(tài)、便攜式的消費場景、柑與茶結(jié)合的時尚方式以及獨特的口感和養(yǎng)生功效,都在順應(yīng)著目前年輕化、多元化、便攜化的茶葉消費市場需求,讓它成為了一大爆品。</p>  
          41.       `;  
          42.       /** 
          43.       * WxParse.wxParse(bindName , type, data, target,imagePadding) 
          44.       * 1.bindName綁定的數(shù)據(jù)名(必填) 
          45.       * 2.type可以為html或者md(必填) 
          46.       * 3.data為傳入的具體數(shù)據(jù)(必填) 
          47.       * 4.target為Page對象,一般為this(必填) 
          48.       * 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選) 
          49.       */  
          50.       WxParse.wxParse('article''html', article, that, 20);  
          51.         
          52.       // 更改數(shù)據(jù)、獲取新數(shù)據(jù)完成  
          53.       wx.hideLoading();  
          54.     }, 500)  
          55.   }  
          56. })  
          具體的API可以去GitHub上查看:https://github.com/icindy/wxParse








          藍藍設(shè)計www.sdgs6788.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://www.sdgs6788.com

          存檔

          国内高清久久久久久| 久久人人爽人人人人片av| 亚洲精品乱码久久久久久中文字幕| 久久精品国产久精国产| 久久精品国产99久久久| 99精品久久精品一区二区| 亚洲国产一成久久精品国产成人综合| 亚洲va国产va天堂va久久| 久久无码中文字幕东京热| 少妇无套内谢久久久久| 久久久黄色大片| 久久久久久久久波多野高潮| 亚州日韩精品专区久久久| 亚洲国产综合久久天堂| 亚洲精品国产第一综合99久久| 久久精品国产国产精品四凭| 免费一级欧美大片久久网| 久久久久亚洲av成人无码电影| 久久影视综合亚洲| 久久综合久久伊人| 99久久99久久精品国产片果冻| 久久精品亚洲精品国产色婷| 97久久精品无码一区二区| 久久久国产精品福利免费 | 久久播电影网| 亚洲精品午夜国产VA久久成人| 久久综合给合久久狠狠狠97色| 色婷婷综合久久久久中文| 成人妇女免费播放久久久| 欧美久久综合性欧美| 国内精品久久久久国产盗摄| 国产精品成人久久久| 色妞色综合久久夜夜| 69SEX久久精品国产麻豆| 久久最近最新中文字幕大全| 国内精品久久久久久久亚洲 | 亚洲欧美成人久久综合中文网| 中文字幕无码av激情不卡久久| 日韩精品久久久肉伦网站| 久久精品成人免费看| 伊人久久大香线蕉综合5g|