XML模板

WXML（WeiXin Markup Language）是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用來(lái)構(gòu)建小程序頁(yè)面的結(jié)構(gòu)，其作用類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 HTML。

WXML 和 HTML 的區(qū)別:

• 標(biāo)簽名稱不同

• HTML （div, span, img, a）
• WXML（view, text, image, navigator）

• 屬性節(jié)點(diǎn)不同

• 超鏈接
• 
  

• 提供了類似于 Vue 中的模板語(yǔ)法

• 數(shù)據(jù)綁定
• 列表渲染
• 條件渲染

WXSS樣式

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式，類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS。

WXSS 和 CSS 的區(qū)別:

• 新增了 rpx 尺寸單位

• CSS 中需要手動(dòng)進(jìn)行像素單位換算，例如 rem
• WXSS 在底層支持新的尺寸單位 rpx，在不同大小的屏幕上小程序會(huì)自動(dòng)進(jìn)行換算

• 提供了全局的樣式和局部樣式

• 項(xiàng)目根目錄中的 app.wxss 會(huì)作用于所有小程序頁(yè)面
• 局部頁(yè)面的 .wxss 樣式僅對(duì)當(dāng)前頁(yè)面生效

• WXSS 僅支持部分 CSS 選擇器

• .class 和 #id
• element
• 并集選擇器、后代選擇器
• ::after 和 ::before 等偽類選擇器

小程序的宿主環(huán)境

1. 什么是宿主環(huán)境

宿主環(huán)境（host environment）指的是程序運(yùn)行所必須的依賴環(huán)境。例如：

Android 系統(tǒng)和 iOS 系統(tǒng)是兩個(gè)不同的宿主環(huán)境。安卓版的微信 App 是不能在 iOS 環(huán)境下運(yùn)行的，所以，Android 是安卓軟件的宿主環(huán)境，脫離了宿主環(huán)境的軟件是沒(méi)有任何意義的！

2. 小程序的宿主環(huán)境

手機(jī)微信是小程序的宿主環(huán)境，如圖所示：

小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁(yè)無(wú)法完成的功能，例如：

微信掃碼、微信支付、微信登錄、地理定位、etc…

組件

1. 小程序中組件的分類

小程序中的組件也是由宿主環(huán)境提供的，開(kāi)發(fā)者可以基于組件快速搭建出漂亮的頁(yè)面結(jié)構(gòu)。官方把小程序的組件分為了 9 大類，分別是：

• 視圖容器
• 基礎(chǔ)內(nèi)容
• 表單組件
• 導(dǎo)航組件
• 媒體組件
• map 地圖組件
• canvas 畫(huà)布組件
• 開(kāi)放能力
• 無(wú)障礙訪問(wèn)

2. 常用的視圖容器類組件

• view

• 普通視圖區(qū)域
• 類似于 HTML 中的 div，是一個(gè)塊級(jí)元素
• 常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果

• scroll-view

• 可滾動(dòng)的視圖區(qū)域
• 常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果

• swiper 和 swiper-item
• 輪播圖容器組件 和 輪播圖 item 組件

3. view 組件的基本使用

實(shí)現(xiàn)如圖的 flex 橫向布局效果：

4. scroll-view 組件的基本使用

實(shí)現(xiàn)如圖的縱向滾動(dòng)效果：

5. swiper 和 swiper-item 組件的基本使用

實(shí)現(xiàn)如圖的輪播圖效果：

6. swiper 組件的常用屬性

7. 常用的基礎(chǔ)內(nèi)容組件

• text

• 文本組件
• 類似于 HTML 中的 span 標(biāo)簽，是一個(gè)行內(nèi)元素

• rich-text

• 富文本組件
• 支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)

8. text 組件的基本使用

通過(guò) text 組件的 selectable 屬性，實(shí)現(xiàn)長(zhǎng)按選中文本內(nèi)容的效果：

9. rich-text 組件的基本使用

通過(guò) rich-text 組件的 nodes 屬性節(jié)點(diǎn)，把 HTML 字符串渲染為對(duì)應(yīng)的 UI 結(jié)構(gòu)：

10. 其它常用組件

• button

• 按鈕組件
• 功能比 HTML 中的 button 按鈕豐富
• 通過(guò) open-type 屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）

• image

• 圖片組件
• image 組件默認(rèn)寬度約 300px、高度約 240px

• navigator（后面課程會(huì)專門講解）

• 頁(yè)面導(dǎo)航組件
• 類似于 HTML 中的 a 鏈接

11. button 按鈕的基本使用

12. image 組件的基本使用

