技術標籤：小程式入門之路小程式前端

作者自己嘗試幫助不太熟悉一些基礎元件的人寫的，有些程式碼並不是為了展示介面而寫的，所以沒有展示圖。通過看這些能夠理解一些元件最基礎的用法，如果需要知道元件所有的屬性和資訊，請去微信開發文件查閱：https://developers.weixin.qq.com/miniprogram/dev/framework/
1.text:
文字元件

<text class ="info" id = "first" style = "display:inline;" bindtap = "" hidden ="true" data-user-name = "user">
//此處可以設定文字元件的屬性,還可以自定義屬性(例如data-user-name，封裝起來可以傳遞引數)，display表示文字展示樣式
Hello World
//被夾雜的是文字內容，且此內容為純文字，其他元件會被忽略掉
</
 
text>
//這是文字元件結束語

2.image
圖片元件

<image class = '***'/*用於style，可以在wxss中定義一個***進行內容補充*/ src=''></image>
//可以是本地路徑，也可以是個url。本地路徑格式應該為/***/***.jpg(不一)

3.view
容器檢視

<view> </view>

view是容器，可以理解為父元件，類似於flutter中的Container，用來包裹元件的。

4.navigator
路由跳轉

<navigator url = '/pages/***/***' open-type = "redirect" hover-class = ''>
//redirect無返回頁,navigate可返回，hover-class為點選樣式
<
 
text>
***
</text>
</navigator>

5.input
文字輸入框

<input type="text" placeholder="統一認證密碼" 
placeholder-style="text-align:center" password="true" bindinput="inputPass">
</input>

6.button
按鈕元件

<button style="border:10rpx solid #ffffff;
 
border-radius:40rpx" bindtap="minsPage">
上一頁
</button>

7.textarea
文字輸入域

<textarea type="text" placeholder="統一認證密碼" 
placeholder-style="text-align:center" password="true" bindinput="inputPass"/>

8.icon
圖示
具體程式碼演示和image相似，這裡就不多贅述