【微信小程序避坑指南】的更多相关文章

微信小程序避坑指南

如果对小程序还不熟悉,建议先看下另一篇小程序简介 1. 基础库和微信版本对应关系 iOS 客户端版本 基础库版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6 2.0.9 6.6.2 1.9.97 6.6.1 1.9.9 6.6.0 1.9.4 6.5.22 1.7.4 6.5.16 1.6.8 6.5.13 1.5.8 6.5.10 1.4.4 6.5.9 1.3.0 6.5.8 1.2.6 Android 客户端版本 基础库版本 6.7.2 2.3.0…

微信小程序避坑指南——echarts层级太高/层级遮挡

问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图: 解决方案1:(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能): 第一步:wxml <!-- echarts饼图--用wx:if控制dom显隐,hidden没办法隐藏 --> <ec-canvas id="storeChart" canvas-id="storeChart" ec=&…

微信小程序避坑指南——input框里的图标在部分安卓机里无法点击的问题

问题场景: 下图中的显隐密码和验证码均为包裹在 input标签 中的 image标签, 但在开发测试中发现点击不了这俩个image标签,因为是被input标签的padding挡住了. 解决方法:将image标签用position定位定到对应的位置 1.wxml: <view class="position"> <input class="inputs psw" type="text" value="{{verifica…

两百条微信小程序跳坑指南（不定时更新）

微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳坑<二百一十二>单位rpx/px/em/vh使用说明跳坑<二百一十一>转发API:onShareAppMessage使用跳坑<二百一十>使用模拟数据mock.js跳坑<二百零九>textarea组件value不显示跳坑<二百零八>使用Express后…

微信小程序踩坑集合

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源…

微信小程序爬坑日记

新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只有项目才是实践学习的根本:二来刚出来,总是有很多坑.爬坑总是痛并快乐着. 再多的借口,产品项目需求拍在桌前,都得缴械投降.不要怂撸起袖子,就是干. 初识小程序 微信推出小程序,想要实现即开即用,用完即走的用户体验.免去APP下载安装繁琐的流程.听起来像谷歌推出的PWA,不过PWA普及到国内还有段时间.而小程序…

微信小程序填坑之旅一（接入）

一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微信管理.用一个不十分恰当的比喻就是,微信是“操作系统”(推出小程序后它确实具备了某些操作系统的特点),小程序是跑在这个“操作系统”上面的“程序”. 小程序有什么特点? 八个字,“触手可及”和“用完即走”.微信就是入口,搜索一下或者扫一扫即可打开微信小程序.无需下载和安装.这里就有个场景挺好,例如某天…

微信小程序入坑之自定义组件

前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人…

使用wepy框架搭建微信小程序采坑记（一）

1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文档) 2.为什么会出现wepy 我虽然还没有在实际项目中完整开发过一个APP,但自己看着文档敲着DEMO再道听途说一下也都知道,小程序是有很多限制的,小项目可能觉得无所谓,可业务稍微复杂一点,写起来和维护起来都是非常蛋疼的.主要表现在以下几个方面: 组件化支持能力太弱(几乎没有) 不能使用 less…

微信小程序遇坑笔记

最近做了一个简单的微信小程序,遇到了一些坑: 1.appid固定,但是appsecret是可以变的,而且没有地方查看,后台以查看就是变更了,所以这个地方在开发的时候需要保存好: 2.打开网页,这个网页的域名需要配置在后台,而且要是https的: 3.有网络数据交互时,这个业务链接也要配置在后台,并且目前个人开发者是不支持这个配置的,需要企业账号,也要求https: 4.他人需要加入开发,工程是打不开的,需要在管理员这里后台配置加入人员的微信号,并且开通相应权限: 5.当工程出现一些意外不能正常运…

微信小程序的坑(持续更新中)

参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的一些坑:下面针对小程序开发过程中遇到的一些坑跟大家分享,有些没有深究具体原因: 1.原生组件遮盖的问题 由于原生组件层级最高,即使设置了其z-index也于事无补:不能随意在其层级上展示信息,只能通过cover-view和cover-image组件(其实这两个组件也是原生组件)来进行遮盖: 例如,下…

微信小程序踩坑之前端问题处理篇

近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在微信开发者工具,考虑是不是语法不对, 3.看看是不是组件的问题,有些组件是禁用一些点击事件的. 1.数据更新 想改变data数据,并不是简单的data:{ }就可以的,因为视图层和逻辑层的数据更新不一致,所以需要使用API:this.setData({ }) 进行改变. 1.1 补充,如何用setD…

微信小程序采坑（一）

1.微信小程序如何让text内容空格 <text decode="{{true}}" space="{{true}}">  </text> 在text标签中一定得加上decode="{{true}}",然后在需要显示空格的地方放  想空几个空格就放几个  2.微信小程序路由跳转指定页面 微信小程序路由跳转,共有三种形式:页面中使用navigator组件做页面链接形式路由跳转,js中可以使用wx.navigateTo--保留…

微信小程序踩坑

微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示…

腾讯云微信小程序域名变更指南

1 . 将域名添加到云解析里面, 将解析的地址指向已有的小程序负载均衡地址: https://console.qcloud.com/cns 将域名添加到解析列表 添加成功之后,点击解析按钮,添加二级域名的解析,比如 www.qcloud.la 这个域名 注: 解析添加成功之后,就可以直接访问了,但是因为没有部署HTTPS证书,网站会提示不安全 这里的记录值是购买小程序时候的负载均衡的地址,可以在小程序的管理界面里面找到 2 . 申请新域名的免费 HTTPS 证书( 这里需要给 https://w…

微信小程序填坑之旅

