看到个很有意思的功能：modal，想给大家分享下。

modal组件，“游说”于wxml文件中，其中必有一个属性用来控制显示与否。 它作为一个被调用后出现的 功能面板 ，对，就是功能面板。区别于 小程序中常见的 showToast 和 独立页面 ，常常可以用来写比如：摇一摇、指南针、旋转球这类“ 灵活多动 ”的功能！

比如，我的个人小程序的“设置”页面就有 指南针 的功能：

<modal title="指南针"
        confirm-text="确定"
        no-cancel hidden="{{compassHidden}}"
        bindconfirm="hideCompass"
        confirm-color="#1F4BA5">
        当前方向：{{compassVal}}</modal>

从中我们倒是可以看出些什么：

  1. title ：模块面板显示后的标题
  2. confirm-text ：模块面板上显示的按钮（一般唯一，做结束用）
  3. hidden ：采用 {{}}数据绑定 的方式，用来动态控制模块面板何时显示、何时消失
  4. confirm-color ：模块面板的整体颜色
  5. bindconfirm ：（绑定）结束面板的操作
  6. no-cancel ：必加。这一句就是让面板上默认的cancel按钮去掉，为的就是上面confirm-text能发挥作用

这里有必要说下官方文档中 的wx:if VS hidden 因为wx:if 之中的模板也可能包含数据绑定，所以当wx:if 的条件值切换时，框架有个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。 同时wx:if 也是惰性的，如果在初始渲染条件为false ,框架什么也不做，在条件第一次变成真的时候 才开始局部渲染。 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。 一般来说，wx:if 有更高的切换消耗而hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下，用hidden更好,如果在运行时条件不大可能改变则wx:if 较好。

js文件中调用模块：

showCompass:function(){
    var that=this;
    this.setData({
      compassHidden:false
    })
    wx.onCompassChange(function(res){
      if(!that.data.compassHidden){
        that.setData({compassVal:res.direction.toFixed(2)});
      }
    });
  },

相应的，结束面板的操作如下：

hideCompass:function(){
    this.setData({
      compassHidden:true
    })
  },

你看，全局大体都是根据 hidden的属性值 来判断的。

不过，这还没有完。 既然是指南针，就要用户授权方位。 我们只需要 在app.json文件中添加permission属性 即可：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

（desc：提示窗口中的文字）