開發(fā)智能名片小程序時(shí)遇到的技術(shù)問題以及解決辦法
2022-04-19 11:14:20

開發(fā)智能名片小程序時(shí)遇到的技術(shù)問題以及解決辦法

智能名片小程序，又叫電子名片小程序

關(guān)鍵詞 this & that

• this是相對(duì)于當(dāng)前函數(shù)而言的。
• 如果在onLoad里定義了一個(gè)函數(shù),并且需要調(diào)用根部數(shù)據(jù) 則可以在onLoad里先定義一個(gè)變量that,將this賦值給that 那此時(shí)調(diào)用的that,則是相對(duì)于onLoad()的當(dāng)前對(duì)象
• onLoad函數(shù)內(nèi)一個(gè)function需要用到setData;則可以在onLoad里先定義;再在function里調(diào)用that.setData

setData

• 對(duì)單個(gè)元素進(jìn)行賦值
• 直接this.setData({ele:ele})
• 對(duì)數(shù)組賦值
• 先拼接字符串 eg:對(duì)Stu: ['Li' , 'Yang' , 'Wang']進(jìn)行某一索引值

var index = 0
var str = "Stu[" + index + "]"
for(index = 0; index < length; index++)
this.setData({
  str : ""
})

• 對(duì)對(duì)象賦值首先let arr = this.data.arr然后創(chuàng)造objlet obj = {}對(duì)obj賦值——類似于數(shù)組賦值,在拼接字符串時(shí),后面加上.屬性即可 最后用arr.push(obj)

數(shù)組push時(shí)被覆蓋

• 問題描述 這是一個(gè)數(shù)據(jù)庫讀取事件,actLine被加值后,在下次開啟加值時(shí),會(huì)將之前加的值替換,但對(duì)原本的值無影響,即幾次push后,所有push的值都會(huì)變成最后一次push的值

//原代碼
if(res.data.length != 0){   //查詢成功時(shí)
   for(let i = 0; i < res.data.length; i++){
        obj.title =  res.data[i].title
        obj.host =  res.data[i].host
        actLine.push(obj)) 
        console.log(i,actLine) 
}

• 解決方法 第五行push時(shí)將其改為以下內(nèi)容

if(res.data.length != 0){   //查詢成功時(shí)
   for(let i = 0; i < res.data.length; i++){
        obj.title =  res.data[i].title
        obj.host =  res.data[i].host
        actLine.push(Object.assign({}, obj))       //采用Object.assign將obj置于對(duì)象中再push給actLine
        console.log(i,actLine) 
}

• 原理 Object.assign() : 將所有可枚舉的自有屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象,返回目標(biāo)對(duì)象。

icon與文字對(duì)不齊

• 問題描述 使用vant組件庫圖標(biāo)時(shí),將icon與文字放在一個(gè)view標(biāo)簽里。顯示情況,總是icon偏上一些,無論怎樣調(diào)節(jié)字號(hào)都無效。

/*原代碼*/
<view class="actLable"><van-icon name="label-o" size="40rpx" />{{item.lable}}</view>

• 解決辦法 在wxss里對(duì)vant-icon設(shè)置垂直居中即可

van-icon {
  vertical-align:middle
}

icon 換行與連續(xù)空格

• 換行 wxml里的/n或者br都不會(huì)被識(shí)別; 通過后臺(tái)中傳入的富文本換行,富文本中的 會(huì)被當(dāng)作字符串處理; 所以要在js里聲明,wxml里調(diào)用

/*js*/
Page({
  data: {
    text: '這是一個(gè)段落 
 看我變身換行',
  },
})

/*wxml*/
<view>
  <text>這是一個(gè)段落 
 看我變身換行</text>
</view>
<view>
  <text>{{text0}}</text>
</view>

• 連續(xù)空格 在view里輸入多個(gè)空格,只會(huì)被當(dāng)作一個(gè)處理;要放在text標(biāo)簽里,并且設(shè)置decode為tureensp:中文字符一半大小 emsp:中文字符大小 nbsp:根據(jù)字體設(shè)置

<view>
    <text decode="{{true}}">我要?開始???空格了(空格是中文字符一半大小)</text>
</view>
<view>
    <text decode="{{true}}">我要?開始???空格了(空格是中文字符大小)</text>
</view>
<view>
    <text decode="{{true}}">我要 開始   空格了(空格根據(jù)字體設(shè)置)</text>
</view>

智能名片小程序，又叫電子名片小程序