微信小程序开发中的“坑”

1、小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

2、小程序开发

疫情期间窝在家没事干，那就搞个小程序玩一下，先不说搞什么东西了吧，万一我哪一天搞不下去放弃了呢。等搞出来一定给大家尝尝鲜~

其实在我这两天研究小程序来看，一个小程序就是一个服务，包括前台页面开发，后台服务开发，服务器部署，数据库安装等等。好在一点，小程序现在可以支持云开发，什么是云开发呢，就是后台不用自己开发服务部署服务器了，云开发提供了云函数操作业务逻辑，云存储相当于文件系统，还有数据库，数据库的增删改查可以直接在小程序或者云函数中操作，这样就大大简化了小程序的开发，最主要的还是省下了购买服务器的钱，哈哈。

3、碰见的坑

说了半天，是什么坑呢？就是我后台查出来一条数据，但是在页面展示了好几百条。

其实咱们都知道后台查询出来的数据是要在页面进行渲染的，我遇见的就是后台数据在页面展示的时候出了问题，像一般的后台返回一个数组[{"":""}，{"":""}]，咱们开发用agularJs采用ng-repeat进行处理，如下：

小程序开发中也是，不过用的不是ng-repeat用的是wx-for组件，如下：

当然这都是文档，理想状态的，那我代码中是怎么写的呢，贴一下源码吧：

js代码：

getArticelList: function () {
    var that = this;
    const db = wx.cloud.database()
    // 查询当前用户所有的 counters
    db.collection('article').where({
      _openid: 'oJnIw5TwAsDsE1ICP9kumuIoYITY'
    }).get({
      success: res => {
        console.log(JSON.stringify(res.data, null, 2))
        this.setData({
          posts_key: JSON.stringify(res.data, null, 2)
        })
        console.log('[数据库] [查询记录] 成功: ', res.data)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
    }

wxml代码：

<!-- 已发表文章 -->
<block wx:for="{{posts_key}}" wx:for-item="item" >
  <view class='article-container' bindlongtap='copy' data-index="{{index}}">
    <!-- 图片 -->
    <view>
      <image class='article-img' src="{{item.imageId}}"></image>
    </view>

    <!-- 文章信息 -->
    <view class='articelinfo'>
      <view class='articel-title'>{{item.title}}</view>
      <view class='articel-descript'>{{item.describe}}</view>
    </view>

    <!-- 编辑和删除 -->
    <view class='articel-opertor'>
      <button class='complie' bindtap='bianji'>编辑</button>
      <button class='delete' bindtap='delete' data-index="{{index}}">删除</button>
    </view>
    <text selectable='true'></text>
  </view>
</block>

展示一下我打印的要遍历的数组的log：

[
  {
    "_id": "0ec685215e3fcb700cc3a262515e36a3",
    "_openid": "oJnIw5TwAsDsE1ICP9kumuIoYITY",
    "describe": "这是一篇非常好的文章",
    "imageId": "cloud://cloud-micapplication-wbwss.636c-cloud-micapplication-wbwss-1301221295/my-image.jpg",
    "isheck": 0,
    "title": "程序员是怎么炼成的"
  }
]

感觉是不是没毛病，数组中就是一个对象，所以页面应该展示一条数据，但是却展示了好几百条。。。。。。我顿时一脸懵逼

后来经过仔细的推敲还有翻阅小程序官方文档发现，原来是它把我传给它的数组识别成字符串了，文档中有说明，如果传入字符串，会自动转成字符数组，怪不得搞了好几百条记录呢。好了，就是这样，还是没有把文档读透，也算是我踩的一个坑吧，希望大家以后能绕过~下面附上小程序的官方开发文档：

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

总结。