微信小程序繼續入坑指南

微信小程序繼續入坑指南

wxml

相似於html

感受和ejs灰常的類似

數據綁定

js

Page({
  data: {
    message: "hello world"
  }
})

wxml

<view>{{message}}</view>

使用的是https://mustache.github.io/模...

對組件的屬性和控制屬性的更改

<view id="item-{{id}}"></view>

Page({
  data: {
    message: "hello world",
    id: 3
  }
})

關鍵字

對布爾型的進行解析

<checkbox checked="{{false}}"></checkbox>

將會解析成爲布爾值的false

運算

模板引擎支持布爾運算

三目運算

<view hidden="{{flag?true:false}}"></view>

當變量的flag的值爲真的時候輸出true，否輸出false

算術運算

<view>{{a+b}}+ {{c}}</view>

支持最簡單的算術運算

邏輯判斷

<view>{{a>2}}+ {{c}}</view>

字符串運算

<view>{{"hello" + message}}</view>

對對象進行訪問

<view>{{object.key}}</view>

一樣支持變量

數組

<view>{{[zero, 1, 2, 3]}}</view>

直接進行組合，其中zroe的值爲0
組合之後渲染爲
0， 1， 2， 3

對象

template

ps w3c組織也規定了該標籤，該標籤也爲模板

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template is="msgItem" data="{{index: item.index,msg: item.index, time: item.time}}"></template>

Page({
  data: {
    item: {
      index: 0,
      msg: "222",
      time: "333"
    }
  }
})

使用模板，進行重複的利用，減小了重複代碼的書寫

一樣也可使用擴展運算符，進行擴展
上方的使用擴展運算符

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template is="msgItem" data="{{...item}}"></template>

完全的完成了擴展
輸出正常的內容
若是變量名有衝突，前面的會覆蓋後面的

列表渲染

wx:for 對數組進行重複的渲染

相似於使用for in 循環同樣

<view wx:for="{{array}}">
  {{index}}:{{item.msg}}
</view>

Page({
  data: {
    array: [{
      msg: 'foo',
    }, {
      msg: 'bar'
    }]
  }
})

上方完成了一次列表渲染，其中index爲默認的遍歷到的數組的小標，從0開始，item爲當前遍歷到的數組對應下標的元素。
其中wx:for-itm爲指定當前的元素，wx:for-index爲指定當前元素的小標

輸出九九乘法表

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block

block爲一個塊，用於控制一些內容

<block wx:for="{{[1,2,3,4]}}">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>

wk:key

此爲給框一個惟一的標識符號，相似於網頁中的id，不管列表如何變化，此id永遠不變，一直標識一個內容

Page({
  data: {
    objectSwitch: [
      {
        id: 0,
        unique: "unique_0"
      }, {
        id:1,
        unique: "unique_1"
      }, {
        id:2,
        unique: "unique_2"
      }
    ]
  },
  addSwitch: function (e) {
    // 獲取當前的最大的按鈕數
    const length = this.data.objectSwitch.length;
    // 添加一個新數組的項，將其推入數組中
    this.data.objectSwitch = [{ id: length, unique: "unique_" + length }].concat(this.data.objectSwitch);
    // 從新進行頁面的渲染
    this.setData({
      objectSwitch: this.data.objectSwitch
    })
  }
})

<switch wx:for="{{objectSwitch}}" wx:key="unique">{{item.id}}, {{index}}</switch>
<button bindtap="addSwitch">添加一個選項</button>

條件渲染

wx:if條件渲染

templat

爲模板，支持代碼的複用

事件

和網頁相似
不過這個是視圖到邏輯的通訊方式。

bindtap

進行事件的綁定

冒泡和非冒泡

ps 發現知曉程序 https://minapp.com/miniapp/ 好滴，寫完後繼續上。確定要寫插件嘍

bind和catch後面跟上事件類型。
tap爲手指觸摸之後立刻離開，或者是touchmove事件，手指觸摸之後移動
例如 bindtap事件爲手指觸摸之後立刻離開

在網頁中也有觸摸事件 https://developer.mozilla.org... https://developer.mozilla.org... 其中文檔給有一個栗子，該栗子是進行在移動設備上繪圖，額，暫時不想看，目前該方案只有chrome實現

catch事件的綁定能夠阻止冒泡事件向上傳播。

ps 只要冒泡，沒有傳播

<view id="outer" bindtap="handleTap1">
  <view id="middle" catchtap="handleTap2">
    <view id="inner" bindtap="handleTap3"></view>
  </view>
</view>

