网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序:新功能WXS解讀(2017.08.30新增)

發布時間:2017-12-30 09:09 所屬欄目:小程序開發教程

注意(來自官方文檔) wxs 不依賴于運行時的基礎庫版本,可以在所有版本的小程序中運行。 wxs 與 javascript 是不同的語言,有自己的語法,并不和 javascript 一致。 wxs 的運行環境和其他 javascript 代碼是隔離 ...

 
 
 
 

注意(來自官方文檔)

  1. wxs 不依賴于運行時的基礎庫版本,可以在所有版本的小程序中運行。
  2. wxs 與 javascript 是不同的語言,有自己的語法,并不和 javascript 一致。
  3. wxs 的運行環境和其他 javascript 代碼是隔離的,wxs 中不能調用其他 javascript 文件中定義的函數,也不能調用小程序提供的API。
  4. wxs 函數不能作為組件的事件回調。
  5. 由于運行環境的差異,在 iOS 設備上小程序內的 wxs 會比 javascript 代碼快 2 ~ 20 倍。在 android 設備上二者運行效率無差異。
舉個例子,在wxs出來之前,如果我們要連接一個數組的內容并顯示在wxml中,我們需要通過循環連接數組的每一項:
 

.wxml

 

			
  1. <view>
  2. <block wx:for="{{names}}" wx:key="item">
  3. {{item}}
  4. </block>
  5. </view>

.js

 

			
  1. Page({
  2. data: {
  3. names:[
  4. 'Tom',
  5. 'Peter',
  6. 'Gray',
  7. 'Lisa'
  8. ]
  9. },
  10. })

或者先在js中連接好,放在data中,再顯示在wxml中:  .wxml

 

			
  1. <view>
  2. {{content}}
  3. </view>

.js

 

			
  1. Page({
  2. data: {
  3. content:"",
  4. names:[
  5. 'Tom',
  6. 'Peter',
  7. 'Gray',
  8. 'Lisa'
  9. ]
  10. },
  11. onLoad(options){
  12. let content = this.data.names.join(" ")
  13. this.setData({
  14. content
  15. })
  16. }
  17. })

有了wxs后,我們可以直接在wxml完成:

.wxml

 

			
  1. <wxs module="util">
  2. var joinArray = function (array) {
  3. return array.join(' ')
  4. }
  5.  
  6. module.exports = {
  7. joinArray: joinArray
  8. }
  9. </wxs>
  10. <view>
  11. {{util.joinArray(names)}}
  12. </view>

或者將工具函數保存為單獨的文件,通過引入來使用:  /src/wxs/common.wxs

 

			
  1. var joinArray = function (array) {
  2. return array.join(' ')
  3. }
  4.  
  5. module.exports = {
  6. joinArray: joinArray
  7. }

/pages/index/index.wxml

 

			
  1. <wxs src="../../src/wxs/common.wxs" module="util" />
  2. <view>
  3. {{util.joinArray(names)}}
  4. </view>

引入的時候,wxs標簽src填寫相對路徑(絕對路徑無效),module指定名字。

我們也可以將頁面中的一些常量放在wxs中:

 

			
  1. var MAX_COUNT = 19
  2. module.exports = {
  3. MAX_COUNT: MAX_COUNT
  4. }

總結:

  • WXS增強了wxml的功能,相當于頁面中的腳本語言,我們可以將比如檢查手機格式的函數放在wxs中來使用(根據是否正確來改變相應的樣式),而不用跑到在js中去檢查。

需要注意的地方:

  • wxs目前似乎并不支持ES6(至少let不能使用)
  • wxs文件不能被js文件引用。wxs文件能引用wxs文件。

參考: 微信小程序WXS官方文檔



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/18326.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×