微信小程序獲取rich-text（富文本）渲染內容高度，rich-text（富文本）裏img 樣式設置

原創 hangGe0111 2020-06-24 04:02

1.背景：

在某些場景下，例如在某些詳細信息內容展示數據量特別大的時候（有時候特別小），當數據量特別大的時候，需要做展示固定高度，展開更多內容完全展示，收起內容又還原。當內容特別少的時候，例如小於3行，不展示更多按鈕。（小程序內容獲取的時候是不能知道當前內容有幾行的，可能有人會說，我知道字體大小一行內放幾個字，幾行就再乘以幾，讓後臺算好，傳兩個字段，展開收起，分別用兩個字段即可，理論上是可行的（但太麻煩，如果有圖片有文字呢，這種思路就歇菜了））。其實前端在渲染的時候也不知道有幾行，但可以獲取內容高度，通過內容高度進行比較即可。

2.代碼

2.1wxml

<view class="richText {{more_flag?'':'h1980hidden'}} {{more_flag?'pb100':(sjFlag==1?'pb68':'')}}">
	<view class="richText-rich" id="richText-rich">
		<rich-text nodes="{{rich}}"></rich-text>
	</view>
	<view class="richText-sj" wx:if='{{sjFlag}}'>
		<!-- on -->
		<view class="richText-msg {{more_flag?'on':''}}" catchtap="click_more"></view>
	</view>
</view>

2.2wxss

.richText {
  position: relative;
  margin-top: 30rpx;
}

.pb68 {
  padding-bottom: 68rpx;
}

.richText-sj {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr4AAABuCAYAAADBJhBzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRjIzMzAzODUyQjExRUFBQzI1RjQ2MUNGNUUzNkMzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRjIzMzA0ODUyQjExRUFBQzI1RjQ2MUNGNUUzNkMzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGMjMzMDE4NTJCMTFFQUFDMjVGNDYxQ0Y1RTM2QzMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGMjMzMDI4NTJCMTFFQUFDMjVGNDYxQ0Y1RTM2QzMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4hEh1+AAAQEklEQVR42uzd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);
  background-size: 100% 110rpx;
  background-position: center;
  background-repeat: no-repeat;
  height: 110rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.richText-msg {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAAfCAMAAADEKUFYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTI2OTQxN0E4NTJEMTFFQUI1MjdDREYyMTM5MkYwRDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTI2OTQxN0I4NTJEMTFFQUI1MjdDREYyMTM5MkYwRDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MjY5NDE3ODg1MkQxMUVBQjUyN0NERjIxMzkyRjBEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MjY5NDE3OTg1MkQxMUVBQjUyN0NERjIxMzkyRjBEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjt2qiYAAADDUExURf/27//u3//Ln/9+EP+pYP/lz/+PMP+GIP/Cj//Ur/+ycP+gUP/9/P99Dv+II//w4/92Av96Cf94Bf/69f/8+f+taP+mWv+RM/+AFP+EG//bvf+fTf/s2/+pYf/hx/+2eP/y5//hyP/JnP+7gv/p1v/Pp//dwP/n0v/Vsf+hUf+fTv+LKP+DGv+NLP+BF/+0df+YQf93BP+cSP+nXf/HmP/OpP+aRP/Cjv/t3f+0dP/m0P/06v+YQP+6f//cv/91AP///w4JD5MAAABBdFJOU/////////////////////////////////////////////////////////////////////////////////////8AMFXsxwAABL9JREFUeNrEmWeD3CgMhsHY4JLdlEtPrvfeO0b8/191ophiY8aebHJ8yA4zBvRg6ZUgRN9JI/TM052i1y5EyXX2pR0FUH8aH1Cl7xvGutoibW6chHnv0Qagqcwkgf+PmET45WXWRv8zh3wX9jGRsso5wP4OvX1M3QFYJsiaXIYxYM32563JSNm2AP2+BSMwegeYNSMqmHoGMC9sTpoMmJpy944uYI5IqXVr/92zV1R+fDPMJlhuLAidHFjAuCGXcRme+mLZacnk+XDLOKkEL31zTJU0Gqwqtjlz9U4tk5GGbDAN5wXMToSdQBSWbGKXBTyAKIT/HcTmGCbFd8JDp1mN6sW0GLnF1GSoS9CconUMY53sOFkx/N++BC2jUIYGp6ttAbNs7jKbwlcpE2ck5qUtG0N9vKSBP6O2mz/NO8dELkZslx7GdE/SaStHPb5QmS7GYEjtrufXIuYYfTJ6fXcaE2WoN0LZZhJEXaCTkpoI+0BrnG+zHDWSkIC2MOVKtKNSv3z9ePXNe398S3Y1Rp3HVLjBNCQ2jzln03FbELlNnJw4I6Vo9NYAPYg0hapMYuVuXnkGr+7llD/BM48p51U7jynXe+QxGyePKhQKg8mfymyITbWaipnoEqYZm6WsSEZ3E7i+fwtPU87Hr+D7f8mO8sVpKjLnngmYPGq+WsVmmI6YEoDY7ux8dtks13p8gf5jLWO2ldr2rxfwJPbufQO3H+m7xFT54C2mMkliYNx1WSl77tdZRsJlrC2Hfb357Dn8GCifwu19fQAzLRiSvY66chwTPRZjret8dyDnMFVQV1nPl90NfOo/vg8vXusjmMdj8yKmEc+J7M5+CRM1y8lbX3vItA8eeu16Aj+81u8a0xxMrY5ciWnOe2gwZXCpxnv5CD7BP3/D8y91gllX2pBEoxFYZ24w23xwUYI6TkuYtBQWtHTek6Y85hfvEL76+cHn+kO4+UenmPW8GToq/XQwocQZaHLQ8Z+aWNHunw02B9LqVYVvvz949CvcfJxWQc1caPQkJk6C1SwiCD94g6n2K++jmBevF2L7DeDhF8Wadq8dwrSKr7AnC+dNM46Et8lCkDSnYtMVCSCOXXv9+d3LrKbtRLJaN7gsLs9jYp2nK5gT2SSGkxLkTi75YfR46d5ae7gtvXzlqDKXOYg5GRV1mDMf1phtyOjG1JZcg4m1IjRDdhg9jNm5mX1W4U6sR19wnsBsbVZzmBLWmDwULihAePBi82lMgiON+pibJaHOYsrlJMGT0xHi8lOY5iZnsD0cTxhuUo65OKqxdbSFglCnMAmGNEwkKJbsTmH2sTQl7rw6+BQ1RyP7dVbrc0w6Ms9BnUqyLDa7QNkIf69lXe84pl0g3Cdg2jaOf/yNEsqW841fQPrV53ggKNftGSYD3gWfBHMtS5LCs3GpjhhI1seLPFsr1O56HAhtDBWb04A0h1GQR28Q0BhGlnQwu4JRLJWVjJElV42vnLZZLdjmic96mE2ObczH6BHiCKYdJ/q16jTcsB+7zSQdVzoRSuNggnr/UvsFbjFvrtL4Wk0pYy3NhdNlL7XbyDKu6J9qyi5Ojl150fVX8QZxe5ND4rGXqKMxsr3vuXLc6f8g+0+AAQBjNnVdi/eSkAAAAABJRU5ErkJggg==);
  background-size: 100% 31rpx;
  background-position: center;
  background-repeat: no-repeat;
  width: 230rpx;
  height: 40rpx;
  margin: 70rpx auto 0;
}

