微信小程序繼續(xù)入坑指南

wxml

類似于html

感覺(jué)和ejs灰常的相似

數(shù)據(jù)綁定

js

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

wxml

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

使用的是https://mustache.github.io/模板引擎系統(tǒng)

對(duì)組件的屬性和控制屬性的更改

<view id="item-{{id}}"></view> Page({data: {message: "hello world",id: 3} })

關(guān)鍵字

對(duì)布爾型的進(jìn)行解析

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

將會(huì)解析成為布爾值的false

運(yùn)算

模板引擎支持布爾運(yùn)算

三目運(yùn)算

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

當(dāng)變量的flag的值為真的時(shí)候輸出true，否輸出false

算術(shù)運(yùn)算

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

支持最簡(jiǎn)單的算術(shù)運(yùn)算

邏輯判斷

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

字符串運(yùn)算

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

對(duì)對(duì)象進(jìn)行訪問(wèn)

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

同樣支持變量

數(shù)組

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

直接進(jìn)行組合，其中zroe的值為0
組合以后渲染為
0， 1， 2， 3

對(duì)象

template

ps w3c組織也規(guī)定了該標(biāo)簽，該標(biāo)簽也為模板

<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"}} })

使用模板，進(jìn)行重復(fù)的利用，減少了重復(fù)代碼的書(shū)寫(xiě)

同樣也可以使用擴(kuò)展運(yùn)算符，進(jìn)行擴(kuò)展
上方的使用擴(kuò)展運(yùn)算符

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

徹底的完成了擴(kuò)展
輸出正常的內(nèi)容
如果變量名有沖突，前面的會(huì)覆蓋后面的

列表渲染

wx:for 對(duì)數(shù)組進(jìn)行重復(fù)的渲染

類似于使用for in 循環(huán)一樣

<view wx:for="{{array}}">{{index}}:{{item.msg}} </view> Page({data: {array: [{msg: 'foo',}, {msg: 'bar'}]} })

上方完成了一次列表渲染，其中index為默認(rèn)的遍歷到的數(shù)組的小標(biāo)，從0開(kāi)始，item為當(dāng)前遍歷到的數(shù)組對(duì)應(yīng)下標(biāo)的元素。
其中wx:for-itm為指定當(dāng)前的元素，wx:for-index為指定當(dāng)前元素的小標(biāo)

輸出九九乘法表

<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為一個(gè)塊，用于控制一些內(nèi)容

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

wk:key

此為給框一個(gè)唯一的標(biāo)識(shí)符號(hào)，類似于網(wǎng)頁(yè)中的id，無(wú)論列表如何變化，此id永遠(yuǎn)不變，一直標(biāo)識(shí)一個(gè)內(nèi)容