13. image 組件的 mode 屬性

image 組件的 mode 屬性用來(lái)指定圖片的裁剪和縮放模式，常用的 mode 屬性值如下：

API

小程序 API 概述

小程序中的 API 是由宿主環(huán)境提供的，通過(guò)這些豐富的小程序 API，開(kāi)發(fā)者可以方便的調(diào)用微信提供的能力，例如：獲取用戶信息、本地存儲(chǔ)、支付功能等。

小程序 API 的 3 大分類

小程序官方把 API 分為了如下 3 大類：

1. 事件監(jiān)聽(tīng) API

• 特點(diǎn)：以 on 開(kāi)頭，用來(lái)監(jiān)聽(tīng)某些事件的觸發(fā)
• 舉例：wx.onWindowResize(function callback) 監(jiān)聽(tīng)窗口尺寸變化的事件

2. 同步 API

• 特點(diǎn)1：以 Sync 結(jié)尾的 API 都是同步 API
• 特點(diǎn)2：同步 API 的執(zhí)行結(jié)果，可以通過(guò)函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常
• 舉例：wx.setStorageSync('key', 'value') 向本地存儲(chǔ)中寫入內(nèi)容

3. 異步 API

• 特點(diǎn)：類似于 jQuery 中的 $.ajax(options) 函數(shù)，需要通過(guò) success、fail、complete 接收調(diào)用的結(jié)果
• 舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過(guò) success 回調(diào)函數(shù)接收數(shù)據(jù)

WXML 模板語(yǔ)法

數(shù)據(jù)綁定

1. 數(shù)據(jù)綁定的基本原則

• 在 data 中定義數(shù)據(jù)
• 在 WXML 中使用數(shù)據(jù)

2. 在 data 中定義頁(yè)面的數(shù)據(jù)

在頁(yè)面對(duì)應(yīng)的 .js 文件中，把數(shù)據(jù)定義到 data 對(duì)象中即可：

3. Mustache 語(yǔ)法的格式

把data中的數(shù)據(jù)綁定到頁(yè)面中渲染，使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)即可。語(yǔ)法格式為：

4. Mustache 語(yǔ)法的應(yīng)用場(chǎng)景

Mustache 語(yǔ)法的主要應(yīng)用場(chǎng)景如下：

• 綁定內(nèi)容
• 綁定屬性
• 運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）

5. 動(dòng)態(tài)綁定內(nèi)容

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

6. 動(dòng)態(tài)綁定屬性

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

7. 三元運(yùn)算

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

8. 算數(shù)運(yùn)算

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

事件綁定

1. 什么是事件

事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。

2. 小程序中常用的事件

3. 事件對(duì)象的屬性列表

當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示：

4. target 和 currentTarget 的區(qū)別

target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。舉例如下：

點(diǎn)擊內(nèi)部的按鈕時(shí)，點(diǎn)擊事件以冒泡的方式向外擴(kuò)散，也會(huì)觸發(fā)外層 view 的 tap 事件處理函數(shù)。

此時(shí)，對(duì)于外層的 view 來(lái)說(shuō)：

• e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件
• e.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget 是當(dāng)前的 view 組件

5. bindtap 的語(yǔ)法格式

在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件，而是通過(guò) tap 事件來(lái)響應(yīng)用戶的觸摸行為。

• 通過(guò) bindtap，可以為組件綁定 tap 觸摸事件，語(yǔ)法如下：

• 在頁(yè)面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（一般簡(jiǎn)寫成 e） 來(lái)接收：

6. 在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值

通過(guò)調(diào)用 this.setData(dataObject) 方法，可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值，示例如下：

7. 事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正常工作：

因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。

可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下：

最終：

• info 會(huì)被解析為參數(shù)的名字
• 數(shù)值 2 會(huì)被解析為參數(shù)的值

在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：

8. bindinput 的語(yǔ)法格式

在小程序中，通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件，語(yǔ)法格式如下：

• 通過(guò) bindinput，可以為文本框綁定輸入事件：

• 在頁(yè)面的 .js 文件中定義事件處理函數(shù)：

9. 實(shí)現(xiàn)文本框和 data 之間的數(shù)據(jù)同步

實(shí)現(xiàn)步驟：

• 定義數(shù)據(jù)
• 渲染結(jié)構(gòu)
• 美化樣式
• 綁定 input 事件處理函數(shù)

定義數(shù)據(jù)：

渲染結(jié)構(gòu)：

美化樣式：

綁定 input 事件處理函數(shù)：

條件渲染

1. wx:if

小程序中，使用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊：

