- 如何解决“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
错误原因: 微信开发者工具从 1.05.2201210 版本开始,对小程序项目新增了无依赖文件过滤能力。 如果某个 js 文件被静态分析显示是无依赖文件,在实际运行时又被其他 js 文件 require 引用了,则会在工具模拟器中报错这个错误。 此时,如果你继续预览或者上传代码,则在真机运行环境中会报 xxx.js is not defined 的错误。 解决方式: 修改依赖引用的代码:可根据控制台中的【代码依赖分析异常】提示进行修改。(推荐)关闭过滤无依赖文件:project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false详细分析: 微信开发者工具的无依赖文件过滤能力,是基于代码静态依赖分析的数据来实现的。 也就是会分析小程序项目中的代码内容,如果发现某个 js / wxml / wxss / json 文件没有被使用到,则会将其列为无依赖文件。 无依赖文件在模拟器运行时会被忽略,在上传时也不会打入代码包中,因此可以有效减少代码包大小。 但由于 js 代码的灵活性,代码静态依赖分析功能在某些情况下,无法准确分析出依赖引用关系(控制台中会有对应的 warning 提示),此时部分 js 文件会被误判为无依赖文件,导致报错。开发者需配合提示信息修改代码,才能继续使用此功能。 导致依赖异常的常见情况: 动态引用的情况,如 var a = 'somefile.js'; require(a);将 require 函数赋值给其他变量的情况,如 var a = require; a('somefile.js');
2022-07-04 - 预拉取数据的疑问?bug?
今天研究了一下预拉取数据,有些疑惑的地方。 在我的代码包(1M)中使用预加载,在代码包中发出 db.collection返回数据比预加载数据要快。预加载需要调用云函数去获取数据库数据,小程序端直接db反而更快。尤其在要预加载的数据多时(你又不想在一个云函数中多次访问不同数据库集合)那么你就需要在设置的云函数中,分别调用其他的云函数,获取相应的数据,再统一由预设的云函数返回。速度会更慢。这时候的问题就是,你在小程序中的 wx.getBackgroundFetchData会返回错误(data no found),就是说,小程序启动了,但是数据还没回来。只能通过递归等待(有隐患吧)[图片] 2 . 经测试,小程序销毁后,这个预加载的缓存数据不会销毁。而下次冷启动设置的预加载函数一样会被调用。如果网络延迟一下,那么就会导致,小程序启动后,获取的不是当次冷启动下的预加载数据,而是上一次预加载的数据。这就不对了。如果再像上面的情况那样,你永远获取的只能是上一次的预加载数据。 问题出在预加载数据的缓存,应该在小程序销毁时一起销毁。 上面测试是在工具上进行的。以上是个人心得,有不对的地方希望大佬指出。感觉现在的预加载不是很舒服。
2021-05-25 - 小程序短信验证码登录,1分钟实现小程序发短信功能,借助云开发10行代码实现短信验证码登录小程序
老规矩先看效果图 普通短信 [图片] 验证码短信 [图片] 今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜。 进入官方文档一看,云开发给咱们开发者的福利还真不小。 不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。 废话不多说了,咱们直接来撸代码 一,使用云开发短信的条件 这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。 使用条件 1,必须是企业小程序,目前个人小程序无法使用短信发送 2,必须开通静态网站功能(后面应该会逐步放开) 3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊) 上面条件都满足以后,我们就可以来愉快的撸代码了。 二,开通静态网站功能 如果你不开通静态网站,直接调用短信发送,会报如下错误。 [图片] 其实官方文档里也有给出这个错误。 [图片] 那么我们就来开通静态网站功能。开通静态网站功能之前,必须开通云开发,配置好云开发的环境。这些我在云开发入门里讲过很多遍。还不知道的同学可以翻看下我前面的文章或者视频:https://edu.csdn.net/course/detail/26572 这里开通云开发我们借助小程序开发者工具来实现快速开通。 2-1,注册小程序 这里我就不再多说了,只有注册过小程序的appid才可以开通云开发 [图片] 我们注册好小程序后,就可以拿到appid了,如上图 2-2,创建一个小程序项目 小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》 [图片] 这里强调一点,就是创建小程序项目时一定要用我们自己的appid不要用测试号。 [图片] 如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。 2-3,开通云开发 这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下 [图片] 只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。 2-4,开通静态网站功能 [图片] 我们上面云开发开通好以后,就可以在这里快速开通静态网站了。 [图片] 点击以后,直接点击开通即可 [图片] 这时候开通有个条件 [图片] 我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。 [图片] 这里不用担心,这里的按量付费,每月都有免费额度。这些额度我们开发学习基本上够用了 [图片] [图片] 这个时候我们的静态网站功能就开通成功了。 [图片] 开通成功以后如下图。 [图片] [图片] 三,编写发送短信的云函数 其实上面静态网站功能开通以后,我们不用上传网站资源,就可以直接来使用短信功能了。 下面我们就来使用云开发的云函数功能来做短信发送功能。 老规矩先看效果图 [图片] 代码编写也很简单 [图片] 其实发送短信的代码很简单,就上面这几行。下面就来教大家如何编写这个云函数。 3-1,初始化云开发环境id 新建一个和pages平级的目录cloud,用于存放云函数 [图片] 然后在project.config.json里添加cloudfunctionRoot选项。 [图片] 然后对cloud选择当前环境 [图片] 在app.js里配置环境变量 [图片] 这个env环境id需要你去云开发控制台获取 [图片] 3-2,创建云函数 右键cloud目录,新建Node.js云函数 [图片] 然后新建一个云函数,名字你可以自定随便定。我这里用sendSms [图片] 3-3,编写云函数 [图片] 我这里把代码贴给大家,记得把env和接收短信的手机号换成你自己的。 [代码]const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) exports.main = async (event, context) => { try { const result = await cloud.openapi.cloudbase.sendSms({ env: 'xiaoshitou-zfl2q', content: '编程小石头发布了新的能力', phoneNumberList: [ "+8615611823564" ] }) return result } catch (err) { return err } } [代码] 3-4,部署云函数 上面云函数编写好了,一定要记得部署下云函数。右键sendSms然后点击下面箭头所示的即可。 [图片] 上传部署成功后,会有下面这样的提示 [图片] 四,调用云函数发送短信 我们上面云函数编写并部署成功以后,就可以来调用这个云函数,发送短信了。 4-1,编写wxml文件 在wxml文件里写一个button按钮,编写一个bindtap点击事件 [图片] 4-2,编写js文件 在js文件里实现上面button的点击事件,然后调用云函数 [图片] 调用云函数时,一定要记得这里的name必须和你的云函数名一模一样。 4-3,点击发送短信 点击发送短信 [图片] 点击发送 短信以后,可以看到日志里打印openapi.cloudbase.sendSms:ok 这就代表发送成功了。 然后再看下手机,收到下面的短信。 [图片] 到这里我们的短信发送功能就完整的实现了。 其实到这里该实现的功能,就已经实现了。但是我们使用短信场景更多的是用短信发送验证码。所以接下来给大家做一个发送短信验证码的例子出来 实战案例~发送验证码短信 老规矩,先看效果图 [图片] 我们只需要获取用户输入的手机号,然后点击获取验证码,最后输入短信里接收到的验证码,进行验证即可。 1,编写wxml 页面比较简单,就两个输入框和两个按钮 [图片] 2,编写js js里主要是获取用户输入的手机号,然后发送验证码,发送验证码调用云函数实现短信验证码发送功能。用户输入验证码以后进行校验即可。 [图片] 3,发送短信验证码 用户输入手机号以后,点击发送,可以看到我们手机上收到了如下短信。 [图片] 然后用户输入获取到的验证码,点击验证。 [图片] 可以看到验证成功,验证成功以后后面的操作就可以自己定了,比如验证成功以后跳转到登录成功页。 到这里我们就实现了验证码发送功能了。 生成随机验证码的方法 我这里把生成随机验证码的方法贴给大家。 [代码] //获取随机验证码,n代表几位 generateMixed(n) { let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; let res = ""; for (var i = 0; i < n; i++) { var id = Math.ceil(Math.random() * 35); res += chars[id]; } return res; } [代码] 我后面会专门录制讲解视频 官方文档: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html 付费视频(含源码和笔记): https://edu.csdn.net/course/detail/26572 完整免费视频(记得三连):https://www.bilibili.com/video/BV1Ca4y1n73j/
2021-01-09 - 小程序群发短信,短信验证码登录微信小程序视频讲解
小程序群发短信演示视频: [视频] 验证码登录小程序演示视频: [视频] 完整视频讲解(记得三连奥): https://www.bilibili.com/video/BV1Ca4y1n73j/ 配套笔记和源码版: https://study.163.com/course/courseMain.htm?courseId=1209499804 学习过程中有任何问题,记得留言奥。
2021-01-13 - 虚拟化组件节点接收上级节点样式多了"组件名--"?
2.11.2基础库起自定义组件可以开启虚拟化节点配置 如下 ``` js //costom-innerComponent.js Component({ options: { addGlabalClass:true, virtualHost: true }, properties: { style: { // 定义 style 属性可以拿到 style 属性上设置的值 type: String, } }, externalClasses: ['class'], // 可以将 class 设为 externalClasses }) ``` 问题: 经测试,如果开启了虚拟节点的自定义组件在page页中使用,虚拟组件得到的class值为虚拟节点上的class值,不加任何标记。 如果在自定义组件中使用(开启了虚拟节点的组件上层是自定义组件而不是page页)那么虚拟组件得到的class值会加上上层组件的组件名前缀 例如 虚拟化组件在 page aaa中使用 虚拟节点class="test" 那么虚拟化组件内部得到的类名为 test 虚拟化组件在 自定义组件aaa中使用 虚拟节点class="test" 那么虚拟化组件内部得到的类名为 aaa--test 想问,是否有配置,去除”组件名--“这种方式。(文档里面没找到) ,因为有时候想统一用外部样式库的时候,需要得到的类名不加前缀 求解答!!!
2021-01-06