微信小程序之特殊效果及功能

一.下拉刷新效果

假設頁面為index文件，那么代碼如下：

index.json:

{
  "enablePullDownRefresh": true
}

index.js:

//下拉刷新
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在標題欄中顯示加載

    //模擬加載
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //完成停止加載
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1000);
  },

效果圖附上：

 

 

二.導航欄紅色圈圈數字標記效果

假設頁面為red文件，那么代碼如下：

red.js:

onShow: function () {
    wx.setTabBarBadge({
      index: 3,//導航欄的索引值
      text: '3'//你所需要添加的數字
    })
}

效果圖附上：

 

 

 

三.保存圖片到相冊效果

假設頁面為picture文件，那么代碼如下：

picture.js

wx.saveImageToPhotosAlbum({
      filePath: "http://.......",
      success: function(res) {
        wx.showToast({
          title: '圖片保存成功',
          icon: 'success',
          duration: 2000 //持續的時間
        })
      },
      fail: function (err) {
        console.log(err)
        wx.showToast({
          title: '圖片保存失敗',
          icon: 'none',
          duration: 2000//持續的時間
        })
      }
    })

效果圖如下：

 

 

 

四.粘貼板效果

假設頁面為copy文件，那么代碼如下：

copy.js:

//粘貼板操作
    wx.setClipboardData({
      data: "需要復制的內容",
      success: function(res) {
        wx.showToast({
          title: '地址已復制到粘貼板',
          icon: 'none',
          duration: 2000
        })
      }
    })

效果圖如下：

 

 

 

五.撥打電話效果

假設頁面為photo文件，那么代碼如下：

photo.js:

//點擊事件
playphoto: function() {
     wx.makePhoneCall({
          phoneNumber: '110' //僅為示例
     })
}

效果圖沒有：

 

 

 

六.掃碼效果

假設頁面為code文件，那么代碼如下：

code.js:

// 允許從相機和相冊掃碼
wx.scanCode({
  success (res) {
    console.log(res)
  }
})

// 只允許從相機掃碼
wx.scanCode({
  onlyFromCamera: true,
  success (res) {
    console.log(res)
  }
})

效果圖如圖微信掃碼

 

七.微信支付密碼六個框效果

假設頁面為pay文件，那么代碼如下：

pay.wxml:

<form bindsubmit="formSubmit">
                <view class='content'>             
                  <block wx:for="{{Length}}" wx:key="item">
                    <input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
                  </block>             
                </view>              
                <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>            
                <view>
                  <button class="btn-area" formType="submit" bindtap='submit'>提交</button>
                </view>             
</form>

pay.js:

Focus(e) {
    var that = this;
    console.log("輸入"+e.detail.value);
    var inputValue = e.detail.value;
    that.setData({
      Value: inputValue,
    })
  },
  Tap() {
    var that = this;
    that.setData({
      isFocus: true,
    })
  },
  formSubmit(e) {
    console.log("form表單" +e.detail.value.password);
  },

效果圖如下：

 

 

八.總結

博主遇到的大致就只有這些了，其實還有很多，微信有很多需要我們發掘的地方，下次博主再遇到一些特殊的，將會一一補充進來，希望對大家有用，覺得學到了的，麻煩點個關注或推薦，博主經常更新，歡迎常來逛逛！