微信小程序开发二三事

怎么添加背景照片

index页面文件夹下上传背景图片
wxml中

<image src='./bg1.jpg'>image>


wxss中

image{
position: absolute;
width: 100%;
/* height: 50%; */
display:flex;
height: 100%;
justify-content: center;
align-items:center;
}


其他组件中使用z_index来表示展示层级

如何读取DATA中的数据

在index.js下 Page里有data数据，想要在其他的函数中取读取到变量的值：
（data中有个数组变量text_list）

var that = this;
var length = that.data.text_list.length;


如何给DATA赋值

从数据库中请求到内容后，想要赋值给data中的变量：

var that = this;
that.setData({
text_list : old_data.concat(new_data)
})


文本如何居中、自动换行

wxml中
注意如果text换行了，那么也会显示出一行换行

<view class="usermotto" >
<text class="user-motto" user-select="true">“{{motto}}”text>
view>


wxss中

.user-motto {
text-overflow:ellipsis;
flex-wrap:wrap;
line-height:25px;
font-weight: 800;
/* border: 3rpx solid #6e11ac; */
}
.usermotto {
word-break: break-all;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap:wrap;
z-index: 1;
}


如何生成随机数

//0-9
var random = Math.floor(Math.random() * 10);


如何前端显示数组的内容

<block wx:for="{{arr}}">
<view >{{index}}:{{item.text}}view>
block>


button的点击事件

button中绑定函数，如：

bindtap="handleTap"


然后在js中实现handleTap函数

如何使用小程序云

得是正式注册的号，测试号好像不行

代码中：

wx.cloud.init({
env: 'env_id'
})
const db = wx.cloud.database({});


如何突破小程序云最多查询20条的限制

分多次查询，拼接到结果中

var that = this
var MAX_LIMIT = 20
db.collection('db_name').count().then(async res =>{
let total = res.total;
// 计算需分几次取
const batchTimes = Math.ceil(total / MAX_LIMIT)
console.log("batchTimes:",batchTimes)
// 承载所有读操作的 promise 的数组
for (let i = 0; i < batchTimes; i++) {
await daily5.skip(i * MAX_LIMIT).limit(MAX_LIMIT).get().then(async res => {
let new_data = res.data
let old_data = that.data.text_list
// console.log("newdata",new_data)
that.setData({
text_list : old_data.concat(new_data)
})
})
}
})