trafficBroadcast/miniprogram/pages/databaseGuide/databaseGuide.wxml

<!--pages/databaseGuide/databaseGuide.wxml-->
<view class="container">

  <!-- 导航 -->
  <view class="list">
    <view class="list-item">
      <text class="request-text">数据库指引</text>
    </view>
    <view class="list-item">
      <text class="request-text" wx:for="{{7}}" style="color: {{step === index + 1 ? 'red': 'black'}}">{{index + 1}}</text>
    </view>
    <view class="list-item" wx:if="{{openid}}">
      <text class="request-text">openid：{{openid}}</text>
    </view>
    <view class="list-item" wx:if="{{counterId}}">
      <text class="request-text">当前记录 ID：{{counterId}}</text>
    </view>
  </view>

  <!-- 快速操作数据库指引 -->

  <!-- 简介 -->
  <view class="guide" wx:if="{{step === 1}}">
    <text class="headline">示例介绍</text>
    <text class="p">1. 以计数器为例，在此演示如何操作数据库</text>
    <text class="p">2. 数据库操作大多需要用户 openid，需先配置好 login 云函数，如已配置好，点击下一步，获取用户 openid 并开始我们的指引</text>
    <div class="nav">
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

  <!-- 新建集合 -->
  <view class="guide" wx:if="{{step === 2}}">
    <text class="headline">新建集合</text>
    <text class="p">1. 打开云开发控制台，进入到数据库管理页</text>
    <image class="image1" src="../../images/console-entrance.png" mode="aspectFit"></image>
    <text class="p">2. 选择添加集合，集合名为 counters</text>
    <image class="flat-image" src="../../images/create-collection.png" mode="aspectFit"></image>
    <text class="p">3. 可以看到 counters 集合出现在左侧集合列表中</text>
    <text class="p">注：集合必须在云开发控制台中创建</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

  <!-- 新增记录 -->
  <view class="guide" wx:if="{{step === 3}}">
    <text class="headline">新增记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onAdd 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image>
    <text class="p">3. onAdd 方法会往 counters 集合新增一个记录，新增如下格式的一个 JSON 记录</text>
    <text class="code">
    {
      "_id": "数据库自动生成记录 ID 字段",
      "_openid": "数据库自动插入记录创建者的 openid",
      "count": 1
    }
    </text>
    <text class="p">4. 点击按钮</text>
    <button size="mini" type="default" bindtap="onAdd">新增记录</button>
    <text class="p" wx:if="{{counterId}}">新增的记录 _id 为：{{counterId}}</text>
    <text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button>
    </div>
  </view>

  <!-- 查询记录 -->
  <view class="guide" wx:if="{{step === 4}}">
    <text class="headline">查询记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onQuery 方法</text>
    <text class="p">2. 把注释掉的代码解除注释，onQuery 方法会在下方按钮被点击时触发</text>
    <image class="code-image" src="../../images/code-db-onQuery.png" mode="aspectFit"></image>
    <text class="p">3. 点击按钮</text>
    <button size="mini" type="default" bindtap="onQuery">查询记录</button>
    <text class="code" wx:if="{{queryResult}}">{{queryResult}}</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

  <!-- 更新记录 -->
  <view class="guide" wx:if="{{step === 5}}">
    <text class="headline">更新记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onCounterInc 和 onCounterDec 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-inc-dec.png" mode="aspectFit"></image>
    <text class="p">3. 点击下方按钮更新计数器</text>
    <div class="counter">
      <button class="minus" size="mini" type="default" bindtap="onCounterDec">-</button>
      <text class="p">{{count}}</text>
      <button class="plus" size="mini" type="default" bindtap="onCounterInc">+</button>
    </div>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

  <!-- 删除记录 -->
  <view class="guide" wx:if="{{step === 6}}">
    <text class="headline">删除记录</text>
    <text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onRemove 方法</text>
    <text class="p">2. 把注释掉的代码解除注释</text>
    <image class="code-image" src="../../images/code-db-onRemove.png" mode="aspectFit"></image>
    <text class="p">3. 点击下方按钮删除计数器</text>
    <button size="mini" type="default" bindtap="onRemove">删除记录</button>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep" wx:if="{{counterId}}">上一步</button>
      <button class="next" size="mini" type="default" bindtap="nextStep">下一步</button>
    </div>
  </view>

  <!-- 结语 -->
  <view class="guide" wx:if="{{step === 7}}">
    <text class="headline">完成指引 !</text>
    <text class="p">恭喜你，至此已完成数据库操作入门基础，可以点击调试器中的链接，查看详尽的数据库文档</text>

    <div class="nav">
      <button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button>
      <button class="next" size="mini" type="default" bindtap="goHome">回到首页</button>
    </div>
  </view>

</view>