导入执行后VM292:1 thirdScriptError sdk uncaught third Error module "miniprogram_npm/vant-weapp/mixins/transition" is not defined Error: module "miniprogram_npm/vant-weapp/mixins/transition" is not defined at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26700) at http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26448 at http://127.0.0.1:56368/appserv...
微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装成功了，结果没有找到npm包这让我纠结了一个早上。看了文档，琢磨了很久，最后研究出问题的关键。 第一步：使用cmd进入项目根目录：npm init 然后一直按回车 第二步：输入你要安装的文件（npm i vant-weapp -S --producti...
最近为小程序增加语音识别转文字的功能，坑路不断，特此记录。 微信开发者工具 开发者工具上的录音文件与移动端格式不同，暂时只可在工具上进行播放调试，无法直接播放或者在客户端上播放 debug的时候发现，工具上录音的路径是http://tmp/xxx.mp3，客户端上录音是wxfile://xxx.mp3。 忽悠呢，不是格式不同，是映射路径不同。其实做个兼容也不难，每次提示一行文字，很丑。 采样率与编码码率限制 每种采样率有对应的编码码率范围有效...
先上效果图点击授权按钮后可以显示部分资料和头像，点击修改资料可以修改部分资料。 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3.通过微信接口把code换取成openid 4.后端将openid作为用户名和密码 5.后端通过JSON web token方式登录，把token和用户id传回小程序 6.小程序将token和用户id保存在storage中 下次请求需要验证用户身份的页面时，在header中加入token这个字段 微信小...
iOS系统对js中的new Date()方法有格式要求let dt = new Date("2019-07-24 19:57") // dt会返回valid Date正确写法应该是let dt = new Date("2019/07/24 19:57")而实际应该过程中日期格式大部分都是2019-07-24这种，所以在实际应用过程中需要用正则对字符串进行预处理let tm = "2019-07-24 19:57" let dt = new Date(tm.replace(/-/g,/))在小程序开发过程中用到一个日期转换方法，然而苹果手机就是不管用，去网上搜了才发现有这个问...
前言 最近开发了一个小程序动态仪表盘组件，并以第三方小程序组件的形式发布到npm，任意小程序项目都可以安装这个模块，从而获得仪表盘功能。组件功能目前还非常简单，先来预览一下效果：感兴趣的直接看源码： https://github.com/tower1229/weapp-plugin-dashboard 下面是踩坑过程。如何开发微信小程序自定义组件官方提供了一个CLI工具专门用于开发小程序自定义组件，首先全局安装这个工具：npm install -g @wechat-miniprogram/m...
网页的性能优化是前端开发老生常谈的热门话题，其中微信小程序因其页面双线程架构设计，所以性能优化的手段跟传统的 H5 应用不太一样。今天主要介绍一下微信小程序页面双线程架构的特性给页面渲染带来的一些影响，以及应对的一些渲染性能调优策略。为了叙述方便，下文会把微信小程序简称为小程序。 小程序的双线程架构 与传统的浏览器Web页面最大区别在于，小程序的是基于 双线程 模型的，在这种架构中，小程序的渲染层使用 WebVie...
前言 iBeacon是苹果公司推出的一项低耗能蓝牙技术，由蓝牙设备发射包含指定信息的信号，再由移动设备接收信号，从而实现近场通信。微信小程序2017年开始支持iBeacon，摇一摇附近就是基于iBeacon实现的，此外iBeacon还可以实现距离测量，本文将介绍如何基于微信小程序实现iBeacon测距。 iBeacon测距原理蓝牙信标发射的信号强度(rssi)与收发设备之间的距离，某种程度上呈正相关，因此通过合理的运算转化，可以通过rssi的值反推出与接...
这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以用老版本的替换所有页面的小程序头来做。 ? 参考了其他篇的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太友好，屏幕会乱划。所以针对性的改动了这...
前言 手机连接到互联网有几种方式：Wifi、2G、3G、4G，包括很快到来的5G，每种方式的上传速度和下载速度差异很大，它们的计费方式的差异也导致用户在使用互联网服务的时候有不同的使用习惯。 Wifi相对于其他几种网络连接方式，其速度会更快。Wifi一般都是免费供用户使用，通过移动数据网络是需要根据使用流量进行计费的。我们考虑这样一个场景，小程序需要下载一些文档，然后通过小程序的能力去预览这个文档，这些文档可能文件体积...
小程序文字显示换行 问题 用户在上传图文时，输入换行符。导致我在拿到数据后JSON.parse的时候报错。 大概这样的结构： [{text:落魄前端在线炒粉！！！ ,url: },{text: ,url:xxx.jpg, }] 解决 在拿到数据时先进行正则匹配处理，将换行替换为\n data.replace(/\n/g,\\n)然后在进行JOSN.parse就无问题啦。 还要注意的是要使用 text 标签输出才会有换行显示喔。 ps：下面看下微信小程序文字超出自动换行 text-overflow:ellipsis; wor...
背景在小程序中使用map组件，可以调用腾讯地图的API，将一些固定的点标记到地图界面上，点的经纬度获取是通过android端百度地图API获取的，所以此时将这个位置点信息直接设置上去会出现偏差，而且偏差还比较大 小程序设置位置点关于如何在map组件上设置位置点，详细请查看腾讯官方文档 首先看一下map组件： <map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="contro...
最近做微信小程序项目遇到左滑动效果，比如在我的收藏页面，我的历史浏览记录页面，我的购物车页面，大多数都会用到这种效果，我把代码复制出来，供大家参考，用的时候直接用模板，再此基础上修改就行。 wxml中的代码： <view class="touch-item {{item.isTouchMove ? touch-move-active : }}" data-index=" {{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key=""><view class="content...
本文实例为大家分享了微信小程序实现收货地址左滑删除的具体代码，供大家参考，具体内容如下 效果：思路： 一、用相对定位和绝对定位，列表放在上层，删除按钮放在下层（z-index不要为负）。 二、触摸事件判断用户是否左滑，有 bindtouchstart，bindtouchmove，bindtouchend 三个触摸事件。 1、bindtouchstart 记录触摸开始的点。开始点的坐标在 e.touches[0] 中，这是相对于屏幕的，也就是以屏幕左上方为原点。 2、bindtouchmove ...
本文实例为大家分享了微信小程序绘制图片发送朋友圈的具体代码，供大家参考，具体内容如下 这种生成图片的效果是很常见的，实现起来也不难，跟原生js的差不多。需要注意的就是canvas标签上不要加太多的css，后果呢就是导致canvas不显示，还有呢就是canvas组件的优先级是最高的，所以会覆盖掉下面的所有内容，解决方法呢就是使用：使用上面这两个组件是可以盖在canvas上面的。 注意：canvas绘制不支持网络图片，需要将网络图片保存成...