page-container是微信小程序的一个视图容器，主要的功能就是实现一个弹窗的功能，具体效果如下

该组件所包含的属性不多，比较关键的属性就是显示容器和容器位置的属性以及各种事件触发函数。如下

show主要通过一些page-container外的事件触发后更改将show的值改为true，从而显示page-container组件。

position属性控制着组件弹出的位置，但是属性的值bottom，top与right，center的显示效果不同。

bottom和top只是在当前页面中显示出一个弹窗，而right和center是相当于直接载入了一个子页面，具体效果如下

right和center的最终效果一样只是position="right"下的页面是从右往左弹出而已。

组件的几个绑定函数说明也比较通俗易懂，主要就是在进入这个组件以及离开组件的过程中触发的函数，在编写多个触发函数时，需要注意所需要使用的数据有没有被后面执行的触发函数覆盖掉的问题。

.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    text: '文本',
  },
  showPage: function(e){
    this.setData({show: true});  
  },
  beforeEnter: function(e){
    this.setData({text: '函数beforeEnter'});
  },
  enter: function(e) {
    this.setData({text: '函数enter'});
  },
  afterEnter: function(e){
    this.setData({text: '函数afterEnter'});
  },
})

.wxml
<view class="test" bindtap="showPage">展示page-container</view>
<page-container show="{{show}}" round="true" bind:beforeenter="beforeEnter" bind:enter="enter" bind:afterenter="afterEnter">
  <view class="test">
  {{text}}
  </view>
</page-container>

最后输出的是"函数afterEnter"是因为事件触发函数的执行顺序问题，离开的触发函数同理

最后说一说我在使用该组件进行开发中遇到的一些问题及总结。

我在实际开发过程中遇到了一个需求，从一个页面跳转到另一个页面进行操作，操作完成后使用page-container组件弹出操作成功的信息，随后使用<span style="font-size: 14px; color: rgb(34, 34, 34);">wx.navigateBack这个API回到上一界面，起初我是想在触发这个组件显示的那个函数中实现这个功能，具体的操作大致可以简化成这样（还是以上面的代码片段为例）</span>

.js  
showPage: function(e){
    this.setData({show: true});  
    setTimeout(function(){
      wx.navigateBack({
        delta: 1,
      });
    },2000);
  },

这里使用定时器的原因是如果我直接进行路由的跳转将不会显示出page-container的弹窗，但是使用了定时器后会出现跳转失败，如果定时器结束后还没有关闭弹窗则会跳转失败，只会关闭弹窗但是无法回到上一页面，无论delta等于几都是一样，只有在定时器结束前关闭组件的弹窗才可以跳转成功。

针对这一问题，我的解决方法是写一个函数绑定<span style="font-size: 14px; color: rgb(53, 53, 53);">bind:afterleave，在用户自己关闭弹窗后由程序判断是否需要跳转回上一界面。</span>

.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    text: '文本',
    exit: false,//判断是否推出
  },
  showPage: function(e){
    this.setData({show: true, exit: true});  
  },
  afterLeave: function(e){
    if(this.data.exit){
      wx.navigateBack({
        delta: 1,
      })
    }
  },
})

.wxml
<view class="test" bindtap="showPage">展示page-container</view>
<page-container show="{{show}}" round="true" bind:afterleave="afterLeave">
  <view class="test">
  {{text}}
  </view>
</page-container>

大致代码就是这样，根据不同的需求具体的逻辑也会不同。补充一句，使用wx.redirectTo等路由API不会出现问题。

以上就是我这几天对page-container的学习以及遇到的问题，如有不足和错误还请不吝赐教。