上一期文章中，長沙小程序開發公司智企云給大家介紹到了小程序開發中的基礎組件的視圖容器的介紹，今天我們接著學習帶來基礎組件的基礎內容顧名思義是組成小程序的基礎部分，那么什么是基礎部分呢?想一想我們平時用到的程序把。

　　打開一個程序，我們總得看到一些“按鈕(icon)”吧;其次我們總會看到一些“文本內容(text)”;然后我們點擊一些內容還可能看到加載的“進度條(progress)”等等，這些一個程序大概率必備的組件，我們就稱作“基礎內容”。

　　小程序中的基礎內容包括text、rich-text、progress、icon，下面我就舉個應用text基礎內容的例子。

　　類似于HTML中的，那么什么是span呢?它從功能上來說其實又類似于剛才學到的

，不同的是div是對“塊”進行劃分，而span是對“行”進行劃分。

　　# 這是一段HTML語言

我的母親有 藍色 的眼睛。

　　效果如圖：

　　也就是說通過的劃分，你可以靈活的在某一行展現不同的效果。同理在小程序中，就是對“行”進行劃分的，下邊是一段應用text的代碼和效果圖。(注釋：有過前端開發經驗的童鞋一定知道HTML+CSS+JS它們之間的關系，這里我做簡單直觀的介紹。HTML是通過一系列的標簽來展現一個前端主體，而CSS就是用來裝飾這個前端主體的，也可以說是讓你的前端變得更加漂亮，同時前端一定是要與后端進行交互才具備實際應用價值的，因此JS就是用來控制后端的邏輯運算的，例如前端攝取到用戶的登錄信息，那么此時要去后端的數據庫中進行比對，那么后端比對的過程就需要用JS來實現。那么在微信小程序中有WXML+WXSS+JS，也是這個道理)

　　# 這是用到的js代碼var initData = 'this is first line\nthis is second line'var extraLine = [];Page({ data: { text: initData }, add: function(e) { extraLine.push('other line') this.setData({ text: initData + '\n' + extraLine.join('\n') }) }, remove: function(e) { if (extraLine.length > 0) { extraLine.pop() this.setData({ text: initData + '\n' + extraLine.join('\n') }) } }})

　　# 這是WXML代碼 {{text}}add lineremove line

　　以上就是長沙小程序開發公司智企云帶來的小程序開發過程中官方組件的基礎內容的相關介紹，基礎內容是展示小程序內容的核心，同時對于內容的排版，我們要做好調整，其中是提供一個按鈕，這些我們以后再深入討論。