.richText-msg.on {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAfCAMAAAAm2ZhkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjE5MjhDRkY4NTJEMTFFQUE1RjRDOEY0QjhCNDI2Q0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjE5MjhEMDA4NTJEMTFFQUE1RjRDOEY0QjhCNDI2Q0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTkyOENGRDg1MkQxMUVBQTVGNEM4RjRCOEI0MjZDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MTkyOENGRTg1MkQxMUVBQTVGNEM4RjRCOEI0MjZDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pn7UgnsAAADDUExURf/27/+PMP9+EP/lz//u3//Cj/+pYP+ycP+GIP/Ur//Ln/+gUP/9/P99Dv+II//w4/96Cf/s2//69f/bvf/8+f94Bf+mWv+AFP+RM/+fTf92Av+taP+EG/+LKP/hx//06v/Pp/+nXf/p1v/Vsf/m0P+fTv+7gv+NLP+pYf/JnP+DGv+2eP/dwP93BP+YQf+BF//hyP/Cjv/t3f+aRP+0dP+cSP+0df/n0v/y5//OpP/HmP+hUf+YQP/cv/+6f/91AP///yqM+5oAAABBdFJOU/////////////////////////////////////////////////////////////////////////////////////8AMFXsxwAAAktJREFUeNq0lteapCAQhRHE1GFynk0zm3OOwvH9n2oBUVCZXpvprRuVT+uHOhUkzTxjgjTR1n8qUZurAELv1RA7hHAUGyHCGYuGZFhshMBZHQ0pwP8DxIpgISkwigKrtVEk+pK7dRkP4d5OIW0mBDd/D0gygRAjcgI+0joeoqJVGaccVIh0UwrHQ/IugcXIxQ4hhHaQ8r6QT6+P7oBIJUQadNFD5LwU/g3svw1C1EGoLZO8Vd24920m5NflyROsPoYgShGGxLrmd0L+3VZu310+bt5g9XQKUQcpVcWbb+lIg75vynADHdjRCV6py1ec/ZiepFzoa6bLfOxqG8jDfRuGK3w4CBWjrhSiC98FXCT1VhC2wnN7+xLXByGIasNSFz73DpGEIWFNbs7wvbtfnmK9F4II0JR1mdzXpXpLKhMeRAQnz+drXLmn5TOsf/YQVvcBqpENhgq3kLab+ZBA4PbWOF16z8cXePHIQFheeGnPtDfhl3ZuPOpWX3kQbrN9YOe4WA4WDt/jnJDMbJEWTup8WGe1hfSatJEkicnDkX37czxaOfzygKiKAM0qv4+omeKP4EKJ5CAl2jPpmVDNbpAyL4fNquxHSZfTSIgTwE2cRfSMbxhFLb1dVihUYEqnsuDSJNrsn5UppNL7VsXSUzJkqW6caKJtBCG5YWhVO1mpwqnTAWW6G0ipUnlhlshC0VirkIa2vVj/sUhneRUBUceg3EtknaxdXYps8I/RGo+ApLT2QiKK3JRD6RJNWNE7S7eEhJ7IdC3K/gowAAfyzoxv2MoOAAAAAElFTkSuQmCC);
  background-size: 100rpx 31rpx;
}