Page({data: {objectSwitch: [{id: 0,unique: "unique_0"}, {id:1,unique: "unique_1"}, {id:2,unique: "unique_2"}]},addSwitch: function (e) {// 獲取當(dāng)前的最大的按鈕數(shù)const length = this.data.objectSwitch.length;// 添加一個(gè)新數(shù)組的項(xiàng)，將其推入數(shù)組中this.data.objectSwitch = [{ id: length, unique: "unique_" + length }].concat(this.data.objectSwitch);// 重新進(jìn)行頁(yè)面的渲染this.setData({objectSwitch: this.data.objectSwitch})} }) <switch wx:for="{{objectSwitch}}" wx:key="unique">{{item.id}}, {{index}}</switch> <button bindtap="addSwitch">添加一個(gè)選項(xiàng)</button>

條件渲染

wx:if條件渲染

templat

為模板，支持代碼的復(fù)用

事件

和網(wǎng)頁(yè)類似
不過(guò)這個(gè)是視圖到邏輯的通信方式。

bindtap

進(jìn)行事件的綁定

冒泡和非冒泡

ps 發(fā)現(xiàn)知曉程序 https://minapp.com/miniapp/ 好滴，寫(xiě)完后繼續(xù)上。肯定要寫(xiě)插件嘍

bind和catch后面跟上事件類型。
tap為手指觸摸以后馬上離開(kāi)，或者是touchmove事件，手指觸摸以后移動(dòng)
例如 bindtap事件為手指觸摸以后馬上離開(kāi)

在網(wǎng)頁(yè)中也有觸摸事件 https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events 其中文檔給有一個(gè)栗子，該栗子是進(jìn)行在移動(dòng)設(shè)備上繪圖，額，暫時(shí)不想看，目前該方案只有chrome實(shí)現(xiàn)

catch事件的綁定可以阻止冒泡事件向上傳播。

ps 只要冒泡，沒(méi)有傳播

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

在上方事件中，點(diǎn)擊inner會(huì)觸發(fā)handleTap3，接著冒泡到handleTap2，接著繼續(xù)冒泡到handleTap2 如果除法middle將會(huì)止步于當(dāng)前的冒泡。

捕獲

換了一個(gè)名詞而已。約等于網(wǎng)頁(yè)開(kāi)發(fā)中的傳播

即事件先傳播到頂層，在往下捕獲，到底部以后在往上進(jìn)行冒泡。事件一共經(jīng)歷了先往上，在往下，再次往上的過(guò)程。來(lái)源于網(wǎng)景和ie的那一場(chǎng)戰(zhàn)爭(zhēng)。戰(zhàn)爭(zhēng)遺留的內(nèi)容。

capture-bind

以及

capture-catch

使用這兩個(gè)關(guān)鍵字可以完成對(duì)事件的捕獲。

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

當(dāng)點(diǎn)擊inner的時(shí)候，會(huì)先傳播，即傳播到最頂層，被outer捕獲，除法handleTap2事件，繼續(xù)往下傳播，傳播到inner，觸發(fā)handleTap4事件，接著冒泡，觸發(fā)inner的handleTap3事件，接著觸發(fā)outer的handleTap1事件。

事件數(shù)據(jù)回傳

事件數(shù)據(jù)回傳到邏輯層
以data開(kāi)頭，多個(gè)單詞以-連接，將會(huì)轉(zhuǎn)為駝峰命名法，如果有大寫(xiě)字母，將會(huì)全部轉(zhuǎn)為小寫(xiě)

是滴，在html5中也有這樣通過(guò)屬性讀值的方式。切記，在mvvm框架中，不可操作dom，數(shù)據(jù)和視圖是完全分隔的。

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">點(diǎn)擊一下</view>

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

事件對(duì)象

當(dāng)事件被觸發(fā)的時(shí)候，處于邏輯層的回調(diào)函數(shù)，將會(huì)接收到一個(gè)事件對(duì)象

Page({touch: (baseEvent) => {console.log(baseEvent);} }) <button bindtap="touch">點(diǎn)擊按鈕觸發(fā)事件</button>

即，觸發(fā)事件

引用

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

import

import可以完成引用。即完成對(duì)模板的引用

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

include

include將會(huì)完成包含
除了template和wxs以外都能進(jìn)行包含

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

上方完成了一次模塊化。即將header和footer進(jìn)行合并，完成模塊。

wxs模塊

wxs，即模塊
每一個(gè)文件和wxs標(biāo)簽都為一個(gè)單獨(dú)的模塊，獨(dú)立。
每個(gè)模塊都有一個(gè)獨(dú)立的作用域。即在一個(gè)模塊里定義的變量和函數(shù)。默認(rèn)為私有，對(duì)其他模塊不可見(jiàn)。

var foo = "hello world"; var bar = function (d) { return d; }module.exports = {foo: foo,bar: bar }

即，上方文件完成了導(dǎo)出，可被wxs文件或者wxs標(biāo)簽引用

module

每個(gè)wxs模塊有一個(gè)內(nèi)置的module對(duì)象

<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函數(shù)

同理，可以進(jìn)行引入
不在闡述
類似于node.js的包

坑

wxs模塊只能進(jìn)行引入，使用include和import wxs模塊的時(shí)候不能進(jìn)行引入
template 標(biāo)簽中只能定義該標(biāo)簽內(nèi)部的wxs模塊

變量

變量依舊會(huì)有變量的提升

注釋

依舊類似

運(yùn)算符

依舊類似

語(yǔ)句

依舊類似

數(shù)據(jù)類型

依舊類似
arguments 依舊可以在function內(nèi)使用
日期類型不過(guò)換了一個(gè)函數(shù)

getDate()

正則由原先的new變成了一個(gè)函數(shù)

getRegExp

數(shù)據(jù)類型的判斷可以就、依舊使用typeof

一些基礎(chǔ)的庫(kù)

依舊類似

console.log

此函數(shù)依舊可用
Match依舊可用
json依舊可用
JSON.stringify 依舊可用
JSON.parse 依舊可用
遷移即可
統(tǒng)統(tǒng)都是es5的內(nèi)容

WXSS

一種類似于css的微信內(nèi)容
尺寸單位 由原先的em，px 給換成了rpx
以物理像素為單位

em 以當(dāng)前字體大小為單位

@import

同樣類似，使用import即可導(dǎo)入，和css類似

內(nèi)聯(lián)樣式

同樣類似，多出

element

after和before依舊可用

全局樣式和局部樣式

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

組件

組件為視圖層的基本單元

對(duì)應(yīng)于組件化

組件會(huì)自帶微信的一些功能
組件包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來(lái)修飾內(nèi)容
view 視圖容器
scroll-view 允許組件滾動(dòng)
swiper 對(duì)應(yīng)于滑塊
icon 對(duì)應(yīng)于封裝好的圖標(biāo)
text 對(duì)應(yīng)于封裝好的文字
progress 對(duì)應(yīng)于封裝好的進(jìn)度條
form 進(jìn)行表單，包括數(shù)據(jù)的提交
navigator 跳轉(zhuǎn)到新頁(yè)面
video 播放視頻 類似于h5的標(biāo)簽
canvas 支持進(jìn)行畫(huà)畫(huà)

轉(zhuǎn)載于:https://www.cnblogs.com/melovemingming/p/9551871.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序继续入坑指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。