微信小程序如何实现在页面中弹出另一个页面？

Question

想实现的功能：在主页面中点击添加按钮，弹出一个添加课程的页面（非跳转）
如下图所示：

Answer 1

引自免费微信小程序：皆我百晓生

好的，我知道了，以下是详细的解答：

首先，你需要在微信小程序的后台进行配置，添加一个监听器来检测用户是否点击了添加按钮。当用户点击这个按钮时，可以在页面底部添加一个新的弹出框。

这是一个简单的代码示例：

Page({
  data: {
    buttonIndex: 0
  },
  onLoad: function () {
    this.setData({
      buttonIndex: 0
    })
  },
  onShareAppMessage: function (res) {
    return {
      title: '添加课程',
      path: '/course-list'
    }
  }
})

接下来，你需要在<view class="course-list">标签内嵌入<view class="course">标签，并在其中添加<image src="{{ course封面 }}" />标签。这里的{{ course封面 }}是将<img>元素中的属性作为字符串插入到<view class="course">标签内的方法。

这是完整的代码：

<view class="course">
  <image src="{{ course封面 }}">
</view>
<view class="course">
  ...
</view>

然后，在主页面中，你可以在<view class="addCourse">标签内添加按钮，并设置点击事件监听器。当用户点击这个按钮时，会触发一个新的回调函数，这个函数会在用户的手机上打开一个新的窗口。

这是一个简单的代码示例：

Page({
  data: {
    clickCount: 0
  },
  onLoad: function () {
    this.setData({
      clickCount: 0
    })
  },
  onShareAppMessage: function (res) {
    return {
      title: '添加课程',
      path: '/course-list'
    }
  }
})

最后，为了实现你在主页面中点击添加按钮后，弹出一个添加课程的页面，你需要创建一个新的Page，并在这个Page中包含一个布局，用于显示添加课程的页面。在这个布局中，你需要在<view class="course">标签内嵌入<image src="{{ course封面 }}" />标签，并在其中添加<button class="course-btn">添加课程</button>标签。

这是一个完整的代码示例：

<template>
  <view class="container">
    <view class="left">
      <text>{{ courseTitle }}</text>
      <image src="{{ courseCover }}" />
    </view>
    <view class="right">
      <text>{{ clickCount }}</text>
      <button class="course-btn">添加课程</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      courseTitle: '',
      courseCover: '',
      clickCount: 0
    }
  },
  created() {
    // 添加更多的代码在这里...
  }
}
</script>

以上就是实现你所描述功能的方法。如果你还有其他的问题或需要进一步的帮助，请随时告诉我。