微信小程序遇到的一些坑

小程序的坑

本文主要记录下在写微信小程序的时候遇到的一些问题，希望对遇到相同问题的朋友能有个帮助。

1. 使用canvas 绘制海报的时候 当调用生成图片方法wx.canvasToTempFilePath 报错 ：canvasToTempFilePath: fail canvas is empty

错误：调用该方法当时候页面渲染并未完成

解决: 将wx.canvasToTempFilePath 的调用放到onReady() 的生命周期时进行调用即可。

2. 小程序UI 实现背景半透明内容不透明

错误：通过opacity 给出半透明，被小程序不识别。

 {
     background:#000000;
     opacity:0.5;
 }

解决：可以使用rgba 来设置半透明 就可以避免内容的透明

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

3. 在申请定位等权限等时候，打开权限设置，需要用户tap才能生效

错误：第一次申请定位，点击取消，再次定位，弹出model框，点击确定后打不开权限设置页面，提示错误：openSetting:fail can only be invoked by user TAP gesture.

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

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

错误：无法在前端完成定制化的二维码生成。

解决：

• 思路：通过后端操作包装微信批量生成二维码的接口让前端通过一个get请求 可以直接获取图片，便于标签展示和canvas绘制图片。

• 实现：

  • 前端发送请求按照如下方式，这里的参数需要进行base64 以防止转义。

   // 这里的对象结构和后端约定好
   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 ，然后调用批量生成二维码接口，最后将获取到的字节码进行base64 返回，模仿成图片格式返回。

• 注意：

  • 扫描二维码后，获取参数信息通过调用微信提供的API，这里获取到的scene 为 'id=123', 如果要使用123,需要截取字符串才行,所以如果参数只有一个， 建议直接在生成的时候给出数值就好。

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

  • 如果小程序一次还未发布， 那么会生成页面失败{"errcode":41030,"errmsg":"invalid page hint: [nFp68a09091511]"} 因为该page 还未在线上注册，此时直接发布就好，等提交生产成功后 就好啦。

5. 在 中使用jssdk的api, 无任何效果？

出现这个问题，首先需要检查一下情况：

• 是否在微信小程序公众平台配置业务域名白名单
• 是否在 引用的HTML 中引入 jssdk

当然，我上面情况都配置了，结果还是没有效果，这里出现了一个情况：

在HTML中，使用了，并在xxx的页面中引入jssdk, 结果在调用api的时候，提示api方法是存在的，就是没有效果，为什么呢？

后来发现因为不是顶层window 的原因，举个栗子：

// 原来调用的情况  
wx.miniProgram.navigateTo({url: '/path/to/page'})
// 等价于window.wx.miniProgram.navigateTo({url: '/path/to/page'})

// 因为这里的window是iframe 中的window 所以作用于web-view 的时候失败
 // 正确的调用方式
window.parent.wx.miniProgram.navigateTo({url: '/path/to/page'})
// 当然 ，如果iframe多嵌套了几层，辣么用window.top 是最合适的操作
window.top.wx.miniProgram.navigateTo({url: '/path/to/page'})

最后感谢我自己，给我自己挖了一个坑

-----------------未完待续-------------------