微信小程序項(xiàng)目中的踩坑記錄

最新踩坑記錄canvas使用drawImage報(bào)的錯(cuò)
image.png

  • 這個(gè)主要是在最新的api中canvas是使用wx.createSelectorQuery獲取的節(jié)點(diǎn)，當(dāng)生成圖片的時(shí)候，不能使用wx.canvasToTempFilePath這個(gè)api，需要使用canvas.createImage()這個(gè)api創(chuàng)建圖片，在圖片的onload中使用ctx.drawImage第一個(gè)參數(shù)記得是當(dāng)前創(chuàng)建的圖片標(biāo)簽，不是圖片的路徑，否則就會(huì)提示上面的報(bào)錯(cuò)


    image.png

1、寫class中的三木運(yùn)算符的時(shí)候不要進(jìn)行換行，否則編輯器報(bào)錯(cuò)

2、在小程序中使用flex進(jìn)行布局，在ios手機(jī)上，也就是ipone等機(jī)型，底部會(huì)有問題，我們需要加一個(gè)代碼padding-bottom: env(safe-area-inset-bottom);（可以加到當(dāng)前整個(gè)大的盒子中就可以）（可以百度這一句代碼，詳細(xì)的看看）將底部的安全距離進(jìn)行流出來，還有有時(shí)候底部固定，中間進(jìn)行overflow:auto；flex:1;的時(shí)候，底部的高度會(huì)沒有了，這個(gè)時(shí)候第一種就是將高度加多一點(diǎn)，第二種就是外部不加高度，使用子元素的高度加margin或者是padding進(jìn)行頂一下

  • 不加底部安全距離的


    image.png

  • 加了底部安全距離的


    image.png

3、自定義的底部彈窗，點(diǎn)擊陰影和關(guān)閉按鈕進(jìn)行隱藏，但是點(diǎn)擊其他的空白區(qū)域也會(huì)觸發(fā)冒泡事件，直接給白色的部分，大的盒子加上catchtap，這個(gè)點(diǎn)擊事件可以什么也不做，這樣的話，再點(diǎn)擊其他的空白區(qū)域就不會(huì)進(jìn)行觸發(fā)冒泡事件了

image.png

image.png
image.png

4、 當(dāng)我們使用點(diǎn)擊按鈕或者是三個(gè)點(diǎn)進(jìn)行分享，由于在生命周期中，沒有成功，失敗的回調(diào)函數(shù)，我們不知道用戶有沒有點(diǎn)擊分享出去，點(diǎn)擊分享，在進(jìn)行取消，也是會(huì)被認(rèn)為是分享成功的，可以使用wx.showShareMenu這個(gè)解決，不過這個(gè)目前是測(cè)試版本，只支持安卓手機(jī)，所以會(huì)有點(diǎn)問題

5、微信小程序中input框禁止輸入表情符號(hào)

  • 注：在小米手機(jī)的輸入法上，表情會(huì)帶一個(gè)空格，會(huì)有點(diǎn)問題

//禁止input框中輸入表情符號(hào)
  const emoji = function(data){//data就是input框中的value值
    let reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi ;
    if(data.match(reg)){
      data = data.replace(reg,'');
    }
    return data;
  }

6、websocket的注意事項(xiàng)（可以查看我的這篇文章）

7、在小程序中使用web-view的注意事項(xiàng)

  • 首先需要?jiǎng)?chuàng)建一個(gè)頁面進(jìn)行使用web-view

<web-view src="https://www.baidu.com"></web-view>

  • 還有登錄微信公眾平臺(tái)，開發(fā)管理---->開發(fā)設(shè)置中將我們的業(yè)務(wù)域名進(jìn)行配置，注意是https的別加錯(cuò)了
  • 注意：如果你的h5頁面更新的很頻繁，那么你直接使用時(shí)間戳的形式（加載h5頁面的時(shí)候會(huì)很慢），如果長時(shí)間才進(jìn)行更新一次，可以直接將隨機(jī)數(shù)進(jìn)行寫死就可以出來了
<web-view src="https://www.baidu.com/help.html?p=123'}}"></web-view>
<!-- <web-view src="https://www.baidu.com/help.html?p=timestamp'}}"></web-view> -->
  • 每次更新h5后，因?yàn)橛芯彺娴脑颍覀円獙㈦S機(jī)數(shù)進(jìn)行修改，這樣的話，頁面就會(huì)是你修改后的了
  • 我之前看好像還需要下載證書啥的需要進(jìn)行驗(yàn)證，這個(gè)的話，你可以百度下哈，這里直說修改h5后，頁面沒有進(jìn)行更新怎么解決的
