微信小程序項目實戰

1. 前言敘述

1. 小程序沒有DOM對象，一切基於組件化

2. 小程序的四個重要的文件

• *.js
• *.wxml —> view結構 ----> html
• *.wxss —> view樣式 -----> css
• *. json ----> view 數據 -----> json文件

3. 小程序設置

• 小程序出於安全考慮所有的協議都是https協議，且如果沒有在開發設置中配置請求的連接是無法訪問指定的鏈接的。
• 一個微信小程序的併發網絡請求數量被限制在最多5個

4. 儲備知識

• 理解事件機制
• 理解組件化
• 理解數據綁定
• Flex佈局
• 移動端適配方案

2. Flex佈局簡介

1. 什麼是flex佈局？

• Flex是Flexible Box的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性。
• 任何一個容器都可以指定爲Flex佈局。
• display: ‘flex’
  

2. flex屬性

• flex-direction:
  • row（默認值）：主軸爲水平方向，起點在左端。
  • row-reverse：主軸爲水平方向，起點在右端。
  • column：主軸爲垂直方向，起點在上沿。
  • column-reverse：主軸爲垂直方向，起點在下沿。

3. 學習地址：

http://www.runoob.com/w3cnote/flex-grammar.html

3. 移動端適配

1. 物理像素

• 屏幕的分辨率
• 設備能控制顯示的最小單元，可以把物理像素看成是對應的像素點

2. 設備獨立像素 & css像素

設備獨立像素(也叫密度無關像素),可以認爲是計算機座標系統中的一個點，這個點代表一個可以由程序使用並控制的虛擬像素(比如：CSS 像素,只是在android機中CSS 像素就不叫”CSS 像素”了而是叫”設備獨立像素”)，然後由相關係統轉換爲物理像素。

3. dpr比 & DPI & PPI

• dpr: 設備像素比，物理像素/設備獨立像素 = dpr， 一般以Iphon6的dpr爲準 dpr = 2
• PPI: 一英寸顯示屏上的像素點個數
• DPI：最早指的是打印機在單位面積上打印的墨點數，墨點越多越清晰
  
  
  

4. 小程序適配方案

Iphon6： 1rpx = 1物理像素 = 0.5px

微信官方提供的換算方式：

• 以iPhone6的物理像素個數爲標準: 750;
• 1rpx = 目標設備寬度 / 750 * px;
• 注意此時底層已經做了viewport適配的處理，即實現了理想視口

5. 擴展內容

• 視網膜屏幕是分辨率超過人眼識別極限的高分辨率屏幕，由蘋果公司在2010年iPhone4發佈會上首次推出營銷術語。
• iphone的dpr = 2; 人類肉眼分辨的極限

6. 小程序實戰

1. 登陸版塊

1. 獲取登陸用戶的信息數據

• wx.getUserInfo(OBJECT)

參數

屬性	類型	說明
withCredentials	boolean	是否帶上登錄態信息。當 withCredentials 爲 true 時，要求此前有調用過 wx.login 且登錄態尚未過期，此時返回的數據會包含 encryptedData, iv 等敏感信息；當 withCredentials 爲 false 時，不要求有登錄態，返回的數據不包含 encryptedData, iv 等敏感信息。
lang	string	顯示用戶信息的語言
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

代碼

onLoad: function(options){
	// 獲取用戶登陸的信息
	wx.getUserInfo({
	  success: (data) => {
	    console.log(data);
	  },
	  fail: () => {
	    console.log('獲取用戶數據失敗')
	  }
	})
}

data中的數據

2. 更新數據

• this.setData
  • (this 爲當前頁面的實例對象)
  • 結合ES6語法（箭頭函數）獲取正確的 this

代碼

// 獲取用戶登陸的信息
wx.getUserInfo({
  success: (data) => {
    console.log(data);
    // 更新data中的userInfo
    this.setData({
      userInfo: data.userInfo
    })
  },
  fail: () => {
    console.log('獲取用戶數據失敗')
  }
})