在上方事件中，點擊inner會觸發handleTap3，接着冒泡到handleTap2，接着繼續冒泡到handleTap2 若是除法middle將會止步於當前的冒泡。

捕獲

換了一個名詞而已。約等於網頁開發中的傳播

即事件先傳播到頂層，在往下捕獲，到底部之後在往上進行冒泡。事件一共經歷了先往上，在往下，再次往上的過程。來源於網景和ie的那一場戰爭。戰爭遺留的內容。

capture-bind

以及

capture-catch

使用這兩個關鍵字能夠完成對事件的捕獲。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  </view>
</view>

當點擊inner的時候，會先傳播，即傳播到最頂層，被outer捕獲，除法handleTap2事件，繼續往下傳播，傳播到inner，觸發handleTap4事件，接着冒泡，觸發inner的handleTap3事件，接着觸發outer的handleTap1事件。

事件數據回傳

事件數據回傳到邏輯層
以data開頭，多個單詞以-鏈接，將會轉爲駝峯命名法，若是有大寫字母，將會所有轉爲小寫

是滴，在html5中也有這樣經過屬性讀值的方式。切記，在mvvm框架中，不可操做dom，數據和視圖是徹底分隔的。

Page({
  bindViewTap: (event) => {
    var data = event.currentTarget.dataset.alphaBeta;
    var data2 = event.currentTarget.dataset.alphabeta;
    console.log(data);
    console.log(data2);
  }
})

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">點擊一下</view>

是滴，這樣就完成了視圖層數據通知到邏輯層。

事件對象

當事件被觸發的時候，處於邏輯層的回調函數，將會接收到一個事件對象

Page({
  touch: (baseEvent) => {
    console.log(baseEvent);
  }
})

<button bindtap="touch">點擊按鈕觸發事件</button>

即，觸發事件

引用

wxml提供兩種方式的引用。
import和include

import

import能夠完成引用。即完成對模板的引用

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- 另一個文件 -->
<import src="item.wxml"/>
<template is="item" data="{{text:"hello world"}}">

include

include將會完成包含
除了template和wxs之外都能進行包含

<include src="header.wxml"/>
<view>body</view>
<view src="footer.wxml"></view>

上方完成了一次模塊化。即將header和footer進行合併，完成模塊。

wxs模塊

wxs，即模塊
每個文件和wxs標籤都爲一個單獨的模塊，獨立。
每一個模塊都有一個獨立的做用域。即在一個模塊裏定義的變量和函數。默認爲私有，對其餘模塊不可見。

var foo = "hello world";
var bar =  function (d) { 
  return d;
}

module.exports = {
  foo: foo,
  bar: bar
}

即，上方文件完成了導出，可被wxs文件或者wxs標籤引用

module

每一個wxs模塊有一個內置的module對象

<wxs src="./hello.wxs" module="tools"/>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.foo)}}</view>

var foo = "hello world"
var bar = function(d) {
  return d;
}

module.exports = {
  foo: foo,
  bar: bar
};

module.exports.msg = "some msg"

require函數

同理，能夠進行引入
不在闡述
相似於node.js的包

坑

wxs模塊只能進行引入，使用include和import wxs模塊的時候不能進行引入
template 標籤中只能定義該標籤內部的wxs模塊

變量

變量依舊會有變量的提高

註釋

依舊相似

運算符

依舊相似

語句

依舊相似

數據類型

依舊相似
arguments 依舊能夠在function內使用
日期類型不過換了一個函數

getDate()

正則由原先的new變成了一個函數

getRegExp

數據類型的判斷能夠就、依舊使用typeof

一些基礎的庫

依舊相似

console.log

此函數依舊可用
Match依舊可用
json依舊可用
JSON.stringify 依舊可用
JSON.parse 依舊可用
遷移便可
通通都是es5的內容

WXSS

一種相似於css的微信內容
尺寸單位 由原先的em，px 給換成了rpx
以物理像素爲單位

em 以當前字體大小爲單位

@import

一樣相似，使用import便可導入，和css相似

內聯樣式

一樣相似，多出

element

after和before依舊可用

全局樣式和局部樣式

依舊可在app.wxss中使用
依舊相似

組件

組件爲視圖層的基本單元

對應於組件化

組件會自帶微信的一些功能組件包括開始標籤和結束標籤，屬性用來修飾內容view 視圖容器scroll-view 容許組件滾動swiper 對應於滑塊icon 對應於封裝好的圖標text 對應於封裝好的文字progress 對應於封裝好的進度條form 進行表單，包括數據的提交navigator 跳轉到新頁面video 播放視頻 相似於h5的標籤canvas 支持進行畫畫