小程序跳轉(zhuǎn)到其他的小程序，接收到的參數(shù)，一般會(huì)在app.js中的onLaunch和onShow中都可以接收到
  • 在這里說得是要在onShow中進(jìn)行接收，原因：在onlaunch中首次可以接收到，當(dāng)用戶點(diǎn)擊A小程序跳轉(zhuǎn)到B小程序，第一次參數(shù)是沒有問題的，用戶關(guān)閉B小程序，在次點(diǎn)擊A小程序跳轉(zhuǎn)到B小程序，（多次重復(fù)這個(gè)操作），就會(huì)導(dǎo)致我們參數(shù)接收的出現(xiàn)問題
小程序獲取用戶的運(yùn)動(dòng)步數(shù)的問題

  • 使用wx.getSetting可以獲取用戶有沒有進(jìn)行授權(quán)，在使用wx.authorize進(jìn)行獲取的某一個(gè)權(quán)限進(jìn)行彈框，提示用戶進(jìn)行授權(quán)，也可以使用需要授權(quán)的api，也會(huì)進(jìn)行彈框提示的

  • 注意：

    • 1、這里當(dāng)彈框授權(quán)后，需要用戶進(jìn)行授權(quán)，用戶點(diǎn)了拒絕之后，不可以再次調(diào)用授權(quán)的api進(jìn)行彈框提示用戶授權(quán)（此時(shí)會(huì)直接默認(rèn)是拒絕的狀態(tài)），我們可以進(jìn)行提示用戶，并且使用wx.openSetting直接打開設(shè)置的頁面，讓用戶進(jìn)行手動(dòng)的授權(quán)

    • 2、獲取微信運(yùn)動(dòng)步數(shù)的時(shí)候，使用api獲取的是三十天內(nèi)的，也可以獲取到用戶當(dāng)天的步數(shù)，但是需要用戶先點(diǎn)擊進(jìn)入微信運(yùn)動(dòng)，在點(diǎn)擊進(jìn)入小程序，這樣我們拿到的數(shù)據(jù)就是最新的了，不然就需要等待微信的刷新機(jī)制進(jìn)行刷新后，我們才能獲取到用戶最新的步數(shù)（這樣的話，會(huì)有延遲，數(shù)據(jù)不是最新的問題，目前沒有好的解決辦法）

 wx.getWeRunData({//獲取微信用戶運(yùn)動(dòng)步數(shù)的api
      success:res=>{
        console.log(res);
      },
      fail:msg=>{//用戶拒絕后的處理
        console.log('用戶拒絕');
        console.log(msg);
        wx.showModal({
          title:'需要授權(quán)才可以',
          success:res=>{
            if(res.confirm){
              wx.openSetting({//直接打開到設(shè)置頁面，讓用戶自己手動(dòng)的進(jìn)行授權(quán)
                success (res) {
                  console.log(res.authSetting['scope.werun']);//返回true，說明用戶授權(quán)了，返回false，說明用戶沒有或者是關(guān)閉了，需要進(jìn)行提示
                }
              })
            }
          }
        })
      }
    })
=================使用wx.getSetting獲取用戶是否授權(quán)===============
 wx.getSetting({
      success(res) {
        console.log('---------sasa-----------');
        console.log(res.authSetting['scope.werun']);
        if (!res.authSetting['scope.werun']) {
          wx.authorize({
            scope: 'scope.werun',
            success () {
              console.log('111');
            },
            fail:_msg=>{
              // console.log((_msg));
            }
          })
        }
      },
      fail:msg=>{
        console.log('錯(cuò)誤');
        console.log(msg);
      },
      complete:_s=>{
        console.log(_s);
      }
    })
小程序中使用canvas，獲取不到node，這個(gè)我們要將canvas寫成是單標(biāo)簽就可以了(或者你直接將我的這段代碼直接進(jìn)行cv就可以了)
<view class="wrap">
  <canvas type="2d" id="canvas" style="width: 100%; height: 100%;" />
</view>