.h1980hidden {
  max-height: 1980rpx;
  overflow: hidden;
}

.pb100 {
  padding-bottom: 100rpx;
}

rich-text .rich-img {
  max-width: 100%;
  height: auto;
}

2.3js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 展開收起
    more_flag: 0,
    // 三角開關是否需要展示
    sjFlag: 0,
    // 富文本內容
    rich: ''
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    // 這是一個從接口請求來的富文本內容
    var content = '"<p style="text-indent: 28px;"><span>&ldquo;放風價&rdquo;這個名詞，在現階段的南京新盤市場上出現頻率尤其高！大校場放風5.5萬元/㎡+、燕子磯仁恆放風4萬元/㎡+&hellip;&hellip;</span>純新盤要上市，老盤要加推，先來個放風價，<strong>但樓盤的&ldquo;放風價&rdquo;其實並不完全是樓盤的開盤價，是給購房者一個心理預期和試探！</strong></p><p style="text-indent: 28px;"><span>近期，南京河西也有一大波純新盤開始放出風聲，多盤價錢讓人咋舌！同時西妹瞭解到，部分樓盤放風價也呈現&ldquo;高開低走&rdquo;狀態。</span></p><p style="text-indent: 28px;"><span>雲際花園前期放風5.5萬元/㎡--價格或不超過5萬元/㎡</span></p><p style="text-indent: 28px;"><span>蘇寧檀悅前期放風6.4萬元/㎡--價格或有驚喜</span></p><p style="text-indent: 28px;"><span>海玥花園</span><span>放風6.7萬元/㎡&hellip;&hellip;</span></p><p style="text-indent: 28px;"><span>榮盛江心洲G08地塊放風6萬元/㎡&hellip;&hellip;</span></p><p style="text-indent: 28px;"><span>深業河西南G77地塊放風4.5萬元/㎡&hellip;&hellip;</span></p><p style="text-indent: 28px;"><span>【最終價格以銷許爲準！】</span></p><p style="text-indent: 28px;"><span>上市時間：</span></p><p style="text-indent: 28px;"><span>雲際花園：預計5月</span></p><p style="text-indent: 28px;"><span>蘇寧睿城：預計5月公開售樓處，6月首開</span></p><p style="text-indent: 28px;"><span>海玥花園：預計今年上市</span></p><p style="text-indent: 28px;"><span>榮盛江心洲G08地塊：預計今年下半年上市</span></p><p style="text-indent: 28px;"><span>深業河西南G77地塊：<span>預計今年上市</span></span></p><p style="text-indent: 28px;"><strong>均預計今年上市！<strong>高放風價新盤</strong>一覽</strong></p><p style="text-indent: 28px;"><strong>雲際花園</strong></p><p style="text-indent: 28px;"><span><span>雲際花園規劃將打造5棟17-27F層精裝平墅豪宅、1棟幼兒園、1棟社區。其中，</span><span><strong>住宅共計380戶，層高3.15米，一梯一戶，超高得房率、低密度</strong>。</span></span></p><p style="text-indent: 28px;"><span>據瞭解，雲際花園1、2、4、 5#總高均爲17層，3#總高爲27層。戶型分佈：</span><span><strong><span>1、2、5#均爲140㎡；3#均爲160㎡；4#均爲180㎡。</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLkyAR9IMAAEWQgcBKl469.jpeg" alt="" /></p><p style="text-indent: 28px;"><strong><span>首開價格：</span></strong><span>具體以銷許價爲準</span></p><p style="text-indent: 28px;"><strong><span>首開樓棟：</span></strong><span>5#共計68套房（20%約14套房作爲人才房優先人才選擇）</span></p><p style="text-indent: 28px;"><strong><span>首開戶型：</span></strong><span>140㎡</span></p><p style="text-indent: 28px;"><strong><span>業主總數：</span></strong><span>380戶</span></p><p style="text-indent: 28px;"><strong><span>車位配比：</span></strong><span>1:1.38</span></p><p style="text-indent: 28px;"><strong><span>得房率：</span></strong><span>約80%</span></p><p style="text-indent: 28px;"><strong><span>最新動態：</span></strong><span><strong><span>純新盤雲際花園由保利、招商、國貿聯合開發</span></strong></span><span>，項目預計首開5#，共計68套房（20%約14套房作爲人才房優先人才選擇），均爲140㎡四房起步戶型。</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLkyAbEprAASE-n4cVck92.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>雲際花園預計首開5#，共計68套房，</span><span><strong><span>均爲140㎡四房起步戶型。</span></strong><span><strong><span>雙入戶大堂設計</span></strong></span></span><span>，其中，</span><span><strong><span>地上大堂層高約6.3米，地下約5.4米。</span></strong></span></p><p style="text-indent: 28px;"><span>據瞭解，</span><span><strong><span>5號樓1、2層房源均爲帶地下室的下躍的設計</span></strong></span><span>，<span>負一樓都是算產權面積的。</span></span></p><p style="text-indent: 28px;"><span><strong><span>140㎡戶型1樓+負一層地下室戶型&darr;</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk2ALcMMAAKZkcTA7ww21.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>其中，1樓帶的負一層地下室面積</span><span><strong>約175㎡左右。</strong></span></p><p style="text-indent: 28px;"><span><strong><span>140㎡戶型2樓+負一層地下室戶型&darr;</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk2AAchoAANBWXYyTSU28.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>2樓帶的負一層地下室面積</span><span><strong>約230㎡左右。</strong></span></p><p style="text-indent: 28px;"><span><strong>5號樓標準層140㎡四房兩廳兩衛&darr;</strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk2AT-iIAACX_99fWDQ01.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>四開間朝南設計；南向大陽臺連接客廳和次臥；主臥爲L型衣帽間、衛生間爲一體的套間，從戶型圖看主衛可放置浴缸；除了帶陽臺的次臥外，每個臥室都帶有飄窗；U型廚房設計。</span></p><p style="text-indent: 28px;"><span><strong><span>其餘兩大主力戶型（首開只有140㎡戶型）</span></strong></span></p><p style="text-indent: 28px;"><span><strong>160㎡四房兩廳兩衛：</strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk2AQgzYAADCQRM-A5w19.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>160㎡和140㎡的區別點在於客廳面積大了不少，客廳不是傳統的大長間，大橫廳設計，尺度感更強；還有一處區別在於北陽臺，160㎡南北雙陽臺設計，更通透。</span></p><p style="text-indent: 28px;"><span><strong><span>180㎡四房兩廳三衛&darr;</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk6AE4afAAC0b2UDiWk68.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>180㎡戶型又是160㎡戶型的升級版，除了大橫廳、南北雙陽臺以外，雙套房設計更符合當代購房者的需求。</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk6ACgO2AABkzJXlZ7o39.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>若以4.9萬元/㎡上市（具體價格以銷許爲準）：</span></p><p style="text-indent: 28px;"><span>140㎡最低3成首付約206萬元/套，160㎡最低3成首付約235萬元/套，180㎡最低3成首付約265萬元/套。</span><strong><span>最大戶型180㎡不到300萬即可入手！</span></strong></p><p style="text-indent: 28px;"><span>但西妹認爲，</span><strong><span>若真以4.9萬元/㎡上市，首付3成的可能性比較小</span></strong><span>，大家可以按照8成的預算準備。</span></p><p style="text-indent: 28px;"><strong>蘇寧檀悅</strong></p><p style="text-indent: 28px;"><span>蘇寧睿城三期確定案名爲蘇寧檀悅，<span>將打造蘇寧置業最高端產品系檀悅系產品</span>，</span><span><strong>售樓處預計將於5月對外公開，6月上市！</strong></span></p><p style="text-indent: 28px;"><span><strong>&nbsp;</strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk6ARSHUAAx9H3H84q873.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>前期小道消息稱：蘇寧檀悅價格或參考中國府6.4萬/㎡的價格。現據瞭解，蘇寧檀悅上市價格或有驚喜。<strong>【具體上市價格以銷許爲準】</strong></span></p><p style="text-indent: 28px;"><span>蘇寧檀悅由（E01E02）地塊和（D0405）地塊</span><strong><span><span>16棟樓</span><span>共計892套房組成</span></span></strong><span>，預計2022年下半年交付，戶型面積爲160㎡、190㎡、240㎡。</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk-ATPdcAAbIMe2CVq092.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>西妹拿到了詳細的戶型分佈，具體的面積還以屆時開發商公佈的爲準：</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk-AVs0jAAEggxOGWGw54.jpeg" alt="" /></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLk-AWTYrAAFZQxzCbtY40.jpeg" alt="" /></p><p style="text-indent: 28px;"><span><strong><span>（E0102）地塊規劃打造10棟樓，由4棟14F以及6棟28F的住宅組成，該地塊中分佈了三大戶型，160㎡、190㎡和240㎡戶型，共計544套房：</span></strong></span></p><p style="text-indent: 28px;"><span>160㎡戶型，分佈在1#、2#、3#、4#號樓，均爲14層，共計8個單元，共208套；</span></p><p style="text-indent: 28px;"><span>190㎡戶型，分佈在5#、6#、9#、10#號樓，均爲28層，共計4個單元，共224套；</span></p><p style="text-indent: 28px;"><span>240㎡戶型，分佈在7#、8#號樓，均爲28層，共計2個單元，共112套。</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlCAFJmrAAEl_5LnVyA92.jpeg" alt="" /></p><p style="text-indent: 28px;"><span><strong><span>（D0405）地塊規劃，規劃打造6棟29F住宅、幼兒園及社區中心，該地塊中分佈了2大戶型，190㎡和240㎡戶型，共計384套房：</span></strong></span></p><p style="text-indent: 28px;"><span>190㎡戶型，分佈在4#、5#、6#、7#號樓，均爲29層，共計4個單元，共232套；</span></p><p style="text-indent: 28px;"><span>240㎡戶型，分佈在8#、9#，均爲29層，共計2個單元，共116套房。</span></p><p style="text-indent: 28px;"><span><strong>曝光戶型圖如下，最終戶型圖以開發商公佈爲準。</strong></span></p><p style="text-indent: 28px;"><span><strong><span>160㎡戶型圖&darr;</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlCAOsmnAAGxZkIAYJ880.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>戶型解析：<span>160㎡戶型爲4房2廳3衛</span>設計，該戶型4開間朝南，主臥套間設計，雙陽臺連接次臥與客廳，其他3房均設有飄窗。</span></p><p style="text-indent: 28px;"><span><strong><span>190㎡戶型圖&darr;</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlCAZe9HAAHJZ4c5-fM85.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>戶型解析：<span>190㎡戶型</span>同樣也是4開間朝南的戶型，整室較爲周正，其客廳與&ldquo;書房&rdquo;之間沒有牆體，整個活動區域空間特別大，舒適度高，主臥爲套房設計，私密性強。</span></p><p style="text-indent: 28px;"><span><strong><span>240㎡戶型圖&darr;</span></strong></span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlCANpLrAAI8dcNfBaI45.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>戶型解析：240㎡戶型爲5房2廳3衛設計，該戶型多開間朝南，採光面充足，整室較爲周正。活動區域爲大橫廳設計，空間闊綽大氣。</span></p><p style="text-indent: 28px;"><span>若蘇寧檀悅以5.5萬元/㎡以內的價格上市（具體價格以銷許爲準），你會買單嗎？</span></p><p style="text-indent: 28px;"><strong>海玥花園</strong></p><p style="text-indent: 28px;"><span>海玥花園項目地價爲42561元/平方米，規劃分爲A、B兩個地塊，共打造</span><strong><span>20幢住宅</span></strong><span>，限高60米。</span></p><p style="text-indent: 28px;"><span>海玥花園是河西中地王，其上市價格備受關注！</span><strong><span>之前傳出放風6.7萬元/㎡，但開發商較爲謹慎，對於價格比較敏感，具體還是以銷許爲準！</span></strong></p><p style="text-align: center;"><img src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlGAMEhZAALQ7IlUdjA62.jpeg" alt="" /></p><p style="text-indent: 28px;"><span><span><strong>戶型面積：</strong></span>打造240-480㎡戶型，平層和複式兩類產品</span></p><p style="text-indent: 28px;"><span><strong><span>層高：</span></strong></span><span>16-18小高層</span></p><p style="text-indent: 28px;"><span><strong><span>容積率：</span></strong></span><span>&le;2.2</span></p><p style="text-indent: 28px;"><strong><span>車位比：</span></strong><span>1:2.5（具體以開發商公佈爲準）設有超大尺度車位</span></p><p style="text-indent: 28px;"><span><strong><span>總戶數：</span></strong></span><span>540戶</span></p><p style="text-indent: 28px;"><span><strong><span>裝修情況：</span></strong></span><span>精裝交付</span></p><p style="text-indent: 28px;"><span><strong><span>綠化率：</span></strong></span><span>30%</span></p><p style="text-indent: 28px;"><strong><span>物業：</span></strong><span>海玥物業</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlGACbHiAAIh21Dl-tc53.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>A地塊規劃建設8棟住宅，1、3、4、5、6、8號樓爲18層，2、6、7號樓爲17層。</span></p><p style="text-indent: 28px;"><span>B地塊規劃建設打造12棟住宅，12、13、15、20、21號樓爲18層，11、14、16、18、19號樓爲17層，17號樓爲16層。</span></p><p style="text-align: center;"><img class="js_darkmode__38" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlGAExxgAAMi61E50ok21.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>海玥花園分A、B兩個地塊都設置了下沉式廣場和會所，下沉式廣場可直接通往會所，</span><strong><span>A、B地塊兩個會所之間後期可通過小區負2樓進行連通。</span></strong></p><p style="text-indent: 28px;"><span>A地塊會所主打社交會所，意欲打造成藝術館。</span></p><p style="text-indent: 28px;"><span>B地塊會所主打運動會所，內含泳池、健身房、瑜伽館、羽毛球館等等。</span><strong><span>其中比較特殊的是，兩大會所也都是帶科技系統的，恆溫恆溼恆氧。</span></strong></p><p style="text-indent: 28px;"><strong><span>240㎡4房4衛A戶型（實際使用面積約177.3㎡）▼</span></strong></p><p style="text-align: center;"><img src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlKADnI_AAHQJCqGYFs71.jpeg" alt="" /></p><p style="text-indent: 28px;"><strong><span>240㎡5房3衛戶型（實際使用面積約185.7㎡)<strong>▼</strong></span></strong></p><p style="text-align: center;"><img src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlKAWgfQAAK5L2TTp6I63.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>從330平米複式看起，&ldquo;壕&rdquo;字已經無法形容了！330㎡躍層戶型，一層大通間，挑高客廳，大陽臺&darr;</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlKAVOTfAADoj_6cv9018.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>王炸500㎡躍層戶型，四層產品，即使是三維立體的戶型，我也無法想象實景500㎡躍層是什麼樣的&darr;</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlKAZgv-AAEy5HTXxzg84.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>海玥花園位居河西中黃金地段，據之前的消息：海玥花園上市價格52000元/㎡銷許價+15000元/㎡裝修包。</span></p><p style="text-indent: 28px;"><span>不過由於葛洲壩南京中國府的地價高於海玥花園，而中國府開盤銷許均價爲6.4萬/㎡，</span><strong><span>所以之前傳出的小道消息是否準確？拭目以待。</span></strong></p><p style="text-indent: 28px;"><strong>榮盛江心洲G08地塊</strong></p><p style="text-indent: 28px;"><span>榮盛江心洲G08地塊</span><strong><span>僅100餘套房，戶型面積230-360㎡</span></strong><span>，起步戶型230㎡、主力戶型280㎡、最大360㎡，</span><strong><span>預計今年下半年上市，放風價6萬元/㎡。</span></strong></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlKAXCY8AAGPPh7w9Fg93.jpeg" alt="" /></p><p style="text-indent: 28px;"><span><strong><span>榮盛江心洲G08地塊共打造12棟樓，均爲7層洋房，</span></strong></span><span>這樣的低密度產品在河西並不多見，項目緊鄰着勝科星洲府和夾江。</span></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlOARLL4AAI_i7Bd_ZU52.jpeg" alt="" /></p><p style="text-indent: 28px;"><strong>&nbsp;</strong><span>從規劃圖看，樓間距非常大，小區景觀打造空間大，作爲榮盛在河西的第一個項目，還是非常值得期待的。</span></p><p style="text-indent: 28px;"><span><strong><span>去年4月，榮盛江心洲G08地塊以</span></strong></span><strong><span>樓面價31980元/㎡</span></strong><span>，</span><strong><span>一舉成爲江心洲地王。</span></strong></p><p style="text-indent: 28px;"><span>而就在昨天，鎮江中南新錦城房地產發展有限公司和江蘇水利房地產開發有限公司聯合拍下，以30.8億元拿下，</span><strong><span>樓面地價35274元/㎡，刷新江心洲區域樓面地價。</span></strong></p><p style="text-indent: 28px;"><span>目前江心洲在售房源寥寥，仁恆江灣世紀高層以4.5萬元/㎡收官，後期僅有洋房和疊墅房源待加推，其價格一定會高於高層收官價。</span><strong><span>隨着地價的攀升，未來江心洲上市房源價格值得關注！</span></strong></p><p style="text-indent: 28px;"><strong>深業河西南G77地塊</strong></p><p style="text-indent: 28px;"><span>近日，深業河西南G77地塊規劃出爐，項目分爲A、B兩個地塊。</span></p><p style="text-indent: 28px;"><strong><span>項目將打造5棟18F住宅和1棟物業用房，B地塊則建造1棟6F的基層社區服務中心。</span></strong><strong><span>項目精裝曾放風爲4.5萬/㎡。</span></strong></p><p style="text-align: center;"><img class="rich_pages" src="http://img31.house365.com/M00/B3/1C/rBEBYF6qLlOAMXFbAAEuazEelAM80.jpeg" alt="" /></p><p style="text-indent: 28px;"><span>G77地塊地理位置優越，臨近地鐵S3號線高廟路站，交通便利。</span></p><p style="text-indent: 28px;"><span>河西南G77地塊，處於國資G75地塊與建發G03地塊中間，地塊方正，體量較小。去年11月13日，在競拍22輪後，被深業以總價12.3億拿下，</span><strong><span>樓面地價29498元/㎡。</span></strong></p><p style="text-indent: 28px;"><span>目前河西南板塊內房源並不多，僅剩華潤置地魚嘴潤府以及即將加推的葛洲壩中國府和河西金茂府，周邊二手房價最高達6.2萬/㎡。</span></p><p style="text-indent: 28px;"><span>河西南未來待上市地塊還是比較多的，後期的升值空間值得想象！</span></p><p style="text-indent: 28px;"><strong><strong>放風價不等於實際價格！究竟上市價格如何？</strong>拭目以待&hellip;&hellip;</strong></p><p style="text-indent: 28px;"><span>何來放風價一說？又爲何放風價與開盤價並不能吻合，究其原因主要有以下幾點：</span></p><p style="text-indent: 28px;"><strong><span>1、物價管控</span></strong></p><p style="text-indent: 28px;"><span>對於房價，一直以來都受到物價局的管控。其實，相當一部分樓盤想漲價，但因爲物價局的限價，房價一直不能達到開發商的預期。</span></p><p style="text-indent: 28px;"><strong><span>2、開發商評估購房者的心理價位</span></strong></p><p style="text-indent: 28px;"><span>對於純新盤而言，首先參考周邊樓盤的價格，價格高怕購房人不買賬，價格低覺得賣虧了，這就是開發商與購房者之前的一場博弈，最終的開盤價還得看購房者的接受程度。</span></p><p style="text-indent: 28px;"><strong><span>3、地價是重要參考因素</span></strong></p><p style="text-indent: 28px;"><span>土拍市場火熱！若區域地王一出，周邊樓盤立馬放風要漲價，至於最終的結果，能不能成功，請參照第一條。</span></p><p style="text-indent: 28px;"><span>所以說，放風價只是開發商的心理預期，結果如何，還得看政府、市場、購房者，三者缺一不可！</span></p><p style="text-indent: 28px;"><span>你怎麼看待開發商的放風價格，這幾個樓盤你的心理預計價格又是多少？歡迎留言和我互動~</span></p>"';

    /**
     * 1.請求來的富文本內容的img有自身的一些寬高屬性，寬度可能都超過屏幕最大寬了;
     * 2.爲了正常展示圖片文本不錯亂，需要將內容處理;
     * 3.正則是一個好東西（下邊有一段正則匹配）
     * 4.大概意思：將圖片自帶的  寬  高  alt style classname 等屬性都清除掉，同時給img標籤加一個我們自己寫的classname rich-img 來統一控制img樣式；
     * **/
    var content_new = content.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(class="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 ')
      .replace(/\<img/gi, '<img class="rich-img" ');

    /**
     * 把處理好的數據進行setdata:
     * setdata是一個異步方法，使用箭頭函數變爲同步的
     * **/
    that.setData({
      rich: content_new
    }, () => {
      /**
       * 雖然變爲同步的了，但是如果涉及數據量比較大的情況，計算高度還是不會特別準確
       * **/
      setTimeout(function () {
      var query = wx.createSelectorQuery();
      // 獲取設備信息，通過寬高比計算當前機型的限制高度
      wx.getSystemInfo({
        success: (res) => {
          var radito = res.windowWidth / 375;
          var height_my = 1980 * radito / 2;
          // 通過獲取當前dom節點的高度和所需的高度對比，如果高了就展示下拉，否則不展示
          query.select('#richText-rich').boundingClientRect(function (rect) {
            // console.log('rect', rect)
            // console.log('height_my', height_my)
            // console.log('height_my < rect.height', height_my < rect.height)
            if (height_my < rect.height) {
              that.setData({
                sjFlag: 1
              });
            }
          }).exec();
        },
      });
      }, 300);

    });
  },

  // 點擊展開收起
  click_more() {
    var that = this;
    that.setData({
      more_flag: !that.data.more_flag
    });
  },
})