3. 將數據呈現在頁面上

代碼

<view class="container">
  <image src="{{userInfo.avatarUrl}}"></image>
  <text class="username">hello {{userInfo.nickName}}</text>
  <view bindtap="handleParent" class="goStudy">
    <text>開啓小程序之旅</text>
  </view>

</view>

效果

4. 用戶授權

• open-type

參數

值	說明
contact	打開客服會話，如果用戶在會話中點擊消息卡片後返回小程序，可以從 bindcontact 回調中獲得具體信息
share	觸發用戶轉發
getPhoneNumber	獲取用戶手機號，可以從bindgetphonenumber回調中獲取到用戶信息
getUserInfo	獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息
launchApp	打開APP，可以通過app-parameter屬性設定向APP傳的參數
openSetting	打開授權設置頁
feedback	打開“意見反饋”頁面，用戶可提交反饋內容並上傳日誌，開發者可登錄小程序管理後臺後進入左側菜單“客服反饋”頁面獲取到反饋內容

代碼

<view class="container">
  <image src="{{userInfo.avatarUrl}}"></image>
  <button open-type="getUserInfo">獲取用戶信息</button>
  <text class="username">hello {{userInfo.nickName}}</text>
  <view bindtap="handleParent" class="goStudy">
    <text>開啓小程序之旅</text>
  </view>

</view>

效果

5. 判斷用戶是否授權

• wx.getSetting
• 獲取用戶的當前設置。返回值中只會出現小程序已經向用戶請求過的權限。

參數

屬性	說明
success	接口調用成功的回調函數
fail	接口調用失敗的回調函數
complete	接口調用結束的回調函數（調用成功、失敗都會執行）

• success 回調函數

參數

屬性	說明
authSetting	用戶授權結果

代碼
button不是固定存在

<button style="display: {{isShow?'block':'none'}}" open-type="getUserInfo">
	獲取用戶信息
</button>

/**
 * 頁面的初始數據
 */
data: {
  userInfo: {},
  isShow: false
},

onLoad: function(options){
	// 判斷用戶是否授權
	wx.getSetting({
	  success: (data) => {
	    // console.log(data);
	    if (data.authSetting['scope.userInfo']) {//scope.userInfo爲不規則屬性，是一個整體，用數組表示，裏面是一個字符串
	      // 用戶已經授權,可以直接調用 getUserInfo 獲取頭像暱稱
	      // console.log('已經授權');
	      // 更新用戶數據
	      this.setData({
	        isShow: false
	      })
	    } else {
	      // 沒有授權
	      // console.log('沒有授權');
	      // 更新用戶數據
	      this.setData({
	        isShow: true
	      });
	    }
	  }
	});
}

6. 如何知道用戶是否點擊允許

• bindgetuserinfo
• 獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息
• 觀察允許和拒絕情況數據的差別

用戶允許

用戶拒絕

代碼

<button bindgetuserinfo="handleGetUserInfo" 
		style="display: {{isShow?'block':'none'}}" 
		open-type="getUserInfo">
		獲取用戶信息
</button>

// 判斷用戶點擊按鈕的回調函數
handleGetUserInfo(data){
  console.log('用戶點擊了',data);
  // 判斷用戶是否點擊了允許
  if(data.detail.rawData){
    // 用戶點擊了允許
    this.getUserInfo();
  }
}

2. 主頁板塊

1. 由登陸頁面跳轉到主頁面

• wx.switchTab
• 跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面

參數

屬性	類型	說明
url	string	需要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑後不能帶參數。
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

代碼

<view bindtap="handleParent" class="goStudy">
    <text>開啓小程序之旅</text>
</view>

handleParent(){
 console.log('父元素');
  // 跳轉頁面
  wx.switchTab({
    url: '/pages/list/list',
  })
},

2. 輪播圖組件

• swiper
• 滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行爲。

參數

