微信小程序
Rainy_X
这个作者很懒,什么都没留下…
展开
-
微信小程序中base64图片显示及保存
canvas的drawImage方法只支持本地图片,不支持网络图片代码示例 //将base64图片转网络图片 sendCode(code) { let qrcode = code.replace(/\. +/g, '').replace(/[\r\n]/g, '') /*code是指图片base64格式数据*/ //声明文件系统 const fs = wx.getFileSystemManager(); //随机定义路径名称原创 2021-03-19 17:22:48 · 1267 阅读 · 0 评论 -
canvas绘制圆角矩形
效果图代码实现 // (x,y):圆角矩形起始坐标; width: 矩形宽度; height: 矩形高度; r: 矩形圆角; bgcolor: 矩形填充颜色; lineColor: 矩形边框颜色; draw(ctx, x, y, width, height, r, bgcolor, lineColor) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + width - r, y); c原创 2021-03-18 18:25:42 · 1346 阅读 · 0 评论 -
微信小程序引入其他框架样式覆盖
Vant Weapp 的所有组件都默认开启了addGlobalClass: true以接受外部样式的影响但是在实际操作中发现样式却没有改变,以为插件只要找到对应的命名class覆盖掉来个!important才有效果,结果还是没有任何反应,后来发现Vant Weapp 文档中有提到自定义组件中使用 Vant Weapp 组件时,需开启styleIsolation: 'shared'选项解决方法Component({ options: { styleIsolation: 'shared'原创 2021-02-04 17:16:31 · 451 阅读 · 0 评论 -
解决:用户拒绝授权小程序使用通讯地址API的问题
通讯地址等这些开发接口,都是由微信自身提供的能力。小程序中要使用这些开发接口, 必须经过用户授权后,才能使用。小程序中正确使用通讯地址这个开发接口的流程:图解/** * 思路: * 1 调用 wx.getSetting() 获取用户的授权状态 * 状态有三种:res.authSetting['scope.address'] * 1.1 undefined 第一次点击按钮,获取权限,直接调用 wx.chooseAddress() 即可 * 1.2 true 第二次点击按钮,说明用转载 2021-01-29 16:26:30 · 357 阅读 · 0 评论 -
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别
wx.navigateTo用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。wx.redirectTo当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 5 层页面栈。这时,我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面,跳转到应用内的某个..转载 2021-01-29 10:55:39 · 240 阅读 · 1 评论 -
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整赋值图片路径canvas生产图片(要注意顺序)获取用户相册权限保存相册效果图代码示例wxml<view style="position: absolute;bottom: 0;left: 0;color:#000;z-index:99999"> 坐标: ({{x*2}}, {{y*2}})</view><block wx:if="{{canvasType}}"> <!-- style原创 2020-12-24 18:25:13 · 1533 阅读 · 2 评论 -
微信小程序 获取用户昵称、头像、手机号
官方提供的最新方法Open-data标签,使用这个标签可以不用用户授权直接显示头像和昵称例子:<!-- 获取用户头像直接显示在小程序中 --><open-data type="userAvatarUrl"></open-data><!-- 获取用户昵称直接显示在小程序中 --><open-data type="userNickName" lang="zh_CN"></open-data>可以在button标签中将open-原创 2020-12-22 14:06:10 · 6597 阅读 · 0 评论 -
微信小程序实现下拉刷新
代码实现js //刷新 onRefresh(){ //在当前页面显示导航条加载动画 wx.showNavigationBarLoading(); //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 wx.showLoading({ title: '刷新中...', }) this.getData(); }, //网络请求原创 2020-12-21 16:43:18 · 138 阅读 · 0 评论 -
组件传值-小程序和vue
模板父传子 - 通过属性传值父页wxml //byVal传参 <module id="module" byVal="{{byVal}}"></module>json{ "component": true, "usingComponents": { "module": "../../component/module/module" //你的组件路径 }}js/*** 生命周期函数--监听页面初次渲染完成*/onReady:原创 2020-12-18 18:23:10 · 174 阅读 · 0 评论 -
小程序scroll-view组件高度适配不同手机屏幕
问题scroll-view要求必须要定高度,但是手机尺寸不同需要自适应思路:scroll-view组件高度 = 手机屏幕可用高度 -当前页面其他元素高度手机屏幕可用高度通过小程序封装的 APIwx.getSystemInfoSync()去获取 api传送带注意screenHeight是手机的屏幕高度,包含了手机的状态栏和小程序标题栏,windowHeight才是需要的可用高度基础代码实现let query = wx.createSelectorQuery().in(this)query.原创 2020-12-03 17:03:09 · 923 阅读 · 0 评论 -
微信小程序开发最佳实践
作者: skylorhttps://segmentfault.com/a/1190000012955804项目地址:https://github.com/skyFi/weapp-starter为什么会有这个 repo在小程序之初便开发应用了,现在小程序的开发也越来越成熟了,完善了很多的API、组件、架构等,社区也由原来的零星点点到现在的不大不小,但也算是有了,期间也诞生了很多的开发框架,越来越多的...转载 2018-04-23 22:11:34 · 655 阅读 · 0 评论