成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序使用之WXS

AprilJ / 967人閱讀

摘要：跟類似是描繪頁面結(jié)構(gòu)的，小程序有一套自己的標(biāo)簽，而大部分前端的樣式都可以用在里面。關(guān)于數(shù)據(jù)綁定部分，小程序使用語法雙大括號進(jìn)行綁定。這里要講的是，小程序自己的一套腳本語言，可以用于渲染頁面。

文章鏈接：https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg

之前做過一段時間的小程序開發(fā)，自己也寫過兩個自己的小程序，了解些前端的知識，相對而言還是比較容易上手的，小程序的視圖采用wxml 與 wxss 編寫，對比前端就是html 與 css。wxml 跟html 類似是描繪頁面結(jié)構(gòu)的，小程序有一套自己的標(biāo)簽，而大部分前端的css樣式都可以用在 wxss里面。關(guān)于數(shù)據(jù)綁定部分，小程序使用 Mustache 語法（雙大括號） 進(jìn)行綁定。這里要講的是wxs ，小程序自己的一套腳本語言，可以用于渲染頁面。

一個簡單的例子，新建一個a.wxml 文件，代碼如下：


  var str = "qwerty"
  module.exports.txt = str



  {{a.txt}}

這里wxs 代碼直接編寫在wxml文件內(nèi)，定義wxs 的module名為a，這個參數(shù)是必須的；通過 exports暴露對外的屬性，外部使用的話，直接通過module名調(diào)用屬性值。
當(dāng)然，wxs代碼也可以寫在以.wxs 為后綴名的文件內(nèi)a.wxs ，里面直接編寫代碼：

var str = "qwerty"
module.exports.txt = str

使用的話，在a.wxml 文件內(nèi)同樣需要使用 標(biāo)簽，并且定義module 名，注意src 使用相對路徑引入wxs文件：



  {{a.txt}}

這里推薦使用以 .wxs 為后綴名來封裝代碼，這樣便于其他文件通用。

同時，在.wxs模塊中可以引用其他 wxs 文件模塊，注意這里只能以文件的形式引用，通過require 引用文件相對路徑。

//編寫 b.wxs文件
var str = "123456"
module.exports.txt = str 

//wxs 代碼直接編寫在 wxml文件內(nèi)

  //通過require 引用 b.wxs文件
  var b = require("./b.wxs")
  var str = "qwerty"
  module.exports.txt = b.txt



  {{a.txt}}


------------------------------------------

//在 a.wxs 里引用 b.wxs
var b = require("./b.wxs")
var str = "qwerty"
module.exports.txt = b.txt 

//a.wxml 里引入 a.wxs


  {{a.txt}}

同樣wxs 還可以對外暴露方法，


  var add = function(i, j) {
    return i + j
  }
  module.exports.add = add



  {{a.add(1,2)}}

這樣我們可以通過編寫wxs，對data 數(shù)據(jù)進(jìn)行處理，渲染到view層。

實際項目中，通過wxs 可以簡化代碼，更加具有通用性。

歡迎關(guān)注我的個人博客：https://www.manjiexiang.cn/

更多精彩歡迎關(guān)注微信號：春風(fēng)十里不如認(rèn)識你
一起學(xué)習(xí)，一起進(jìn)步，歡迎上車，有問題隨時聯(lián)系，一起解決?。?！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53325.html

相關(guān)文章

  • 小程序中的wxs語法

    摘要：官方解釋與是不同的語言，有自己的語法，并不和一致。的運(yùn)行環(huán)境和其他代碼是隔離的，中不能調(diào)用其他文件中定義的函數(shù)，也不能調(diào)用小程序提供的。由于運(yùn)行環(huán)境的差異，在設(shè)備上小程序內(nèi)的會比代碼快倍。因為，是的數(shù)據(jù)類型語法是沒有的。 wxs 官方解釋 WXS 與 JavaScript 是不同的語言，有自己的語法，并不和 JavaScript 一致。 WXS 的運(yùn)行環(huán)境和其他 JavaScrip...

    tanglijun 評論0 收藏0

  • 微信小程序 WXS 不了解一下？騷騷的實現(xiàn)各大前端框架中的 filter

    摘要：前言最近有在做小程序開發(fā)，在開發(fā)的過程中碰到一點小問題，描述一下先。介紹是小程序出的一套腳本語言，用于模板文件中，在模板文件中可以完成頁面的結(jié)構(gòu)。不依賴于運(yùn)行時的基礎(chǔ)庫腳本，可以在所有版本的小程序中運(yùn)行。 前言 最近有在做小程序開發(fā)，在開發(fā)的過程中碰到一點小問題，描述一下先。 本人在職的公司對于后臺獲取的 json 數(shù)據(jù)需要做過濾轉(zhuǎn)義的很多，不同的狀態(tài)碼會對應(yīng)不同的文字，但是在微信小程...

    ?。琛?/span> 評論0 收藏0

  • 小程序使用之自定義組件

    摘要：今天要介紹的是小程序的自定義組件，類似的在做開發(fā)的過程中會用到自定義，封裝成通用的組件可以在不同頁面里重復(fù)使用可以將復(fù)雜的頁面拆分成多個低耦合的模塊，便于代碼的維護(hù)。 文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章 小程序使用之WXS中，介紹了關(guān)于 wxs 的使用，通過wxs處理數(shù)據(jù)再渲染到view層，可以簡...

    Ververica 評論0 收藏0

  • 小程序使用之自定義組件

    摘要：今天要介紹的是小程序的自定義組件，類似的在做開發(fā)的過程中會用到自定義，封裝成通用的組件可以在不同頁面里重復(fù)使用可以將復(fù)雜的頁面拆分成多個低耦合的模塊，便于代碼的維護(hù)。 文章鏈接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章 小程序使用之WXS中，介紹了關(guān)于 wxs 的使用，通過wxs處理數(shù)據(jù)再渲染到view層，可以簡...

    ztyzz 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<