2.4效果

   

3.說明

3.1 清除圖片默認樣式用這段

/**
     * 1.請求來的富文本內容的img有自身的一些寬高屬性，寬度可能都超過屏幕最大寬了;
     * 2.爲了正常展示圖片文本不錯亂，需要將內容處理;
     * 3.正則是一個好東西（下邊有一段正則匹配）
     * 4.大概意思：將圖片自帶的  寬  高  alt style classname 等屬性都清除掉，同時給img標籤加一個我們自己寫的classname rich-img 來統一控制img樣式；
     * **/
    var content_new = content.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(class="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 ')
      .replace(/\<img/gi, '<img class="rich-img" ');

3.2在獲取容器高度，和所需高度對比時，需要用到延時器，當內容量比較大時，獲取的高度會不準確：

that.setData({
      rich: content_new
    }, () => {
      /**
       * 雖然變爲同步的了，但是如果涉及數據量比較大的情況，計算高度還是不會特別準確
       * **/
      setTimeout(function () {
      var query = wx.createSelectorQuery();
      // 獲取設備信息，通過寬高比計算當前機型的限制高度
      wx.getSystemInfo({
        success: (res) => {
          var radito = res.windowWidth / 375;
          var height_my = 1000 * radito / 2;
          // 通過獲取當前dom節點的高度和所需的高度對比，如果高了就展示下拉，否則不展示
          query.select('#richText-rich').boundingClientRect(function (rect) {
            // console.log('rect', rect)
            // console.log('height_my', height_my)
            // console.log('height_my < rect.height', height_my < rect.height)
            if (height_my < rect.height) {
              that.setData({
                sjFlag: 1
              });
            }
          }).exec();
        },
      });
      }, 300);

    });

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【自用】關於微信小程序的合法域名列表，

微信小程序真機調試時出現了，Error: request:fail url not in domain list:api.xxx.com 需要把網址添加到合法域名中，見圖 --- 自用 不解釋

原創 2024-04-28 00:18:12

短視頻文案提取原來如此簡單

結婚十年遊西湖        過春風十里，盡薺麥青青。春天總是讓人舒坦，而今年的三月，也因爲與媳婦結婚十年，顯得格外不同。兩人奢侈的請了一天假，瞞着孩子，重遊西湖，去尋找13年前的冰棍店（給當時還是同事的她買了最貴的一個雪糕-8元），去尋

原創 2024-04-22 23:33:29

記一次對某高校微信小程序的漏洞挖掘

挖掘目標的部署在微信的資產(減少信息的收集，畢竟一般web站點沒有賬號密碼不好進入後臺，挖掘功能點少) 1.尋找目標的微信小程序(非原圖) 2.招生小程序打不開，只能挖掘管理系統 進入後發現存在上報安全隱患功能，可以上傳圖片 3.準備上

原創 2024-04-15 22:48:12

五星門店小程序性能優化實踐

一、背景介紹 1.1 業務介紹 五星門店小程序主要服務於五星線下門店交易場景，目前已有79個城市267家門店（包括超級體驗店、城旗店、京東Mall等）在使用，用戶可以通過小程序便捷地查看和購買門店的商品。五星門店小程序已實現基於Taro跨

原創 2024-04-01 11:15:57

從0帶你設計與實現基於STM32的智慧農業管理系統

本文分享自華爲雲社區《基於STM32的智慧農業管理系統設計與實現》，作者： DS小龍哥。 一、前言 1.1 項目介紹 【1】項目功能 隨着全球農業現代化進程的加快，以及物聯網、人工智能等先進技術的發展與應用，智慧農業已經成爲現代農業發

原創 2024-03-15 11:27:08

這個春節，邀請你一起看熊貓！

大家好，我們騰訊位置服務智慧景區團隊爲成都熊貓基地量身打造的官方小程序正式發佈上線啦！ 我們以微信小程序端原生的地圖能力，提供了集地圖導覽、主題地圖、攻略規劃在內的旅遊助手產品，幫助景區全面提升遊客體驗！誠邀各位開發者體驗，

騰訊位置服務 2024-02-06 02:03:22

小程序 canvas 生成圖片

說明 canvas 舊版本生成圖片沒有長度限制 canvas 新版本（2d)生成圖片有長度限制：4096 工具: CanvasUtil.js import { debug } from '../../../../utils/log