也可以用 wx:elif 和 wx:else 來(lái)添加 else 判斷：

2. 結(jié)合 使用 wx:if

如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè) 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在 標(biāo)簽上使用 wx:if 控制屬性，示例如下：

注意： 并不是一個(gè)組件，它只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁(yè)面中做任何渲染。

3. hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：

4. wx:if 與 hidden 的對(duì)比

• 運(yùn)行方式不同

• wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏
• hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏

• 使用建議

• 頻繁切換時(shí)，建議使用 hidden
• 控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配 wx:elif、wx:else 進(jìn)行展示與隱藏的切換

列表渲染

1. wx:for

通過(guò) wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)，語(yǔ)法示例如下：

默認(rèn)情況下，當(dāng)前循環(huán)項(xiàng)的索引用 index 表示；當(dāng)前循環(huán)項(xiàng)用 item 表示。

2. 手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名*

• 使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名
• 使用 wx:for-item 可以指定當(dāng)前項(xiàng)的變量名

示例代碼如下：

3. wx:key 的使用

類似于 Vue 列表渲染中的 :key，小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：

WXSS模板樣式

介紹

1. 什么是 WXSS

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于美化 WXML 的組件樣式，類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS。

2. WXSS 和 CSS 的關(guān)系

WXSS 具有 CSS 大部分特性，同時(shí)，WXSS 還對(duì) CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開(kāi)發(fā)。

與 CSS 相比，WXSS 擴(kuò)展的特性有：

• rpx 尺寸單位
• @import 樣式導(dǎo)入

rpx

1. 什么是 rpx 尺寸單位

rpx（responsive pixel）是微信小程序獨(dú)有的，用來(lái)解決屏適配的尺寸單位。

2. rpx 的實(shí)現(xiàn)原理

rpx 的實(shí)現(xiàn)原理非常簡(jiǎn)單：鑒于不同設(shè)備屏幕的大小不同，為了實(shí)現(xiàn)屏幕的自動(dòng)適配，rpx 把所有設(shè)備的屏幕，在寬度上等分為 750 份（即：當(dāng)前屏幕的總寬度為 750rpx）。

• 在較小的設(shè)備上，1rpx 所代表的寬度較小
• 在較大的設(shè)備上，1rpx 所代表的寬度較大

小程序在不同設(shè)備上運(yùn)行的時(shí)候，會(huì)自動(dòng)把 rpx 的樣式單位換算成對(duì)應(yīng)的像素單位來(lái)渲染，從而實(shí)現(xiàn)屏幕適配。

3. rpx 與 px 之間的單位換算*

在 iPhone6 上，屏幕寬度為375px，共有 750 個(gè)物理像素，等分為 750rpx。則：

750rpx = 375px = 750 物理像素

1rpx = 0.5px = 1物理像素

官方建議：開(kāi)發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。

開(kāi)發(fā)舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。

樣式導(dǎo)入

1. 什么是樣式導(dǎo)入

使用 WXSS 提供的 @import 語(yǔ)法，可以導(dǎo)入外聯(lián)的樣式表。

2. @import 的語(yǔ)法格式

@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用 ; 表示語(yǔ)句結(jié)束。示例如下：

全局樣式和局部樣式

1. 全局樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。

2. 局部樣式

在頁(yè)面的 .wxss 文件中定義的樣式為局部樣式，只作用于當(dāng)前頁(yè)面。

注意：

當(dāng)局部樣式和全局樣式?jīng)_突時(shí)，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式

當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局的樣式

全局配置

全局配置文件及常用的配置項(xiàng)

小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項(xiàng)如下：

• pages

記錄當(dāng)前小程序所有頁(yè)面的存放路徑

• window

全局設(shè)置小程序窗口的外觀

• tabBar

設(shè)置小程序底部的 tabBar 效果

• style

是否啟用新版的組件樣式

window

1. 小程序窗口的組成部分

2. 了解 window 節(jié)點(diǎn)常用的配置項(xiàng)

3. 設(shè)置導(dǎo)航欄的標(biāo)題

設(shè)置步驟：app.json -> window -> navigationBarTitleText

需求：把導(dǎo)航欄上的標(biāo)題，從默認(rèn)的 “WeChat”修改為“黑馬程序員”，效果如圖所示：

4. 設(shè)置導(dǎo)航欄的背景色

設(shè)置步驟：app.json -> window -> navigationBarBackgroundColor

需求：把導(dǎo)航欄標(biāo)題的背景色，從默認(rèn)的 #fff 修改為 #2b4b6b ，效果如圖所示：

