前端小程序开发踩坑

498 阅读3分钟

遇到的坑及解决方法:

\

问题1: 没有小程序调试权限

        通过与同事沟通了解到某同事运营微信小程序,找到同事进行添加小程序调试小程序权限

问题2: 小程序调试困难,无法通过断点调试

     小程序调试通过探索有一下种方式:

  1.一种是线上调试:通过扫描线上二维码调试,存在小程序无发查看报错及日志问题

2.是线上部署调试: 小程序只经过线上部署查看开发进度缓慢,调试困难,沟通后拿到酷家乐官方文档,启用微信小程序开发工具进行开发调试

3.本地小程序微信开发工具调试: 存在控制太报错信息不足问题,只能显示已有报错,无法打印log查看数据

4.最后使用本地微信开发工具+Vconsole进行调试,解决log问题

\

问题3: 小程序调试工具配置了本地url确打不开

              通过交流要来依赖项目组小程序代码查看 ,小程序的工具配置参数url必须进行window.encodeURIComponent编译后才可正常打开本地页面

\

问题4:本地小程序开发工具跳转正常,查看正式环境依然报错

           通过查看资料发现本地小程序跳转参考性不足,与正式真机环境仍有区别,仍需真机调试

\

问题5: 微信小程序内置真机调试无法使用,显示为网络问题

          此问题未解决,怀疑是由于酷家乐网络环境的原因,导致微信小程序无法读取本地环境链接,工具模拟传输到真机失败,解决方案为使用本地工具+线上部署调试

\

问题6: 微信小程序缺乏npm官方JSSDK最新安装包:

           官方JSSDK解释文件指导不足,未提供最新的JSSDK npm包,只有1.0版本,通过搜索github只找到私人封装,稳定性存疑

           解决方案:通过js注入script及tpl.njk模板文件添加脚本方式引入JSSDK

          

问题7:官方指导文件指导错误:

原官方文档:

            官方文档误导使用者所有功能均需要配置config(),通过网上搜索结果不一,导致浪费了很多时间在配置微信config参数上,耽误了很多时间

            最后经过验证小程序页面跳转****wx.miniProgram.navigateTo并不需要配置config即可跳转

\

 问题8: 微信小程序跳转限制

             页面内嵌套入iframe,iframe内引入微信JSSDK后使用wx.miniProgram.navigateTo无发进行跳转且无任何报错提示,排查问题困难,浪费了很多时间

             经过多方查证,微信小程序内如果嵌入iframeiframe内部页面是无法直接跳转执行****wx.miniProgram.navigateTo只能通过最外层父级,与web-view同级别的页面进行跳转才可进行跳转

             同时限制了iframe的src的domain必须与主页面一致,不然也可能无法跳转

\

问题9: 项目代码结构结构导致外层dom为SDK,SDK未引入微信JSSDK:

             鉴于JSSDK用户不需要微信JSSDK,采用动态注入微信JSSDK,在查看弹窗打开时通过useEffect hooks初始化时注入script脚本插入引入解决

             useEffect(()=>{
// 为父级window注入jweixin 微信小程序插件
const parentDoc = window.parent.document;
const s = parentDoc.createElement('script');
s.src = 'res.wx.qq.com/open/js/jwe…'
if (window.parent.wx === undefined) {
parentDoc.body.appendChild(s);
}
},[])