原創 2023-08-19 01:36:54

京東門詳一碼多端探索與實踐 | 京東雲技術團隊

本文主要講述京東門詳業務在支撐過程中遇到的困境，面對問題我們在效率提升、質量保障等方向的探索和實踐，在此將實踐過程中問題解決的思路和方案與大家一起分享，也希望能給大家帶來一些新的啓發 一、背景 1.1、京東門詳介紹 1.1.1、京東門詳業務

原創 2023-08-17 11:58:43

uniapp json數據導出excel文件 微信小程序/app段兼容

這裏用到小程序和app段的api 微信小程序 wx.getFileSystemManager（） 獲取全局唯一的文件管理器 返回值 FileSystemManager 在調用 writeFile 方法 功能描述 寫文件 參數 Ob

原創 2023-08-14 12:24:51

一文揭祕餓了麼跨端技術的演進、實踐與落地

本文會先帶領大家一起簡單回顧下跨端技術背景與演進歷程與在這一波兒接着一波兒的跨端浪潮中的餓了麼跨端現狀，以及在這個背景下，相較於業界基於 React/Vue 研發習慣出發的各種跨端方案，餓了麼爲什麼會選擇走另外一條路，這個過程中我們的

原創 2023-08-11 00:27:30

意派Epub360丨七夕H5還能做出新意嗎？當然可以，來看看案例！

    很多人在製作七夕H5時，都會選擇牛郎&織女、鵲橋、喜鵲、愛心、玫瑰等元素。只要這些元素往畫面上一擺，節日氛圍就有了。   但H5營銷不只是有“氛圍”這麼簡單，如果沒有采用有吸引力的創意形式，且不能很好地融入品牌特色，就非常容易導致

