小程序的坑
本文主要记录下在写微信小程序的时候遇到的一些问题，希望对遇到相同问题的朋友能有个帮助。
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 还未在线上注册，此时直接发布就好，等提交生产成功后 就好啦。
- 扫描二维码后，获取参数信息通过调用微信提供的API，这里获取到的scene 为
5. 在<web-view></web-view> 中使用jssdk的api, 无任何效果？
出现这个问题，首先需要检查一下情况：
- 是否在微信小程序公众平台配置业务域名白名单
- 是否在 引用的HTML 中引入 jssdk
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
当然，我上面情况都配置了，结果还是没有效果，这里出现了一个情况：
在HTML中，使用了<iframe src="xxx"></iframe>，并在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'})
最后感谢我自己，给我自己挖了一个坑😂
-----------------未完待续-------------------
