微信小程序開發：基礎知識

一、基本設置

1、導航欄的基本設置

屬性	類型	默認值	描述
navigationBarTitleText	string		導航欄標題
navigationBarTextStyle	string	white	導航欄標題顏色，僅支持 black / white
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色

2、Tabbar基本設置

在 app.json文件中添加如下代碼:

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
 },
"tabBar": {
    "color": "#000",
    "selectedColor": "#f23030",
    "backgroundColor": "#0094ff",
    "list":[{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "icons/tabbar_1.png",
      "selectedIconPath": "icons/tabbar_1a.png"
    },{
      "pagePath": "pages/index2/index2",
      "text": "日誌",
      "iconPath": "icons/tabbar_2.png",
      "selectedIconPath": "icons/tabbar_2a.png"
    }]
  },

3、數據綁定

數據都需要定義在data中：

index.js代碼如下：

Page({
  data: {
    num: 1000,
    isBoy: true,
    person: {
      name: "小龍女",
      height: 190
    }
  }
})

index.wxml代碼如下：

<view>num: {{num}}</view>
<view>isBoy: {{isBoy}}</view>
<view>name: {{person.name}}</view>
<view>height: {{person.height}}</view>

4、列表渲染

項的變量名默認爲 item wx:for-item 可以指定數組當前元素的變量名；

下標變量名默認爲 index wx:for-index 可以指定數組當前下標的變量名；

5、樣式導入

使用@import語句可以導入外聯樣式表，@import後跟需要導入的外聯樣式錶帶相對路徑，用;表示語句結束。

@import "common.wxss"

.middle-p{
	padding:15px;
}

6、選擇器

選擇器	樣例	描述
.class	.intro	選擇所有擁有class="intro"的組件
#id	#firstname	選擇擁有id="firstname"的組件
element	view	選擇所有view組件
element,element	view,checkbox	選擇所有文檔的view組件和所有的checkbox組建
:after	view:after	在view組件後邊插入內容
:before	view:before	在view組件前邊插入內容

7、全局樣式與局部樣式

定義在app.wxss中的樣式爲全局樣式，作用於每一個頁面。在page的wxss文件中定義的樣式爲局部樣式，只作用在對應的頁面，並會覆蓋app.wxss中相同的選擇器。

二、基本組件

1、Swiper輪播圖

swiper微信內置的輪播圖組件，默認寬度100%，高度150px。

屬性名	類型	默認值	說明
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	raga(0,0,0,3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
interval	Number	5000	自動切換時間的間隔
circular	Boolean	false	是否採用銜接滑動

代碼示例

<swiper autoplay indicator-dots indicator-color="blue">
	<swiper-item><image mode="widthFix" src="../../images/1.jpg"></swiper-item>
	<swiper-item><image mode="widthFix" src="../../images/2.jpg"></swiper-item>
	<swiper-item><image mode="widthFix" src="../../images/3.jpg"></swiper-item>
	<swiper-item><image mode="widthFix" src="../../images/4.jpg"></swiper-item>
</swiper>

2、navigator導航跳轉

屬性名	類型	默認值	說明
target	String	self	默認值當前小程序，可選值self/miniProgram
url	String		當前小程序內的跳轉鏈接
open-type	String	navigate	跳轉方式

open-type有效值：

值	說明
navigate	保留當前頁面，跳轉到應用內的某個頁面，但是不能跳轉到tabbar頁面
redirect	關閉當前頁面，跳轉到應用內的某個頁面，但是不能跳轉到tabbar頁面
switchTab	跳轉到tabBar頁面，並關閉其他所有非tabBar頁面
reLaunch	關閉所有頁面，打開到應用內的某個頁面
navigateBack	關閉當前頁面，返回上一頁面或多級頁面。可以通過getCurrentPages()獲取當前的頁面棧，決定需要返回幾層
exit	退出小程序，target="miniProgram"時生效

代碼示例

<!--保留當前頁面，跳轉到應用內的某個頁面，但是不能跳轉到tabbar頁面 -->
<navigator url="../index11/index11" open-type="navigate">index11</navigator>

<!--關閉當前頁面，跳轉到應用內的某個頁面，但是不能跳轉到tabbar頁面 -->
<navigator url="../index11/index11" open-type="redirect">index11</navigator>

<!--跳轉到tabBar頁面，並關閉其他所有非tabBar頁面 -->
<navigator url="../index/index" open-type="switchTab">index</navigator>

<!--關閉所有頁面，打開到應用內的某個頁面 -->
<navigator url="../index/index" open-type="reLaunch">index</navigator>

3、video視頻播放

屬性名	類型	默認值	說明
src	String
duration	Number		指示視頻長度
controls	Boolean	true	是否顯示默認播放控件(播放/暫停/播放進度/時間)
autoplay	Boolean	false	是否自動播放
loop	Boolean	false	是否循環播放
muted	Boolean	false	是否靜音播放

代碼示例

<video src="http://files.ak48.mp4" controls duration="60" autoplay muted></video>

####4、自定義組件

新建一個components 文件夾，與pages目錄同級別。然後在components目錄下，以組件的名稱新建如下文件:

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jBaRBzG8-1583820380469)(./images/[email protected])]

那麼如何使用自定義組件呢？比如在index頁面裏面需要引用自定義的MyTitle組件。首先需要在index.js文件中引入組件的路徑。

{
  "usingComponents": {
    "MyTitle": "../../components/MyTitle/MyTitle"
  },
  "navigationBarTitleText": "首頁"
}

然後，在index.wxml中添加MyTitle組件:

 <!-- 公共頭部 -->
 <MyTitle></MyTitle>

5、按鈕添加點擊跳轉事件

index.wxml添加按鈕組件:

 <button class="bottom_container_qrcode_btn" bindtap="verify_friend">認證他人</button>

index.js添加按鈕跳轉邏輯:

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    
  },
  //事件處理函數
  verify_friend: function() {
    wx.navigateTo({
      url: '../../pages/verify/verify_friend',
    })
  }
})