屬性	類型	默認值	說明
indicator-dots	boolean	false	是否顯示面板指示點
indicator-color	color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	color	#000000	當前選中的指示點顏色
autoplay	boolean	false	是否自動切換
current	number	0	當前所在滑塊的 index
interval	number	5000	自動切換時間間隔
duration	number	500	滑動動畫時長
circular	boolean	false	是否採用銜接滑動
vertical	boolean	false	滑動方向是否爲縱向
previous-margin	string	“0px”	前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值
next-margin	string	“0px”	後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值
display-multiple-items	number	1	同時顯示的滑塊數量
skip-hidden-item-layout	boolean	false	是否跳過未顯示的滑塊佈局，設爲 true 可優化複雜情況下的滑動性能，但會丟失隱藏狀態滑塊的佈局信息
easing-function	string	“default”	指定 swiper 切換緩動動畫類型
bindchange	eventhandle		current 改變時會觸發 change 事件，event.detail = {current, source}
bindtransition	eventhandle		swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish	eventhandle		動畫結束時會觸發 animationfinish 事件，event.detail 同上

代碼

<!-- 輪播圖 -->
<swiper catchtap="carouselToDetail" indicator-dots="true" 
		indicator-color="green" indicator-active-color="deeppink" 
		autoplay="true" interval="5000" duration="500" circular="true">
  <swiper-item>
    <image src="/images/detail/carousel/01.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/detail/carousel/02.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/detail/carousel/03.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/detail/carousel/04.jpg"></image>
  </swiper-item>
</swiper>

3. 模版組件

• template
• WXML提供模板（template），可以在模板中定義代碼片段，然後在不同的地方調用。

定義模版

• 使用 name 屬性，作爲模板的名字來標識模版。然後在<template/>內定義代碼片段

代碼

<template name="listTmp">

  <view class="tmpContainer">
    <view class="avatar_date">
      <image src="{{avatar}}"></image>
      <text>{{date}}</text>
    </view>
    <text class="company">{{title}}</text>
    <image class="content_img" src="{{detail_img}}"></image>
    <text class="content">{{detail_content}}</text>
    <view class="love_attention">
      <image src="/images/icon/star.png"></image>
      <text>{{love_count}}</text>
      <image src="/images/icon/view.png"></image>
      <text>{{attention_count}}</text>
    </view>
  </view>
  
</template>

引用模版與模版樣式

<!-- 引用模版 -->
<import src="/pages/template/template" />

/* 引入模版樣式 */
@import "/pages/template/template.wxss";

使用模版

• 使用 is 屬性，聲明需要的使用的模板，然後將模板所需要的 data 傳入

<!-- 運用模版 -->
<template is="listTmp" data='{{...item}}' />

模板的作用域

• 模板擁有自己的作用域，只能使用 data 傳入的數據以及模板定義文件中定義的 <wxs /> 模塊。

4. 列表渲染

1. 引入外部數據

let datas = require('../../datas/list-data.js');// 注意這邊要用相對路徑
console.log(datas,typeof datas);

2. wx:for

• 在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。
• 默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item
• 使用 wx:for-item 可以指定數組當前元素的變量名
• 使用 wx:for-index 可以指定數組當前下標的變量名

3. block wx:for

• 類似 block wx:if，也可以將 wx:for 用在<block/>標籤上，以渲染一個包含多節點的結構塊。
  代碼

<block wx:for="{{listArr}}" wx:key="{{index}}">
  <view>
    <template is="listTmp" data='{{...item}}' />
  </view>
</block>

4. wx:key

• 如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特徵和狀態（如 input 中的輸入內容，switch 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

• wx:key 的值以兩種形式提供

  • 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
  • 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字
    • 如：當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。

• 如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

3. 詳情頁板塊

1. 事件系統

什麼是事件

• 事件是視圖層到邏輯層的通訊方式。
• 事件可以將用戶的行爲反饋到邏輯層進行處理。
• 事件可以綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
• 事件對象可以攜帶額外信息，如 id, dataset, touches。

事件的使用方式

• 在組件中綁定一個事件處理函數。
  • 如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
