柚子快報(bào)激活碼778899分享：微信小程序前端開發(fā)
柚子快報(bào)激活碼778899分享：微信小程序前端開發(fā)
一、小程序簡介
小程序與普通網(wǎng)頁開發(fā)的區(qū)別
運(yùn)行環(huán)境不同API不同
小程序中無法調(diào)用DOM和BOM的API。可以調(diào)用微信環(huán)境提供的各種API
地理定位掃碼支付開發(fā)模式不同
申請(qǐng)小程序開發(fā)賬號(hào)安裝小程序開發(fā)者工具創(chuàng)建和配置小程序項(xiàng)目可使用微信掃碼下方小程序碼，體驗(yàn)小程序：
二、注冊(cè)小程序開發(fā)賬號(hào)
點(diǎn)擊注冊(cè)按鈕：打開微信公眾平臺(tái)，點(diǎn)擊右上角“立即注冊(cè)”。選擇注冊(cè)賬號(hào)類型 → 小程序填寫賬號(hào)信息提示郵箱激活點(diǎn)擊激活賬號(hào)鏈接選擇主體類型 → 個(gè)人主體信息登記獲取小程序的AppID
開發(fā) → 開發(fā)設(shè)置 → 開發(fā)者ID
三、安裝開發(fā)者工具
了解微信開發(fā)者工具：官方推薦使用的小程序開發(fā)工具下載 →?微信開發(fā)者工具（穩(wěn)定版 Stable Build）下載地址與更新日志 | 微信開放文檔?掃碼登陸設(shè)置外觀和代理 → 左上設(shè)置圖標(biāo) → 外觀：淺色 → 字號(hào)18、行距12 → 代理：不使用任何代理
四、創(chuàng)建小程序項(xiàng)目
點(diǎn)擊“加號(hào)”按鈕填寫項(xiàng)目信息：不使用云服務(wù)、JS基礎(chǔ)版項(xiàng)目創(chuàng)建完成在模擬器上查看項(xiàng)目效果? → 在手機(jī)上查看效果 → 預(yù)覽掃碼主界面5個(gè)組成部分
注意：
機(jī)型選擇iphone 6/7/8 顯示比例85%調(diào)試器中用的最多的 console設(shè)置中的通用設(shè)置用的比較多幫助中可以找到開發(fā)者文檔
五、項(xiàng)目結(jié)構(gòu)
了解項(xiàng)目基本組成結(jié)構(gòu)?
pages：存放所有小程序的頁面utils：存放工具性質(zhì)的模塊app.js：項(xiàng)目的入口文件app.json：項(xiàng)目的全局配置文件app.wxss：項(xiàng)目的全局樣式文件project.config.json：項(xiàng)目的配置文件sitemap.json：小程序及其頁面是否允許被微信索引小程序頁面的組成部分
小程序官網(wǎng)建議把所有小程序的頁面都存放在 pages 目錄中，以單獨(dú)的文件夾存在
每個(gè)頁面由四個(gè)基本文件組成：
.js文件? ? ? ? 頁面的腳本文件，存放頁面的數(shù)據(jù)事件處理函數(shù)等.json文件? ? 當(dāng)前頁面的配置文件，配置窗口的外觀、表現(xiàn)等.wxml文件? ?頁面的模板結(jié)構(gòu)文件.wxss文件? ?當(dāng)前頁面的樣式表文件
json配置文件的作用
JOSN是一種數(shù)據(jù)格式，在實(shí)際開發(fā)中，JSON總是以 配置文件 的形式出現(xiàn)。小程序項(xiàng)目中也不例外：通過不同的 .json配置文件，可以對(duì)小程序項(xiàng)目進(jìn)行不同級(jí)別的配置。
小程序項(xiàng)目中由4種json配置文件，分別是：
項(xiàng)目根目錄中的 app.json配置文件 →全局配置文件項(xiàng)目根目錄中的 project.config.json配置文件項(xiàng)目根目錄中的 sitemap.json配置文件每個(gè)頁面文件夾中的 .json配置文件
app.json文件
app.json是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現(xiàn)、底部tab等。Demo項(xiàng)目里邊的app.json配置內(nèi)容如下：
pages：用來記錄當(dāng)前小程序所有頁面的路徑window：全局定義小程序所有頁面的背景色、文字顏色等style：全局定義小程序組件所使用的樣式版本sitemapLocation：用來指明sitemap.json的位置
project.config.json文件
project.config.json是項(xiàng)目配置文件，用來記錄我們對(duì)小程序開發(fā)工具所做的個(gè)性化配置，例如：
setting 中保存了 編譯相關(guān)的配置projectname 中保存的是 項(xiàng)目名稱appid? 中保存的是 小程序的賬號(hào)ID
sitemap.json文件
微信現(xiàn)已開放 小程序內(nèi)搜索，效果類似于PC網(wǎng)站的SEO。sitemap.json 文件用來 配置小程序頁面是否允許微信索引。
當(dāng)開發(fā)者允許微信索引時(shí)，微信會(huì)通過爬蟲的形式，為小程序的頁面內(nèi)容建立索引。當(dāng)用戶的所有關(guān)鍵字和頁面的索引匹配成功的時(shí)候，小程序的頁面將可能展示在搜索結(jié)果中。
? ?
頁面的 .json配置文件
小程序中的每一個(gè)頁面，可以使用 .json文件來對(duì)本頁面的窗口外觀進(jìn)行配置，頁面中的配置項(xiàng)會(huì)覆蓋 app.json 的 window中相同的配置項(xiàng)。
新建小程序頁面
在app.json --> pages 中新增頁面的存放路徑，小程序開發(fā)者工具即可幫我們自動(dòng)創(chuàng)建對(duì)應(yīng)的頁面文件。小程序會(huì)把排在第一位的頁面當(dāng)作項(xiàng)目首頁進(jìn)行渲染。? ? ? ? ? ? ? ?
六、小程序代碼構(gòu)成
1.WXML
WXML 是小程序框架設(shè)計(jì)的一套標(biāo)簽語言，用來構(gòu)建小程序頁面的結(jié)構(gòu)，其作用類似于網(wǎng)頁開發(fā)中的HTML
2.WXML和HTML區(qū)別
標(biāo)簽名稱不同
HTML(div? span? img? a)WXML(view text? image? navigator)屬性節(jié)點(diǎn)不同
超鏈接
數(shù)據(jù)綁定列表渲染條件渲染
3.什么是WXSS
WXSS是一套 樣式語言，用于描述WXML的組件樣式，類似于網(wǎng)頁開發(fā)中的CSS
4.WXSS和CSS區(qū)別
新增了rpx尺寸單位
css中需要手動(dòng)進(jìn)行像素單位換算，例如remwxss在底層支持新的尺寸單位rpx，在不同大小的屏幕上小程序會(huì)自動(dòng)進(jìn)行換算提供了全局的樣式和局部樣式
項(xiàng)目根目錄中的app.wxss會(huì)作用于所有小程序頁面局部頁面的.wxss樣式僅對(duì)當(dāng)前頁面生效WXSS僅支持部分CSS選擇器
.class? ?#idelement并集選擇器、后代選擇器::after? ?::before等偽類選擇器
5.小程序中的 .js 文件
一個(gè)項(xiàng)目僅僅提供頁面展示是不夠的，在小程序中，我們通過.js文件來處理用戶的操作。例如：響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等。
.js文件的分類：
app.js
整個(gè)小程序項(xiàng)目的入口文件，通過調(diào)用App( )函數(shù)來啟動(dòng)整個(gè)小程序頁面的 .js文件
頁面的入口文件，通過調(diào)用Pages( )函數(shù)來創(chuàng)建并運(yùn)行頁面普通的 .js文件
普通的功能模塊文件，用來封裝公共的函數(shù)或?qū)傩怨╉撁媸褂?/p>
6.小程序的宿主環(huán)境
什么是宿主環(huán)境
? ? ? ? 宿主環(huán)境指的是 程序運(yùn)行所必須的依賴環(huán)境。例如：
? ? ? ? ? ? ? ? Android系統(tǒng)和iOS系統(tǒng) 是兩個(gè)不同的宿主環(huán)境。安卓版的微信App是不能在iOS環(huán)境下運(yùn)行的，所以，Android是安卓軟件的宿主環(huán)境，脫離了宿主環(huán)境的軟件是沒有任何意義的。
小程序的宿主環(huán)境
手機(jī)微信是小程序的宿主環(huán)境
小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁無法完成的功能
小程序宿主環(huán)境包含的內(nèi)容
通信模型
通信的主體：小程序中通信的主體是渲染層和邏輯層
WXML模板和WXSS樣式工作在渲染層JS腳本工作在邏輯層通信模型
渲染層和邏輯層之間的通信
由微信客戶端進(jìn)行轉(zhuǎn)發(fā)邏輯層和第三方服務(wù)器之間的通信
由微信客戶端進(jìn)行轉(zhuǎn)發(fā)運(yùn)行機(jī)制
啟動(dòng)的過程
把小程序的代碼包下載到本地解析app.json全局配置文件執(zhí)行app.js小程序入口文件，調(diào)用App()創(chuàng)建小程序?qū)嵗秩拘〕绦蚴醉撔〕绦騿?dòng)完成頁面渲染過程
加載解析頁面的.json配置文件加載頁面的.wxml模板和.wxss樣式執(zhí)行頁面的.js文件，調(diào)用Page()創(chuàng)建頁面實(shí)例頁面渲染完成組件
小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以基于組件快速搭建出漂亮的頁面結(jié)構(gòu)。API
組件
1、視圖容器
view
普通視圖區(qū)域類似于HTML中的div，是一個(gè)塊級(jí)元素常用來實(shí)現(xiàn)頁面的布局效果
基本使用
實(shí)現(xiàn)如圖的flex橫向布局效果：
關(guān)于display:flex; justify-content:space-around;的解釋?彈性盒子（display: flex）布局超全講解|Flex 布局教程_display:flex-CSDN博客
srcoll-view
可滾動(dòng)的視圖區(qū)域常用來實(shí)現(xiàn)滾動(dòng)列表的效果
基本使用
實(shí)現(xiàn)如圖的縱向滾動(dòng)效果：
swiper、swiper-item
輪播圖容器組件 和 輪播圖item組件
基本使用
swiper組件的常用屬性
屬性類型默認(rèn)值說明indicator-dotsbooleanfalse是否顯示面板指示點(diǎn)indicator-colorcolorrgba(0,0,0,0.3)指示點(diǎn)顏色indicator-active-colorcolor#000000當(dāng)前選中的指示點(diǎn)顏色autoplaybooleanfalse是否自動(dòng)切換intervalnumber5000自動(dòng)切換時(shí)間間隔circularbooleanfalse是否采用銜接滑動(dòng)
.swiper-container{
height: 150px; /* 輪播圖容器的高度 */
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
background-color: lightpink;
}
2、基礎(chǔ)內(nèi)容
text
文本組件類似于HTML中的span標(biāo)簽，是一個(gè)行內(nèi)元素
基本使用
通過text組件的 selectable / user-select 屬性，實(shí)現(xiàn)長按選中文本內(nèi)容的效果：
rich-text
富文本組件支持把HTML字符串渲染為WXML結(jié)構(gòu)
基本使用
通過rich-text組件的 nodes 屬性節(jié)點(diǎn)，把HTML字符串渲染為對(duì)應(yīng)的UI結(jié)構(gòu)：
3、表單組件
button
按鈕組件功能比HTM中的button按鈕豐富通過open-type屬性可以調(diào)用微信提供的各種功能(客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等)
基本使用
image
圖片組件image組件默認(rèn)寬度約300px、高度約240px
image組件的mode屬性
image組件的 mode 屬性用來指定圖片的 裁剪 和 縮放 模式，常用的 mode 屬性值如下：
mode值說明 scaleToFill (默認(rèn)值)縮放模式， 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素aspectFit縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整的將圖片顯示出來aspectFill縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。即 圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取widthFix 縮放模式，寬度不變，高度自動(dòng)變化，保持原圖寬高比不變 heightFix縮放模式，高度不變，寬度自動(dòng)變化，保持原圖寬高比不變
4、導(dǎo)航組件
navigator(后面課程會(huì)專門講解)
頁面導(dǎo)航組件類似HTML中的 a 鏈接
5、媒體組件
6、map地圖組件
7、canvas畫布組件
8、開放能力
9、無障礙訪問
七、API
1.小程序API概述
小程序中的API是由宿主環(huán)境提供的，通過這些豐富的小程序API，開發(fā)者可以方便的調(diào)用微信提供的能力，例如：獲取用戶信息、本地存儲(chǔ)、支付功能等。
2.小程序API的3大分類
事件監(jiān)聽API
特點(diǎn)：以 on 開頭，用來 監(jiān)聽某些事件的觸發(fā)舉例：wx.onWindowResize(function callback)監(jiān)聽窗口尺寸變化的事件同步API
特點(diǎn)1：以 Sync 結(jié)尾的API都是同步API特點(diǎn)2：同步API的執(zhí)行結(jié)果，可以通過函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常舉例：wx.setStorageSync('key','value') 向本地存儲(chǔ)中寫入內(nèi)容異步API
特點(diǎn)：類似于jQuery中的 $.ajax(options)函數(shù)，需要通過success、fail、complete接受調(diào)用的結(jié)果舉例：wx.request()發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過success回調(diào)函數(shù)接收數(shù)據(jù)
八、協(xié)同工作和發(fā)布
協(xié)同工作
1、了解 權(quán)限管理需求
在中大型的公司里，人員的分工非常仔細(xì)：同一個(gè)小程序項(xiàng)目，一般會(huì)有不同崗位、不同角色的員工同時(shí)參與設(shè)計(jì)和開發(fā)。
此時(shí)處于管理需要，我們迫切需要對(duì)不同崗位、不同角色的員工的權(quán)限進(jìn)行邊界的劃分，使他們能夠高效的進(jìn)行協(xié)同工作。
2、了解項(xiàng)目成員的組織結(jié)構(gòu)
3、小程序的開發(fā)流程
提出需求 → 設(shè)計(jì) → 開發(fā) → 體驗(yàn) → 測試 → 發(fā)布
小程序的版本
1、軟件開發(fā)過程中的不同版本
在軟件開發(fā)工程中，根據(jù)時(shí)間節(jié)點(diǎn)的不同，會(huì)產(chǎn)出不同的軟件版本，例如：
開發(fā)者編寫代碼的同時(shí)，對(duì)項(xiàng)目代碼進(jìn)行自測(開發(fā)版本)程序達(dá)到一個(gè)穩(wěn)定可體驗(yàn)的狀態(tài)時(shí)，開發(fā)者把體驗(yàn)版本給到產(chǎn)品經(jīng)理和測試人員進(jìn)行體驗(yàn)測試最后修復(fù)完程序的Bug后，發(fā)布正式版供外部用戶使用
2、小程序的版本
開發(fā)版本：使用開發(fā)者工具，可將代碼上傳到開發(fā)版本中。開發(fā)版本只保留每人最新的一份上傳的代碼。點(diǎn)擊提交審核，可將代碼提交審核。開發(fā)版本可刪除，不影響線上版本和審核中版本的代碼。體驗(yàn)版本：可以選擇某個(gè)開發(fā)版本作為體驗(yàn)版，并且選取一份體驗(yàn)版。審核中的版本：只能有一份代碼處于審核中。有審核結(jié)果后可以發(fā)布到線上，也可直接重新提交審核，覆蓋原審核版本。線上版本：線上所有用戶使用的代碼版本，該版本代碼在新版本代碼發(fā)布后被覆蓋更新。
3、發(fā)布上線
整體步驟：
上傳代碼?
點(diǎn)擊開發(fā)者工具頂部工具欄中的“上傳”按鈕填寫版本號(hào)以及項(xiàng)目備注可以在后臺(tái)查看上傳之后的版本：登陸小程序管理后臺(tái) -> 管理 ->版本管理 -> 開發(fā)版本提交審核
為了保證小程序的質(zhì)量，以及符合相關(guān)的規(guī)范，小程序的發(fā)布是需要經(jīng)過騰訊官方審核的提交審核的方式：在開發(fā)版本的列表中，點(diǎn)擊"提交審核"按鈕之后，按照頁面提示填寫相關(guān)的信息發(fā)布
審核通過之后，管理員的微信中會(huì)受到小程序通過審核的通知，此時(shí)在審核版本的列表中，點(diǎn)擊“發(fā)布”按鈕之后，即可把“審核通過”的版本發(fā)布為“線上版本”，供所有小程序用戶訪問和使用基于小程序碼進(jìn)行推廣
比普通二維碼在樣式上更具有辨識(shí)度和視覺沖擊力能夠更加清晰的樹立小程序的品牌形象可以幫助開發(fā)者更好的推廣小程序獲取小程序碼的5個(gè)步驟
登錄小程序后臺(tái)管理設(shè)置基本設(shè)置基本信息小程序碼及線下物料下載查看小程序運(yùn)營數(shù)據(jù)的兩種方式
“小程序后臺(tái)”查看
登錄管理后臺(tái)點(diǎn)擊側(cè)邊欄的“統(tǒng)計(jì)”點(diǎn)擊相應(yīng)的tab可以看到相關(guān)數(shù)據(jù)使用“小程序數(shù)據(jù)助手”查看
打開微信搜索“小程序數(shù)據(jù)助手”查看已發(fā)布的小程序相關(guān)的數(shù)據(jù)
九、模板與配置
1、WXML模板語法 --- 數(shù)據(jù)綁定
數(shù)據(jù)綁定的基本原則
在date中定義頁面的數(shù)據(jù)
在頁面對(duì)應(yīng)的 .js文件中，把數(shù)據(jù)定義到 date對(duì)象中即可在WXML中使用數(shù)據(jù)
Mustache 語法的格式；把 date 中的數(shù)據(jù)綁定到頁面中渲染，使用Mustache語法(雙大括號(hào))將變量包起來即可。語法格式為：
綁定內(nèi)容
動(dòng)態(tài)綁定內(nèi)容
頁面數(shù)據(jù)如下： 頁面結(jié)構(gòu)如下： 綁定屬性
動(dòng)態(tài)綁定屬性
頁面數(shù)據(jù)如下： 頁面結(jié)構(gòu)如下： 注：可以添加 mode屬性使圖片自適應(yīng)展示 運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）
三元運(yùn)算
頁面數(shù)據(jù)如下： 頁面結(jié)構(gòu)如下： 算術(shù)運(yùn)算
頁面數(shù)據(jù)如下： 頁面結(jié)構(gòu)如下：
在微信小程序中，random?是一個(gè)常用的方法，用于生成一個(gè) [0, 1) 之間的隨機(jī)浮點(diǎn)數(shù)。
toFixed()?是 JavaScript 中?Number?對(duì)象的一個(gè)方法，用于將數(shù)字格式化為具有指定小數(shù)位數(shù)的字符串。
你看到的類似這樣的代碼：
var randomNum = Math.random().toFixed(2);
在上面的代碼中：
? Math.random()?生成一個(gè) [0, 1) 之間的隨機(jī)浮點(diǎn)數(shù)。? .toFixed(2)?將這個(gè)浮點(diǎn)數(shù)格式化為一個(gè)字符串，并保留兩位小數(shù)。
所以，randomNum?會(huì)是一個(gè)形如 "0.xx" 的字符串，其中 "xx" 是兩位隨機(jī)小數(shù)。
如果你想在微信小程序中生成一個(gè)具有特定小數(shù)位數(shù)的隨機(jī)浮點(diǎn)數(shù)，你應(yīng)該首先使用?Math.random()?生成隨機(jī)數(shù)，然后使用?toFixed()?進(jìn)行格式化。如果你需要的是一個(gè)數(shù)字而不是字符串，你可以再次使用?parseFloat()?或?Number()?來轉(zhuǎn)換它。
var randomNum = parseFloat((Math.random() * 100).toFixed(2)); // 生成一個(gè)0到99.99之間的隨機(jī)浮點(diǎn)數(shù)
請(qǐng)注意，使用?toFixed()?會(huì)四舍五入到指定的小數(shù)位數(shù)，并且結(jié)果是一個(gè)字符串。因此，如果你想再次得到一個(gè)數(shù)字，你需要進(jìn)行轉(zhuǎn)換。
2、WXML模板語法 --- 事件綁定
什么是事件？
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。
小程序中常用的事件
類型綁定方式事件描述tapbindtap 或 bind:tap手指觸摸后馬上離開，類似于HTML中的click事件inputbindinput 或 bind:input文本框的輸入事件changebindchange 或 bind:change狀態(tài)改變時(shí)觸發(fā)
事件對(duì)象的屬性列表
當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象event，它的詳細(xì)屬性如下表所示：
屬性類型說明typeString事件類型timeStampinteger頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)targetObject觸發(fā)事件的組件的一些屬性值集合currentTargetObject當(dāng)前組件的一些屬性值集合detailObject額外的信息touchesArray觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組changedTouchesArray觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組
target (常用)?和 currentTarget 的區(qū)別
target是觸發(fā)該事件的源頭組件，currentTarget是當(dāng)前事件所綁定的組件。舉例如下：
點(diǎn)擊內(nèi)部按鈕時(shí)，點(diǎn)擊事件以 冒泡 的方式向外擴(kuò)散，也會(huì)觸發(fā)外層 view 的 tap 事件處理函數(shù)。
此時(shí)，對(duì)于外層的view來說：
e.target指向的是觸發(fā)事件的源頭組件，因此，e.target是內(nèi)部的按鈕組件e.currentTarget指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget是當(dāng)前 view的組件
如同你去拍超級(jí)風(fēng)暴，target相當(dāng)于風(fēng)暴中心，currentTarget相當(dāng)于你站的位置
bindtap的語法格式
在小程序中，不存在HTML中的onclick鼠標(biāo)點(diǎn)擊事件，而是通過tap事件來響應(yīng)用戶的觸摸行為。
通過bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
在頁面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過形參 event (一般簡寫成e)來接收：
事件綁定
在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值
通過調(diào)用 this.setData(dataObject)方法，可以給頁面data中的數(shù)據(jù)重新賦值，示例如下：
事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼不能正常工作：
因?yàn)樾〕绦驎?huì)把bindtao的屬性值統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)于要調(diào)用一個(gè)名稱為btnHandler(123)的事件處理函數(shù)。
可以為組件提供 data-* 自定義屬性傳參，其中 *代表的是參數(shù)的名字。示例如下：
info會(huì)被解析為 參數(shù)的名字?jǐn)?shù)值2會(huì)被解析為參數(shù)的值
在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名 可以獲取到 具體參數(shù)的值，示例如下：
btnHanlder(event){
//dataset 是一個(gè)對(duì)象，包含了所有通過 data-* 傳遞過來的參數(shù)項(xiàng)
console.log(event.target.dataset)
//通過 dataset 可以訪問到具體參數(shù)的值
console.log(event.target.dataset.info)
}
bindinput的語法格式
在小程序中，通過 input事件 來響應(yīng)文本框的輸入事件，語法格式如下：
通過bindinput，可以為文本框綁定輸入事件： 在頁面的 .js 文件中定義事件處理函數(shù)： inputHandler(e){
//e.detail.value 是變化股后，文本框最新的值
console.log(e.detail.value)
}
實(shí)現(xiàn)文本框和data之間的數(shù)據(jù)同步
步驟：
定義數(shù)據(jù)：? ? ? ? ? ? ? ? ? ?渲染結(jié)構(gòu)：美化樣式：綁定input事件處理函數(shù)：
3、條件渲染
1.wx : if
在小程序中，使用? wx:if = "{{ condition }}" 來判斷是否需要渲染該代碼塊：
也可以用 wx:elif? 和? wx:else 來添加 else 判斷：（else不用加任何條件，代表最后一種情況）
2、結(jié)合
如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè)
注：
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)行展示與隱藏的切換
4、列表渲染
1、wx:for
通過wx:for可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)，示例如下：
索引是：{{index}} 當(dāng)前項(xiàng)是：{{item}}
默認(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)的變量名
示例代碼：
索引是：{{idx}}，當(dāng)前項(xiàng)是：{{itemName}}
3、wx:key 的使用
類似于Vue列表渲染中的 :key，小程序再實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來的列表項(xiàng)指定唯一的key值，從而提高渲染的效率，示例代碼如下：
//index.wxml
//index.js
data: {
arr1:['蘋果','華為','小米'],
array:['蘋果','華為','小米'],
userList:[
{id:1,name:'小紅'},
{id:2,name:'小黃'},
{id:3,name:'小白'}
]
}
5、WXSS模板樣式
1.什么是WXSS
WXSS 是一套 樣式語言，用于美化WXML的組件樣式，類似于網(wǎng)頁開發(fā)中的CSS。
2.WXSS 和 CSS 的關(guān)系
WXSS具有CSS大部分特性，同時(shí)，WXSS還對(duì)CSS進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開發(fā)。
與CSS相比，WXSS擴(kuò)展的特性有：
rpx 尺寸單位@import 樣式導(dǎo)入
1.什么是 rpx 尺寸單位
rpx(responsive pixel)是微信小程序獨(dú)有的，用來解決屏適配的尺寸單位。
?2.rpx的實(shí)現(xiàn)原理
rpx的實(shí)現(xià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)的像素單位來渲染，從而實(shí)現(xiàn)屏幕適配。
3.rpx 與 px 之間的單位換算*（了解）
在iPhone6上，屏幕寬度為375px，共有750個(gè)物理像素，等分為750rpx。則：
750rpx = 375px = 750物理像素
1rpx = 0.5px = 1物理像素
設(shè)備rpx換算px（屏幕寬度/750）px換算rpx（750/屏幕寬度）iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6 Plus1rpx = 0.552px1px = 1.81rpx
官方建議：開發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用iPhone6作為視覺稿的標(biāo)準(zhǔn)。
開發(fā)舉例：在iPhone6上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為200rpx和40rpx。
3、什么是樣式導(dǎo)入
使用WXSS提供的 @import 語法，可以導(dǎo)入外聯(lián)的樣式表。
4、@import的語法格式
@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用 ; 表示語句結(jié)束。示例如下：
5、全局樣式和局部樣式
1、全局樣式
定義在app.wxss中的樣式為全局樣式，作用于每一個(gè)頁面。
2、局部樣式
在頁面 .wxss 文件中定義的樣式為局部樣式，只作用于當(dāng)前頁面。
注意：
當(dāng)局部樣式和全局樣式?jīng)_突時(shí)，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局的樣式
6、全局配置
1.全局配置文件以及常用的配置項(xiàng)
小程序根目錄下的?app.josn?文件時(shí)小程序的全局配置文件。常用的配置項(xiàng)如下：
pages
記錄當(dāng)前小程序所有頁面的存放路徑window
全局設(shè)置小程序窗口的外觀tabBar
設(shè)置小程序底部的 tabBar 效果style
是否啟用新版的組件樣式
2.全局配置 -- window
1、小程序窗口的組成部分 --?navigationBar 和 background部分
2、了解 window 節(jié)點(diǎn)常用的配置項(xiàng)
屬性名類型默認(rèn)值說明navigationBarTitleTextString字符串導(dǎo)航欄標(biāo)題文字內(nèi)容navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色，如#000000navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色，僅支持 black / whitebackgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉loading的樣式，僅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局開啟下拉刷新onReachBottomDistanceNumber50頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離，單位為px
1、2、3是用來配置導(dǎo)航欄相關(guān)的樣式效果；4、5用來配置窗口背景相關(guān)的；6、7用來控制頁面效果的選項(xiàng)
3、設(shè)置導(dǎo)航欄的標(biāo)題
設(shè)置步驟：app.json ---> window --->?navigationBarTitleText
4、設(shè)置導(dǎo)航欄的背景色
設(shè)置步驟：app.json ---> window --->??navigationBarBackgroundColor
不支持文本顏色，只支持以#開頭的
5、設(shè)置導(dǎo)航欄的標(biāo)題顏色
設(shè)置步驟：app.json ---> window --->?navigationBarTextStyle
需求：將導(dǎo)航條上的標(biāo)題從默認(rèn)的black改為white
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ↓
注意：navigationBarTextStyle 的可選值只有 black 和 white
6、全局開啟下拉刷新功能
概念：下拉刷新是移動(dòng)端的專有名詞，指的是通過手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁面數(shù)據(jù)的行為。
設(shè)置步驟：app.json ---> window --->?enablePullDownRefresh 改為true
注意：在app.json中啟用下拉刷新功能，會(huì)作用于每一個(gè)小程序頁面！
模擬器并不能百分百還原真機(jī)操作，調(diào)試時(shí)需要真機(jī)預(yù)覽進(jìn)行測試
7、設(shè)置當(dāng)下刷新時(shí)窗口的背景顏色
當(dāng)全局開啟下拉刷新功能之后，默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色，設(shè)置步驟為：app.json ---> window --->?backgroundColorTop 為指定16進(jìn)制的顏色值#efefef
8、設(shè)置下拉刷新時(shí)loading的樣式
當(dāng)全局開啟下拉刷新功能之后，默認(rèn)窗口的loading樣式為白色，如果要更改loading樣式的效果，設(shè)置步驟為：app.json ---> window ---> backgroundTextStyle 為指定值 dark / light。
9、設(shè)置上拉觸底的距離
概念：上拉觸底是移動(dòng)端的專有名詞，通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。
設(shè)置步驟為：app.json ---> window --->?onReachBottomDistance
注意：默認(rèn)距離為50px，如果沒有特殊需求，使用默認(rèn)值即可。
柚子快報(bào)激活碼778899分享：微信小程序前端開發(fā)
好文閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Americanas美購寶
