微信小程序繼續入坑指南

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/en-US/docs/Web/API/Touch_events/Using_Touch_Events https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events 其中文檔給有一個栗子，該栗子是進行在移動設備上繪圖，額，暫時不想看，目前該方案只有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 支持進行畫畫

轉載于:https://www.cnblogs.com/melovemingming/p/9551871.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。