• 在相應的Page定義中寫上相應的事件處理函數，參數是event。

事件分類

• 事件分爲冒泡事件和非冒泡事件：

  • 冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
  • 非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。

• WXML的冒泡事件列表：

類型	觸發條件
touchstart	手指觸摸動作開始
touchmove	手指觸摸後移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結束
tap	手指觸摸後馬上離開
longpress	手指觸摸後，超過350ms再離開，如果指定了事件回調函數並觸發了這個事件，tap事件將不被觸發
longtap	手指觸摸後，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
animationstart	會在一個 WXSS animation 動畫開始時觸發
animationiteration	會在一個 WXSS animation 一次迭代結束時觸發
animationend	會在一個 WXSS animation 動畫完成時觸發
touchforcechange	在支持 3D Touch 的 iPhone 設備，重按時會觸發

• 注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件

事件綁定和冒泡

• 事件綁定的寫法同組件的屬性，以 key、value 的形式。
  • key 以bind或catch開頭，然後跟上事件的類型，如bindtap、catchtouchstart。在非原生組件中，bind和catch後可以緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。
  • value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。原生組件也支持bind後緊跟冒號的寫法。
• bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

2. 數據動態展示

• 1. 引入外部數據

let datas = require('../../datas/list-data.js');

• 2. data-X 傳遞數據
• 在相應的Page定義中寫上相應的事件處理函數，參數是event。
  
• list 頁面

<!-- 運用模版 -->
<block wx:for="{{listArr}}" wx:key="{{index}}">
  <view catchtap="toDetail" data-index="{{index}}">
    <template is="listTmp" data='{{...item}}' />
  </view>
</block>

// 點擊跳轉到detail詳情頁面
toDetail(event){
  console.log(event);
  // 獲取點擊跳轉對應的下標
  let index = event.currentTarget.dataset.index;
  // 跳轉到對應下標的詳情頁面
  wx.navigateTo({
    url: '/pages/detail/detail?index=' + index,
  })
},

• detail 頁面

data: {
    detailObj: {},
    index: null
},
  
