微信小程序弹出操作引导

小程序操作引导实现思路
js页面

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showone: true,
    showtwo: false,
    showthree: false,
    showfour: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  one: function() {
    this.setData({
      showone: false,
      showtwo: true,
      showthree: false,
      showfour: false,
    })
  },
  two: function() {
    this.setData({
      showone: false,
      showtwo: false,
      showthree: true,
      showfour: false,
    })
  },
  three: function() {
    this.setData({
      showone: false,
      showtwo: false,
      showthree: false,
      showfour: true,
    })
  },
  four: function() {
    this.setData({
      showone: false,
      showtwo: false,
      showthree: false,
      showfour: false,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

wxml

<!--pages/test/test.wxml-->
<view class='one' wx:if="{{showone}}" bindtap='one'>
  <view>
    <image class='one_img' src="../../img/11111.png"></image>
  </view>
</view>
<view class='two' wx:if="{{showtwo}}" bindtap='two'>
  <view>
    <image class='two_img' src="../../img/22222.png"></image>
  </view>
</view>
<view class='three' wx:if="{{showthree}}" bindtap='three'>
  <view>
    <image class='three_img' src="../../img/33333.png"></image>
  </view>
</view>
<view class='four' wx:if="{{showfour}}" bindtap='four'>
  <view>
    <image class='four_img' src="../../img/44444.png"></image>
  </view>
</view>

实际使用加入遮罩层，调整图片位置即可。