5. 設(shè)置導(dǎo)航欄的標(biāo)題顏色

設(shè)置步驟：app.json -> window -> navigationBarTextStyle

需求：把導(dǎo)航欄上的標(biāo)題顏色，從默認(rèn)的 black 修改為 white ，效果如圖所示：

注意： navigationBarTextStyle 的可選值只有 black 和 white

6. 全局開(kāi)啟下拉刷新功能

概念：下拉刷新是移動(dòng)端的專有名詞，指的是通過(guò)手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為。

設(shè)置步驟：app.json -> window -> 把 enablePullDownRefresh 的值設(shè)置為 true

注意：在 app.json 中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁(yè)面！

7. 設(shè)置下拉刷新時(shí)窗口的背景色

當(dāng)全局開(kāi)啟下拉刷新功能之后，默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色，設(shè)置步驟為: app.json -> window -> 為 backgroundColor 指定16進(jìn)制的顏色值 #efefef。效果如下：

8. 設(shè)置下拉刷新時(shí) loading 的樣式

當(dāng)全局開(kāi)啟下拉刷新功能之后，默認(rèn)窗口的 loading 樣式為白色，如果要更改 loading 樣式的效果，設(shè)置步驟為 app.json -> window -> 為 backgroundTextStyle 指定 dark 值。效果如下：

注意： backgroundTextStyle 的可選值只有 light 和 dark

9. 設(shè)置上拉觸底的距離

概念：上拉觸底是移動(dòng)端的專有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。

設(shè)置步驟： app.json -> window -> 為 onReachBottomDistance 設(shè)置新的數(shù)值

注意：默認(rèn)距離為50px，如果沒(méi)有特殊需求，建議使用默認(rèn)值即可。

tabBar

1. 什么是 tabBar

tabBar 是移動(dòng)端應(yīng)用常見(jiàn)的頁(yè)面效果，用于實(shí)現(xiàn)多頁(yè)面的快速切換。小程序中通常將其分為：

• 底部 tabBar
• 頂部 tabBar

注意：

tabBar中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁(yè)簽

當(dāng)渲染頂部 tabBar 時(shí)，不顯示 icon，只顯示文本

2. tabBar 的 6 個(gè)組成部分

3. tabBar 節(jié)點(diǎn)的配置項(xiàng)

4. 每個(gè) tab 項(xiàng)的配置選項(xiàng)

頁(yè)面配置

1. 頁(yè)面配置文件的作用

小程序中，每個(gè)頁(yè)面都有自己的 .json 配置文件，用來(lái)對(duì)當(dāng)前頁(yè)面的窗口外觀、頁(yè)面效果等進(jìn)行配置。

2. 頁(yè)面配置和全局配置的關(guān)系

小程序中，app.json 中的 window 節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁(yè)面的窗口表現(xiàn)。

如果某些小程序頁(yè)面想要擁有特殊的窗口表現(xiàn)，此時(shí)，“頁(yè)面級(jí)別的 .json 配置文件”就可以實(shí)現(xiàn)這種需求。

注意：當(dāng)頁(yè)面配置與全局配置沖突時(shí)，根據(jù)就近原則，最終的效果以頁(yè)面配置為準(zhǔn)。

3. 頁(yè)面配置中常用的配置項(xiàng)

網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求

1. 小程序中網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制

出于安全性方面的考慮，小程序官方對(duì)數(shù)據(jù)接口的請(qǐng)求做出了如下兩個(gè)限制：

• 只能請(qǐng)求 HTTPS 類型的接口
• 必須將接口的域名添加到信任列表中

2. 配置 request 合法域名

需求描述：假設(shè)在自己的微信小程序中，希望請(qǐng)求 https://www.escook.cn/ 域名下的接口

配置步驟：登錄微信小程序管理后臺(tái) -> 開(kāi)發(fā) -> 開(kāi)發(fā)設(shè)置 -> 服務(wù)器域名 -> 修改 request 合法域名

注意事項(xiàng)：

• 域名只支持 https 協(xié)議
• 域名不能使用 IP 地址或 localhost
• 域名必須經(jīng)過(guò) ICP 備案
• 服務(wù)器域名一個(gè)月內(nèi)最多可申請(qǐng) 5 次修改

3. 發(fā)起 GET 請(qǐng)求

調(diào)用微信小程序提供的 wx.request() 方法，可以發(fā)起 GET 數(shù)據(jù)請(qǐng)求，示例代碼如下

4. 發(fā)起 POST 請(qǐng)求

調(diào)用微信小程序提供的 wx.request() 方法，可以發(fā)起 POST 數(shù)據(jù)請(qǐng)求，示例代碼如下：