原創 2023-08-10 22:44:31

外賣配送系統源碼大放送

  百度地圖不免費了         近日，百度地圖客服聯繫說，我的應用裏有好幾個還在高頻使用，要開始收取授權費了。我當時就驚奇了，以前的外賣系統還在使用嗎，一看網址，熟悉的界面，當時真有恍如隔世的感覺。還沒等我回過神來，一個在微信裏闊別

原創 2023-08-10 00:22:54

意派Epub360丨【全行業適用】H5小白剛需，手冊類H5製作指南

  如果您是一位市場部推廣人員，那麼您對於“產品手冊”一定不陌生。   近期，我們接到了某位企業客戶關於產品手冊H5的諮詢，並針對他的問題進行了一對一的詳細溝通。   考慮到很多企業的市場、運營、行政等部門員工都有製作產品手冊H5的需求，

原創 2023-08-03 22:50:42

wx、ali 支付對接步驟

一、微信支付對接 前提條件 1：需要一個載體公衆號(必須是服務號)或者小程序。2：小程序和公衆號支付都要認證。3：需要一個商戶號，綁定公衆號或者小程序 在微信公衆平臺申請公衆號（服務號） https://mp.weixin.q

原創 2023-07-25 10:16:01

抖音小程序右上角菜單設置

https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/retweet/tt-show-share-menu/   https://uniapp.

原創 2023-06-12 00:09:55