<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                >[success] # WXS 1. `WXS`是小程序開發語言中的一種文件類型,它是一種用于在微信小程序中描述頁面的語言。`WXS`是`WeiXin Script`的縮寫,是一種 `JavaScript` 語法的變體,用于提供數據綁定、屬性操作等功能。 2. `WXS` 與 `JavaScript `是不同的語言,有自己的語法,并不和 `JavaScript `一致。(不過基本一致) >[info] ## 為什么產生wxs 在小程序里面的**Mustache(大胡子語法中)** 是不能使用Page 中定義的函數調用,例如下面的寫法是不生效的 ~~~ <view>{{fomatter(123)}}</view> ~~~ * index.js ~~~ Page({ fomatter(val){ return val+$ } }) ~~~ 產生這個問題的原因小程序的運行環境分為邏輯層和視圖層,分別由2個線程管理,其中: * WXML 模板和 WXSS 樣式工作在視圖層,界面使用 WebView 進行渲染 * JavaScript代碼工作在邏輯層,運行在JsCore或v8里 這樣設計主要原因是**邏輯和視圖分離,即使業務邏輯計算非常繁忙,也不會阻塞渲染和用戶在視圖層上的交互** 同樣產生的問題是 * 視圖層(webview)中不能運行JS,而邏輯層JS又無法直接修改頁面DOM,數據更新及事件系統只能靠線程間通訊,但跨線程通信的成本極高,特別是需要頻繁通信的場景 整個交互過程如圖,**touchmove 事件從視圖層(Webview)傳遞到邏輯層,中間會由微信客戶端(Native)做中轉,邏輯層處理 touchmove 事件,計算需移動的位置,然后再通過 setData 傳遞到視圖層,中間同樣會由微信客戶端(Native)做中轉** ![](https://img.kancloud.cn/db/25/db25e568793d4806b23a624a5064aed0_725x463.png) ![](https://img.kancloud.cn/a6/c1/a6c120c53e5cf35c7c57f80f9586467e_764x503.png) 這類損耗是存在的 但小程序視圖層運行也是存在`webview`,也是有`js`環境的,只不過過去不給開發者開放,將某些場景交還回`webview` 就可以解決問題,但對于小程序平臺而言,大量開放webview里的js編寫,違反了它的初衷,比如開發者會直接操作dom,影響性能體驗。所以小程序平臺提出一種新規范,限制webview里可運行的js的能力。這就是wxs 由來 >[info] ## 使用場景 WXS具備如下特征: * WXS是可以在視圖層(webview)中運行的JS * WXS無法直接修改業務數據,僅能設置當前組件的`class`和`style`,或者對數據進行格式化。要修改邏輯層的數據,需要通過 callMethod,傳遞參數給邏輯層 * WXS是被限制過的JavaScript,可以進行一些簡單的邏輯運算 * WXS可以監聽touch事件,處理滾動、拖動交互 故可以得出WXS的適用場景,主要包括: * 用戶交互頻繁、僅需改動組件樣式(比如布局位置),無需改動數據內容的場景,比如側滑菜單、索引列表、滾動漸變等 * 數據格式處理,比如文本、日期格式化,或者國際化。通過WXS可以模擬實現Vue框架的[過濾器](https://cn.vuejs.org/v2/guide/filters.html) >[info] ## 特點 WXS使用的限制和特點: * WXS 不依賴于運行時的基礎庫版本,可以在所有版本的小程序中運行; * WXS 的運行環境和其他 JavaScript 代碼是隔離的,WXS 中不能調用其他 JavaScript 文件中定義的函數,也不能調用小程序提供的API; * 由于運行環境的差異,在 iOS 設備上小程序內的 WXS 會比 JavaScript 代碼快 2 ~ 20 倍。在 android 設備 上二者運行效率無差異; >[info] ## 使用 1. WXS 代碼可以編寫在 wxml 文件中的`<wxs>`標簽內,或以`.wxs`為后綴名的文件內。 2. 每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數,默認為私有的,對其他模塊不可見; 3. 一個模塊要想對外暴露其內部的私有變量與函數,只能通過 `module.exports` 實現; >[danger] ##### `<wxs>`標簽內 1. 在`wxs` 標簽內使用很像 h5 時候聲明 `script` 標簽 2. 注意點 只能編寫`CommonJS`,像`es6` 的箭頭函數,對象省略key 和value 的都不能使用 ~~~html <!-- 方式一 通過標簽形式 --> <wxs module="format"> function formatPrice(price) { return "¥" + price } // 必須導出后, 才能被其他地方調用: 必須使用CommonJS導出 module.exports = { formatPrice: formatPrice } </wxs> <view> <text> {{format.formatPrice(100)}} </text> </view> ~~~ >[danger] ##### `.wxs` 文件導入 1. 在根目錄創建一個`utils` 編寫一個用來測試 `foo.wxs` 文件 | 屬性名 | 類型 | 默認值 | 說明 | | --- | --- | --- | --- | | module | String | | 當前`<wxs>`標簽的模塊名。必填字段。 | | src | String | | 引用 .wxs 文件的相對路徑。僅當本標簽為**單閉合標簽**或**標簽的內容為空**時有效 | ~~~js function foo() { var str = "123" return Number(str) } module.exports = { foo: foo } ~~~ 2. 使用時候 ~~~html <!-- 導入wxs 文件 --> <wxs module="foo" src="/utils/foo.wxs"></wxs> <view>{{ foo.foo() }}</view> ~~~ >[info] ## 使用require 導入 ~~~ // /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg"; ~~~ ~~~ // /pages/logic.wxs var tools = require("./tools.wxs"); console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg); ~~~ >[info] ## 注意說明 wxs 可以理解為被封印的`js` 引擎,因此提供的功能并不是傳統意義上的全部js,需要[參考](https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/02variate.html)小程序文檔所來看開放的功能
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看