onLoad: function (options) {
    console.log(options);
    // 獲取參數值
    let index = options.index;
    // 更新data中detailObj的狀態值
    this.setData({
      detailObj:datas.list_data[index],
      index
    });

4. 輪播圖點擊展示效果

1. 事件委託

事件委託給父元素：swiper

<swiper catchtap="carouselToDetail" indicator-dots="true" indicator-color="green" indicator-active-color="deeppink" autoplay="true" interval="5000" duration="500" circular="true">
	<swiper-item>
      <image data-index="1" src="/images/detail/carousel/01.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image data-index="0" src="/images/detail/carousel/02.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image data-index="2" src="/images/detail/carousel/03.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image data-index="3" src="/images/detail/carousel/04.jpg"></image>
    </swiper-item>
</swiper>

2. 傳遞事件數據

// 輪播圖跳轉到對應下標的詳情頁面
carouselToDetail(event){
  console.log(event);
  let index = event.target.dataset.index;
  wx.navigateTo({
    url: '/pages/detail/detail?index=' + index,
  })
}

3. currentTarget & target

區別：

• target指向的是觸發事件的元素
• currentTarget指向的是捕獲事件的元素

5. 收藏功能效果

1. 條件渲染（收藏圖標動態顯示）

• wx:if
  • 在框架中，使用 wx:if="" 來判斷是否需要渲染該代碼塊
  • 也可以用 wx:elif 和 wx:else 來添加一個 else 塊

<image catchtap="handleCollection" wx:if="{{!isCollected}}" src="/images/icon/collection-anti.png"></image>
<image catchtap="handleCollection" wx:if="{{isCollected}}" src="/images/icon/collection.png"></image>

/**
* 頁面的初始數據
*/
data: {
 isCollected: false,
 isMusicPlay: false
}

• wx:if & hidden
  • 因爲 wx:if 之中的模板也可能包含數據綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因爲它會確保條件塊在切換時銷燬或重新渲染。
  • 同時 wx:if 也是惰性的，如果在初始渲染條件爲 false，框架什麼也不做，在條件第一次變成真的時候纔開始局部渲染。
  • 相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
  • 一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

2. 動態修改圖標是否顯示

// 收藏功能
handleCollection(){
  let isCollected = !this.data.isCollected;
  // 更新狀態
  this.setData({
    isCollected
  });
}

3. 交互反饋

• wx.showToast
  • 顯示消息提示框

屬性	類型	說明
title	string	提示的內容
icon	string	圖標
image	string	自定義圖標的本地路徑，image 的優先級高於 icon 1.1.0
duration	number	提示的延遲時間
mask	boolean	是否顯示透明蒙層，防止觸摸穿透
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

• 注意
  • wx.showLoading 和 wx.showToast 同時只能顯示一個
  • wx.showToast 應與 wx.hideToast 配對使用

//提示用戶
let title = isCollected?'收藏成功':'取消收藏';
 wx.showToast({
   title,
   icon:'success'
 });

4. 本地數據存儲

• wx.setStorage
  • 將數據存儲在本地緩存中指定的 key 中。會覆蓋掉原來該 key 對應的內容。
  • 除非用戶主動刪除或因存儲空間原因被系統清理，否則數據都一直可用。
  • 單個 key 允許存儲的最大數據長度爲 1MB，所有數據存儲上限爲 10MB。

參數

屬性	類型	說明
key	string	本地緩存中指定的 key
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

• wx.getStorage
  • 從本地緩存中異步獲取指定 key 的內容

參數

屬性	類型	說明
key	string	本地緩存中指定的 key
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

// 緩存數據到本地
// {1: true, 2: false} 依靠下標獲取不同數據
let {index} = this.data;
// 不可行，會覆蓋之前的狀態
// let obj = {}; // {0: true, 2: true}
wx,wx.getStorage({
  key: 'isCollected',
  success: (datas) => {
    // console.log(datas, typeof datas);
    let obj = datas.data;
    obj[index] = isCollected;
    wx.setStorage({
      key: 'isCollected',
      data: obj,
      success: () => {

      }

    })
  },
  
})  

5. 判斷用戶是否收藏

• wx.getStorageSync(string key)

參數

• string key
• 本地緩存中指定的 key

返回值

• any data
• key對應的內容

// 根據本地緩存的數據判斷用戶是否收藏當前的文章
let detailStorage = wx.getStorageSync('isCollected');
console.log(detailStorage);

if(!detailStorage){
  // 在緩存中初始化空對象
  wx.setStorageSync('isCollected', {});
}

// 判斷用戶是否收藏文章
if(detailStorage[index]){ // 收藏過
  this.setData({
    isCollected: true
  })
}

6. 音樂播放器功能

1. 動態修改音樂圖標

<image class="headImg" src="{{isMusicPlay?detailObj.music.coverImgUrl: detailObj.detail_img}}"></image>
<image catchtap="handleMusicPlay" class="musicImg" 
	   src="{{isMusicPlay?'/images/music/music-start.png':'/images/music/music-stop.png'}}">
</image>

/**
* 頁面的初始數據
*/
data: {
 isMusicPlay: false
}

2. 音樂播放

• wx.playBackgroundAudio

  • 使用後臺播放器播放音樂。對於微信客戶端來說，只能同時有一個後臺音樂在播放。當用戶離開小程序後，音樂將暫停播放；
  • 當用戶在其他小程序佔用了音樂播放器，原有小程序內的音樂將停止播放。

• 參數

屬性	類型	說明
dataUrl	string	音樂鏈接，目前支持的格式有 m4a, aac, mp3, wav
title	string	音樂標題
coverImgUrl	string	封面URL
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

3. 音樂暫停

• wx.pauseBackgroundAudio

  • 暫停播放音樂

• 參數

屬性	類型	說明
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

代碼

// 音樂播放
handleMusicPlay(){
  // 處理音樂播放
  let isMusicPlay = !this.data.isMusicPlay;
  // 更新數據
  this.setData({
    isMusicPlay
  });

  // 控制音樂播放
  if(isMusicPlay){
    // 播放音樂
    let {dataUrl,title} = this.data.detailObj.music; //獲取音樂數據
    wx.playBackgroundAudio({
      dataUrl,
      title
    })
  }else{
    // 暫停音樂
    wx.pauseBackgroundAudio({

    })
  }
}

4. 音樂監聽

• wx.onBackgroundAudioStop(function callback)

  • 監聽音樂停止事件

• wx.onBackgroundAudioPlay(function callback)

  • 監聽音樂播放事件

• wx.onBackgroundAudioPause(function callback)

  • 監聽音樂暫停事件

// 監聽音樂播放
wx.onBackgroundAudioPlay(() => {
  // 修改isMusicPlay狀態值
  this.setData({
    isMusicPlay: true
  });

  // 修改appDatas中的數據
  appDatas.data.isPlay = true;
  appDatas.data.pageIndex = index;
})
// 監聽音樂暫停
wx.onBackgroundAudioPause(() => {
  // 修改isMusicPlay狀態值
  this.setData({
    isMusicPlay: false
  });

  // 修改appDatas中的數據
  appDatas.data.isPlay = true;
  // appDatas.data.pageIndex = index;
})

5. 判斷音樂是否在播放

App.js

App({
  data: {
    isPlay: false,
    pageIndex: null
  }
})

detail.js

• 引用App.js中的數據

// 引用App.js中的數據
let appDatas = getApp();
console.log(appDatas, typeof appDatas);

• 判斷音樂是否在播放

// 判斷音樂是否在播放
if(appDatas.data.isPlay && appDatas.data.pageIndex === index){
  // 修改isMusicPlay狀態值
  this.setData({
    isMusicPlay: true
  });
}

7. 實現分享功能

• wx.showActionSheet
  • 顯示操作菜單

參數

屬性	類型	說明
itemList	Array.<string>	按鈕的文字數組，數組長度最大爲 6
itemColor	string	按鈕的文字顏色
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

代碼

// 處理點擊分享功能
handleShare(){
  wx.showActionSheet({
    itemList: [
      '分享到朋友圈','分享到qq','分享到微博'
    ],
  })
}

8. TabBar 功能

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

屬性	類型	描述
color	HexColor	tab 上的文字默認顏色，僅支持十六進制顏色
selectedColor	HexColor	tab 上的文字選中時的顏色，僅支持十六進制顏色
backgroundColor	HexColor	tab 的背景色，僅支持十六進制顏色
borderStyle	string	tabbar 上邊框的顏色， 僅支持 black / white
list	Array	tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tab
position	string	tabBar 的位置，僅支持 bottom / top
custom	boolean	自定義 tabBar，見詳情

其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序，每個項都是一個對象，其屬性值如下：

屬性	類型	說明
pagePath	string	頁面路徑，必須在 pages 中先定義
text	string	tab 上按鈕文字
iconPath	string	圖片路徑，icon 大小限制爲 40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。當 position 爲 top 時，不顯示 icon。
selectedIconPath	string	選中時的圖片路徑，icon 大小限制爲 40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。當 position 爲 top 時，不顯示 icon。

代碼

 "tabBar": {
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "文與字",
        "iconPath": "/images/tab/yuedu.png",
        "selectedIconPath": "/images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "電影頻道",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }

9. AJAX請求數據交互

• wx.request
  • 發起 HTTPS 網絡請求。

參數

屬性	類型	說明
url	string	開發者服務器接口地址
data	string/object/ArrayBuffer	請求的參數
header	Object	設置請求的 header，header 中不能設置 Referer。content-type 默認爲 application/json
method	string	HTTP 請求方法
dataType	string	返回的數據格式
responseType	string	響應的數據類型 1.7.0
success	function	接口調用成功的回調函數
fail	function	接口調用失敗的回調函數
complete	function	接口調用結束的回調函數（調用成功、失敗都會執行）

代碼

// 引入外部數據
const MOVIE_URL = 'http://t.yushu.im/v2/movie/top250';

onLoad: function (options) {
  wx.request({
    url: MOVIE_URL,
    success: (response) => {
      this.setData({
        moviesArr: response.data.subjects
      })
      //  更新app數據
      appDatas.data.moviesArr = response.data.subjects;
    }
  })
}

10. 電影詳情頁

1. 跳轉到電影詳情頁

• navigator
  • 頁面鏈接

屬性	類型	說明
target	string	在哪個目標上發生跳轉，默認當前小程序
url	string	當前小程序內的跳轉鏈接
open-type	string navigate	跳轉方式
delta	number	當 open-type 爲 ‘navigateBack’ 時有效，表示回退的層數
app-id	string	當target="miniProgram"時有效，要打開的小程序 appId
path	string	當target="miniProgram"時有效，打開的頁面路徑，如果爲空則打開首頁
extra-data	object	當target="miniProgram"時有效，需要傳遞給目標小程序的數據，目標小程序可在 App.onLaunch()，App.onShow() 中獲取到這份數據。
version	string	當target="miniProgram"時有效，要打開的小程序版本
hover-class	string	指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果
hover-stop-propagation	boolean	指定是否阻止本節點的祖先節點出現點擊態
hover-start-time	number	按住後多久出現點擊態，單位毫秒
hover-stay-time	number	手指鬆開後點擊態保留時間，單位毫秒
bindsuccess	string	當target="miniProgram"時有效，跳轉小程序成功
bindfail	string	當target="miniProgram"時有效，跳轉小程序失敗
bindcomplete	string	當target="miniProgram"時有效，跳轉小程序完成

代碼

<navigator url="/pages/movieDetail/movieDetail?index={{index}}"></navigator>

2. 接收數據

• movieDetail

<view class="movieDetailContainer">
  <image class="movie_img" src='{{movieDetail.images.large}}'></image>
  <text class="movie_name">{{movieDetail.original_title}}</text>
  <view class="movie_detail">
    <text>評分: {{movieDetail.rating.average}}</text>
    <text>導演: {{movieDetail.directors[0].name}}</text>
    <text>主演: {{movieDetail.casts[0].name}} {{movieDetail.casts[1].name}} {{movieDetail.casts[2].name}}</text>
  </view>
  <button>我要觀影</button>
</view>

let appDatas = getApp();
console.log(appDatas);
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    movieDetail: {}
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(options);
    this.setData({
      movieDetail: appDatas.data.moviesArr[options.index]
    })
  }
})

