
微信小程序
梁雨季™
(「・ω・)「困于心,衡于虑,征于色,发于声!ԅ(¯ㅂ¯ԅ)
展开
-
微信小程序画布绘制并保存图片
微信小程序画布绘制生成上下文ctx = wx.createCanvasContext('canvasID');对应的节点信息<canvas canvas-id="canvasID" class="canvas-one" style="width:{{width}}px;height:{{height}}px"> </canvas>获取对应的手机屏幕的大小wx.getSystemInfo({ success: res => { rp原创 2021-01-04 21:47:16 · 1237 阅读 · 0 评论 -
微信小程序拍照并图片转base64码
问题:通过拍照来识别图片,自定义拍照框,拍照后转成base64后上传后台,通过后台的识别,返回图片的有用信息。方案:创建摄像头节点<camera class='scan-camera' mode="normal" binderror="cameraError" bindscancode='scancode' frame-size='large'> <cover-view class='border-writh'>&l原创 2021-01-04 21:37:57 · 1249 阅读 · 0 评论 -
微信小程序的购物车功能
购物车数据结构Let list = [ { id: 1, goods_name: "九江双蒸 29.5°地道米酒 500ml*12瓶" num: 2, price: 120 }, { id: 1, goods_name: "天龙泉35度 500ml*6瓶" num: 1, price: 90 },]单选<view wx:for='{{list}}' wx:key='index' class='card'>原创 2021-01-04 21:22:01 · 368 阅读 · 2 评论 -
微信小程序授权登录
授权登录节点触发授权<button wx:if="{{canIUse}}" class='bottom bnt' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo"> 微信授权登录</button>是否可用//判断小程序的API,回调,参数,组件等是否在当前版本可用。原创 2021-01-04 21:00:41 · 238 阅读 · 0 评论 -
微信小程序菜单栏分页操作
问题:实现菜单栏目的分页,可以通过滑动来看下一页的菜单栏目。方案:1.使用swiper来做分页,每一页放10个图标。2.对后台返回的数据进行分组菜单节点 <swiper bindchange="swiperChange"> <swiper-item wx:for='{{menu}}' wx:key='index' class='icon_swiper_item'> <navigator url=" " class='icon_box' wx:for=原创 2021-01-04 20:49:42 · 898 阅读 · 0 评论 -
微信小程序的顶部导航,点击滑动到页面对应区域
问题:制作微信小程序的头部导航,点击导航就滑动到相应的标记区,随着页面的滑动,自动切换高亮显示所做导航。方案:点击导航滑动到标记点计算屏幕所在导航区域注意事项1. 点击导航滑动到标记点导航节点<view class="tab" style="opacity: {{-scrollTop/200}}" id='tab'> <view wx:for='{{tab}}' wx:key='index' class="tab-item {{curr原创 2021-01-04 18:16:25 · 930 阅读 · 0 评论 -
微信小程序导航吸顶操作
问题:制作可以随页面滑动的导航,滑到顶端就挂在顶部,下滑时回根据页面的调整下滑。通过页面监听来控制导航的定位样式。方案:节点:监听标记 id = ‘nav’<view class='list-card' id='nav'> <view class="nav-card {{isTop?'top-fix':''}}"> <view class="nav-item {{index==navIndex?'nav-active':''}}" b原创 2020-12-30 23:35:59 · 530 阅读 · 0 评论 -
微信小程序wx.uploadFile,调试工具数据预览空白
问题:使用wx.uploadFile上传文件或视频时,调试功能的网络数据返回预览一片空白,无法看到后端返回的文件路径。原因:调试工具的问题,无法看到返回的数据,有时可以看到,返回的数据是字符串,有数据返回,但网络预览是一片空白!方案:1.后端检查数据是否保存成功,并返回数据。2.检查请求是否有问题,数据参数是否正确。// 上传视频 \文件上传// @url:请求地址@src文件地址@data携带参数wx.uploadFile({ url: `${URL}${url}`, m原创 2020-12-30 22:54:47 · 1013 阅读 · 0 评论 -
微信小程序picker实现年月日时五级联动
问题:使用picker的multiSelector多列模式实现年月日时选择,这里的联动,只是调整日的天数,年份和月份的选择影响日的天数!实现:节点<picker mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange" bindchange="pickerChange" value="{{multiIndex}}" range="{{list}}">原创 2020-12-30 22:23:18 · 542 阅读 · 0 评论 -
微信小程序多级联动第一次进入无法触发bindcolumnchange,导致联动失败
问题:真机测试,自定义的多级联动进入页面第一次选择无法触发bindcolumnchange,导致联动失败,第二次选择时则有可以了。原因:value的值不对!value array [] 表示选择了 range 中的第几个(下标从 0 开始)注意⚠️:这里为三级联动,所以multiIndex为数组[0, 0, 0]<picker mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange"原创 2020-12-30 18:19:40 · 1091 阅读 · 0 评论 -
微信小程序“errMsg“:“openSetting:fail can only be invoked by user TAP gesture.“
报错:(in promise) MiniProgramError{“errMsg”:“openSetting:fail can only be invoked by user TAP gesture.”}Object看一下官方对接口的调整打开小程序设置页(wx.openSetting)接口调整 2018-09-12开发者可以通过 wx.openSetting 接口来打开小程序设置界面并返回用户的设置结果。在原来的 wx.openSetting 接口中,我们允许开发者直接调用此接口,但目前我们发现有原创 2020-12-30 12:04:24 · 6321 阅读 · 0 评论 -
微信小程序input、textarea快速删除时光标会跳到最后
问题描述:快速删除textarea输入框中间的文字,但删除过程中,光标就会自动跳到最后去,苹果机和安卓机都这样原因:input用了bindinput监听?,在开发工具中有时输入中文都困难。1.节点<textarea placeholder="请输入资料、描述等" maxlength="200" value="{{args.desc}}" bindinput="userInput" id='args.des'></textarea><view cl原创 2020-12-30 11:39:22 · 1986 阅读 · 0 评论 -
微信小程序在底部导航加未读消息或红点
未读消息注意⚠️:在tabBar页使用api,当前的页面不是TabBar 页面,就会报错,index为tabBar 的哪一项,从左边算起,text为字符串显示wx.setTabBarBadge({ index: 3, text: '3'}); 去掉 wx.removeTabBarBadge({ index: 3});红点显示wx.showTabBarRedDot({ index: 3,}); 隐藏wx.hideTabBarRedDot({ ind原创 2020-12-30 11:02:33 · 1421 阅读 · 0 评论 -
微信小程序单个页面横屏显示
单个页面横屏显示在xxx.json文件加"pageOrientation": "landscape"问题:页面的样式是rpx ,横屏显示后,字体,样式会变大原因:竖屏转横屏时屏幕按等比缩放,故样式也进行了缩放。方案:使用px单位 在标准iPhone6下 1px = 2rpx...原创 2020-12-30 10:46:16 · 945 阅读 · 0 评论 -
微信小程序设置全局样式
微信小程序使用全局的样式管理,主题,公用样式等,可以将多个页面使用到的样式放到全局中,以减少代码量和好维护微信的全局样式文件为app.wxss可以自己新建样式文件,或是直接就在app.wxss里写代码自己新建样式文件就要在app.wxss加引用,如路径为static/css/weui.wxss的样式文件@import './static/css/weui.wxss';个人一些公用代码(可做参考)app.wxss1.样式文件引用/**app.wxss**/@import './static/原创 2020-12-30 10:34:02 · 1780 阅读 · 0 评论 -
微信小程序使用iconfont图标文字
在微信小程序内如何使用iconfont图标文字:1.下载具体的图标的代码2.小程序内使用css代码3.wxml引用节点下载具体的图标的代码1.在iconfont网站搜索需要的图标,加入到购物车购物车2.下载具体代码打开购物车,直接点击 ‘下载代码’即可,打开下载的代码,使用里面的iconfont.css,复制其css代码到微信小程序内。小程序内使用图标1.复制的css可以直接放到具体的页面的xxx.wxss文件中注意⚠️:这样只能单个页面使用,不建议这么做2.放到公用图标文件,新原创 2020-12-30 10:13:41 · 430 阅读 · 0 评论 -
微信定位功能
导入腾讯地图sdk下载地址:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverviewvar QQMapWx = require('../qqmap-wx-jssdk.min.js');腾讯地图开放平台 - 腾讯位置服务 - 立足生态,连接未来申请相应的key ,配置相应的key, 同时要将https://apis.map.qq.com加到request合法域名中var QQMap = new QQMapWx({ key: '原创 2020-12-24 17:42:06 · 499 阅读 · 0 评论 -
微信卡片流图片懒加载(监听所有图片)
图片懒加载<imagesrc='{{item.img}}'class='banner'lazy-load="true"mode="aspectFill"/>图片加了lazy-load 属性,就有主流lazyload的那种加载过程了查看文档,image组件在 page 与 scroll-view 下,均会生效。为什么看起来像是没有生效?lazy-load实际实现的功能:小程序的lazy-load不是通常认为的不在当前情况下展示的image标签不加载,而是小程序提...原创 2020-08-21 12:35:05 · 510 阅读 · 0 评论 -
微信小程序实现卡片流布局
当做商品展示区时想采用的卡片流布局,无限的向下加载商品,类似淘宝首页的推荐效果图如下那么如何实现以上的效果这是我的方案:1. 将页面分成两列,左列和右列,分别填充商品卡片,这样列与列不会相互干扰了这时由于商品的图片长度不一,造成错位的效果。这里图片的裁剪方式为自适应长度,即<imagesrc="{{items.img}}"mode='widthFix'lazy-load="true"></image>2. 划分左右两列,这里直接用...原创 2020-08-21 11:23:13 · 2382 阅读 · 0 评论 -
微信小程序input获取输入参数
微信小程序input获取输入,如何获取参数?通常使用的是input的绑定方法bindinput="userInput"绑定的方法如下,通过e携带的detail.value获取用户的输入1. userInput(e){2. this.setData({3. name :e.detail.value,4. })5. }e为该方法触发返回节点携带的参数,如果你想知道e是什么可以将起打印处理1. cons...原创 2020-08-15 18:19:14 · 1226 阅读 · 0 评论 -
微信小程序setData局部刷新列表
利用setData局部刷新列表当列表管理加载到第几页时,这个list的数据有十几条的,如果重新setData的话就要重新刷新和渲染列表,这是个比较麻烦的事,当数据量大时,就会造成白屏,这时就要局部刷新列表,而且大量数据使用setData是有性能影响的。这时就要进行局部刷新了比如:分页加载,删除某一条记录,这时就要重新加载列表,回到第一页,当频繁操作删除时,就比较恶心了这时我们可以利用标记,和隐藏记录通过点击获取列表的索引index,进行删除请求成功后将其隐藏即可,不用全部刷.原创 2020-08-15 17:42:34 · 1358 阅读 · 0 评论 -
微信小程序携带参数跳转页面/获取页面栈
页面跳转携带参数(以传递两个参数为例)a.wxml 页面传递1 <navigator url="/pages/b/b?id=1&sid='289'"> <navigator>wx.navigateTo跳转携带参数1 wx.navigateTo({2 url: '/pages/a/a?id=1 + "&tu=" + 'a.jpg'3 });多个参数使用 & 连接 也可以写成这样(提倡)1 var id=that.data.id原创 2020-08-13 17:58:34 · 285 阅读 · 0 评论 -
微信小程序扫码解析小程序码
通过微信扫小程序码,跳转到应用小程序内, 如何解析小程序码的参数呢?一般小程序码会跳转到设置的页面,如首页, 可以直接跳转到小程序首页,然后解析小程序携带的参数,再打开某个页面。(小程序码的路径要线上版本存在的路径)如:商品详情分享码 -> 用户扫码 -> 打开小程序页面(如首页)-> 解析码参数 ->打开商品详情为啥不直接跳转到商品详情页呢?这当然是可以的,但我们要在首页完成初始化用户信息,所以选首页,加载完首页再跳转,提高首页曝光率,哈。码携带参数和页面.原创 2020-08-13 17:04:26 · 4395 阅读 · 0 评论