小程序源码开源下载地址:https://github.crmeb.net/u/demo
我们在小程序开发环境中, 碰到过点击区域过小,多次点击无法触发事件
由于触屏关系,如果某些点击区域过小,将导致多次点击而无法触发行为响应,因此在实际开发过程中,需要将点击区域放大。
小程序
wx.navigateTo最多打开10个页面
小程序通过wx.navigateTo最多打开10个页面,超过10个页面将无法正常打开页面。
请避免多层级的交互方式,或者使用wx.redirectTo。
不能使用 window 等BOM、DOM对象
页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件。
而vue的第三方组件都或多或少使用了BOM、DOM中的对象,所以无法直接在mpvue中进行使用。
本地资源无法通过 WXSS 获取
background-image:可以使用网络图片,或者 base64,或者使用标签
need-to-insert-img
小程序内置组件以及自定义组件无法更改样式
小程序虽然提供了功能丰富的内置组件,但是无法进行样式自定义,常常不能满足实际项目中的视觉需求。
而自定义组件,则是一个类似独立封闭的webview,无法从外部覆盖其内部的样式。
因此对于第三方小程序组件库的使用,常常因为需要满足项目的视觉需求而无法使用。
为什么 map 组件总是在最上层
map、canvas、video、textarea 是由客户端创建的原生组件,
原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。
原生组件暂时还无法放在 scroll-view 上,也无法对原生组件设置 css 动画。
页面初始data声明
微信小程序、以及在wepy中,页面的初始data的定义用的都是对象字面量,当小程序被加载时,所有页面的js文件都会被执行。
自此之后,每次进入一个页面,其data的初始内容都是小程序加载时被执行好的(不考虑分包加载)。
所以我们在使用过程中,切勿在data={}声明中放置一些预期会动态更新的值,以避免对页面逻辑造成影响。
表单部分
小程序 button 组件去除 border 边框
微信小程序中的button组件有特定的css,背景可以用“background:none”去掉,但是边框用“border : none”则无法移除。
我们可以使用button::after{ border: none; }来去除边框。
小程序 label 组件的 for 特性,对 input 无效
小程序中的label组件的for特性,目前可以绑定的控件有:,
所以在H5中对input的联动特性,在小程序中将表现无效。
小程序 input 组件设置 placeholder 的样式表现
小程序的input组件的placeholder的样式表现,无法使用css的伪类进行设置。
需要通过input组件独有的input-placeholder类名进行设置,该类名可以通过组件的placeholder-class属性进行设置(建议保持默认)。
需要注意的是,input-placeholder类名不能使用交集选择器进行设置,否则样式将不能生效。
小程序输入框 focus 时,placeholder 字体会闪动
小程序的input组件获得焦点时,placeholder的文字内容会出现闪动的情况。
该问题在“京东购物”和“携程酒店机票火车票”等小程序中都存在这个问题。
目前没有找到相关的解决方案。
小程序input与H5的属性异同表现
相同属性:
value- 输入框的初始值maxlength- 限制输出长度placeholder- 占位文本disabled- 禁用属性,Boolean,建议无值书写
type属性的差异性:
输入电话号码: 小程序 -type="number"h5 -type="tel"
密码输入框的差异性:
小程序 - 通过指定password="true"属性来设置 h5 - 通过指定type="password"属性来设置
注意事项:
h5中type="number"时,设置的maxlength长度控制无效,需要注意判断以及处理。
mpvue中input的 'type' 属性无法设置动态值,需要通过 v-if 代替,而vue中可以
我最新的小程序开源项目一些实例应用,大家可以体验一下;
源码开源地址:https://github.crmeb.net/u/demo
后端演示:http://demo25.crmeb.net
账号:demo
密码:crmeb.com
前端演示: