微信小程序开发问题集合

微信小程序text文本溢出单行/多行省略

微信小程序填坑之路之文本溢出

CSS3文本溢出显示省略号

以上三个链接的处理方式可以控制文本溢出，但是，文字溢出样式在微信小程序中不向下继承，需要在父控件放以下属性，在子控件中也需要放以下属性（我遇到的问题是在父控件下面有两个子元素，第一个子元素如果不加以下属性则不可以控制溢出，但是第二个元素不加则会溢出，也就是一个继承了，一个没继承，感觉很奇怪，有能解决这个问题的请留言一起讨论）

<pre>
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
</pre>

text-overflow: ellipsis;省略号颜色设置

微信小程序中对文本溢出的省略号颜色支持的不是太好，比如一个控件是灰色的，那么如果它文本溢出了，我希望它的溢出省略号也是灰色的，则在文本中设置color，但是它还是显示的父控件中设置的颜色值显示省略号，我的解决方式是在父控件中设置一个color，这个color和我想要的溢出省略号的颜色是一致的，然后，在父控件的其他子控件中使用一个color值来确定其他子控件的文字颜色。

微信小程序之数据传递

<pre>
//传参错误代码
url: '../addaddress/addaddress?address={{address}}'
//传参正确代码
url: '../addaddress/addaddress?address='+JSON.stringify(address)

//接受参数错误代码，在界面不会显示
this.data.address = JSON.parse(options.address);
console.log("this.data.address is " + this.data.address.city);
//解决错误使用的代码是下面这段赋值
const that = this;
that.setData({
address: JSON.parse(options.address)
})
</pre>

以上代码是我从A页面传递参数到B页面时遇到的错误及解决方式。

微信小程序实现点击按钮（button）改变数据

小程序按钮文档看着有点累，如果使用按钮的基本样式可以看下上面这篇文章

<pre>
//如果在返回界面有数据结果给上一个界面，则不能再函数体内传参
wx.navigateBack
//解决方式 在back界面存储数据到本地
try {
wx.setStorageSync('address', e.detail.value)
console.log("存储数据 e.detail.value在本地"+e.detail.value)
} catch (e) {
console.log(e)
}

//在onshow中获取存储到本地的数据进行逻辑操作
try {
var value = wx.getStorageSync('address')
if (value) {
// Do something with return value
console.log("从缓存中获取的值为为：")
console.log(value.name)
console.log(value.phone)
console.log(value.address)
this.setData({
addressList
})
}
} catch (e) {
// Do something when catch error
}
</pre>

微信官方目前没有提供在这个函数体中携带数据参数的功能，我的解决方式是以上这部分代码，如果有更好的解决方式请留言。

微信小程序之数组操作：push与concat的区别

<pre>
var arr = [];
arr.push(1);
arr.push(2);
arr.push([3, 4])
arr.push(5, 6);
arr = arr.concat(7);
arr = arr.concat([8, 9]);
arr = arr.concat(10, 11);
for(var i in arr){
console.log(i+"-----"+arr[i]);
}
</pre>

以上代码是小程序中对数组添加操作的方式，来自上面链接

<pre>
<block wx:for="{{addressList}}" wx:for-item="ads" wx:key="*this">
<view class="address_content"
data-address="{{ads}}" bindtap="tapAddress">
<view class="text">
<view >{{ads.name}}</view>
</view>
<view class="right_arrow">
<image class="arrow" src="../../imgs/right_arrow.png"></image>
</view>
</view>
</block>
</pre>
wx:key 的值以两种形式提供字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

这个问题是我遇到卡主时间比较长的一个问题，主要原因还是因为我没有好好看官方提供的文档描述，我copy了网站上的一些代码，没有去理解没个属性的意思，这里我使用wx:key="*this"，造成我从另外一个界面返回后刷新列表，但是列表中的值都是重复的，删掉这个属性后就OK了。