临近新年，很多用户想知道愿望清单类H5是如何制作的，现在我们来看下这类H5的制作原理吧！

【案例效果预览】

点击右侧标题拷贝作品：《新年愿望清单DEMO》

【使用组件】

全局变量、条件判断等

【H5规则】

在给出的9个新年愿望中，我们可以选中其中的三个愿望进行合成海报，选择的愿望会按照先后顺序呈现在结果页上。当选中数目少于三个时，提示“您选择的愿望太少啦”；当选中数目等于三个时，可以点击提交；当选中的数目大于三个时，提示“您选择的愿望太多啦，请重新选择”。

选择了三个愿望点击提交后，可以跳转到结果页面，进行合成海报的操作。

【具体步骤】

        步骤1.在页面中放入九张新年愿望的图片以及对应的选中状态图片。本教程中选中状态是通过给图片加描边完成的。

        在页面的底部添加“提交愿望”按钮以及“重新选择”按钮。

        步骤2.在masterpage页添加一个参数变量，命名为“已选中的愿望数”，字段类型为数值，初始值为0，触发为立即触发。每当选择一个愿望（点击愿望的初始态）时该字段+1；并隐藏该愿望初始态图片，显示选中态图片。当点击选中态图片时隐藏自身，显示初始态图片，并该字段-1。

        步骤3.如何能够记录每次选择的顺序，并按照顺序呈现在结果页上的呢？

        首先，在页面中添加三个字段类型为文本的全局变量，并依次命名为“选中的第一个”“选中的第二个”“选中的第三个”。

        其次，添加一个字段类型为文本的“当前选择的图片”变量。每当选择一个愿望时，设置全局变量“当前选择的图片”等于此处选择的图片，因为字段类型为文本，所以该图片可以通过全局变量存储，并传递显示到结果页。

        步骤4.将当前选择的图片以变量的形式存储到”当前选择的图片“变量中时，同时执行逻辑判断，判断当前选择的是第几个图片，根据选择的次序不同，依次将”当前选择的图片“变量存储在之前准备好的“选中的第一个”“选中的第二个”“选中的第三个”里。

        步骤5，当选够了3张图片时，点击”提交愿望“按钮，判断当前是否选择了三个，如果选择了三个即跳转到结果页。如果选择数目小于三则提示当前尚未选够三张图片。

      步骤6.当切换到结果页时，设置当切换到当前页时执行替换资源的触发，将上一个页面准备好的“选中的第一个”“选中的第二个”“选中的第三个”全局变量用替换资源的方式替换给结果页的三张图片。

      自此，一个正常顺序的新年愿望清单大致流程就结束了！

     【其他操作】 刚才我们在步骤5中点击提交按钮的时候判断了当选择的愿望数目小于以及等于3的情况，那么当我们选择数目大于3时该怎么办呢？

      当我们选择的愿望数目大于3时，即我们已经在页面中点击了三个愿望，在点击第四次的时候，（即已选择的愿望数>=3时）我们可以添加一个弹窗，当点击数目大于等于3时阻止我们继续进行点击。此时，我们可以直接提交愿望或者清空愿望重新进行选择。

【其他操作】我们该如何记录已经选择了几个愿望呢？除了利用选中态与初始态的变化，我们还可以在每次”已选中的愿望数“进行变化时，添加一个段落，给其设置参数值=您已选中@已选中的愿望数@个愿望