5. 在頁(yè)面剛加載時(shí)請(qǐng)求數(shù)據(jù)

在很多情況下，我們需要在頁(yè)面剛加載的時(shí)候，自動(dòng)請(qǐng)求一些初始化的數(shù)據(jù)。此時(shí)需要在頁(yè)面的 onLoad 事件中調(diào)用獲取數(shù)據(jù)的函數(shù)，示例代碼如下：

6. 跳過(guò) request 合法域名校驗(yàn)

如果后端程序員僅僅提供了 http 協(xié)議的接口、暫時(shí)沒(méi)有提供 https 協(xié)議的接口。

此時(shí)為了不耽誤開(kāi)發(fā)的進(jìn)度，我們可以在微信開(kāi)發(fā)者工具中，臨時(shí)開(kāi)啟「開(kāi)發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名、TLS 版本及 HTTPS 證書(shū)」選項(xiàng)，跳過(guò) request 合法域名的校驗(yàn)。

注意：

跳過(guò) request 合法域名校驗(yàn)的選項(xiàng)，僅限在開(kāi)發(fā)與調(diào)試階段使用！

7. 關(guān)于跨域和 Ajax 的說(shuō)明

跨域問(wèn)題只存在于基于瀏覽器的 Web 開(kāi)發(fā)中。由于小程序的宿主環(huán)境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問(wèn)題。

Ajax 技術(shù)的核心是依賴于瀏覽器中的 XMLHttpRequest 這個(gè)對(duì)象，由于小程序的宿主環(huán)境是微信客戶端，所以小程序中不能叫做“發(fā)起 Ajax 請(qǐng)求”，而是叫做“發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求”。

視頻講解到黑馬程序員哦~

單賺傭金，這種兼職廣告，大家并不陌生。一部手機(jī)、動(dòng)動(dòng)手指，足不出戶就能輕松賺錢。“工資當(dāng)日結(jié)算秒到賬”等廣告字眼，讓不少人動(dòng)了心，為什么明知刷單是詐騙還要參與？為什么被騙了還要繼續(xù)刷單？

警方提醒：不要抱有僥幸心理，警惕詐騙陷阱！

典型案例

01

刷單嘗到甜頭，步步深入陷阱

2021年5月15日，80后男子通過(guò)直播點(diǎn)贊賺紅包，關(guān)注了一個(gè)名為村亮商貿(mào)的微信公眾號(hào)，該男子向客服提供了自己的名字、年齡和地址、支付寶收款碼等信息，之后在客服的指導(dǎo)下，男子下載了一個(gè)App，添加了該App客服的賬號(hào)，該客服向男子發(fā)放任務(wù)，一開(kāi)始只是點(diǎn)贊做任務(wù)，完成之后會(huì)有傭金，起初男子賺了20元傭金，到后來(lái)該客服又讓男子下載了另一款A(yù)pp做搶單刷單的任務(wù)，在客服的指導(dǎo)下，男子開(kāi)始進(jìn)行刷單，最初的時(shí)候賺了80多元，正當(dāng)男子想要提現(xiàn)時(shí)卻發(fā)現(xiàn)要滿300元以上才能提現(xiàn)，客服告訴男子想要提現(xiàn)就必須繼續(xù)刷單，該男子遂向?qū)Ψ教峁┑馁~戶總共進(jìn)行了十次轉(zhuǎn)賬，從最初的300元、3000元到后面的30000元50000元，轉(zhuǎn)出的數(shù)額越來(lái)越大男子卻沒(méi)有絲毫懷疑自己已經(jīng)落入騙子的刷單陷阱，總共損失共計(jì)229300元。

02

明知是陷阱仍以身犯險(xiǎn)

5月22日，家住大箕鋪的17歲女生吳某因?yàn)樗伪或_了近四千余元，令人意想不到的是，該女生明知是陷阱仍以身犯險(xiǎn)。5月22日一大早，吳某在網(wǎng)上看到一條刷單賺錢的信息，通過(guò)該信息吳某很快聯(lián)系上了對(duì)方，在填寫了一份《在線申請(qǐng)入職登記表》后對(duì)方開(kāi)始給吳某派單，第一單是要求吳某在某購(gòu)物平臺(tái)上購(gòu)買一件價(jià)值83元的衣服，同時(shí)對(duì)方向吳某提供了一個(gè)微信收款碼，讓吳某直接掃描該二維碼付款，付款成功后吳某收到了7元的傭金獎(jiǎng)勵(lì)，吳某看到真的有錢可賺于是繼續(xù)完成對(duì)方下發(fā)的“任務(wù)”，金額從300元、1200元、2400元直到4800元，到了4800元的時(shí)候?qū)Ψ饺员硎緟悄硾](méi)有完成刷單任務(wù)不能結(jié)算，吳某覺(jué)得自己被騙了遂報(bào)警。事后吳某表示：“在轉(zhuǎn)賬1200元的時(shí)候我就意識(shí)到自己被騙了，但我又覺(jué)得或許真的能賺大錢呢。”抱有僥幸心理讓吳某最終損失數(shù)千元。

03

加大投入，發(fā)覺(jué)被騙已為時(shí)晚矣

3月31日，大冶羅橋街道的韓女士遭遇了一場(chǎng)刷單騙局，當(dāng)天晚上7點(diǎn)多鐘的時(shí)候正在刷手機(jī)的韓女士突然被人拉進(jìn)了一個(gè)刷單兼職賺外快的微信群，韓女士本對(duì)這些不感興趣，當(dāng)她看到群里有人說(shuō)自己刷單賺了錢時(shí)有些心動(dòng)了，通過(guò)掃描群里發(fā)送的二維碼韓女士進(jìn)入了一個(gè)聊天界面，對(duì)方自稱接待人員，韓女士選了一個(gè)36元的單便開(kāi)始了任務(wù)，首先向?qū)Ψ桨l(fā)過(guò)來(lái)的支付寶收款碼轉(zhuǎn)賬了36元，對(duì)方發(fā)來(lái)一個(gè)鏈接，韓女士點(diǎn)開(kāi)后里面顯示“押骰子比大小”，按照對(duì)方所說(shuō)的押了36元后韓女士成功提現(xiàn)了71元，以同樣的方式韓女士陸續(xù)獲得了105元、1000元的傭金。韓女士看到回報(bào)越來(lái)越大也越來(lái)越放開(kāi)膽子來(lái)，按照對(duì)方所說(shuō)的分別充值了5000元、25000元、12000元、20000元，可是對(duì)方始終辯稱韓女士沒(méi)有達(dá)到要求要繼續(xù)充值，韓女士將此事告知了自己的丈夫，丈夫一聽(tīng)意識(shí)到被騙了趕緊報(bào)警，僅僅一晚上韓女士被騙金額共計(jì)62000元。

所有刷單都是詐騙！

不要有“輕輕松松松賺大錢”的心理！

不要有任何僥幸心理！

更不要輕易向陌生賬戶匯款！

如不幸被騙，請(qǐng)保存好聊天記錄和轉(zhuǎn)賬記錄，及時(shí)報(bào)警！

來(lái)源： 平安黃石

iOS 15/iPadOS 15 之后，移動(dòng)端的 Safari 有了對(duì)擴(kuò)展插件的全面支持，在各種插件的輔助之下，移動(dòng)端 Safari 變得更加全面，體驗(yàn)也愈發(fā)接近桌面端，這對(duì)那些希望用 iPad 替代筆記本作為生產(chǎn)力工具的群體而言，是個(gè)極大的升級(jí)點(diǎn)。

如今新系統(tǒng)也已正式推出，Safari 插件的數(shù)量也增至一個(gè)較為可觀的水平，是時(shí)候?yàn)榇蠹彝扑]一些好用的插件了，下文我以 iPad 上的 Safari 為例給各位進(jìn)行演示。

首先，iPad Safari 的擴(kuò)展插件與桌面端的 Safari 插件不同，它其實(shí)是個(gè) app，Safari 插件功能是在它原生 app 派生出的一部分功能。

因此我們要到 App Store 去下載 app，然后在 Safari 當(dāng)中開(kāi)啟相關(guān)拓展插件功能。

蘋果為這類 Safari 擴(kuò)展插件設(shè)立了推薦專區(qū)，在「系統(tǒng)設(shè)置-Safari-擴(kuò)展-更多擴(kuò)展」中可以看到整個(gè)專區(qū)頁(yè)面。

地區(qū)不同，推薦的插件內(nèi)容也有所不同。

1. Momentum

這是一個(gè)啟動(dòng)頁(yè)美化工具，設(shè)置啟用之后，每次打開(kāi)新的標(biāo)簽頁(yè)時(shí)都會(huì)展示一張好看的圖片作為背景，還會(huì)顯示當(dāng)前時(shí)間，還能設(shè)立 To Do 任務(wù)和常用網(wǎng)頁(yè)。

免費(fèi)版本會(huì)為用戶每天更新一張背景圖，如果想用自己相冊(cè)里的圖片則需要升級(jí)成付費(fèi)版本。

