@(官方文件)[https://developers.weixin.qq.com/miniprogram/dev/component/]

1. 初始微信小程式

https://developers.weixin.qq.com/miniprogram/dev/framework/

2. 小程式的基本目錄

4種基本配置檔案:wxml, wxss, js, json

3. rpx響應式單位與flex佈局

rpx響應式

小程式中使用rpx可以根據螢幕大小自動響應/自適應大小
width:200rpx;height:200rpx
文字大小也可以用rpx
font-size: 32rpx;
經驗:rpx數值一般是px的2倍

文字居中

使用：text-align: center;容器內字型
和line-height: 80rpx;字型高度=容器高度
很適合做文字居中

flex佈局居中

flex佈局，居中；容器宣告
display: flex;
flex-direction: row; //按行排列
align-items: center;

Swiper元件使用技巧(輪播圖/滑塊檢視容器)

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

4. 閱讀列表與setData資料繫結

引入外部元件--安裝,編譯LinUI

使用npm安裝元件,如lin-ui 版本號0.8.7
cmd進入工程根目錄:npm i [email protected]
然後在微信開發者工具中,選單欄--工具--構建npm
在哪個頁面要使用哪個元件,可以在那個頁面的json引入元件,如果多個頁面需要使用也可以在app.json中引入:

  "usingComponents": {
    "l-icon":"/miniprogram_npm/lin-ui/icon/index"
  }

在wxml中寫js表示式

屬性中要設定false要加雙花括號? "{{false}}"
雙花括號裡面的內容false將被當做JavaScript表示式而不是字串
根據以上原理true也是傳入的字串,最好加上{{true}}規範
只寫屬性名不賦資料預設是true

資料繫結原理--存在雙向資料繫結

資料繫結--使用Mustache語法

注意雙花括號裡面是表示式!!!如果定義一個函式就不是表示式了

<view>{{massage}}</view>
 

Page({
	data:{
	message:'Hello MINA!'
	}
})

5. 條件渲染、列表渲染與小程式事件

條件渲染語法

wx:if=""	//空是false,任意值是true,顯示/隱藏該標籤

使用if--else

<image wx:if="{{flag}}" src="/images/avatar/3.png"></image>
<text wx:else>Nov 18 2020</text>

列表渲染