前端后期課程小程序1教學(xué)wepy框架

WePY框架class關(guān)鍵字的使用WePY框架的安裝和使用WePY框架的開發(fā)規(guī)范1.class關(guān)鍵字的使用1.1基本語法1.定義基本的類結(jié)構(gòu)class是ES6中的關(guān)鍵字，用于實現(xiàn)面向?qū)ο缶幊獭Ｏ啾扔谄胀ǖ膄unction構(gòu)造函數(shù)，class關(guān)鍵字實現(xiàn)面向?qū)ο缶幊谈觾?yōu)雅直觀，與Java、C#等后臺編程語言的面向?qū)ο髮崿F(xiàn)方式靠攏。class

聲明創(chuàng)建一個基于原型繼承的具有給定名稱的新類。定義類的基本語法如下：classPerson

{//當(dāng)前Person類的專屬區(qū)域}注意：類名稱的首字母應(yīng)該大寫！1.class關(guān)鍵字的使用1.1基本語法2.constructor構(gòu)造函數(shù)構(gòu)造函數(shù)constructor是用于創(chuàng)建和初始化類實例的一個特殊方法。每個class類內(nèi)部，必然有且只有一個構(gòu)造函數(shù)。定義構(gòu)造函數(shù)的基本語法如下：classPerson

{//當(dāng)前Person類的專屬區(qū)域

constructor(name,age){=namethis.age=age}}1.class關(guān)鍵字的使用1.1基本語法2.constructor構(gòu)造函數(shù)的注意點在一個類中，只能有一個名為constructor的特殊方法。在new類的實例對象的時候，必然會優(yōu)先執(zhí)行這個類內(nèi)部的constructor構(gòu)造函數(shù)。類中如果沒有顯式地定義構(gòu)造函數(shù)，則類中默認(rèn)存在一個隱藏的、看不見的空構(gòu)造函數(shù)。默認(rèn)的構(gòu)造函數(shù)格式為：constructor(){}如果程序員顯示地定義了一個構(gòu)造函數(shù)，則程序員定義的構(gòu)造函數(shù)會覆蓋默認(rèn)的構(gòu)造函數(shù)。1.class關(guān)鍵字的使用1.2實例成員和靜態(tài)成員1.實例成員和靜態(tài)成員的概念實例成員：指的是通過new類得到的實例對象，才能夠訪問到的成員；實例成員包含實例屬性和實例方法。靜態(tài)成員：指的是不需要通過new類，直接通過類名就能夠訪問的成員；靜態(tài)成員包含靜態(tài)屬性和靜態(tài)方法。1.class關(guān)鍵字的使用1.2實例成員和靜態(tài)成員2.實例屬性實例屬性指的是必須通過new類得到的實例對象，才能訪問的屬性。在class類內(nèi)部的constructor中，通過this掛載的屬性，都叫做實例屬性，代碼示例如下：classPerson{constructor(name,age){

=name//實例屬性namethis.age

=age//實例屬性age}}

constp1=

newPerson('zs',20)console.log()//通過實例p1訪問name屬性console.log(p1.age)//通過實例p1訪問age屬性1.class關(guān)鍵字的使用1.2實例成員和靜態(tài)成員3.實例方法實例方法指的是必須通過new類得到的實例對象，才能訪問的方法。在class類內(nèi)部，凡是和constructor平級的方法，都叫做實例方法，代碼示例如下：classPerson{//定義一個空的構(gòu)造函數(shù)constructor(){}//定義實例方法saysay(){console.log('調(diào)用了實例的say方法’)}}

constp1=

newPerson('zs',20)p1.say()1.class關(guān)鍵字的使用1.2實例成員和靜態(tài)成員4.靜態(tài)屬性靜態(tài)屬性指的是直接通過類名就能訪問到的屬性。在class類內(nèi)部，通過static關(guān)鍵字定義靜態(tài)成員，定義靜態(tài)屬性的代碼示例如下：classPerson{constructor(){}//定義靜態(tài)屬性infostaticinfo=

'這是Person的靜態(tài)屬性’}//訪問Person類的靜態(tài)info屬性

console.log(P)注意：目前ES6中不支持靜態(tài)屬性。ES7有一個靜態(tài)屬性的提案，目前Babel轉(zhuǎn)碼器支持。1.class關(guān)鍵字的使用1.2實例成員和靜態(tài)成員5.靜態(tài)方法靜態(tài)方法指的是直接通過類名就能訪問到的方法。在class類內(nèi)部，如果實例方法之前使用static關(guān)鍵字進行修飾，就得到了靜態(tài)方法，代碼示例如下：classPerson{constructor(){}//通過static定義靜態(tài)的方法static

show(){console.log('調(diào)用了靜態(tài)的show方法’)}}

//調(diào)用靜態(tài)方法Person.show()1.class關(guān)鍵字的使用1.3類的繼承1.什么是繼承繼承，在面向?qū)ο缶幊讨校敢粋€對象直接使用另一對象的屬性和方法。繼承最大的好處是方便了代碼的復(fù)用。在繼承的中，分為父類和子類兩個概念。如果子類繼承了父類，則子類就擁有了父類的特性，例如：子類可以訪問父類中的實例方法和實例屬性。注意：javascript中，子類只能繼承父類的實例成員，不能繼承父類的靜態(tài)成員。1.class關(guān)鍵字的使用1.3類的繼承2.extends關(guān)鍵字實現(xiàn)繼承在Javascript的class關(guān)鍵字中，使用extends實現(xiàn)繼承，語法如下：class子類extends

父類{}其中，extends關(guān)鍵字之前的類叫做子類，extends關(guān)鍵字之后的類被叫做父類。1.class關(guān)鍵字的使用1.3類的繼承3.什么是super()函數(shù)ES6語法規(guī)定：

super是父類構(gòu)造函數(shù)的引用。如果子類通過extends繼承了父類，且子類中定義了自己的constructor構(gòu)造函數(shù)，則子類的構(gòu)造函數(shù)中，必須調(diào)用super()函數(shù)；classPerson{//父類Personconstructor(){}}//子類Chinese繼承了父類Person

classChineseextends

Person{constructor(){//子類Chinese顯示定義了自己的構(gòu)造函數(shù)super()//此時，子類必須調(diào)用super()函數(shù)}}1.class關(guān)鍵字的使用1.3類的繼承4.super()函數(shù)的作用因為super()函數(shù)代表父類的構(gòu)造函數(shù)，所以在子類中調(diào)用super()函數(shù)，可以為父類的構(gòu)造函數(shù)傳參。代碼示例如下：classPerson{//父類Personconstructor(name){=name}}classChineseextends

Person{//子類Chineseconstructor(name){super(name)}}constc1=

newChinese(‘zs’)//創(chuàng)建子類的實例對象c1，初始化姓名為zsconsole.log(c1)1.class關(guān)鍵字的使用1.3類的繼承5.定義獨屬于子類的屬性父類上的實例屬性和方法，子類可以通過繼承的形式訪問，如果子類想擁有獨屬于自己的屬性或方法，則應(yīng)該定義到子類內(nèi)部，示例代碼如下：classPerson{constructor(name){=name}}classChineseextends

Person{constructor(name,idNo){super(name)//當(dāng)子類實現(xiàn)了繼承，則子類的this必須書寫到super()之后，否則語法報錯!!

this.idNo=idNo//idNo(身份證號)是獨屬于中國人的屬性}}constc1=

newChinese('zs','1304231997********')class關(guān)鍵字的使用WePY框架的安裝和使用WePY框架的開發(fā)規(guī)范2.WePY框架的安裝和使用2.1WePY框架概述1.什么是WePYWePY

是騰訊官方出品的一個小程序快速開發(fā)框架，對原生小程序的開發(fā)模式進行了再次封裝，更貼近于MVVM架構(gòu)模式，并支持ES6/7的一些新特性，同時語法風(fēng)格更接近于Vue.js，使用WePY框架能夠提高小程序的開發(fā)效率。注意：WePY只是小程序的快速開發(fā)框架之一，市面上還有諸如mpvue之類的小程序開發(fā)框架也比較流行。2.WePY框架的安裝和使用2.1WePY框架概述2.為什么要使用WePYWePY

相比于原生小程序開發(fā)，擁有眾多的開發(fā)特性和優(yōu)化方案，例如：開發(fā)風(fēng)格接近于Vue.js，支持很多vue中的語法特性；通過polyfill讓小程序完美支持Promise；可以使用ES6等諸多高級語法特性，簡化代碼，提高開發(fā)效率；對小程序本身的性能做出了進一步的優(yōu)化；支持第三方的npm資源；支持多種插件處理和編譯器；etc…2.WePY框架的安裝和使用2.1WePY框架概述3.安裝WePY框架WePY的安裝或更新都通過npm進行，全局安裝或更新WePY命令行工具，可以在終端運行以下命令：npminstallwepy-cli-g2.WePY框架的安裝和使用2.2創(chuàng)建WePY項目1.初始化WePY項目WePY命令行工具安裝完畢后，可以運行如下命令，初始化項目結(jié)構(gòu)：wepyinitstandard

myproject其中，”wepyinit”

是固定寫法，代表要初始化wepy項目；”standard”

代表模板類型為標(biāo)準(zhǔn)模板，可以運行”wepylist”

命令查看所有可用的項目模板；”myproject”

為自定義的項目名稱。注意：創(chuàng)建項目的時候，要勾選ESLint選項！2.WePY框架的安裝和使用2.2創(chuàng)建WePY項目2.WePY項目與小程序項目的關(guān)系通過wepyinit命令初始化的wepy項目，準(zhǔn)確來說只是一個模板項目，不能直接當(dāng)作小程序運行。需要運行相關(guān)的命令，把模板項目編譯為小程序項目，才可以運行。wepy模板項目開發(fā)人員把項目源代碼編寫到模板項目中小程序項目根據(jù)模板項目編譯得到小程序項目實時編譯特點：是根據(jù)模板自動生成的可以運行查看項目效果可以發(fā)布上線特點：代碼是開發(fā)人員手動編寫的無法直接被當(dāng)作小程序運行2.WePY框架的安裝和使用2.2創(chuàng)建WePY項目3.實時編譯WePY項目使用wepyinit命令初始化項目后，只是得到了一個模板項目，如果想開啟實時編譯，得到小程序項目，步驟如下：運行cdmyproject切換至WePY項目根目錄運行npminstall安裝WePY項目依賴項運行wepybuild--watch開啟實時編譯注意：wepybuild--watch命令，會循環(huán)監(jiān)聽WePY項目中源代碼的變化，自動編譯生成小程序項目，生成的小程序項目默認(rèn)被存放于dist目錄中。2.WePY框架的安裝和使用2.3WePY項目的目錄結(jié)構(gòu)├──dist

小程序運行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）├──node_modules├──src

代碼編寫的目錄（該目錄為使用WePY后的開發(fā)目錄）│├──componentsWePY組件目錄（組件不屬于完整頁面，僅供完整頁面或其他組件引用）││├──com_a.wpy可復(fù)用的WePY組件a││├──com_b.wpy可復(fù)用的WePY組件b│├──pagesWePY頁面目錄（屬于完整頁面）││├──index.wpyindex頁面（經(jīng)build后，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）││├──other.wpyother頁面（經(jīng)build后，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）│└──app.wpy小程序配置項（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會在dist目錄下生成app.js、app.json和app.wxss文件）└──package.json項目的package配置2.WePY框架的安裝和使用2.4加載并配置WePY項目1.加載WePY項目到微信開發(fā)者工具1.7.0版本之后的wepy-cli工具生成的項目根目錄下，包含project.config.json文件，記錄了項目的基本配置信息，例如：項目的名稱、appId、生成的小程序項目根路徑等。如果項目中存在project.config.json文件，使用微信開發(fā)者工具-->添加項目，”項目目錄”請選擇wepy項目根目錄，即可根據(jù)project.config.json文件中的配置，把wepy編譯生成的小程序項目加載到微信開發(fā)者工具中。2.WePY框架的安裝和使用2.4加載并配置WePY項目2.解決ESLint報錯的問題ESLint是好用的代碼格式檢查工具，能夠幫助程序員養(yǎng)成良好的代碼書寫習(xí)慣。首次把WePY項目加載到微信開發(fā)者工具后，終端會報兩個紅色的錯誤信息，截圖如下：這是因為ESLint規(guī)定，不允許在代碼中出現(xiàn)連續(xù)多個空行，此時根據(jù)報錯信息，找到對應(yīng)的文件，刪除多余的空行，重新編譯WePY項目即可。2.WePY框架的安裝和使用2.5.wpy文件的使用說明1..wpy文件的組成部分一個.wpy文件可分為三大部分，各自對應(yīng)于一個標(biāo)簽：

腳本部分，即<script></script>標(biāo)簽中的內(nèi)容，又可分為兩個部分：

邏輯部分，除了config對象之外的部分，對應(yīng)于原生的

.js文件

配置部分，即config對象，對應(yīng)于原生的.json文件

結(jié)構(gòu)部分，即<template></template>模板部分，對應(yīng)于原生的.wxml文件。

樣式部分，即<style></style>樣式部分，對應(yīng)于原生的.wxss文件。其中，小程序入口文件app.wpy不需要template，所以編譯時會被忽略。2.WePY框架的安裝和使用2.5.wpy文件的使用說明2.lang和src屬性.wpy文件中的script、template、style這三個標(biāo)簽都支持

lang和

src屬性，lang決定了其代碼編譯過程，src決定是否外聯(lián)代碼，存在src屬性且有效時，會忽略內(nèi)聯(lián)代碼。各標(biāo)簽對應(yīng)的lang值如下表所示：標(biāo)簽lang默認(rèn)值lang支持值stylecsscss、less、scss、stylus、postcsstemplatewxmlwxml、xml、pug(原jade)scriptbabelbabel、TypeScript2.WePY框架的安裝和使用2.5.wpy文件的使用說明3.代碼高亮文件后綴為.wpy，可共用Vue的高亮規(guī)則，但需要手動設(shè)置。如下是VSCode中實現(xiàn)代碼高亮的相關(guān)設(shè)置步驟：在Code里先安裝Vue的語法高亮插件Vetur。打開任意.wpy文件。點擊右下角的選擇語言模式，默認(rèn)為純文本。在彈出的窗口中選擇.wpy的配置文件關(guān)聯(lián)...。在選擇要與.wpy關(guān)聯(lián)的語言模式中選擇Vue。在VSCode編輯器設(shè)置中設(shè)置。//文件-首選項-設(shè)置-settings.json中，添加"files.associations":{"*.wpy":"vue"}注意：其它常見IDE或編輯器中設(shè)置代碼高亮，可以參考：代碼高亮2.WePY框架的安裝和使用2.5.wpy文件的使用說明4.小程序入口app.wpy入口文件app.wpy中所聲明的小程序?qū)嵗^承自wepy.app類，包含一個config屬性和其它全局屬性、方法、事件。在build編譯期間：config屬性會被編譯為小程序的app.json全局配置文件；config屬性之外的其它節(jié)點，會被編譯為小程序的app.js文件；style標(biāo)簽會被編譯為小程序的app.wxss全局樣式；2.WePY框架的安裝和使用2.5.wpy文件的使用說明5.使用app.wpy全局配置小程序外觀在小程序的入口文件中找到window節(jié)點：app.wpy->script標(biāo)簽->config->window即可全局配置小程序的外觀，示例代碼如下：<script>importwepyfrom'wepy';exportdefaultclassextendswepy.app{

config={//對應(yīng)app.json文件"window":{//全局配置小程序外觀"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"black"}}}</script>2.WePY框架的安裝和使用2.5.wpy文件的使用說明6.頁面page.wpy頁面文件page.wpy中所聲明的頁面實例繼承自wepy.page類，該類的主要屬性介紹如下：屬性說明config頁面配置對象，對應(yīng)于原生的page.json文件，類似于app.wpy中的configcomponents頁面組件列表對象，聲明頁面所引入的組件列表data頁面渲染數(shù)據(jù)對象，存放可用于頁面模板綁定的渲染數(shù)據(jù)methodswxml事件處理函數(shù)對象，存放響應(yīng)wxml中所捕獲到的事件的函數(shù)，如bindtap、bindchangeeventsWePY組件事件處理函數(shù)對象，存放響應(yīng)組件之間通過$broadcast、$emit、$invoke所傳遞的事件的函數(shù)其它小程序頁面生命周期函數(shù)，如onLoad、onReady等，以及其它自定義的方法與屬性class關(guān)鍵字的使用WePY框架的安裝和使用WePY框架的開發(fā)規(guī)范3.WePY框架的開發(fā)規(guī)范3.1自定義默認(rèn)首頁1.創(chuàng)建home首頁在src->pages目錄下，創(chuàng)建home.wpy頁面，并創(chuàng)建頁面的基本代碼結(jié)構(gòu)，示例代碼如下：<template></template>

<script>importwepyfrom

'wepy'export

default

classHomeextendswepy.page{config={}methods={}}</script>

<style></style>3.WePY框架的開發(fā)規(guī)范3.1自定義默認(rèn)首頁2.設(shè)置默認(rèn)首頁如果要把剛創(chuàng)建的home.wpy設(shè)置為默認(rèn)首頁，需要打開src->app.wpy入口文件，將home.wpy的頁面路徑，注冊到config->pages數(shù)組中，并調(diào)整為數(shù)組的第一項即可，示例代碼如下：<script>importwepyfrom

'wepy'import

'wepy-async-function'

export

default

class

extendswepy.app{config={pages:['pages/home','pages/index’]}}</script>3.WePY框架的開發(fā)規(guī)范3.1自定義默認(rèn)首頁3.創(chuàng)建.wpy頁面的注意事項在創(chuàng)建.wpy頁面的時候，要注意以下事項：每個頁面的script標(biāo)簽中，必須導(dǎo)入wepy模塊，并創(chuàng)建繼承自wepy.page的頁面類；否則會報錯。每個頁面的路徑，必須記錄到app.wpy的config->pages數(shù)組中。頁面路徑記錄完畢之后，必須再回到頁面文件中，摁下Ctrl+S快捷鍵重新編譯生成頁面，否則會報錯。3.WePY框架的開發(fā)規(guī)范3.2為WePY頁面綁定事件并傳參1.使用@綁定事件處理函數(shù)原生小程序使用bindtap、bindinput等綁定事件處理函數(shù)，在wepy框架中，優(yōu)化了事件綁定機制，支持類似于Vue.js的事件綁定語法，今后綁定事件可以采用如下方式：原bindtap="clickHandler"替換為@tap="clickHandler"原bindinput="inputHandler"替換為@input="inputHandler"3.WePY框架的開發(fā)規(guī)范3.2為WePY頁面綁定事件并傳參2.事件傳參的優(yōu)化寫法如果@符號綁定的事件處理函數(shù)需要傳參，可以采用優(yōu)化的寫法，示例如下：原bindtap="clickHandler"data-index={{index}}替換為@tap="click({{index}})"3.WePY框架的開發(fā)規(guī)范3.2為WePY頁面綁定事件并傳參3.定義事件處理函數(shù)通過@符號綁定的事件處理函數(shù)，必須定義到頁面的methods節(jié)點下。注意：對于WePY中的methods屬性，因為與Vue中的使用習(xí)慣不一致，非常容易造成誤解，這里需要特別強調(diào)一下：WePY中的methods屬性只能聲明頁面wxml標(biāo)簽的事件處理函數(shù)，不能聲明自定義方法，自定義方法需要聲明到和methods平級的節(jié)點位置，這與Vue中的用法是不一致的。3.WePY框架的開發(fā)規(guī)范3.3WePY頁面的數(shù)據(jù)綁定1.使用data定義私有數(shù)據(jù).wpy頁面中的私有數(shù)據(jù)，需要定義到data節(jié)點中，頁面上可以使用雙大括號語法{{}}渲染data中的數(shù)據(jù)示例代碼如下：<template><view>{{msg}}</view></template>data={

msg:'hellowepy'}3.WePY框架的開發(fā)規(guī)范3.3WePY頁面的數(shù)據(jù)綁定2.將文本框與data做雙向數(shù)據(jù)綁定實現(xiàn)步驟如下：為input輸入框綁定數(shù)據(jù)和事件處理函數(shù)，代碼為：<inputvalue="{{msg}}"@input="inputHandler"/>在methods中定義事件處理函數(shù)，函數(shù)名稱為inputHandler在事件處理函數(shù)中，通過事件參數(shù)e.detail.value獲取到最新的文本框內(nèi)容通過this.msg=e.detail.value為data中的msg重新賦值3.WePY框架的開發(fā)規(guī)范3.3WePY頁面的數(shù)據(jù)綁定3.使用wxs腳本在WePY中使用wxs腳本的方式如下：將wxs腳本定義為外聯(lián)文件，并且后綴名為.wxs；在<script></script>標(biāo)簽內(nèi)，通過import導(dǎo)入相對路徑的wxs模塊；在當(dāng)前頁面的class類中，通過wxs={}注冊剛才導(dǎo)入的wxs模塊；被注冊的wxs模塊，只能在當(dāng)前頁面的temp