微信小程序開發小技巧積累（更新中）

1、輪播組件

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item.photo}}" class="slide-image" width="100%" height="200"  />
      </swiper-item>
    </block>
  </swiper>

2、用if標籤控制內容的輸出顯示

<view class="gmxx" style="font-size:28rpx;width:30%">
    <text wx:if="item.is_show==1">新品</text>
    <text wx:elif="item.is_hot==1">熱銷</text>
    <text wx:else>推薦</text>
</view>

3、組件彈性佈局，常用於一行有多個<view>時，平均分配寬度

 <view style="display:flex; flex-direction:row;  justify-content:space-around;  margin:0rpx; line-height:50rpx; color:#999">
     <view class=""  style="font-size:28rpx; padding-right:70rpx; margin:0rpx;">
            <text>新品55</text>
     </view>
     <view class="" style="font-size:28rpx;">銷量555：{{item.shiyong}}</view>
 </view>

4、navigator跳轉組件

navigator跳轉分爲兩個狀態一種是關閉當前頁面一種是不關閉當前頁面。用redirect屬性指定。

<navigator url="../index/index">點擊跳轉不關閉當前頁面</navigator>
<navigator url="../logs/logs" redirect="true" >點擊跳轉關閉當前頁面</navigator>

使用 navigateTo 頁面跳轉：

wx.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

OBJECT參數說明：

示例代碼：

wx.navigateTo({  url:'test?id=1' })

//test.js Page({  onLoad:function(option){   console.log(option.query)  } })

注意：爲了不讓用戶在使用小程序時造成困擾，我們規定頁面路徑只能是五層，請儘量避免多層級的交互方式。

wx.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

OBJECT參數說明：

示例代碼：

1 2 3

wx.redirectTo({  url:'test?id=1' })

5、打印輸出調試信息

console.log('23432')

6、圖片、組建透明度設置

div
{
    opacity:0.5;
}
//圖片透明度
<image style="opacity:0.5" src="1.png"></image>
// opacity ：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）

7、彈出提示框

selectByItemName: function () {
    var that = this;
    if (!that.data.inputKey) {
      wx.showToast({
        title: '請輸入關鍵字',
        icon:'loading',
        duration:2000,
      })
      return ;
    }
// 隱藏消息提示框：

wx.showToast({

 title:'加載中',

 icon:'loading',

 duration: 10000

})

 // 2s 後關閉提示框

setTimeout(function(){

 wx.hideToast()

},2000)

8、輪播圖中圖片綁定點擊事件

//多個輪播圖綁定同一事件，通過id或index值區分
1） bindtap="itemClick" id="{{index}}" 綁定的函數實現：
itemClick: function (event) {
    console.log(event)
    var index = event.target.id
   },
2）wx:bindtap="itemClick" data-index="{{index}}" 綁定的函數實現方式：

itemClick: function (event) {
  console.log(event)
  var index =  event.target.dataset.index
},

9、顯示模態對話框

wx.showModal({
 title: '提示',
 content: '這是一個模態彈窗',
 success: function(res) {
  if (res.confirm) {
   console.log('用戶點擊確定')
  }
 }
})

顯示模態彈窗，OBJECT參數說明：

10、顯示操作菜單 wx.showActionSheet(OBJECT)

wx.showActionSheet({
 itemList: ['A', 'B', 'C'],
 success: function(res) {
  if (!res.cancel) {
   console.log(res.tapIndex)
  }
 }
})

顯示操作菜單， OBJECT參數說明：

OBJECT參數說明：

11、動態設置頁面當前標題

wx.setNavigationBarTitle(OBJECT)

動態設置當前頁面的標題。

wx.setNavigationBarTitle({
 title: '當前頁面'
})

12、系統粘帖板的內容操作

    1）wx.setClipboardData(OBJECT)，設置系統剪貼板的內容

設置系統剪貼板的內容

OBJECT參數說明：

參數	類型	必填	說明
data	String	是	需要設置的內容
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

wx.setClipboardData({
  data: 'data',
  success: function(res) {
    wx.getClipboardData({
      success: function(res) {
        console.log(res.data) // data
      }
    })
  }
})

     2）wx.getClipboardData(OBJECT)，獲取系統剪貼板的內容

獲取系統剪貼板內容

OBJECT參數說明：

參數	類型	必填	說明
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success返回參數說明：

參數	類型	說明
data	String	剪貼板的內容

示例代碼：

wx.getClipboardData({
  success: function(res){
    console.log(res.data)
  }
})

13、調用客戶端掃碼界面

函數：wx.scanCode(OBJECT)， 功能：調起客戶端掃碼界面

Object 參數說明：

參數	類型	必填	說明	最低版本
onlyFromCamera	Boolean	否	是否只能從相機掃碼，不允許從相冊選擇圖片	1.2.0
scanType	Array	否	掃碼類型，參數類型是數組，二維碼是'qrCode'，一維碼是'barCode'，DataMatrix是‘datamatrix’，pdf417是‘pdf417’。	1.7.0
success	Function	否	接口調用成功的回調函數，返回內容詳見返回參數說明。
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success返回參數說明：

參數	說明
result	所掃碼的內容
scanType	所掃碼的類型
charSet	所掃碼的字符集
path	當所掃的碼爲當前小程序的合法二維碼時，會返回此字段，內容爲二維碼攜帶的 path

示例代碼：

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

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

14、小程序撥打電話接口wx.makePhoneCall

OBJECT參數說明：

參數	類型	必填	說明
phoneNumber	String	是	需要撥打的電話號碼
success	Function	否	接口調用成功的回調
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

wx.makePhoneCall({
  phoneNumber: '1340000' //僅爲示例，並非真實的電話號碼
})

15、微信小程序尺寸單位rpx和px的關係
px單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.