微信小程序07-JavaScript,WXS介紹

  • JavaScript 介紹 和小程序的組成
  • WXS的介紹

一、JavaScript 介紹 和小程序的組成

在這裏插入圖片描述

小程序的組成在這裏插入圖片描述
小程序宿主環境差異

iOS上小程序代碼運行到JavaScriptCore上,由wky渲染
android: 通過X5JScore解析,X5內核渲染
IDE:在微信開發者工具中,小程序nwjs 上運行
所以最好在真機調試
在這裏插入圖片描述

二、 WXS的介紹

WXS:其實是對JavaScript做了一個上層的封裝和限制。

WXS 結合 WXML 構建頁面視圖的結構內容,通常使用WXS做一個過濾和計算處理。

WXS 的語言特性:
在這裏插入圖片描述

  • WXS的模塊特性:

代碼例子:

WXS可以通過標籤來聲明,也可以通過文件聲明。文件需要
命名.wxs 後綴。在wxs模塊裏面,他有自己獨立的作用域,每個模塊定義的變量和函數都是私有的。

index.wxml
聲明瞭wxs模塊,這裏用wxs 標籤來聲明,wxs 模塊的模塊名用module屬性來定義,在wxs 模塊外,使用view標籤,在裏面引入wxs模塊的message的變量。
WXS定義的變量對外都是不可見的,通過module.exports屬性 可以將模塊內的變量和函數暴露出來使用。

在wxs模塊內,可以通過require引入其他wxs文件。
在index.wxml文件內,通過wxs標籤來引入了外部wxs文件所定義的模塊,這裏的src是外部wxs文件的路徑,module 屬性是外部wxs文件對應的文件名。

m2.wxs
在該文件中引入了require函數,引入了m1.wxs的模塊,然後在index.wxml文件裏,使用我們聲明的wxs模塊聲明的變量。注意在同一個頁面不要重複去聲明,wxs模塊名,否則後面的wxs模塊名會覆蓋前面的定義的wxs模塊。

在這裏插入圖片描述

WXS有7種常用的運算符:
基本運算符: + - * /
一元運算符: ++ , –

在這裏插入圖片描述

WXS語句和javascript語句基本一樣,if else ,do while ,switch

區別wxs不支持try catch.

  • WXS的數據類型:

在這裏插入圖片描述
regexp:正則類型 function:函數類型
生成date對象需要用getDate函數,生成regexp需要用getRegexp函數。
判斷wxs的數據類型可以通過construct 判斷,
其他基礎類庫,es5標準,javascript 中去查。在這裏插入圖片描述

瞭解下就可以,可忽略

在這裏插入圖片描述

bom:瀏覽器的對象模型,處理瀏覽器窗口和框架,描述了與瀏覽器進行交互的方法和接口,修改url,重新打開瀏覽器的窗口。
dom:瀏覽器的文檔對象模型 html xml 的應用程序接口,加載到瀏覽器的當前網頁,通過js,讀取當前網頁的dom對象。

在這裏插入圖片描述

Native:原生的模塊,通過這個模塊使用JavaScript本身不具備的能力。
NPM:包管理系統,最大的開源庫生態系統。可以通過各種NPM擴展包快速的實現一些功能。
Nodejs:基於谷歌的V8引擎實現的JavaScript運行時。使用高效輕量級的事件驅動,以及非阻塞的io模型,通常作爲後端使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章