评论

小程序云开发学习笔记1

这是自己学习云开发的一点记录,实现查询和添加功能

本人做过一点微信小程序的项目,但主要是负责Java Springboot的后端开发,平时很少接触过小程序前端和云开发,听说云开发要比服务器后端方便很多。我就分享一下我学习云开发的心得,并且做一下云开发和后端服务器的比较。

传统的服务器后端开发需要买服务器,买域名,本身就很消瘦的钱包更是雪上加霜,但还要进行恼人的环境配置,还要熟悉一些Linux指令,对于小白来说简直是噩梦。但云开发只需要获取环境ID,就可以在app.js里面设置,如下图:省去了很多麻烦。

值得注意的是,小程序云开发需要设置数据权限才能访问数据,但是设置起来也是极其简单,只需要简单地点击即可:

今天实现一下小程序通过云数据库实现查询和添加功能,首先是前端的一些wxml代码,主要实现一下书本列表和书本详情页面:

书本列表页面:
<view class='list'>
  <block wx:for='{{bookList}}' wx:key='list' wx:for-item="item">
  <view bindtap="getDetail" data-id="{{item._id}}" class="list_item">
      <view class='info'>
        <view class='title'>{{item.name}}</view>
        <view class='price'>¥{{item.price}}</view>
      </view>
      <view class='clear'></view>
  </view>
  </block>
  <input placeholder="请输入商品名"  bindinput="getName"/>
  <input placeholder="请输入价格"  bindinput="getPrice"/>
  <input placeholder="请输入介绍" bindinput="getIntroduction"/>
  <button class="btn" bindtap="addBook">添加书本</button>
</view>   

书本详情页面:
<view class="name">书本名:{{detail.name}}</view>
<view class="price">价格:¥{{detail.price}}</view>
<view class="introduction">
    介绍:
    <view class="content"> 
          {{detail.introduction}}
    </view>
</view>

然后就是书本信息的获取,这里需要获取全部信息和单条信息,获取全部信息的代码下:

注意database后面需要有括号,并且.then和.catch由于是类lambda表达式,this所指向的内容默认为父类Page,所以不需要将Page的data通过var that=this的形式重新赋值。

获取的信息在前端进行渲染,最后形成如下的列表,当然数据表可以先在数据库里面手动创建,微信小程序的数据库更像键值对,而不是传统后端意义上的索引表,所以显示数据时给人更加直观的感觉。

这是全部查询,如果我们只想要查询一条数据,可以写如下的代码:

注意doc后面的括号内必须是数据的id号,微信小程序云开发会为我们自动生成一个主键,主键就是区分数据的标识,无需我们自动设置,这个标识存在表中,名字为_id,可以通过这个id获取特定的单个数据。

这里我通过查询单个数据返回一本书的详细信息,展示在页面中:

最后就是商品的添加操作,首先需要前端<input>和<button>组件实现数据的写入,然后js读取数据,最后调用云函数:

但是,要注意的是,如上文所说,操作数据是有权限的,我们原先由于权限的问题,无法添加数据,如果一定要添加,就会报如图所示的错误:

意思是权限不够,所以,我们需要修改权限:

最后,还有一点需要注意,我们添加数据有两种,第一种就是在数据库表中手动添加,第二种就是在js中调用wx.cloud.database.collection(“表名”).add添加,这两种在传统后台服务器没有区别,但是在小程序中,第一种方式添加的数据,不会有_openid字段,但第二种方式添加的数据,会有_openid字段,标识改数据是某个openid对应的用户添加的。这点与后面修改数据时的权限有关,大家需要注意。


最后一次编辑于  2021-11-10  
点赞 8
收藏
评论

11 个评论

  • Jack Li
    Jack Li
    2021-11-10

    学到了

    2021-11-10
    赞同
    回复

正在加载...

登录 后发表内容