微信小程序项目的简单功能合集（一）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

1. 新手引导功能

用户第一次打开小程序，展现新手引导页面，指引用户怎么一步步操作小程序，后面再次进入小程序则不会出现该引导页面。

a. 首先弹窗向用户说明将展示小程序的使用方法（新手引导）

b. 展示使用小程序的操作步骤页面（使用图片展示每一步的操作方法， 并使用bindtap点击事件函数控制类名展示第几步的图片）

<!-- 新手引导 -->
  <Mask wx:if="{{showGuide}}">
    <view class="rule-pop guide-pop {{guideNumber == 1 ? 'active' : ''}}" >
      <image src="/assets/images/rule-bg.png" class="bg" mode="scaleToFill"></image>
      <image src="/assets/images/rule-title2.png" class="title" mode="widthFix"></image>
      <view class="info">
        <view class="text">
          文字说明
        </view>
      </view>
      <view class="btn" bindtap="clickToNext">
        <text>好的</text>
        <image src="/assets/images/btn-bg.png" mode="widthFix"></image>
      </view>
    </view>
    <view class="maskGuide">
      <view class="{{guideNumber == 2 ? 'active' : ''}}" bindtap="clickToNext">
        <image src="/assets/images/guide1.jpg" mode="scaleToFill" />
      </view>
      <view class="{{guideNumber == 3 ? 'active' : ''}}" bindtap="clickToNext">
        <image src="/assets/images/guide2.jpg" mode="scaleToFill" />
      </view>
      <view class="{{guideNumber == 4 ? 'active' : ''}}" bindtap="clickToNext">
        <image src="/assets/images/guide3.jpg" mode="scaleToFill" />
      </view>
    </view>
  </Mask>

注：原本使用wx-if切换展示新手引导的每一步操作方法，但是点击切换，图片会闪一下（应该是加载图片的原因），因此图片元素都使用绝对定位 position: absolute;，并使用属性opacity: 0一开始都隐藏图片，再控制是否添加类名active显示图片。

c. 新手引导每一步操作的点击事件

每点击一次，引导数guideNumber就增加一次，并更新data中guideNumber变量，页面中就根据引导数是否和设置的数字相等，来控制类名。在新手引导的操作方法展示完后，隐藏新手引导模块，并存储新手引导的是否引导的变量为真，这样再次进入页面，在onShow（）函数中判断该变量，如果为真就不显示新手引导模块。

clickToNext() {
    this.data.guideNumber += 1
    this.setData({
      guideNumber: this.data.guideNumber
    })
    if (this.data.guideNumber == 5) {
      wx.setStorageSync('isGuide', true)
      this.setData({
        showGuide: false
      })
    }
},

2. 图片的放大预览功能

图片列表（固定3张图片），超过3张就不显示，第三张图片显示剩余图片的长度，点击第三张图片，就全屏展示图片，并且图片可以滑动切换

使用wx.previewImage()方法实现

previewImg() {
    let current = this.data.imgList[2]
    let thumb = this.data.imgList;
    wx.previewImage({
      current:  current, //点击查看的当前图片链接
      urls: thumb //需要预览的图片 http 链接数组
    })
},

注： wx.previewImage不支持本地图片预览，只支持http或https链接图片

引申： 视频放大预览—— 使用wx.previewMedia()方法实现

previewVideo(e){
    wx.previewMedia({
    sources: [{
        url: e.currentTarget.dataset.current, //视频播放路径
        type: 'video'//video视频 image图片
       }]
    })
},

3. 长按图片，识别二维码

使用image的show-menu-by-longpress属性实现

<image src="{{item.qrcode}}" class="code" mode="widthFix" show-menu-by-longpress="true"></image>

注：一开始使用了一个小程序码图片，在开发者工具可以出现识别小程序码的菜单，但真机上测试却不会出现，最后换了个二维码，真机上就可以识别了（ps: 不知道是啥原因）。