2. AdBlock

官方放出的免費(fèi)插件排行榜中，粗略算算至少有 4 成是廣告攔截插件，AdBlock 作為此類工具中的老面孔，我自然也把它作為首選。

需要注意的是，此類插件一律被歸為內(nèi)容攔截器，開(kāi)啟的方式與其他插件有所不同，在域名欄左側(cè)「大小/Aa 按鍵」中調(diào)用 ，點(diǎn)擊該鍵就能看到內(nèi)容攔截器的開(kāi)關(guān)。

之所以叫內(nèi)容攔截器，是因?yàn)樗鼈償r截的不光是廣告，還可以把違規(guī)網(wǎng)站、跟蹤程序、評(píng)論等惱人的內(nèi)容攔下來(lái)，還用戶一個(gè)干凈純粹的頁(yè)面。

實(shí)際效果中規(guī)中矩，它可以攔下部分 Banner 類廣告，還有流媒體上的貼片廣告，但偶爾還是會(huì)出現(xiàn)一些漏網(wǎng)之魚(yú)。

3. Apollo for Reddit

這是個(gè) Reddit 論壇的第三方 app，作用類似于第三方微博客戶端，它們針對(duì) Safari 開(kāi)發(fā)的插件名叫 Open in Apollo，顧名思義，當(dāng)它偵測(cè)到你在 Safari 瀏覽器上打開(kāi) Reddit 頁(yè)面時(shí)，會(huì)自動(dòng)跳轉(zhuǎn)至 Apollo app 界面，作用簡(jiǎn)單粗暴。

4. 1Password

它也算是老牌密碼儲(chǔ)存器了，它所做的 Safari 擴(kuò)展插件的功能，也就是為網(wǎng)站自動(dòng)生成或填充對(duì)應(yīng)平臺(tái)賬號(hào)的密碼。

若你更常用蘋果自帶的密鑰卡包，那還能省下安裝 Safari 插件的步驟，可以自動(dòng)識(shí)別和填充密碼。

5. Firefox Focus

這是火狐開(kāi)發(fā)的一個(gè)無(wú)痕瀏覽器，它的 Safari 插件也被歸為內(nèi)容攔截器，但它并不攔截廣告，而是截下廣告跟蹤，讓廣告商沒(méi)辦法通過(guò)你點(diǎn)擊了哪些頁(yè)面來(lái)分析你的喜好和習(xí)慣。可以配合上面的 AdBlock 一同使用。

6. Turn Off the Lights for Safari

有了這個(gè)插件，可以在大部分視頻網(wǎng)站上，把除視頻窗口的一切內(nèi)容低亮化，類似于流媒體網(wǎng)站上常見(jiàn)的關(guān)燈模式。

7. StartPage.ai

我們?cè)诰W(wǎng)上沖著浪，不自覺(jué)發(fā)現(xiàn)自己已經(jīng)打開(kāi)了數(shù)十個(gè)頁(yè)面，在桌面端要關(guān)閉多個(gè)頁(yè)面，有鍵鼠的幫助也還算簡(jiǎn)單，但在移動(dòng)端可就沒(méi)那么方便了。

StartPage.ai 所做的，就是打開(kāi)一個(gè)新的標(biāo)簽頁(yè)，該頁(yè)展示的是當(dāng)前所有頁(yè)面，有哪些網(wǎng)站一目了然，關(guān)閉頁(yè)面的按鍵也足夠大，方便手指點(diǎn)摁。不過(guò)它與前面推薦的 Momentum 插件同屬啟動(dòng)頁(yè)工具，二者只能選其一。

8. DForce

Safari 本身支持系統(tǒng)原生的夜間模式，功能欄會(huì)根據(jù)系統(tǒng)改變淺色或深色背景，但網(wǎng)頁(yè)具體頁(yè)面并不會(huì)隨之改變，DForce 所做的，就是讓頁(yè)面內(nèi)容也變成深色，暗光下閱讀的時(shí)候多少能起到護(hù)眼的效果。

▲ 插件啟用前后對(duì)比

它提供了免費(fèi)版本，個(gè)人覺(jué)得基本夠用，付費(fèi)版只是多了些自定義選項(xiàng)。

9. Keyword Search

這個(gè)軟件就為解決一件事，Safari 地址欄進(jìn)行特定網(wǎng)站的快速搜索。

