天天看點

15.微信小程式(JS邏輯檔案)

大綱

(1)業務邏輯案例

(2)調用API案例

(3)ECMAScript----

(4)小程式執行環境

(5)子產品化

(6)作用域與全局變量

前言

一個服務僅僅隻有界面展示是不夠的,還需要和使用者做互動:響應使用者的點選、擷取使用者的位置等等。在小程式裡邊,通過編寫 腳本檔案來處理使用者的操作。

小程式的主要開發語言是 JavaScript

JS 作用:

①開發者使用 JS來開發業務邏輯;

②調用小程式的 API 來完成業務需求。

①業務邏輯案例

互動案例:

15.微信小程式(JS邏輯檔案)

點選 button 按鈕的時候,希望界面顯示 “Hello World”,于是在 button 上聲明一個屬性: bindtap ,在 JS 裡聲明 clickMe 方法來響應點選操作:

15.微信小程式(JS邏輯檔案)

②調用API案例

調用API:

除了業務邏輯外,開發者還可以在 JS 中調用小程式提供的豐富的 API,利用這些 API 可以很友善的調起微信提供的能力,例如擷取使用者資訊、地理定位、本地存儲、微信支付、掃一掃、界面互動等等。

在初始化的項目裡,在 pages/index/index.js 就調用了 wx.getUserInfo 擷取微信使用者的頭像和昵稱,最後通過 setData 把擷取到的資訊顯示到界面上

調用界面互動API案例:

wx.showToast(Object object)顯示消息提示框

15.微信小程式(JS邏輯檔案)

掃一掃API案例:

wx.scanCode(Object object)調起用戶端掃碼界面進行掃碼

場景:

為了讓使用者減少輸入,我們可以把複雜的資訊編碼成一個二維碼,利用宿主環境/微信用戶端wx.scanCode這個API調起微信掃一掃,使用者掃碼之後,wx.scanCode的success回調會收到這個二維碼所對應的字元串資訊。

例如餐廳點餐的小程式,我們給餐廳中每個餐桌編号1-100号,把這個數字編碼到二維碼中,掃碼獲得編号之後,就可以知道是哪一桌點的菜,大大提高點餐體驗和效率。

線上二維碼:草料二維碼https://cli.im

15.微信小程式(JS邏輯檔案)
15.微信小程式(JS邏輯檔案)

真機測試小程式時,也可以開啟手機調試模闆

點選右上角按鈕,彈框中選擇打開調試,之後會自動關閉,重新開機即可

15.微信小程式(JS邏輯檔案)

還有很多場景可以結合微信掃碼能力做到很好的體驗,例如通過掃商品上的一維碼做一個商品展示的小程式;通過掃共享單車上的二維碼去開啟單車。

我們可以多思考如何利用這個掃碼能力去替代一些繁瑣的輸入操作,讓我們的小程式變得更加便捷。

ECMAScript

在大部分開發者看來,ECMAScript和JavaScript表達的是同一種含義,但是嚴格的說,兩者的意義是不同的。

ECMAScript是一種由Ecma國際通過ECMA-262标準化的腳本程式設計語言, JavaScript 是 ECMAScript 的一種實作。

簡介:

ECMAScript(簡稱ES)是一個語言标準,javascript則是基于這個标準實作的腳本語言。

發展曆史:

①命名:

javascript于1996年釋出了第一版,當時的名字其實不叫javascipt,而是叫livescript,不過釋出之後一直不溫不火,正好這個時候sun公司推出來了一個面向對象的語言—Java,Java擁有很好的跨平台特性,是以很快得到了市場的認可。

②改名:

為了蹭Java的熱度,livescript的母公司Netscape網景公司,就将livescript改為javascript,事實證明,這次名字改的非常明智。

③三足鼎立:

javascript的火爆引起了微軟公司的注意,他們很快也推出了Jscript腳本語言,以此來抗衡Netscape公司,并且當時還有一門浏覽器腳本語言,叫ScriptEase,這樣市場上就有了三種腳本語言,并且各個語言各有特色,互不相容。

④制定規範

1997年,Netscape給歐洲計算機制造商協會(European Computer Manufacturers Association,簡稱ECMA)送出了一個草案,要求根據javascript來制定一個浏覽器腳本語言标準。

ECMA邀請了Netscape、Sun、微軟、Borland和其他一些對腳本程式設計感興趣的公司的程式員組成了一個技術委員會—第 39 技術委員會(TC39),共同商讨制定了一個腳本語言的規範:ECMAScript。各個腳本語言必須按照規範來實作和限制自己的功能。

當然這個規範也是不斷發展的,第一版規範叫做:ECMA-262,現在則以es+年份來命名,基本每年發一次新規範。

由此,JavaScript 的正式名稱是 ECMAScript 。

⑤近期釋出

2011年6月釋出ECMAscript 5版本

2013年3月,ECMAScript 6草案當機,不再添加新功能。新的功能設想将被放到ECMAScript 7。2013年12月,ECMAScript 6草案釋出。然後是12個月的讨論期,聽取各方回報。2015年6月17日,ECMAScript 6釋出正式版本,即ECMAScript 2015。是以ECMAScript 2015簡稱ES6。ES5和ES6

⑥分析:

關于Netscape為什麼要送出草案建立标準,有一種說法是為了提高javascript的權威性,和行業影響力

JS是 ECMAScript 一種實作後,即ES是一個語言标準,JS則是基于這個标準實作的腳本語言。