一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2.解决方法 在微信小程序的全局css样式(app.wxss)中加入特定代码: ::-webkit-scrollbar { //宽度为0 width: 0; //高度为0 height: 0; //颜色为透明 color: transparent; } 3.示例代码 二.微信小程序fixed定位下sc…

微信小程序的坑之wx.miniProgram.postMessage

工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 bindmessage 事件来监听消息,如下是官方文档描述 微信小程序相关文章 微信小程序发送模板消息!附前端+后端源码~ 微信小程序之登录态的探索 开发微信小程序必须要知道的事 以下是代码: // 网页代码 <!DOCTYPE html> <html> <head> &…

微信小程序踩坑记

1:微信小程序之去掉横向滑动滚动条 /** 去除横向滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 2:未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译. 未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译. 使用小程序框架wepy的时候,报出这样的错误 解决方法: 在创建项目->添加项目时选择的项目目录的文件夹下不能有次级文件夹,如果有次级文件夹 即便是空文…

微信小程序踩坑- tabBar.list[3].selectedIconPath 大小超过 40kb

重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐心的去寻找,仔细查看和百度查询之后,发现了原因:其中有一张图片,替换的时候没有注意图片大小,导致项目无法预览. 参考了一下微信小程序的官方API,查看tabBar list定义说明:也就是说选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,而我新加入的头像尺寸过大.…

微信小程序踩坑日记1——调用微信授权窗口

0. 引言 微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口.需要用户主动点击按钮,触发授权窗口. 那么,在我实践过程中,出现了以下问题. . 无法弹出授权窗口 . 希望在用户已经授权的情况下,不显示按钮 1. 具体实现 app.js的onLaunch()函数中,添加获取用户个人信息的代码段.实现在用户已经授权的情况(例如第二次打开小程序时)下,自动获取用户个人信息,而不需要用户的授权. // 获取用户信息 wx.getSetting({ success: res => { if…

微信小程序填坑---小程序支付

因为公司刚刚重新做了网站,所以也吧公众号和小程序提上了日程,在公众号里面没有什么问题,直接按照官方文档进行代码编写.调试,然后就解决了公众号内支付的问题. 因为小程序提供了<webview>组件,所以把网站直接扔进去就方便多了,但是坑爹的是在网页内进行的下单怎么调起微信支付呢,它并不像公众号能在网页内直接调起,小程序需要在前端进行API的调用. 明白了这个道理下面就有努力的方向了,我们看官方文档,依靠着官方提供的文档才能写出相应功能(小声BB:腾讯的文档真的是坑爹,看了几种开发文档,非就把你绕…

微信小程序爬坑

1.app.json配置信息是怎样的? { "pages":[ "pages/页面1/页面1", "pages/页面2/页面2", ], "window":{ "backgroundTextStyle":"light",//文本背景样式 "navigationBarBackgroundColor": "White",//导航背景颜色 "n…

微信小程序踩坑之获取手机号

最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内 具体代码 <view class="cu-form-group"> <view class="title text-black">联系电话</view> &…

微信小程序采坑

wx.request() complete回调函数执行时机问题 代码执行顺序有时候会严重影响用户体验:比如项目中请求数据时显示loading的图标,请求完成后不管失败还是成功都要把loading图标隐藏,但是请求成功后如果需要页面跳转的话,就会造成页面已经跳转了,complete()里面隐藏图标的方法还没执行,到下一个页面就关不掉了:后面老老实实在success和fail里面都加上了wx.hideLoading(); 获取用户权限问题 wx.getUserInfo()在小程序第一次运行的时候会弹…

微信小程序app配置指南

//app.json页面 { //页面注册,有几个页面都要在pages里面注册 "pages":[ "pages/index/index", "pages/logs/logs", "pages/main/main", "pages/main1/main1", "pages/main2/main2", "pages/main3/main3", ], //上导航配置及ap…

微信小程序踩坑之一[thist]使用技巧

刚上手小程序 时,习惯把this当成jquery中的$(this)来用,实际上这两个还是有差别的 在页面方法中调用其他方法,一般是用this.function(),直接调用小程序 的方法或函数则是用wx.function 多层方法下的时候,则要给this定义一个变量才能使用,否则会一直报方法没有定义 下面踩坑之一的是调用地理定位时给经纬度赋值时碰到的 Page({ data: { scale:18, latitude:0, longitude:0, }, onLoad:function(opti…

微信小程序踩坑之一[wx.request]请求模式

最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.request({ method: "post", url: 'http://***.***.**/user/**/gainValidateCode', //仅为示例,并非真实的接口地址 data: '{"appId": "1100****60349",…

微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）

因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几种适配方法. rpx适配 rpx是小程序中的尺寸单位,它有以下特征: 小程序的屏幕宽固定为750rpx(即750个物理像素),在所有设备上都是如此 1rpx=(screenWidth / 750)px,其中screenWidth为手机屏幕的实际的宽度(单位px),例如iphone6的screenWi…

微信小程序填坑之路其一：wx.request发送与服务端接受

一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入信息,insert到数据库,没错就是这么一个简单的小功能,却为这个请求折腾了大半天 二.开始 先来看一下wx.request的官方文档:地址如下https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestob…

微信小程序云开发指南

一.初识云开发 官方文档 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建服务器,可免鉴权直接使用平台提供的API进行业务开发 目前云开发包含:云数据库,云函数,云存储,云调用 优势 无需搭建服务器,只需使用平台提供的各项能力,即可快速开发业务. 无需管理证书.签名.秘钥,直接调用微信 API .复用微信私有协议及链路,保证业务安全性. 支持环境共享,一个后端环境可开发多个小程序.…