聽(tīng)起來(lái)還是有點(diǎn)復(fù)雜，我舉個(gè)例子你很快就明白了，譬如我想在愛(ài)范兒搜索某篇文章，基本操作是在地址欄輸入「ifanr.com」，然后進(jìn)入愛(ài)范兒網(wǎng)頁(yè)里點(diǎn)擊搜索，輸入關(guān)鍵詞按回車，最終才會(huì)跳轉(zhuǎn)至結(jié)果頁(yè)面。

但有了 Keyword Search，我們可以提前設(shè)置好關(guān)鍵字，譬如用「i」設(shè)置為愛(ài)范兒站內(nèi)搜索指令的快捷詞，后面接上我們想要搜索的關(guān)鍵詞，按下回車即可。

若你正在學(xué)習(xí)日語(yǔ)，或者你經(jīng)常逛一些日文網(wǎng)站，那不讓試試這款插件。它的功能類似于 Mate，只不過(guò)它專攻日語(yǔ)翻譯。

另外，該插件開(kāi)發(fā)者為用戶預(yù)設(shè)好了數(shù)個(gè)常用網(wǎng)站的捷徑，當(dāng)你安裝好這個(gè)插件后，不妨輸入「y Rick Astley」試試。

10. Mate

它本身是個(gè)翻譯 app，所以在 Safari 上也是充當(dāng)翻譯插件的角色存在，不過(guò)用戶只能選取字段進(jìn)行翻譯，并不能把一鍵翻譯整個(gè)頁(yè)面的內(nèi)容，看著跟其 198 元的售價(jià)不太相符。

不過(guò)這一需求，可以用系統(tǒng)自帶的翻譯功能滿足，當(dāng)我們?yōu)g覽全外文網(wǎng)站時(shí)，地址欄左邊會(huì)出現(xiàn)翻譯按鍵，按一下就能把整個(gè)頁(yè)面轉(zhuǎn)換成中文，雖然準(zhǔn)確度差強(qiáng)人意，不過(guò)可以起到輔助理解的作用，聊勝于無(wú)。

11. 10tenJapanese

若你正在學(xué)習(xí)日語(yǔ)，或者你經(jīng)常逛一些日文網(wǎng)站，那不讓試試這款插件。它的功能類似于 Mate，只不過(guò)它專攻日語(yǔ)翻譯。

啟用該插件后，頁(yè)面會(huì)出現(xiàn)一個(gè)光標(biāo)，長(zhǎng)按并拖動(dòng)至日文字上，就會(huì)實(shí)時(shí)顯示出它的英文釋義，確實(shí)它也有局限性，看來(lái)以后學(xué)日語(yǔ)之前，還得先學(xué)好英文。

12. JSBox

移動(dòng)端的 Safari 本身沒(méi)有自帶檢查器，JSBox 插件的出現(xiàn)彌補(bǔ)了這一缺陷。不過(guò)代碼呈現(xiàn)的形式不太友好，點(diǎn)開(kāi)就把整個(gè)頁(yè)面擋住了。

用戶在這上面還可以設(shè)立一些 Javascript 腳本，執(zhí)行一些簡(jiǎn)單的功能是沒(méi)有問(wèn)題的。

13. Notebook

有了這個(gè)插件，用戶可以不離開(kāi) Safari 網(wǎng)頁(yè)，直接開(kāi)始筆記，支持 Apple Pencil，還有頁(yè)面截圖功能，之后在 app 里進(jìn)行更細(xì)致的劃重點(diǎn)、圈段落等細(xì)致操作，也很不錯(cuò)，算是原生備忘錄的一個(gè)補(bǔ)充。

14. 網(wǎng)頁(yè)二維碼生成

它能將當(dāng)前瀏覽的頁(yè)面生成二維碼，方便你把它分享出去。

還可以輔助線下宣傳，譬如大學(xué)社團(tuán)可以通過(guò)它，把賽事活動(dòng)的報(bào)名頁(yè)面做成二維碼，放在線下報(bào)名海報(bào)上。

目前看來(lái)，移動(dòng)端 Safari 的插件生態(tài)處于數(shù)量尚可，質(zhì)量參差的狀態(tài)，如果你奔著某種特定功能上 App Store 去搜索的話，大概率會(huì)無(wú)功而返，只能去插件專區(qū)里一個(gè)一個(gè)點(diǎn)開(kāi)去找，操作略微繁瑣，整體來(lái)看還有較高的上升空間。

不過(guò)當(dāng)你花費(fèi)一段時(shí)間，把 Safari 打造得更符合你的使用習(xí)慣后，所得到的正向反饋，也足以把一切辛勞統(tǒng)統(tǒng)抵消，這不正是折騰 app 的樂(lè)趣所在嗎？