1、對微信小程序的理解
小程序是一種開放能力，開發(fā)者可以快速地開發(fā)一個小程序。小程序可以在微信內(nèi)被便捷的獲取和傳播，同時具有出色的使用體驗。
微信小程序的優(yōu)勢：
微信助理，容易推廣。小程序擁有眾多入口，這些入口有助于企業(yè)更好的獲取流量，從而進(jìn)行轉(zhuǎn)化、變現(xiàn)。使用便捷。用戶在使用小程序時，只需要輕輕點一下就可以使用，更加符合用戶對使用方便、快捷的需求，所以小程序的用戶數(shù)量不斷增加。體驗良好，有接近原生app的體驗。。在微信生態(tài)里，小程序在功能和體驗上是可以秒殺掉 H5 頁面的，H5 頁面經(jīng)常出現(xiàn)卡頓、延時、加載慢、權(quán)限不足等原因，而這些問題在小程序里都不會出現(xiàn)。成本更低。從開發(fā)成本到運營推廣成本，小程序的花費僅為APP的十分之一，無論是對創(chuàng)業(yè)者還是傳統(tǒng)商家來說都是一大優(yōu)勢。
微信小程序的劣勢：
單個包大小限制為2M,這導(dǎo)致無法開發(fā)大型的應(yīng)用，采用分包最大是20M（這個值一直在變化，以官網(wǎng)為準(zhǔn)）。需要像app一樣審核上架，這點相對于H5的發(fā)布要麻煩一些。處處受微信限制。例如不能直接分享到朋友圈，涉及到積分，或者虛擬交易的時候，小程序也是不允許的。
2、小程序中wxss和css的異同
WXSS和CSS類似，不過在CSS的基礎(chǔ)上做了一些補(bǔ)充和修改
- 尺寸單位 rpx：rpx是響應(yīng)式像素，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬度為750rpx。在不同的手機(jī)型號下1rpx=屏幕寬度/750。（phone6下1rpx = 0.5px）
- 樣式導(dǎo)入import：可以@import來導(dǎo)入其他的wxss
- 樣式選擇器：類選擇器、id選擇器、元素選擇器、偽元素選擇器
@import './test_0.wxss'
3、小程序中的模板語法WXML（標(biāo)簽、數(shù)據(jù)、渲染）
1. 標(biāo)簽的使用
在小程序中沒有H5提供的那些標(biāo)簽了，這里我們需要使用小程序給我們提供的組件。常用的標(biāo)簽有
- view:相當(dāng)于div;
- text:相當(dāng)于span;
- image:相當(dāng)于img
2. 數(shù)據(jù)綁定
- 數(shù)據(jù)定義：
- 引用數(shù)據(jù)：通過{ {}}的方式可以引用數(shù)據(jù)。
小程序中任何需要獲取數(shù)據(jù)的地方都需要用{ {}},包括標(biāo)簽內(nèi)的屬性。
data:{
return {
msg:"hello world",
num: 18,
}
}
3. 數(shù)據(jù)渲染
- 渲染層和數(shù)據(jù)相關(guān)。
- 邏輯層負(fù)責(zé)產(chǎn)生、處理數(shù)據(jù)。
- 邏輯層通過 Page 實例的 setData 方法傳遞數(shù)據(jù)到渲染層。
<view>{
{
msg }}</view>
Page({
data:{
return {
msg:"hello world",
num: 18,
}
}
onLoad: function () {
this.setData({
msg: 'Hello World2222' })
}
})
4. 邏輯渲染
wx:if和hidden
- wx:if：WXML 中，使用 wx:if=“{ {condition}}” 來判斷是否需要渲染該代碼塊
如果要一次性判斷多個組件標(biāo)簽，可以使用一個 標(biāo)簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。- hidden：通過hidden屬性也可以進(jìn)行條件渲染。
- wx:if和hidden的異同：
同：都能控制元素的顯示與隱藏
異：wx:if在不滿足條件的時候會刪除掉對應(yīng)的DOM，hidden屬性則是通過display屬性設(shè)置為none來進(jìn)行條件渲染。
<view wx:if="{
{length > 5}}"> 1 </view>
<view wx:elif="{
{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<block wx:if="{
{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<view hidden="{
{condition}}">
隱藏
</view>
5. 列表渲染
wx:for ：在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項的變量名默認(rèn)為 item。
wx:for-index, wx:for-item 用來指定index和item的別名wx:key：指定列表中項目的唯一的標(biāo)識符。
要求：需要是列表中唯一的字符串或數(shù)字；保留關(guān)鍵字 this： 代表在 for 循環(huán)中的 item 本身，并且item本身是唯一的字符串或者數(shù)字
作用：能提高重排效率文章來源：http://www.zghlxwxcb.cn/news/detail-478275.html
<!-- array 是一個數(shù)組 -->
<view wx:for="{
{index in array}}" wx:key="{
{index}}">
{
{index}}: {
{item.name}}
</view>
<view wx:for="{
{array}}" wx:for-index="idx" wx:for-item="itemName">
{
{idx}}: {
{itemName.name}}
</view>
對應(yīng)的腳本文件：
Page({
data: {
array: [{
name: '天亮教育',
}, {
name: '尚云科技'
}]
}
})
6. template（模板）
WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。使用 name 屬性，作為模板的名字。然后在 內(nèi)定義代碼片段。
使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入。文章來源地址http://www.zghlxwxcb.cn/news/detail-478275.html
定義
<template name="msgItem">
<view>
<text> {
{index}}: {
{msg}} </text>
<text> Time: {
{time}} </text>
</view>
</template>
調(diào)用
<!-- msgList:[
{
index: 0,
msg: '這是一段模板',
time: '2020-10-10'
}
] -->
<view wx:for="{
{msgList}}">
<template is="msgItem" data="{
{...item}}"></template>
</view到了這里，關(guān)于微信小程序常見知識點的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
