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

時間 2019-11-15

標籤程序開發過程當中常見問題微信支付寶简体版

原文原文鏈接

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

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

正文

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

background-image支持網絡的圖片連接或者base64php

2、使用自適應單位rpx相似於rem, 佈局儘可能使用flex佈局

UI設計模版要按750寬出圖css

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

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

4、你想要的基礎組件和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等等APIvue

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

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

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

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

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

異步調用如setTimeout或者request請求後ios

8、使用wepy框架時，綁定相似tap的原生事件函數都要放到methods裏面，其餘的放外面

這跟mina框架使用方式不同，與vue也不同git

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

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

一、不顯示頭像問題github

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

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

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

10、this.$nextTick用法與Vue相似

與vue的$nextTick相似，視圖更新後觸發回調

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

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

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

12、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 能夠獲取到轉發信息。

十3、CSS3動畫能夠大膽使用，如animate.css動畫庫

可以使用通用的CSS3 keyframe動畫

十4、要考慮網絡異常狀況的處理

constructor() { // 一、經過接口攔截瞭解網絡狀況
    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({ // 二、經過網絡類型
  success: function(res) {
    // 返回網絡類型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常見的網絡類型)/none(無網絡)
    var networkType = res.networkType
  }
})

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

十5、wx.login登陸取得code而後給後端去跟微信請求得到openid和uniqeId

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

十6、在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

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

一、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: 對應不檢查安全域名選項，開啓。若是已配置好安全域名則建議關閉。

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

十8、小程序路由支持層數有限。所以，要善用navigateTo，redirectTo，reLaunch和navigateBack

相似window.history的機制

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

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

  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，儘可能控制圖片的大小，否則會被微信強制壓縮影響圖片質量
    }
  }

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

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

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

二11、設置好網絡異常處理

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
  }
})

二12、設置元素顯隱通常的方式

一、使用wx:if

二、設置hidden="true"

三、設置樣式opacity

四、若是是文字，能夠設置font-size爲0再恢復

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

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

二十4、wepy中配置css autoprefix

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

二十5、url圖片沒法清除緩存問題

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

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

二十6、小程序的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

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

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

二十8、手寫輸入法輸入後若是不點選中文字，oninput取到的值不全，會缺失；能夠經過onblur取到的值補全

若是特殊狀況如同時點擊提交按鈕，則可經過setTimeout來處理，由於onblur取到的值會有必定的延時。

二十9、自定義組件的顯示與隱藏通常方式

當須要作一個相似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')

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

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

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

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

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

三12、支付寶小程序頁面佈局時寫錯標籤會出現什麼奇葩狀況？

好比把標籤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

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

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

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

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

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

export MyPage extends wepy.page {}

export Index extends MyPage {}

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

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

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

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

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

wx.showToast()與wx.hideLoading()同時調用時，wx.showToast在手機上沒效果，緣由應該是hideLoading不只會做用於loading還做用於toast．

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

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

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

交流與學習

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

——

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。