微信小程序开发二三事

最新推荐文章于 2024-09-30 14:06:00 发布

BeforeEasy

最新推荐文章于 2024-09-30 14:06:00 发布

阅读量326

点赞数 1

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/beforeeasy/article/details/125706482

版权

本文介绍了在小程序中添加背景图片、数据读取与赋值、文本样式、随机数生成、数组内容显示以及处理button点击事件的方法。还探讨了如何使用小程序云服务，并展示了突破查询限制的策略。涉及前端布局、数据操作和云数据库交互的关键技术。

摘要由CSDN通过智能技术生成

怎么添加背景照片

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)
          })
        })
      }
    })