小程序的坑

本文主要記錄下在寫微信小程序的時(shí)候遇到的一些問題，希望對遇到相同問題的朋友能有個(gè)幫助。

1. 使用canvas 繪制海報(bào)的時(shí)候 當(dāng)調(diào)用生成圖片方法wx.canvasToTempFilePath 報(bào)錯(cuò) ：canvasToTempFilePath: fail canvas is empty

錯(cuò)誤：調(diào)用該方法當(dāng)時(shí)候頁面渲染并未完成

解決: 將wx.canvasToTempFilePath 的調(diào)用放到onReady() 的生命周期時(shí)進(jìn)行調(diào)用即可。

2. 小程序UI 實(shí)現(xiàn)背景半透明內(nèi)容不透明

錯(cuò)誤：通過opacity 給出半透明，被小程序不識別。

 {
     background:#000000;
     opacity:0.5;
 }

解決：可以使用rgba 來設(shè)置半透明 就可以避免內(nèi)容的透明

 {
     background: rgba(0, 0, 0, 0.5);
 }

3. 在申請定位等權(quán)限等時(shí)候，打開權(quán)限設(shè)置，需要用戶tap才能生效

錯(cuò)誤：第一次申請定位，點(diǎn)擊取消，再次定位，彈出model框，點(diǎn)擊確定后打不開權(quán)限設(shè)置頁面，提示錯(cuò)誤：openSetting:fail can only be invoked by user TAP gesture.

解決: 主要原因是在彈出model等時(shí)候使用promise ， 修改成正常的 wx.showModel() 就可以了。

4. 使用批量生成小程序碼

錯(cuò)誤：無法在前端完成定制化的二維碼生成。

解決：

• 思路：通過后端操作包裝微信批量生成二維碼的接口讓前端通過一個(gè)get請求 可以直接獲取圖片，便于標(biāo)簽展示和canvas繪制圖片。

• 實(shí)現(xiàn)：

  • 前端發(fā)送請求按照如下方式，這里的參數(shù)需要進(jìn)行base64 以防止轉(zhuǎn)義。

   // 這里的對象結(jié)構(gòu)和后端約定好
   let qrCodePicParam = {
    appId: APP_ID,
    secret: APP_SECRET,
    params: {
      scene: 'id=123',
      page: 'pages/detail/detail',
      width: 140
    }
  };
  
  qrCodePicParam = Base64.encode(JSON.stringify(qrCodePicParam))
  const qrCodePic = `${后臺域名路徑}/${qrCodePicParam}.jpg`
  
  

  • 后端在獲取到接口請求后 ，先通過微信提供的接口獲取最新的token ，然后調(diào)用批量生成二維碼接口，最后將獲取到的字節(jié)碼進(jìn)行base64 返回，模仿成圖片格式返回。

• 注意：

  • 掃描二維碼后，獲取參數(shù)信息通過調(diào)用微信提供的API，這里獲取到的scene 為 'id=123', 如果要使用123,需要截取字符串才行,所以如果參數(shù)只有一個(gè)， 建議直接在生成的時(shí)候給出數(shù)值就好。

  const {query} = wx.getLaunchOptionsSync()
  const scene = decodeURIComponent(query.scene)
  
  

  • 如果小程序一次還未發(fā)布， 那么會生成頁面失敗{"errcode":41030,"errmsg":"invalid page hint: [nFp68a09091511]"} 因?yàn)樵損age 還未在線上注冊，此時(shí)直接發(fā)布就好，等提交生產(chǎn)成功后 就好啦。

5. 在<web-view></web-view> 中使用jssdk的api, 無任何效果？

出現(xiàn)這個(gè)問題，首先需要檢查一下情況：

• 是否在微信小程序公眾平臺配置業(yè)務(wù)域名白名單
• 是否在 引用的HTML 中引入 jssdk

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

當(dāng)然，我上面情況都配置了，結(jié)果還是沒有效果，這里出現(xiàn)了一個(gè)情況：

在HTML中，使用了<iframe src="xxx"></iframe>，并在xxx的頁面中引入jssdk, 結(jié)果在調(diào)用api的時(shí)候，提示api方法是存在的，就是沒有效果，為什么呢？

后來發(fā)現(xiàn)因?yàn)椴皇琼攲觲indow 的原因，舉個(gè)栗子：

// 原來調(diào)用的情況  
wx.miniProgram.navigateTo({url: '/path/to/page'})
// 等價(jià)于window.wx.miniProgram.navigateTo({url: '/path/to/page'})

// 因?yàn)檫@里的window是iframe 中的window 所以作用于web-view 的時(shí)候失敗
 // 正確的調(diào)用方式
window.parent.wx.miniProgram.navigateTo({url: '/path/to/page'})
// 當(dāng)然 ，如果iframe多嵌套了幾層，辣么用window.top 是最合適的操作
window.top.wx.miniProgram.navigateTo({url: '/path/to/page'})

最后感謝我自己，給我自己挖了一個(gè)坑??

-----------------未完待續(xù)-------------------