APP
開發(fā)智能名片小程序時遇到的技術問題以及解決辦法
智能名片小程序，又叫電子名片小程序
關鍵詞 this & that
- this是相對于當前函數(shù)而言的。
- 如果在onLoad里定義了一個函數(shù),并且需要調用根部數(shù)據 則可以在onLoad里先定義一個變量that,將this賦值給that 那此時調用的that,則是相對于onLoad()的當前對象
- onLoad函數(shù)內一個function需要用到setData;則可以在onLoad里先定義;再在function里調用that.setData
setData
- 對單個元素進行賦值
- 直接this.setData({ele:ele})
- 對數(shù)組賦值
- 先拼接字符串 eg:對Stu: ['Li' , 'Yang' , 'Wang']進行某一索引值
var index = 0
var str = "Stu[" + index + "]"
for(index = 0; index < length; index++)
this.setData({
str : ""
})
- 對對象賦值首先let arr = this.data.arr然后創(chuàng)造objlet obj = {}對obj賦值——類似于數(shù)組賦值,在拼接字符串時,后面加上.屬性即可 最后用arr.push(obj)
數(shù)組push時被覆蓋
- 問題描述 這是一個數(shù)據庫讀取事件,actLine被加值后,在下次開啟加值時,會將之前加的值替換,但對原本的值無影響,即幾次push后,所有push的值都會變成最后一次push的值
//原代碼
if(res.data.length != 0){ //查詢成功時
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時將其改為以下內容
if(res.data.length != 0){ //查詢成功時
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置于對象中再push給actLine
console.log(i,actLine)
}- 原理 Object.assign() : 將所有可枚舉的自有屬性的值從一個或多個源對象復制到目標對象,返回目標對象。
icon與文字對不齊
- 問題描述 使用vant組件庫圖標時,將icon與文字放在一個view標簽里。顯示情況,總是icon偏上一些,無論怎樣調節(jié)字號都無效。
/*原代碼*/
<view class="actLable"><van-icon name="label-o" size="40rpx" />{{item.lable}}</view>
- 解決辦法 在wxss里對vant-icon設置垂直居中即可
van-icon {
vertical-align:middle
}icon 換行與連續(xù)空格
- 換行 wxml里的/n或者br都不會被識別; 通過后臺中傳入的富文本換行,富文本中的 會被當作字符串處理; 所以要在js里聲明,wxml里調用
/*js*/
Page({
data: {
text: '這是一個段落 看我變身換行',
},
})
/*wxml*/
<view>
<text>這是一個段落 看我變身換行</text>
</view>
<view>
<text>{{text0}}</text>
</view>
- 連續(xù)空格 在view里輸入多個空格,只會被當作一個處理;要放在text標簽里,并且設置decode為tureensp:中文字符一半大小 emsp:中文字符大小 nbsp:根據字體設置
<view>
<text decode="{{true}}">我要?開始???空格了(空格是中文字符一半大小)</text>
</view>
<view>
<text decode="{{true}}">我要?開始???空格了(空格是中文字符大小)</text>
</view>
<view>
<text decode="{{true}}">我要 開始 空格了(空格根據字體設置)</text>
</view>
智能名片小程序，又叫電子名片小程序
本文摘自 ：https://blog.51cto.com/u
