当前位置: 首页 > news >正文

微信小程序前端坑整理

坑1、没有DOM

无法使用熟悉的$查找、document.getElementById等等这些操作,小程序取而代之的是数据绑定技术,所谓的数据驱动,就是数据改变之后,视图展示跟着自己会变。DOM没了,所以只好频繁的使用this.setData({})来操作页面属性。

tip:在方法最初最好添加 var than = this; 使用than代替this,否则方法内部函数的this会被替代。

 

坑2、图片问题

除tapbar外,背景图无法使用本地资源,替代方式是使用base64资源或者外网加载。每个image标签底部有一条透明间隔,非padding,非margin。在图片前面做遮罩层时可能会被坑。

 

坑3、跳转

小程序页面跳转打开最多五层,超出五层不会跳转了,所以大家要注意,可以在跳转的时候关闭前一个页面。

 

坑4、wxml标签

wxml的标签跟html里面的一些标签是一样的,就说view标签就相当于div标签,text标签相当于span标签吧,然就是表单元素,这里就要注意了,在微信小程序中,表单元素都是原生组件,微信小程序中原生组件层级最高,所以在用input,canvas,map这些组件就要注意了。其中在样式上不支持overflow-x/overflow-y,只可使用overflow。

在input标签中会出现placeholder文字位置不固定,可使用使用placeholder-class属性修改placeholder样式。input标签无法设置 font-family; 。对input直接float:left也是不行的,要在input外面套view,然后对其进行浮动。

scroll-view组件注意事项:1、不要在scroll-view 中使用 textarea、map、canvas、video 组件2、scroll-into-view 的优先级高于 scroll-top。3、在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh。

在map组件中只能使用cover-view标签,在cover-view标签下只能使用cover-view以及cover-image标签,这两种标签在样式上的问题非常多,不建议使用,问题1、当使用display:none;做隐藏的时候,其内容文字会出现在屏幕右上角,建议使用 wx:if="false"或position:absolute;left:-1000rpx;这种方式做隐藏。2、border不支持单边。3、不支持padding的使用,在安卓端会出现padding消失的问题。

 

坑5、动画问题

在小程序中当有两个元素同时发生变化时,会出现冲突,导致其中一个变化,而另一个不做变化,所以要使用setTimeout方法避免元素同时出现变化。

 

坑6、js问题

js执行顺序,在开发者工具中执行先执行aap.js然后执行其他js文件,但在手机上app.js和其他js是同时执行的,就比如说你在app.js里面向本地存储一个变量,然后再去index.js里面取这个变量,在开发者工具中是可以取到的,但在手机上它会取不到的。

转载于:https://www.cnblogs.com/showMagic/p/7677551.html

相关文章:

  • CF441D
  • path--diff
  • 前端基础之html
  • MySQL半同步复制
  • 通过ldap验证svn服务
  • codevs 2620 战壕
  • vue-cli脚手架安装
  • keil 赋值之后再声明变量提示错误error: #268: declaration may not appear after executable statement in block...
  • 正质因数分解
  • 110. Balanced Binary Tree
  • 进程与fork()、wait()、exec函数组
  • Centos_linux系统的区别及实际查看
  • 给Extjs的window弹窗的关闭事件添加验证
  • mysql导入存储过程
  • 系统键盘按钮keyCode大全
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • Android优雅地处理按钮重复点击
  • chrome扩展demo1-小时钟
  • javascript从右向左截取指定位数字符的3种方法
  • JavaWeb(学习笔记二)
  • MD5加密原理解析及OC版原理实现
  • Mithril.js 入门介绍
  • nodejs调试方法
  • supervisor 永不挂掉的进程 安装以及使用
  • vue2.0项目引入element-ui
  • vue-cli在webpack的配置文件探究
  • Vue--数据传输
  • 简单易用的leetcode开发测试工具(npm)
  • 利用jquery编写加法运算验证码
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 删除表内多余的重复数据
  • 用Canvas画一棵二叉树
  • 与 ConTeXt MkIV 官方文档的接驳
  • d²y/dx²; 偏导数问题 请问f1 f2是什么意思
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • ​一帧图像的Android之旅 :应用的首个绘制请求
  • (c语言)strcpy函数用法
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (一)u-boot-nand.bin的下载
  • .axf 转化 .bin文件 的方法
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NetCore项目nginx发布
  • .NET的微型Web框架 Nancy
  • .net反混淆脱壳工具de4dot的使用
  • .net流程开发平台的一些难点(1)
  • .NET应用架构设计:原则、模式与实践 目录预览
  • // an array of int
  • /dev/sda2 is mounted; will not make a filesystem here!
  • /etc/skel 目录作用
  • /proc/interrupts 和 /proc/stat 查看中断的情况
  • @JoinTable会自动删除关联表的数据
  • @RequestBody详解:用于获取请求体中的Json格式参数
  • [ JavaScript ] JSON方法