7. 總結

1. 小程序優勢

1. 成本低

• 對於微型企業或者商家來說，資金有限，開發一款APP的成本太高(運營維護,推廣成本)
• 微信小程序基於微信平臺上，有諸多流量入口，並且小程序的轉發量也是相當高，對於這類企業和商家來說，小程序是最好的選擇

2. 推廣有效

• 企業的小程序正式上線以後，一定範圍內的微信用戶都可以看到你，並且店鋪排名是根據用戶離店鋪的距離進行排名
• 用戶使用過小程序以後會自動被放入列表，方便他們下次使用（商家很佔優勢）

3. 直接搜索

• 用戶只要輸入相關的關鍵字，點擊搜索按鈕，商家的店鋪就會讓用戶在線體驗商家提供的產品及服務。
• 用戶會直接體驗在線服務，而商家也自己的品牌宣傳出去了

4. 體驗流暢

• 微信目前是國內最大的社交網絡平臺
• 微信對小程序開放了大量的入口，小程序的流暢度與APP不相上下
• HTLM5頁面經常會出現加載緩慢、加載超時、卡頓等現象，但是微信小程序功能和體驗上是可以秒殺掉HTLM5頁面

2. 相關鏈接

• https://developers.weixin.qq.com/miniprogram/dev/framework/
• https://github.com/zxwin0125/WeChat_1