![](https://img-blog.csdnimg.cn/20201012110148202.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
文章平均质量分 51
微信小程序常用技术文章整理
卡尔特斯
大前端交流群:dengzemiao
GitHub: https://github.com/dengzemiao
掘金:https://juejin.im/user/4450440831840909
展开
-
小程序封装组件简单案例,所有小程序适用(传入参数、外抛事件、传入样式)
在原生编辑器中,右键文件夹新建组件,创建了一个 组件文件夹。二、页面中使用原创 2023-09-12 15:00:26 · 565 阅读 · 0 评论 -
微信小程序订阅消息点了 “总保持以上选择、全部拒绝,不在询问” 无法再次弹出
然后发现无法再次唤起,也没有地方能够进行恢复,胶囊里面的设置中的消息订阅开关也无法使其再次唤出。清理一下即可,就会清理掉当前开发工具登录的微信开发者针对该小程序的授权记录信息。在做小程序消息订阅测试的时候,不小心点了。原创 2023-03-01 16:21:27 · 10004 阅读 · 0 评论 -
H5 video 自动播放(autoplay)不生效解决方案
有个h5需要加入播放器,发现在微信浏览器中无法自动播放,在移动端普通浏览器中也无法正常自动播放ios浏览器中(微信或者其他浏览器),每次刷新进入网页首次需要手动点击播放,下次会自动播放。安卓在微信浏览器中是随便怎么样都不会进入自动播放,在其他浏览器中会进入自动播放。ios平台可以通过微信官方的jweixin插件来解决,但是安卓就暂时无任何办法,限制太严重,只能通过诱导用户点击屏幕进行播放。原创 2022-12-13 16:12:13 · 11330 阅读 · 7 评论 -
微信小程序 - 父组件绑定子组件外传事件通信
官方文档 - 组件间通信与事件父组件<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 --><component-tag-name bindmyevent="onMyEvent" /><!-- 或者可以写成 --><component-tag-name bind:myevent="onMyEvent" />Page({ onMyEvent: function(e){ e.detail // 自..原创 2021-11-30 10:37:03 · 237 阅读 · 0 评论 -
小程序 video 组件播放本地视频(黑屏无法播放,报错:MEDIA_ERR_SRC_NOT_SUPPORTED)
小程序播放本地视频,黑屏无法播放,报错:MEDIA_ERR_SRC_NOT_SUPPORTED<video src="../assets/temp.mp4" 解决办法:将视频文件丢到服务器进行链接访问,其他方法暂时无解,等微信官方修复。原创 2021-11-26 10:02:39 · 10517 阅读 · 5 评论 -
微信小程序 - 点击事件传递参数(简单详细)
在小程序开发的时候,有时候需要在点击事件触发之后拿到一个参数做为使用,小程序不像 Vue 可以直接点击事件中放参数,而小程序它只能通过自定义属性进行绑定参数使用。.wxml 中使用<view bindtap="touchAction" data-index="1">点击</view>.js 中接收touchAction: function(e) { // 传递的参数 let query = e.currentTarget.dataset['index..原创 2020-10-30 13:43:43 · 11435 阅读 · 2 评论 -
微信小程序 - 自定义组件支持外部class或style样式及参数 (Component - externalClasses)
在小程序开发的时候,我们有时候需要自定义或者封装一个小组件用到多处导入使用,怎么样才能使用外部设置进来的。既可以导出当前组件需要外部设置的。原创 2020-10-23 10:02:56 · 4837 阅读 · 3 评论 -
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的。image 标签有 src、mode 等属性基本够用但是今天在用的时候发现设置 src 之后,image 在小程序中是默认有宽高的,也就是固定的,去掉宽高之后,也不会像 html 中的 img 标签一样图片内容会撑开标签,这里就需要自己来根据图片的大小进行手动自适应图片宽高了。使用 bindload 绑定函数动态自适应,我们可以获取到原图的宽度和高度,计算他们的宽高比率,然后设置一个宽度大小(rpx),最后..原创 2020-10-23 10:03:06 · 2922 阅读 · 0 评论 -
微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用
在小程序中,一个完整的页面是由 .js .json .wxml .wxss 四个文件组成:.js 里面编写一些生命周期钩子,事件处理,全局数据….json 里面编写一些页面配置,页面的 .json 配置会覆盖 app.json 的配置….wxml 里面编写一些页面内容,UI标签,数据绑定….wxss 里面编写一些 .wxml 里面的 css 样式,它跟普通 css 文件又有点区别,.wxml 文件可以导入其他的 .wxml 文件进来使用…新建页面方式一(相当于自动做了一遍方式二里面的所有操作原创 2020-10-20 10:58:16 · 3812 阅读 · 0 评论 -
微信小程序 - wx.showModal 内容换行
wx.showModal({ title: '提示', content: '测试测\n试内容!'})注意:换行只需要使用 \n 即可,但是只能在真机上生效,模拟器上不能生效。原创 2020-10-20 10:57:58 · 3912 阅读 · 0 评论 -
微信小程序 - 监听 TabBar 切换点击事件
在小程序开发的时候想要监听系统的 TabBar 切换点击事件,只需要在 TabBar 配置中存在的页面 .js 文件中加上下面函数即可:/*** 监听 TabBar 切换点击*/onTabItemTap: function (item) { console.log(item)}注意:比如 TabBar 上有3个页面 index 、index1、index2,如果想要3个页面都要监听,那么需要在3个页面中都加上这个方法,假如只在 index 页面添加了方法,点击的时候,只会在 inde.原创 2020-10-20 10:57:37 · 10553 阅读 · 3 评论 -
微信小程序 - text 标签头部有空白间距
text 标签限制文字显示行数,以及省略号…在使用 text 标签的时候,这样使用会导致文字头部有间距,文字无法挨着顶部<view style="background-color: red;"> <text> 价优[哇]8.5-8.14号每天需要发型模特,发型发色自选,老师亲自做 </text></view>解决版本:在使用 text 标签的时候不要去进行换行填充文字<view style="backgrou..原创 2020-10-16 13:45:39 · 2375 阅读 · 3 评论 -
微信小程序 - wxml 文件中模板语法不支持 indexOf 方法
在开发小程序的时候发现 wxml 文件中模板语法不支持JS的这几个方法(目前所发现的):1、Object.keys() 2、toString() 3、indexOf().......我们就需要通过 wxs 文件来进行扩展, 我们新建一个 tool.wxs 文件,位置随意,我这里是放到 utils 文件中,以 indexOf 进行举例:tool.wxs :// 扩展支持 indexOffunction indexOf (array, value) { return .原创 2020-10-16 13:45:06 · 1433 阅读 · 1 评论 -
微信小程序 - VSCode 插件支持
minapp支持微信小程序标签、属性的智能补全,并且提示中包含文档内容(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets),wxml 代码会高亮显示,所以也不需在安装 wxml 插件了。wechat-snippet这个插件主要的功能就是代码辅助,代码片段自动完成(函数的智能补全),可以作为上个插件的补充。有了上面这两款插件,便可以开始撸代码了。至于代码的调试以及效果的查看,还是得打开微信开发者工具。如果没有什么特殊习惯,上面两个插件已经足够开发使用了!!!插.原创 2020-10-16 13:44:24 · 1191 阅读 · 0 评论 -
微信小程序 - 创建项目
一、下载 微信小程序开发者工具 ,安装后之后,使用微信扫码登录进去。二、创建小程序项目AppID 就是之前申请账号之后获得的,去小程序管理后台拷贝一下,或者可以点击下面的测试号,先用一个测试 AppID 先玩玩。三、然后点击创建,进入编辑页面在小程序中,一个完整的页面是由 .js .json .wxml .wxss 四个文件组成:.js 里面编写一些生命周期钩子,事件处理,全局数据….json 里面编写一些页面配置….wxml 里面编写一些页面内容,UI标签….wxss 里面编原创 2020-10-16 13:44:01 · 983 阅读 · 0 评论 -
微信小程序 - Unhandled promise rejection TypeError: r.Canvas is not a constructor
微信小程序开发在使用 Canvas 进行真机调试的时候报错:VM22:2 Unhandled promise rejection TypeError: r.Canvas is not a constructor at n.value (eval at n.call.document (runtime.js?devtools_ignore=true:1), <anonymous>:2:1055836) at n.value (eval at n.call.document (.原创 2020-10-15 10:00:48 · 10094 阅读 · 3 评论 -
微信小程序 - 设备信息与版本更新
在微信小程序开发的时候,判断当前设备是否为(Android、iOS、Mac、Windows),获取状态栏高度,导航栏高度,tabBar高度,设备信息参数在微信小程序开发的时候,微信小程序新版本发布之后,用户使用依然是旧版本,这是因为在微信中有旧版本的缓存,不会及时更新到新版本。要想让用户更新到新版本:1、可以通过提示用户在微信中的“发现 - 小程序”入口中将旧版小程序删除,然后再重新搜索并打开该小程序但这种方式的用户体验极差,不推荐。2、通过 wx.getUpdateManager() 系统函..原创 2020-10-15 10:00:24 · 1084 阅读 · 0 评论 -
微信小程序 - block 与 view 的区别
在微信小程序开发中<view>:是一个标签,它会在页面显示出来。<block>:是一个包装块,也就是代码块,里面可以包装一个专门的代码模块或者模板,但是它不会被显示到页面上,只会将包装的内容显示到页面上。用 <view> 进行包装用 <block> 进行包装这就是 <view> 与 <block> 的主要区别,所以在使用的使用就需要更具自己的需求去进行使用,是否需要外层的包装视图出现,还是只是单纯的用于包..原创 2020-10-14 09:48:15 · 7600 阅读 · 2 评论 -
微信小程序 - 调用自定义组件内部方法
如果需要调用下面自定义组件里面的 clear () 方法,不知道怎么自定义组件去看一下官方文档很详细。自定义组件 .js 文件:Component({ // 组件的属性列表 properties: { // 线宽度 lineWidth: { type: Number, value: 1, // 属性变化则调用 observer (e) { if (this.data.ctx) { this.data.c..原创 2020-10-14 09:47:53 · 2626 阅读 · 0 评论 -
微信小程序 - 开发者账号申请流程
1)、 打开 微信公众平台 ,点击注册2)、选择小程序3)、填写注册资料,注意:每一个注册账号(也就是邮箱)只能申请一个小程序,也就是你有多个小程序,就需要多个邮箱申请账号,还有一个需要注意的就是每个微信可以支持绑定上面4种类型的账号5个,所以将注册的账号绑定到微信的时候就需要注意了,5个之后还有再多的则需要一个新的微信才能在进行绑定关联了。4)、点击注册之后,需要去填写的邮件里面激活一下,点击激活链接之后,会跳转到小程序注册流程里面继续填写一些个人或企业信息5)、我们这里选择的是个人类型原创 2020-10-14 09:47:22 · 8802 阅读 · 0 评论 -
微信小程序 - rpx和px互转,以及系统给的 pixelRatio 值比例不对
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 750rpx = 375px = 750物理像素,1rpx = 0.5px。在开发过程中两种换算,下面两种换算公式选一个用就可以了,更具自己情况而定,只是换算时乘除的区别,推荐用 (750 / 屏幕宽度) 这种。设备rpx 换算 px 公式:(屏幕宽度 / 750)px 换算 rpx 公式:(750 / 屏幕..原创 2020-10-14 09:46:54 · 6133 阅读 · 0 评论 -
微信小程序 - 二维码数据解析,如何扫码进入开发版测试二维码数据
1、生成二维码在小程序开发中,经常需要用到通过分享小程序二维码,进行扫码进入小程序。官方文档 生成小程序二维码接口,这个生成接口可以放置服务器使用。page:是扫码之后需要打开的小程序页面scene:是小程序通过扫码之后进入小程序页面带进来的参数,这个参数也是你在生成二维码的时候填好的识别参数其他的属性可以直接看文档,主要功能还是在这两个参数上。生成二维码的时候报错: invalid page hint: [khnDRb0gE-rMmlpA] rid: 5f475efd-096822原创 2020-10-13 09:42:35 · 8291 阅读 · 0 评论 -
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
在微信小程序开发中,有时候需要手写签名生成图片上传服务器、制作一个手绘板、画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard。DZMDrawingBoard 通过 Canvas 封装,使用简单,导入作为组件使用即可。下载代码后,将 文件夹放入到项目,在需要使用的页面加入组件配置,也可以直接在 中加入全局组件,这样就不需要每个页面去配置,看是多个页面还是单个页面用到。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OhamoED-165655612177原创 2020-10-13 09:39:08 · 1327 阅读 · 0 评论