你需要知道的小程式開發技巧

AddOneG發表於2018-05-07

背景

一直以來進行了比較多的微信小程式開發... 總會接觸到一些和官方元件或api相關或其無法解決的需求，於是決定在這裡小小的整理一下自己的實現(次序不分先後)

自定義元件的使用

  • 建立 右鍵新建Component

  • 引用 在你需要引用的檔案的json中定義

"註釋": "前面為元件名，後面為路徑，這裡僅供參考"

{
  "usingComponents": {
    "Menu": "../Components/Menu/Menu",
    "Loading": "../Components/Loading/Loading"
  }
}
複製程式碼
  • 傳入屬性

在元件的js中定義你需要的屬性名,型別及預設值

properties: {
  theme: {
    type: String,
    value: 'gray'
  }
  ...
},
複製程式碼

注意properties為父元件要傳入的資料，元件自身狀態還是在data中

然後在wxml中引用即可

<Menu theme="{{theme}}"></Menu>
複製程式碼

一鍵換膚

先建立一個color.wxss來存你的皮膚樣式(檔名和位置隨意)

/* 黑色主題 */
.bg-black{
  background-color: #363636;
}
.col-black-title{
  color: #ffffff;
}
.col-black-name{
  color: #c3c3c3;
}
複製程式碼

class名中必須帶一個標誌來區分不同主題，推薦使用顏色的英文名..然後在app.wxss中引用

// ~ 為你的檔案路徑
@import '~/color.wxss';
複製程式碼

之後在app.js的globalData中定義一個欄位儲存你當前主題

globalData: {
  themeArr: ['gray', 'black', 'green', 'orange', 'pink', 'blue'],
  theme: 'black' // gray, black, green, orange, pink, blue
}
複製程式碼

然後在js裡引用app.js，然後在onLoad裡獲取theme後setData即可，這裡貼上程式碼

<Menu theme="{{theme}}"></Menu>
<block wx:for="{{themeArr}}" wx:key="{{index}}">
  <view
    class="theme-view-item bg-{{item}} select-{{item == theme}}"
    bindtap='changeTheme'
    data-theme="{{item}}"
  ></view>
</block>
複製程式碼
.theme-view-item{
  width: 80rpx;
  height: 40rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.select-true{
  transform: scale(1.2,1.2);
}
複製程式碼
var app = getApp()

Page({

  data: {
    theme: '',
    themeArr: app.globalData.themeArr
  },

  onLoad: function (options) {
    this.setData({
      theme: app.globalData.theme
    })
  },

  changeTheme(e){
    var theme = e.currentTarget.dataset.theme
    app.globalData.theme = theme
    this.setData({
      theme: theme
    })
  }
})
複製程式碼

來個效果圖

你需要知道的小程式開發技巧

這裡你也可以使用storage來儲存theme

載入更多

使用scroll-view

<scroll-view
  scroll-y
  bindscrolltolower='toLow'
  style="height: {{height}}px"
>
複製程式碼

scroll-y允許縱向滾動，bindscrolltolower定義了滾動到底部時應該執行的函式，style中使用了js中獲取的螢幕可用高度

使用scroll-y需要指定scroll的高度

onLoad: function (options) {
  wx.getSystemInfo({
    success: (res) => {
      this.setData({
        height: res.windowHeight
      })
    }
  })
},
toLow(){
  this.setData({
    isLoading: true
  })
},
複製程式碼

然後在scroll下面放你的loading元件就可以了..

<scroll-view
  scroll-y
  bindscrolltolower='toLow'
  style="height: {{height}}px"
>
  ......
  <view hidden="{{!isLoading}}">
    <Loading></Loading>
  </view>
</scroll-view>
複製程式碼

下拉重新整理

這個功能用到的都是官方的api，先在app.json中定義允許下拉重新整理

"window": {
  ......
  "enablePullDownRefresh": true
}
複製程式碼

然後在你的js檔案中定義相應的函式

onPullDownRefresh: function () {
  ......
  wx.stopPullDownRefresh()
},
複製程式碼

這個點可以看官方文件

自適應

rpx單位是微信小程式中css的尺寸單位，rpx可以根據螢幕寬度進行自適應，如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx= 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素

如果不懂的話不用考慮太多，在用px的時候將其大小翻倍使用rpx即可

【微信小程式】——rpx、px、rem等尺寸間關係淺析

阻止事件冒泡

假設有如下結構

<view class='A' bindtap='funcA'>
  <view class='B' bindtap='funcB'></view>
</view>
複製程式碼

我們在A,B上定義了兩個獨立的點選事件，懂得事件冒泡的童鞋會發現，如果點選B的話，不僅會執行funcB還會執行funcA，那麼如何避免這個問題?

很簡單，只需要將不需要冒泡的的繫結函式改成catchtap

<view class='A' bindtap='funcA'>
  <view class='B' catchtap='funcB'></view>
</view>
複製程式碼

如何去掉Button的預設邊框

微信小程式裡button的邊框其實是寫在after裡的，可以在after中進行更改

button::after{
  border: none;
}
複製程式碼

或者更改button的position讓其不為relative

button{
    position: static;
}
複製程式碼

小程式登入接入流程

一張圖

你需要知道的小程式開發技巧

相關文章