小程序開發過程中常見問題[微信小程序、支付寶小程序]

目錄

一、樣式中如何使用background-image呢？
二、使用自適應單位rpx類似於rem,布局盡量使用flex布局 
三、萬能的{{雙大括號，用於在模版中輸出變量
四、你想要的基礎組件和API，微信的mina框架和通用API都給你准備好了
五、使用wepy框架，這里沒有click，只有tap,longpress和touchend等等
六、使用wepy框架全局的東西都可以丟到app.wpy中，如globalData
七、異步更新數據后記得調用this.$apply()更新視圖
八、使用wepy框架時，綁定類似tap的原生事件函數都要放到methods里面，其他的放外面
九、版本低的微信常見的一些兼容性問題
十、this.$nextTick用法與Vue類似
十一、小程序是有常駐緩存機制，要善於調用生命周期函數處理
十二、onShareAppMessage中的success與fail已失效，但可以追蹤定義分享后的點擊
十三、CSS3動畫可以大膽使用，如animate.css動畫庫
十四、要考慮網絡異常情況的處理
十五、wx.login登錄取得code然后給后端去跟微信請求獲得openid和uniqeId
十六、在Wepy中，使用npm安裝外部依賴包有坑，處理較為麻煩，可把原碼全部引入處理
十七、微信開發工具使用過程中常見問題
十八、小程序路由支持層數有限。因此，要善用navigateTo，redirectTo，reLaunch和navigateBack
十九、小程序分享圖片設置的問題
二十、小程序彈出層解決滾動穿透問題，與web端的類似
二十一、設置好網絡異常處理
二十二、設置元素顯隱一般的方式
二十三、小程序發包提審時審核時間過長問題
二十四、wepy中配置css autoprefix
二十五、url圖片無法清除緩存問題
二十六、小程序的scroll-view縱向滾動要設一個固定高度的樣式如height:100px才能生效，如何實現自適應高度？
二十七、借助調用 wx.login() 獲取 臨時登錄憑證code 來進行人機識別及接口防刷
二十八、手寫輸入法輸入后如果不點選中文字，oninput取到的值不全，會缺失；可以通過onblur取到的值補全
二十九、自定義組件的顯示與隱藏一般方式
三十、小程序背景圖片的使用問題
三十一、支付寶小程序布局樣式編寫優先使用less來進行預處理
三十二、支付寶小程序頁面布局時寫錯標簽會出現什么奇葩情況？
三十三、使用Wepy編寫的組件，引用時參數中傳函數時，函數中的this指向組件本身
三十四、wepy的頁面中mixins定義onShareAppMessage無效問題
三十五、wepy中缺少模板過濾器的解決方式
三十六、微信小程序wx.showToast()與wx.hideLoading()同時使用的bug
三十七、小程序上傳非圖片文件功能比較尷尬

本文同步發布到 http://www.kt5.cn/fe/2019/11/04/mini-programme/

正文

一、樣式中如何使用background-image呢？

background-image支持網絡的圖片鏈接或者base64

 

二、使用自適應單位rpx類似於rem, 布局盡量使用flex布局

UI設計模版要按750寬出圖

 

三、萬能的{{雙大括號，用於在模版中輸出變量

樣式，屬性或者內容都支持{{雙大括號輸出

 

四、你想要的基礎組件和API，微信的mina框架和通用API都給你准備好了

swiper, scroll-view,picker,switch,slider,open-data等等組件。wx.request,wx.setStorage,wx.getSystemInfo,wx.onNetworkStatusChange,wx.makePhoneCall,wx.setClipboardData,wx.getClipboardData,wx.chooseImage,wx.saveFile,wx.downloadFile,wx.openDocument,wx.getFileInfo等等API

 

五、使用wepy框架，這里沒有click，只有tap,longpress和touchend等等

tap,touchstart,touchmove,touchcancel,touchend,longpress,longtap等等

 

六、使用wepy框架全局的東西都可以丟到app.wpy中，如globalData

  globalData = {
    userInfo: null,
    fetch: fetch, // 把fetch綁到全局使用
    API: API, // 把API綁到全局使用
    Base64: new Base64(), // 把Base64綁到全局使用
    isLoading: true
  }

 

七、異步更新數據后記得調用this.$apply()更新視圖

異步調用如setTimeout或者request請求后

 

八、使用wepy框架時，綁定類似tap的原生事件函數都要放到methods里面，其他的放外面

這跟mina框架使用方式不一樣，與vue也不一樣

 

九、版本低的微信常見的一些兼容性問題

如可用開發工具的1.9.9調試庫來測試，可能會出現如下問題：

1、不顯示頭像問題

<open-data type="userAvatarUrl" ></open-data>

可用設置背景為默認頭像解決

2、連續多次點擊觸發多次navigateTo或者toast事件，解決方式是綁定變量立flag防止多次觸發

 

十、this.$nextTick用法與Vue類似

與vue的$nextTick類似，視圖更新后觸發回調

 

十一、小程序是有常駐緩存機制，要善於調用生命周期函數處理

可用onShow, onHide, onLoad, onUnload等處理，或者根據場景值有 1001, 1019, 1022, 1023, 1038, 1056進行相應的處理

其運行機制可參考：https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html

 

十二、onShareAppMessage中的success與fail已失效，但可以追蹤定義分享后的點擊

  onShareAppMessage: (res) => {
    if (res.from === 'button') {
      console.log("來自頁面內轉發按鈕");
      console.log(res.target);
    }
    else {
      console.log("來自右上角轉發菜單")
    }
    return {
      title: '標題',
      path: '/pages/index',
      imageUrl: "/images/1.jpg"
    }
  }

通常開發者希望轉發出去的小程序被二次打開的時候能夠獲取到一些信息，例如群的標識。現在通過調用 wx.showShareMenu 並且設置 withShareTicket 為 true ，當用戶將小程序轉發到任一群聊之后，此轉發卡片在群聊中被其他用戶打開時，可以在 App.onLaunch() 或 App.onShow 獲取到一個 shareTicket。通過調用 wx.getShareInfo() 接口傳入此 shareTicket 可以獲取到轉發信息。

 

十三、CSS3動畫可以大膽使用，如animate.css動畫庫

可使用通用的CSS3 keyframe動畫

 

十四、要考慮網絡異常情況的處理

constructor() { // 1、通過接口攔截了解網絡情況
    super()
    this.use('requestfix')
    // this.use('promisify')
    // 攔截request請求
    this.intercept('request', {
      // 發出請求時的回調函數
      config (p) {
        // 對所有request請求中的OBJECT參數對象統一附加時間戳屬性
        // p.timestamp = +new Date();
        // console.log('config request: ', p)
        // 必須返回OBJECT參數對象，否則無法發送請求到服務端
        return p
      },

      // 請求成功后的回調函數
      success (p) {
        // 可以在這里對收到的響應數據對象進行加工處理
        // console.log('request success: ', p)
        // 必須返回響應數據對象，否則后續無法對響應數據進行處理
        return p
      },

      //請求失敗后的回調函數
      fail (p) {
        // console.log('request fail: ', p)
        // 必須返回響應數據對象，否則后續無法對響應數據進行處理
        return p
      },

      // 請求完成時的回調函數(請求成功或失敗都會被執行)
      complete (p) {
        // console.log('request complete: ', p)
      }
    });
  }

wx.getNetworkType({ // 2、通過網絡類型
  success: function(res) {
    // 返回網絡類型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常見的網絡類型)/none(無網絡)
    var networkType = res.networkType
  }
})

wx.onNetworkStatusChange(function(res) { // 3、監聽網絡變化
  console.log(res.isConnected)
  console.log(res.networkType)
})

 

十五、wx.login登錄取得code然后給后端去跟微信請求獲得openid和uniqeId

獲得opened的方式詳見：https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html#wxloginobject

 

十六、在Wepy中，使用npm安裝外部依賴包有坑，處理較為麻煩，可把原碼全部引入處理

可參考：https://tencent.github.io/wepy/document.html#/?id=%E6%94%AF%E6%8C%81%E5%8A%A0%E8%BD%BD%E5%A4%96%E9%83%A8npm%E5%8C%85

 

十七、微信開發工具使用過程中常見問題

1、project.config.json

{
  "description": "project description",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "Project name",
  "miniprogramRoot": "./dist"
}

es6: 對應關閉ES6轉ES5選項，關閉。 重要：未關閉會運行報錯。

postcss: 對應關閉上傳代碼時樣式自動補全選項，關閉。 重要：某些情況下漏掉此項也會運行報錯。但上傳代碼時要打開，不然會有機型不適配問題

minified: 對應關閉代碼壓縮上傳選項，關閉。重要：開啟后，會導致真機computed, props.sync 等等屬性失效。（注：壓縮功能可使用WePY提供的build指令代替，詳見后文相關介紹以及Demo項目根目錄中的wepy.config.js和package.json文件。）

urlCheck: 對應不檢查安全域名選項，開啟。 如果已配置好安全域名則建議關閉。

2、可靈活切換 調試基礎庫 進行兼容性測試

 

十八、小程序路由支持層數有限。因此，要善用navigateTo，redirectTo，reLaunch和navigateBack

類似window.history的機制

注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。目前頁面路徑最多只能十層。

 

十九、小程序分享圖片設置的問題

  globalData = { // wepy開發中在app.wpy文件中全局定義好分享內容
    shareInfo: {
      title: '我的標題',
      path: '/pages/index',
      imageUrl: '../images/share.jpg' // 圖片比例5:4，如500*400，盡量控制圖片的大小，不然會被微信強制壓縮影響圖片質量
    }
  }

  // 分享方案設置
  onShareAppMessage (res) {
    const shareInfo = this.$parent.globalData.shareInfo // 全局設置分享內容
    return {
      title: shareInfo.title,
      path: shareInfo.path,
      imageUrl: shareInfo.imageUrl // 圖片比例5:4，如500*400，盡量控制圖片的大小，不然會被微信強制壓縮影響圖片質量
    }
  }

 

二十、小程序彈出層解決滾動穿透問題，與web端的類似

 方案一、彈出層時給根元素添加 height: 100%;  overflow: hidden; 樣式

 方案二、弱解決，不打包票的方案：catchtouchmove="preventTouchMove"，給彈層添加阻止touchmove冒泡，如果是wepy下則寫成@touchmove.stop="preventTouchMove"，preventTouchMove是自定義的空函數

 

二十一、設置好網絡異常處理

wx.onNetworkStatusChange(function(res) {
  console.log(res.isConnected) // 網絡連后如何處理，需不需要重新登錄wx.login
  console.log(res.networkType) // 輸出網絡類型 wifi/2g/3g/4g/unknown(Android下不常見的網絡類型)/none(無網絡)
})

wx.getNetworkType({
  success: function(res) {
    // 返回網絡類型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常見的網絡類型)/none(無網絡)
    var networkType = res.networkType
  }
})

 

二十二、設置元素顯隱一般的方式

1、使用wx:if

2、設置hidden="true"

3、設置樣式opacity

4、如果是文字，可以設置font-size為0再恢復

 

二十三、小程序發包提審時審核時間過長問題

一般審核時間的長短是與小程序的類別有關的，如社交類的需進行互聯網主管部門的二次審核，需要一到兩周的時間才能完成審核。其他工具類的可能2~3天就可以一次審核通過。

 

二十四、wepy中配置css autoprefix

https://github.com/Tencent/wepy/wiki/WePY-%E4%BD%BF%E7%94%A8less-autoprefix

 

二十五、url圖片無法清除緩存問題

 給圖片鏈接加隨時時間戳參數，或者更換圖片名字

`${url}?t=${String(new Date().valueOf())}`

 

二十六、小程序的scroll-view縱向滾動要設一個固定高度的樣式如height:100px才能生效，如何實現自適應高度？

可通過wx.getSystemInfo(Object object)獲得高度后計算出高度動態設置

brand	string	手機品牌	>= 1.5.0
model	string	手機型號	
pixelRatio	number	設備像素比	
screenWidth	number	屏幕寬度	>= 1.1.0
screenHeight	number	屏幕高度	>= 1.1.0
windowWidth	number	可使用窗口寬度	
windowHeight	number	可使用窗口高度	
statusBarHeight	number	狀態欄的高度	>= 1.9.0
language	string	微信設置的語言	
version	string	微信版本號	
system	string	操作系統版本	
platform	string	客戶端平台	
fontSizeSetting	number	用戶字體大小設置。以“我-設置-通用-字體大小”中的設置為准，單位 px。	>= 1.5.0
SDKVersion	string	客戶端基礎庫版本	>= 1.1.0
benchmarkLevel	number	(僅Android小游戲) 性能等級，-2 或 0：該設備無法運行小游戲，-1：性能未知，>=1 設備性能值，該值越高，設備性能越好 (目前設備最高不到50)	>= 1.8.0

 

二十七、借助調用 wx.login() 獲取 臨時登錄憑證code 來進行人機識別及接口防刷

 調用wx.login(Object object)獲取的登錄憑證（code）（有效期五分鍾）。開發者需要在開發者服務器后台調用 code2Session，使用 code 換取 openid 和 session_key 等信息，與用戶的openid匹配則為真人行為，不相等或者接口調用失敗則為非法請求

 

二十八、手寫輸入法輸入后如果不點選中文字，oninput取到的值不全，會缺失；可以通過onblur取到的值補全

如果特殊情況如同時點擊提交按鈕，則可通過setTimeout來處理，因為onblur取到的值會有一定的延時。

 

二十九、自定義組件的顯示與隱藏一般方式

當需要做一個類似dialog的組件時，要控制組件顯示與隱藏，要給組件定義好一個show與hide方式即可，然后在調用組件的頁面調用該組件即可對組件進行顯示與隱藏的控制。代碼如下：

定義組件：

 

<style lang="less">
</style>
<template>
  <view class="my-dlg" wx:if="{{show}}">
  </view>
</template>
<script>
import wepy from 'wepy'

export default class MyDlg extends wepy.component {
  props = {
  }

  data = {
    show: false
  }
  events = {
  }

  methods = {
    showDlg () {
      this.show = true
    },
    closeDlg () {
      this.show = false
    }
  }

  onLoad () {
  }
}
</script>

 

調用組件

// 先把myDlg組件import到頁面中，定義好，然后可以這樣控制組件
this.$invoke('myDlg', 'showDlg')

 

三十、小程序背景圖片的使用問題

小程序中想使用圖片背景一般需要先把圖片轉成base64碼，或者使用網絡網絡路徑，不能使用本地相對路徑。

 

三十一、支付寶小程序布局樣式編寫優先使用less來進行預處理

支付寶小程序做頁面切圖布局方式還非常原始 - view + css（類似傳統的div+css），沒有像開發微信小程序那么多框架（如wepy、mpvue等）支持。但幸好社區出現修改版的wxss-cl工具使得我們可以使用less來進行樣式預處理。詳細如下：

https://openclub.alipay.com/read.php?tid=12098&fid=66&ant_source=zsearch

 

三十二、支付寶小程序頁面布局時寫錯標簽會出現什么奇葩情況？

比如把標簽view寫錯成veiw可能會現現什么異常呢？如果頁面節點結構復雜的話開發者工具的渲染器會卡死，如果節點簡單的話，可以錯誤的渲染出來；這兩種情況調試器都不會報錯，要切換到 調試小程序開發者工具 (ctr+shift+I )  才可以看到下面這樣的報錯。

 

C:\Program Files\小程序開發者工具\resources\app\out\volans\workbench\browser\code\index.js:1 [renderer.file][Wed Jan 02 2019 11:35:03 GMT+0800 (中國標准時間)][ERROR]d:\xxx\index.axmlrecognized as binary

 

三十三、使用Wepy編寫的組件，引用時參數中傳函數時，函數中的this指向組件本身

    <my-component
      :onOk="onMyComponentOk"
    />

onMyComponentOk () {
    console.log(this) // 輸出組件對象
    console.log(this.$parent) // 輸出當前組件的上面的調用方對象
}

 

三十四、wepy的頁面中mixins定義onShareAppMessage無效問題

作者也表態了，在一開始的設計中，mixin就不支持on事件，建議使用類的繼承去實現

 

export MyPage extends wepy.page {}

export Index extends MyPage {}

 

https://github.com/Tencent/wepy/issues/824

 

三十五、wepy中缺少模板過濾器的解決方式

 可以直接使用wxs實現類似功能，或者直接使用頁面上自定義的函數

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

 

三十六、微信小程序wx.showToast()與wx.hideLoading()同時調用的bug

wx.showToast()與wx.hideLoading()同時調用時，wx.showToast在手機上沒效果，原因應該是hideLoading不僅會作用於loading還作用於toast．

解決方案：wx.showToast()與wx.hideLoading()不同時調用，使用setTimeout延時調用wx.showToast()

 

三十七、小程序上傳非圖片文件功能比較尷尬

小程序在支持上傳圖片時比較友好，但要傳其他文件時，並沒有提供相關的支持，目前可想到的方案是拉出web-view來使用h5實現上傳文件的功能，但此方案的缺陷是ios根本選擇不了文件，因此只能支持安卓端。比較雞肋。

交流與學習

1. 本文作者：Nelson Kuang，別名：Fast Mover  歡迎大家留言及多多指教
2. 版權聲明：歡迎轉載學習 => 請標注信息來源於 http://www.cnblogs.com/fastmover/p/9321504.html
   

——