了解這個關系可以幫助開發者了解小程式中的 JS同浏覽器中的JS以及 NodeJS 中的JS是不相同的。

ECMA-262 規定了 ECMAScript 語言的幾個重要組成部分:

文法、類型、語句、關鍵字、操作符、對象

浏覽器的JavaScript

浏覽器中JavaScript 構成如下圖:

15.微信小程式(JS邏輯檔案)

浏覽器中的JavaScript 是由 ECMAScript 和 BOM(浏覽器對象模型)以及 DOM(文檔對象模型)組成的,Web前端開發者很熟悉這兩個對象模型,它使得開發者可以去操作浏覽器的一些表現。

NodeJS的JavaScript

NodeJS中JavaScript 構成如下圖:

15.微信小程式(JS邏輯檔案)

NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native子產品組成,NodeJS的開發者會非常熟悉 NPM 的包管理系統,通過各種拓展包來快速的實作一些功能

小程式的JavaScript

同開發者所熟悉的以上兩個環境是不同的,小程式中 JavaScript 構成如圖

15.微信小程式(JS邏輯檔案)

小程式中的 JavaScript 是由ECMAScript 以及小程式架構和小程式 API 來實作的。

注意:

①同浏覽器中的JavaScript 相比沒有 BOM 以及 DOM 對象,是以類似 JQuery、Zepto這種浏覽器類庫是無法在小程式中運作起來的,

②因為缺少 Native 子產品和NPM包管理的機制,小程式中無法加載原生庫,也無法直接使用大部分的 NPM 包。

小程式執行環境

明白了小程式中的 JavaScript 同浏覽器以及NodeJS有所不同後

開發者還需要注意到另外一個問題,不同的平台的小程式的腳本執行環境也是有所差別的。

小程式目前可以運作在三大平台:

①iOS平台,包括iOS9、iOS10、iOS11

②Android平台

③小程式IDE

這種差別主要是展現三大平台實作的 ECMAScript 的标準有所不同。截止到目前一共有七個版本的ECMAScript 标準

相容問題:

目前開發者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标準,但是在小程式中, iOS9和iOS10 所使用的運作環境并沒有完全的相容到 ECMAScript 6 标準,一些 ECMAScript 6 中規定的文法和關鍵字是沒有的或者同标準是有所不同的,例如:箭頭函數、let const、模闆字元串等…

方案:

一些開發者會發現有些代碼在舊的手機作業系統上出現一些文法錯誤。為了解決這類問題,小程式IDE提供文法轉碼工具,将 ECMAScript 6代碼轉為 ECMAScript 5代碼,進而在所有的環境都能得到很好的執行。

開發者需要在項目設定中,勾選 ES6 轉 ES5 開啟此功能

15.微信小程式(JS邏輯檔案)

子產品化

子產品化:

浏覽器中,所有 JavaScript 是在運作在同一個作用域下的,定義的參數或者方法可以被後續加載的腳本通路或者改寫。

同浏覽器不同,小程式中可以将任何一個JavaScript 檔案作為一個子產品,通過module.exports 或者 exports 對外暴露接口。

子產品示例:

B.js 引用子產品A,并使用A暴露的方法完成排序的操作

header.js檔案引用sort.js暴露的子產品,完成排序操作

①根目錄下建立data→sort.js檔案

15.微信小程式(JS邏輯檔案)

②編寫子產品,進行導出暴露

15.微信小程式(JS邏輯檔案)

③header.js檔案利用require導入子產品

15.微信小程式(JS邏輯檔案)

④使用子產品暴露導出的排序方法進行排序

15.微信小程式(JS邏輯檔案)

以上案例便調用了sort.js導出的子產品,實作數組元素排序,即小程式的子產品化思想。

腳本執行順序

執行順序:

浏覽器中腳本嚴格按照加載的順序執行,即自上而下執行

小程式中的腳本執行順序有所不同,小程式的執行的入口檔案是 app.js ,并且會根據其中 require 的子產品順序決定檔案的運作順序

app.js示例:

15.微信小程式(JS邏輯檔案)

作用域

同浏覽器中運作的腳本檔案有所不同,小程式的腳本的作用域同 NodeJS 更為相似。

在檔案中聲明的變量和函數隻在該檔案中有效,不同的檔案中可以聲明相同名字的變量和函數,不會互相影響

案例:

①在腳本 a.js 中定義局部變量

15.微信小程式(JS邏輯檔案)

②在腳本 b.js 中無法通路 a.js 定義的變量

15.微信小程式(JS邏輯檔案)

全局變量設定:

當需要使用全局變量的時,通過使用全局函數 getApp() 擷取全局的執行個體,并設定相關屬性值,來達到設定全局變量的目的

案例:

①在腳本 a.js 中設定全局變量

15.微信小程式(JS邏輯檔案)

②在腳本 b.js 中通路 a.js 定義的全局變量

15.微信小程式(JS邏輯檔案)

注意:上述示例隻有在 a.js 比 b.js 先執行才有效,當需要保證全局的資料可以在任何檔案中安全的被使用到,那麼可以在 App() 中進行設定

全局變量

app.js定義全局變量

定義全局變量num(userInfo為使用者資料,暫時不用關注)

15.微信小程式(JS邏輯檔案)

操作全局變量

①擷取以及修改 global 變量的方法

15.微信小程式(JS邏輯檔案)

②擷取 更改後的global 變量

15.微信小程式(JS邏輯檔案)