微信小程式總結

weixin_33797791發表於2018-05-14
微信小程式

css

  • 本地資源無法通過 WXSS 獲取，
    background-image：可以使用網路圖片，或者 base64，或者使用image標籤

  • 能使用calc:height: calc(100% - 100rpx);

  • 官方元件的樣式可以通過!important覆蓋

  • button元件預設都加了一個border，該button控制元件上有一個偽元素（::after），設定了border，只要把button::after 的border 屬性去掉就可以了，

    /*去掉按鈕邊框*/
button::after {
  border: 0;
} 
/*去掉button預設樣式*/
button {
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

  • 修改radio框的樣式:先把radio元件隱藏起來，自己寫自定義樣式和選中樣式，再在data中設定一個選中的變數，來顯示是否顯示選中樣式

    <radio-group class="radioGroup" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}" wx:key="id">
    <!-- 自定義的radio樣式 -->
    <view class='radioPoint'>
      <view class='radioDefault'>
        <view class="{{radioCheckVal==item.id?'radioActive':''}}"></view>
      </view>
    </view>
    <view class='radioText'> {{item.value}}</view>
    <!-- 隱藏預設的radio樣式 -->
    <radio value="{{item.id}}" hidden="true" checked="{{item.checked}}" />
  </label>
</radio-group>

    Page({
  /* 頁面的初始資料 */
  data: {
    items: [
      { id: 1, value: '選項1' },
      { id: 2, value: '選項2' },
    ],
    radioCheckVal: null
  },
  radioChange: function (e) {
    this.setData({
      radioCheckVal: e.detail.value
    })
  },
})

  • 在微信小程式內的文字無法長按複製，除了text節點以外。但要在text標籤內加一個“selectable”屬性。 <text selectable='true' ><text/>

js

  • setData 函式用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的 this.data 的值（同步）。

    1. 直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的，還會造成資料不一致。
    2. 單次設定的資料不能超過1024kB，請儘量避免一次設定過多的資料。
    3. 請不要把 data 中任何一項的 value 設為 undefined ，否則這一項將不被設定並可能遺留一些潛在問題。

  • 小程式裡面的開啟的頁面，請求需要是https協議，websocket協議需要是wss協議

  • 按小程式右上角退出小程式和按home鍵退出微信，小程式裡面的ws連線都不會斷

  • 小程式通過按鈕點選分享，無法做到先發起網路請求獲取某些資訊再進行分享的功能，因為onShareAppMessage方法必須要return一個物件，不能放在wx.request回撥裡面return，必須事先獲取。

    //分享到個人/群判斷方法
Page({
    onShareAppMessage: function () {
      //設定withShareTicket: true才能獲取shareTickets資訊
      wx.showShareMenu({
        withShareTicket: true
      })
      return {
        title: '分享標題',
        path: '/pages/index/index',
        imageUrl: '',
        success: (res) => {
          // 轉發成功
          if (res.hasOwnProperty('shareTickets')) {
            // 轉發到群
            wx.getShareInfo({
              shareTicket: res.shareTickets[0],
              success: (res) => {
                //encryptedData,iv傳送給後臺解密，獲取到openGId
              },
              fail: function (res) {
                console.log('獲取微信分享資訊失敗')
              }
            })
          }
          else {
            // 轉發到個人
          }
        },
        fail: function (res) {
          // 轉發失敗
        }
      }
    },
  })

  • 隱藏小程式導航欄方法，在app.json中配置navigationStyle：

    {
  "pages": [],
  "window": {
    "navigationStyle": "custom"
  }
}

  • 微信sdk分享的連結中不能含有中文字元，否則不能自定義分享，一定要把分享的連結encode一下

  • 處理退出小程式的操作：目前沒有提供這樣的介面，但是可以用wx.navigateBack()做處理，將跳轉層級設為最大跳轉數量即可。wx.navigateBack({delta:20})

  • 涉及到經常切換的需要用hidden來實現樣式切換，不要用wx:if，用這個切換的時候會導致閃爍問題

  • 自定義元件裡面的wxss不會影響到頁面的樣式，所以不能繼承自定義元件裡面的樣式

  • 獲取dataset:獲取最外層dataset通過event.currentTarget.dataset就可以獲取，裡面的子元素就不用寫上data-，而不用event.target.dataset獲取

      <view class="btn" bindtap="tapNav" data-nav="1">
  </view>

  <view class="btn" bindtap="tapNav" data-nav="1">
    <view data-nav="2"></view>
  </view>

  // 讀取當前執行事件的view data-nav值列印出來
  // 第一個打出1
  // 第二個如果點選的位置是子view的話，會列印出2.
  tapNav:function(event){
    console.log(event.target.dataset.nav) //2
    console.log(event.currentTarget.dataset.nav) //1
  },

  • 生命週期執行順序：onLoad->onShow->onReady

  • 授權和登入是兩回事。登入是使用者無感知的，獲取到code 和後端通訊獲得openid來定位使用者。而授權才能獲取使用者頭像和名字等資訊

  • 在不授權的情況下，可以通過open-data獲取使用者基本資訊，在微信6.6.1版本中獲取不了，並且基礎庫1.9.90版本才開始支援，遇到需要顯示使用者資訊的地方還是需要手動授權，不能依賴於open-data。

    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>

  • 無論是bindscrolltoupper 還是 bindscrolltoupper做上拉下拉重新整理都需要注意這兩個事件是會多次呼叫的。需要一個識別符號來攔截多次呼叫。下拉重新整理建議用 page 的

  • this.setData()修改資料是非同步的，因此不能用它來做上下拉重新整理的識別符號

  • 頁面路徑只能是五層，請儘量避免多層級的互動方式。

  • 路由傳遞引數bug: 比較長的字串作為引數應該放在最後。

      const TestUserData = {
    header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90",
    name: "哈哈哈哈",
    text: "紅鯉魚和綠鯉魚與驢",
  }
  // 跳轉之後只能讀取到header
  wx.navigateTo({
    url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`,
  })
  // 跳轉之後三個引數都能讀取
  wx.navigateTo({
    url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`,
  })

  • 授權彈窗如果使用者很久不響應的話，就會呼叫失敗

  • transform: translate(0,100rpx);一個絕對定位的佈局會撐開page節點

  • 路由跳轉bug:經過測試，因為頁面跳轉是有動畫時效的，在動畫進行中當前頁面還能操作。如果雙擊當前跳轉按鈕機會進行兩次跳轉。第二次點選的時候小程式內建的路由棧是已經定位到了新的頁面了，而這時候在按照原來的路由棧去定位當前頁面，因此會報錯。所以頁面跳轉按鈕需要進行短時間多次點選的限制

素材

  • 素材引入使用相對路徑
  • 支援image內src放置svg。但是不支援直接在wxml裡面直接使用svg
  • 錄音音訊，舊版的是silk格式,和公眾號開發的時候一致。而新版可以自己選擇aac

相關文章