onReady: function () {
  // 使用 wx.createContext 獲取繪圖上下文 context
  const query = wx.createSelectorQuery()
    query.select('#canvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log(res);
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  },
微信小程序中使用uCharts

  • 根據(jù)項(xiàng)目的需求，選用了uCharts中的刻度表的功能，uCharts是使用uniapp編寫的插件，可以在全端使用，但是我當(dāng)時(shí)看了好幾遍的文檔，還是沒有看出來，在gitee上的項(xiàng)目實(shí)例中是可以顯示的，但是我想要其他的功能，不知道怎么整，最后只能根據(jù)項(xiàng)目實(shí)例中的UNIAPP，直接復(fù)制進(jìn)行簡單的一些修改就行，他有個(gè)小程序掃碼體驗(yàn)，里面的每個(gè)功能都會(huì)顯示在那個(gè)頁面下，根據(jù)這個(gè)進(jìn)行查找就可以了，根據(jù)你的項(xiàng)目需求，或許還需要進(jìn)行簡單的修改下源碼


    image.png

  • 第一種是uCharts中提供的，進(jìn)行簡單的修改了下源碼

  • 第二個(gè)是百度就有的，進(jìn)行簡單的修改了下

  • 圖片中的紅色部分是項(xiàng)目中要有個(gè)圖片，這里就簡單的用了一個(gè)圖片進(jìn)行展示了

  • 這個(gè)的源碼的話，就放到我的gitee上的倉庫了，有需要的小伙伴可以看看，這個(gè)是測(cè)試所以寫的沒怎么進(jìn)行優(yōu)化，可以湊活看哈https://gitee.com/fen-xin/progress-bar.git

微信小程序中生成小程序碼，長按手機(jī)不展示識(shí)別二維碼的情況
  • 由于生成小程序碼是通過后臺(tái)請(qǐng)求微信返回的一個(gè)圖片路徑，然后使用canvas進(jìn)行畫上去的，并生成圖片，此時(shí)長按點(diǎn)擊沒有顯示識(shí)別二維碼，解決：1、可能是生成的小程序碼是個(gè)透明的，然后canvas中底部的背景不是白色的，所以導(dǎo)致的
在小程序中生成條形碼
  • 一定要使用wxapp-barcode這個(gè)插件，使用wxbarcode這個(gè)插件生成的條形碼不會(huì)被識(shí)別，切記！?。?/li>
  • 使用方法，首先下載安裝(將文件提取放到小程序的文件夾中)
npm i wxapp-barcode

  • 下載下來的文件中有demo，作者寫的案例，不會(huì)的可以看看那個(gè)


    image.png
使用scroll-view的上拉加載及頁面本身的下拉刷新的問題
  • 當(dāng)我們下拉刷新時(shí)，清空當(dāng)前數(shù)據(jù)，加載后重新賦值，為了讓頁面回到頂部，此時(shí)，你會(huì)發(fā)現(xiàn)接口被調(diào)用了兩遍
  • 觸發(fā)下拉刷新的方法后，他加載的數(shù)據(jù)要是有10條，那么滿足scroll-view的上拉加載的條件，此時(shí)，又會(huì)觸發(fā)一次

  • 解決方法： 我們可以不讓當(dāng)前的數(shù)據(jù)為空，加載后，讓scroll-view的有個(gè)scroll-top為0 ，就可以滾動(dòng)到頂部了


    image.png

  • data 中進(jìn)行聲明


    image.png

  • 數(shù)據(jù)加載出來之后，進(jìn)行重新賦值


    image.png
在微信小程序中使用搜索功能，點(diǎn)擊歷史記錄要進(jìn)行排序，將當(dāng)前點(diǎn)擊的放到第一位
  • 思路：
    • 1、當(dāng)我們進(jìn)行搜索的時(shí)候，要進(jìn)行去重，還有進(jìn)行默認(rèn)不排序，歷史記錄進(jìn)行存儲(chǔ)
    • 2、點(diǎn)擊歷史記錄的時(shí)候，進(jìn)行排序，存儲(chǔ)歷史記錄進(jìn)行覆蓋
    • 3、每次進(jìn)入當(dāng)前的搜索頁面的 時(shí)候，在onshow中進(jìn)行獲取歷史記錄的存儲(chǔ)數(shù)據(jù)，進(jìn)行排序，賦值
image.png
image.png
image.png
在微信小程序中，需要一直進(jìn)行頁面的跳轉(zhuǎn)，但是navigateTo只能嵌套10層
  • 使用getCurrentPages() 可以獲取當(dāng)前的頁數(shù)，當(dāng)超過幾頁之后進(jìn)行關(guān)閉當(dāng)前頁面，在進(jìn)行跳轉(zhuǎn)
image.png
image.png

(要想實(shí)現(xiàn)canvas簽名可使用mini-smooth-signature這個(gè)插件)

  • 使用canvas最新的api進(jìn)行繪制，需要獲取canvas的節(jié)點(diǎn)信息，返回null的問題
  • 首先要有type和id，id不是canvas-id看清楚哦
  • 要有默認(rèn)的高度和寬度，初始化的時(shí)候，可以將高度進(jìn)行重新賦值
<canvas type="2d" id="signature1" style="width:{{width1}}px;height:{{height1}}px;"></canvas>
data: {
    width1: 320,
    height1: 200,
  },

后續(xù)碰到其他的問題，會(huì)進(jìn)行及時(shí)更新的，小伙伴們也可以將你遇到的問題進(jìn)行留言，讓我們一起完善這篇文章，加油?。?！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容