![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
CherryCola_zjl
enjoy it
展开
-
微信分享h5给好友或朋友圈卡片样式控制
// 首先加载微信jssdk的js文件,可以script直接引用,也可动态创建// <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>const oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.sr原创 2021-04-16 19:58:25 · 783 阅读 · 0 评论 -
audio移动端无法自动播放(safari,chrome,微信内置浏览器)
有同学反映有一个奇葩的问题,audio标签 在移动端无法自动播放。尤其是ios系统,在safari以及微信内置浏览器上。聪明的你肯定能想到如下代码:var audio = document.getElementById("audioID"); audio.play();发现不行后思索一番,决定加一个定时器延时执行。一定是audio没加载完的问题,嗯!一定是!我是天才!!!setTimeout(()=>{ var audio = document.getElementById("原创 2021-01-19 20:08:45 · 1735 阅读 · 3 评论 -
小程序自定义标题栏“navigationStyle“: “custom“
lifetimes:{ attached: function () { let bar = wx.getMenuButtonBoundingClientRect() // 获取胶囊丸信息 // 胶囊的top有时候获取到是0 ,所以兼容 statusBarHeight(刘海的高度,原生标题栏的top,比胶囊的top高一些) let top = bar.top || wx.getSystemInfoSync().sta.原创 2021-01-14 17:38:59 · 707 阅读 · 0 评论 -
vue使用wx-open-launch-weapp
页面报错找不到模板wx-open-launch-weapp,可以在main.js配置下面是实测可用代码,替换接口就ok。username替换成你的小程序原始IDstylewidth100%;height100%;paddingclass"btn"原创 2020-12-14 13:58:15 · 15392 阅读 · 15 评论 -
小程序未授权开启配置页
调用在需要授权的操作(例如:wx.saveImageToPhotosAlbum)或者 获取授权操作失败 fail的回调中// 打开设置页function openSetting(data) { data || data = {}; wx.showModal({ title: data.title ? data.title : '您未授权相册权限', ...原创 2020-04-11 14:57:19 · 317 阅读 · 0 评论 -
小程序 wx.getStorageSync 取Object ,真机上多出 nv_toString 属性
以前的业务今儿出现了报错,一查才知道, wx.getStorageSync 获取缓存中的空对象,小程序自动加上了nv_toString函数。真机截图开发者工具目前解决方法,先自己写一个取缓存的方法顶一阵,等官方修复就没问题了(问题反馈帖子)function getStorageSync (key) { let out = wx.getStorageSync(key) i...原创 2020-03-27 15:27:24 · 639 阅读 · 0 评论 -
js数字精准计算
function calculate(num1=0,num2=0,type='add'){ var num = '' switch(type){ case 'add': var index = 1,i1=0,i2=0 i1 = num1.toString().split(".")[1] ? num1.toString().split(".")[1].len...原创 2020-02-21 15:16:25 · 789 阅读 · 0 评论 -
小程序隐藏回退按钮,公用导航栏
回退以及 右上角胶囊丸 是小程序原生程序// 先在页面json文件里如下配置,去掉小程序默认导航栏 "navigationStyle": "custom",去掉后,页面布局会整体靠上 需要 写一个全局共用组件去替代原标签栏<view style="background:{{backColor}};height:{{autoheight}};position:relative;"&...原创 2019-12-25 14:13:43 · 1122 阅读 · 0 评论 -
小程序动态监听输入金额是否正确
首先input 的type 需为 digit 只能输入 数字以及点getFloatNum(num) { // 为空或为0 if (!num) { return 0 } // 输入 0. 或者 1.0 的时候保持状态,让用户继续输入。这个是保证用户输入 0.0. 或者0...等不合规的情况 if (/^\d+\.0?$/.test(num)) {...原创 2019-12-12 14:00:39 · 331 阅读 · 0 评论 -
扫码跳转小程序讲解(公用js入口)
// 进入小程序参数集中处理function switchOptionsType(options) { let obj = {} // 小程序二维码进入 if (options.scene) { obj = parseMinicode(options) } // 普通二维码 else if (options.q) { obj = parseQRcode(o...原创 2019-10-25 17:38:32 · 412 阅读 · 0 评论 -
小程序页面 json文件 设置无效
配置都无效,大概率是因为 app.json pages里面没有配当前页面的路径navigationBarTitleText navigationBarTextStyle navigationBarBackgroundColor原创 2019-08-01 10:24:53 · 2921 阅读 · 0 评论 -
小程序 this.getOpenerEventChannel is not a function
小程序新出的,页面跳转传递数据函数,在使用过程中发现个大bugthis.getOpenerEventChannel is not a function;at xx/xxx/xxx page lifeCycleMethod onLoad function找了半天,原因竟然是 删除了 页面json配置文件的 usingComponents。加上就好了。。。。{ "usingCompone...原创 2019-07-22 16:33:24 · 12807 阅读 · 13 评论 -
小程序scroll-view
第一次使用scroll-view,会遇到元素不在一行的尴尬问题。。。<scroll-view scroll-x="{{true}}" style='overflow:hidden;white-space:nowrap;'> <view class='scroll-iten'></view> <view class='scroll-iten'>&...原创 2019-07-15 10:41:01 · 302 阅读 · 0 评论 -
小程序模板消息
发送模板信息需要微信用户的openid,需要前台通过 wx.login 先获取jscode 然后请求后台 去解密返回openid通过 form标签和 button标签 通过表单提交获取formid。每个formid可以发送一次模板信息。或者用户通过微信支付,后台获取一个payid,一条payid可以发送三条模板信息。// 封装的 wx.requestimport Api from '...原创 2019-06-24 13:53:33 · 450 阅读 · 0 评论 -
小程序倒计时
针对一个页面列表中多个倒计时的难题解决思路:计时器单放一个数组,因为要实时操作,避免列表数据过大操作太笨重。根据计时器列表的index 与列表数据的 index 相对,去找到自己对应的倒计时器。页面刷新数据时要先 清除所有定时器 ,再重新加载,不然会出现连跳或者秒数来回跳动的问题。// data里声明 timerList: [],allTimerList: []// js 传...原创 2019-06-17 16:29:52 · 3699 阅读 · 0 评论 -
小程序公用上传图片js
参数{ sourceType:['album', 'camera'], // 选择图片方式, album 从相册选图,camera 使用相机,默认二者都有 sizeType: ['original', 'compressed'], //是否压缩,original 原图,compressed 压缩图,默认二者都有 count: 1, //选择图片张数,默认1 size: 2, //图片大小...原创 2019-06-04 19:53:50 · 2439 阅读 · 0 评论 -
小程序组件事件通信
组件<input bindinput='watchInput' data-index='{{index}}'></input>watchInput(e) { // 第一个参数为组件上写的bind事件,第二个为传递的参数 this.triggerEvent('watchInputPage', e) },父页面<formItem bindwatc...原创 2019-05-28 16:50:31 · 689 阅读 · 0 评论 -
没有找到可以构建的 NPM 包
应先npm init -y原创 2019-05-06 11:24:09 · 7515 阅读 · 3 评论 -
微信小程序常见bug汇总
ios 底部margin无效底部加一个view height为1 或者为 margin 值ios textarea 有默认padding值,水平不好对齐var phone = wx.getSystemInfoSync(); //调用方法获取机型 if (phone.platform == 'ios') { this.setData({iosTextarea:true})...原创 2019-04-13 18:48:02 · 4495 阅读 · 0 评论 -
微信小程序canvas绘制圆形图片
canvas基础知识补齐一下,明白了原理便很简单。先使用.arc绘制一个圆圈,通过.clip裁剪,绘制在圆圈内的内容会出现,其他的都会隐藏。.drawImage的绘制位置是相对原画布,而不是圆圈,这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。//保存上文targetCtx.save()targetCtx.beginPath()targetCtx.arc(110, 60,...原创 2018-11-06 16:50:42 · 14328 阅读 · 1 评论 -
微信小程序圖片裁剪工具 wx-cropper優化
wx-cropper源碼地址,引用部分不用改動。優化部分我將詳細講解。https://github.com/we-plugin/we-cropper優化獲取頁面高度,動態改變canvas高度時,應在onload回調函數中獲取,不然會出現bug,獲取的是上一頁的高度。 onLoad(option) { let device = wx.getSystemInfoSync() ...原创 2018-11-05 15:41:53 · 9369 阅读 · 5 评论 -
微信小程序组件内(component)canvas元素的坑 canvasToTempFilePath: fail canvas is empty
首先你会发现画布画不上…查看文档第二个参数要传入this。canvasToTempFilePath: fail canvas is empty , 报这个错是因为调取 wx.canvasToTempFilePath 接口获取不到canvas,同样的需要传入上下文的thiswx.canvasToTempFilePath({ height: '430', ...原创 2018-11-08 18:21:37 · 24548 阅读 · 13 评论 -
微信小程序更新提示
const updateManager = wx.getUpdateManager() //版本更新管理器,用于管理小程序更新 updateManager.onCheckForUpdate(function (res) { //请求新版本信息,返回对象如果 hasUpdate为true 则进行下一步 if (res.hasUpdate) { ...原创 2018-11-21 11:42:55 · 9558 阅读 · 1 评论 -
小程序web-view跳转失效问题
web-view控制小程序跳转,引用的网页要调小程序的 js 文件才会生效。<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>wx.miniProgram.navigateTo({url: '/path/to/page'})wx.m...原创 2018-11-21 19:38:17 · 8141 阅读 · 0 评论 -
微信小程序过滤器
微信小程序新增的 .wxs 文件可完成vue过滤器的功能https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs///filter.wxsvar filterMoney = function (money) { if(money){ return money.toFixed(2) }else{ ...原创 2018-11-22 11:19:39 · 435 阅读 · 0 评论 -
小程序请求400问题
旧款安卓手机,在请求url带有中文时,会出现请求400的问题解决方案//用encodeURI 转一下中文部分 let url = Url + "?reason=" + encodeURI(data.reason)原创 2018-12-14 17:26:41 · 1063 阅读 · 0 评论 -
小程序component的坑
component的class样式不会与引用页面的样式影响,但是标签样式例如,view{} page{}这样的会互相影响。原创 2018-12-10 10:17:10 · 5823 阅读 · 1 评论 -
小程序多行文本省略号
.box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: normal !important; -webkit-line-clamp: 3; /* 行数*/ -webkit-box-orient: vertical;}...转载 2018-12-10 18:34:31 · 627 阅读 · 0 评论 -
安卓软键盘导致底部按钮顶上来的问题
h5网页中,软键盘弹起底部fixed定位元素会被顶起来,挡住部分内容const h = document.body.scrollHeight //获取当前页面高度window.onresize = function () { // onresize监听窗口高度变化 if (document.body.scrollHeight < h) { document.body...原创 2019-01-11 14:39:17 · 759 阅读 · 0 评论 -
小程序textarea字体错位
遮罩层盖不住原因:这是因为textarea和input框的z-index为最高,自己写的蒙层盖不住。处理方法:wx:if=’{{!modal}}’,弹框出现时隐藏输入框弹框中又textarea,placeholder字体位置错位原因:弹框fixed定位,小程序兼容问题解决方法: ...原创 2019-01-08 13:34:09 · 7355 阅读 · 0 评论 -
小程序全局拖动悬浮球插件
项目源码~~需要app.js设置全局变量,保证全局统一显示隐藏,以及移动位置。 <movable-area class='fixed-area'> <scroll-view style='height:100%;' scroll-y='true' bindscroll="scrollPage" bindscrolltolower='toBottom'> ...原创 2019-01-28 17:43:19 · 8905 阅读 · 1 评论 -
微信小程序海报功能
https://github.com/z5085911/wxa-plugin-canvasfork了有赞开发的小工具,但是功能不全,我加了补充。1. 增加了字体加粗 ,倾斜,以及字体选择的功能。(texts里面加对应配置即可){ italic: 'italic', bold: &amp;amp;quot;bold&amp;amp;quot;, fontFamily: &amp;amp;quot;SimHei&amp;amp;原创 2019-02-20 16:37:06 · 5355 阅读 · 0 评论 -
js生成二维码
import QRCode from '../utils/weapp-qrcode.js'// 初始化let qrcode = new QRCode('canvas', { text: "1", width: qrcodeWidth, height: qrcodeWidth, colorDark: "#000", colorLigh...原创 2019-03-04 17:48:30 · 1886 阅读 · 0 评论 -
小程序 自定义弹框 阻止后面页面滚动
// 加上 catchtouchmove 属性<view hidden='{{showFrame}}' class='frame' catchtouchmove='stopScroll'></view>// jsstopScroll(){return}原创 2019-03-28 18:06:58 · 906 阅读 · 0 评论 -
微信小程序 刷新页面
刷新页面,其实就是刷新页面上的数据。一般页面数据加载函数都写在 onLoad 或者 onShow 的回调函数中。所以我们只要获取当前页面,完后手动调用这两个函数即可let pages = getCurrentPages() //获取页面数组let curPage = pages[pages.length - 1] //获取当前页curPage.onShow() //手动调用生命周期...原创 2018-09-05 15:45:28 · 11280 阅读 · 1 评论