Small micro-channel program development in the "pit"

1, Introduction to Applets

Applet is a new way to connect to the service user, it can be easily access and dissemination in the micro channel, while having a great experience.

2, a small program development

During the epidemic nest at home with nothing to do, it would put forward a small program to play with, do not say something now, if I do not go on to give up one day of it. Etc. for everyone to get out of a certain taste fresh ~

In fact, I look at this two-day study applet, a small program is a service, including the front page development, back-office services to develop, deploy server, database installation, and so on. Fortunately, a little applet now supports cloud development, what is cloud development, that is the background do not develop their own service deployment server, and cloud development provides a cloud service logic operation function, the equivalent of cloud storage file system, database, database CRUD can operate directly in a small program or function in the cloud, thus greatly simplifies the development of small programs, the most important thing is to save money to buy a server, ha ha.

3, ran into the pit

Said a long time, it is what pit? I found out that a background data, but several hundreds of pages to show.

In fact, we all know that the background check out the data is to be rendered in the page, I met is the background data when the page is displayed out of the question, as a general background to return an array [{ "": ""}, { " ":" "}], we developed by using agularJs ng-repeat processing, as follows:

Small program development as well, but not using ng-repeat with a wx-for components, as follows:

Of course, this is a document, the ideal state, that is how the code I write it, paste it at the source:

js code:

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 Code:

<!-- 已发表文章 -->
<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>

Show how to traverse an array of log I print:

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

Is not nothing wrong with feeling, the array is an object, so it should display a page of data, but show several hundreds. . . . . . I suddenly forced to look ignorant

 

Later, after careful scrutiny as well as read the official document applet discovered that it took me pass it identifies a string array, and a note in the document, if the incoming strings will be automatically converted into an array of characters, no wonder do several hundred records yet. Well, that's it, or did not read through the document, it would be a pit I step on it, I hope to be able to bypass the official developer documentation attached below ~ applet:

 

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

 

总结。