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.redirectTo(OBJECT)

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

OBJECT引數說明：

示例程式碼：

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 ;
    }
// 隱藏訊息提示框：

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引數說明：

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

wx.setNavigationBarTitle(OBJECT)

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

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

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

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

設定系統剪貼簿的內容

OBJECT引數說明：

示例程式碼：

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

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

獲取系統剪貼簿內容

OBJECT引數說明：

success返回引數說明：

示例程式碼：

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

13、呼叫客戶端掃碼介面

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

Object 引數說明：

success返回引數說明：

示例程式碼：

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

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

14、小程式撥打電話介面wx.makePhoneCall

OBJECT引數說明：

示例程式碼：

wx.makePhoneCall({
  phoneNumber: '1340000' //僅為示例，並非真實的電話號碼
})15、微信小程式尺寸單位rpx和px的關係px單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.