微信小程序 WXML、WXSS 和JS介绍及详解


Posted in Javascript onOctober 08, 2016

前几天折腾了下。然后列出一些实验结果,供大家参考。

0. 使用开发工具模拟的和真机差异还是比较大的。也建议大家还是真机调试比较靠谱。

1. WXML(HTML)

1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的。不然会报错。

1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签。并且wxml的parser会把标签上的不在白名单上的属性都去掉,class, id, data 这些应该都在白名单内,但是href什么的是不会有的,所以如果你用传统的html的标签构建页面理论上也是可行的,不过这些都是inline标签,需要自行设定display。

1.3 ​scroll-view 的scroll-top, scroll-left 是可以修改scroll-view的滚动位置的。但是用户自己滚动了之后小程序并不会去改变 scroll-top, scroll-left 的赋值(并不是双向同步的)。如果这时使用setData去修改的话,scroll-top, scroll-left 的赋值和上一次的值相同,小程序是不会运用这个修改的,所以表现就是设置没有生效。这时只能先设置一个其他值,再设置回去(这里还可以体现setData方法是同步的)。scroll-view 获取scroll位置,只能通过bindscroll的回调函数获取,所以需要取scroll位置的请自行预存好。scroll-view 还是有webview的 scroll 的臭毛病,在居顶位置如果第一个动作是向下滚动的,会导致之后手怎么滑都滚不动,设置scroll-top 不为0,设个1就好了。

1.4 input 目前只支持文字居左,其他都是不行的(模拟器可以)。如果你做表单,建议把input等表单元素都放在form中,from触发submit时会返回内部所有表单元素的name-value。不然只能绑定所有表单元素的 change 事情来获取,甚是麻烦。

1.5 只有  checkbox-group 有 change 事件,单个的checkbox是没有的,如果你只有一个checkbox, 觉得外面套一个checkbox-group麻烦又不美观的话,可以用 switch type="checkbox" 代替。(微信小程序应用号交流群 563752274)

1.6 map 组建目前直接在app第一个页面加载会出现加载失败。需要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后改成 true 就行了。

1.7 map, canvas 像是在webview上面盖一个native组件的感觉。它们是没法被overflow 以及 上面盖元素的,你可以认为z-index写多高都没法在他上面。所以不建议在页面上做弹层和蒙层。canvas 无法放在scroll-view中滚动会定位在初始位置,如果你给canvas设置背景颜色的话,你会发现背景色块跟着滚了,图没滚。

2. WXSS(CSS)

2.1 WXSS 和 CSS很像,基本所有的CSS都支持,小程序还提供了 rpx 这个单位。一屏幕宽是750rpx。推荐使用这个来作为布局。不过有一些细小的差别我下面会列出

2.2 WXSS不支持 大括号嵌套({{}} )。所以key-frames,CSS animation 就不可用了,不过transition 是可用的。

2.3 目前测试引入字体也是不可用的,前面WXML中提到的内容看SVG也是没法使用的。所以icon目前只能用图的方式做了。

2.4 WXSS中是不能引入本地资源的, 只能使用线上资源(模拟器是可以,但是别信),可以使用base64。(微信小程序应用号交流群 563752274)

2.5 WXSS的 rule 是不支持集联的。所以不能 body .main {background:#000;} 这么写。所以写起来还是比较费劲的。每个class都得很长,不然怕重名。不过支持 li.current {color: red;} 这样的写法,支持after, before伪类,但是不支持 first-child last-child nth-child 这类伪类。

2.6 app.wxss 和每个 page 的wxss 的覆盖关系是: 如果有同名 rule 的话,page 会覆盖 app 的,不是merge是覆盖。

3. JS

3.1 JS 的运行环境和view的运行环境是隔离的。JS只能通过事件获取时机和setData方法修改数据来改变view。

3.2 JS 目前有个很大的问题是无法获取到页面px级的宽度高度, 所有事件回调的单位都是px级的而不是rpx的,但是又不知道当前rpx,px的转换关系。比如过你用canvas画图。你都不知道边界在哪里,这个很蛋疼。

3.3 上面有说过 setData方法如果上一个值和下一个值相同时,是不会触发view修改的(见1.3)

3.4 使用 navigate 跳转的时候可以使用queryString的方式跟在相对地址上,onLoad事件会在入参中传入(会转化成object),但是 navigate back的时候没有一个官方给出的数据通讯机制。可以使用getApp() 获取到全局对象,给上面加点东西,自行实现。navigate 最多5个什么的就不说了。

3.5 canvas getActions被调用之后,actions是会被清空的。即连续调用两次getActions,第二次是空数组。

3.6 开发者工具是nw写的,我就看了看裙底的源码,开发者工具中WXML确实是有parser再拼装的过程的。但是并不能说明小工具是native的,从css的支持力度到webview的一些bug相似度来看,我还是觉得像webview,但是组件比如map,canvas什么的用的是原生view,然后盖在webview上的感觉。但是不管怎么说 auto-focus 能自动呼出键盘就已经是个很大的好评了。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js停止输出代码
Jul 20 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 #Javascript
Javascript单例模式的介绍和实例
Oct 08 #Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 #Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 #Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 #Javascript
jquery删除table当前行的实例代码
Oct 07 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
为你总结一些php系统类函数
2015/10/21 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
php封装的验证码类分享
2017/02/26 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
原生JavaScript实现留言板
2021/01/10 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python OS模块常用函数说明
2015/05/23 Python
使用python实现滑动验证码功能
2019/08/05 Python
Python xlwt模块使用代码实例
2020/06/10 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
幼儿园家长会邀请函
2014/01/15 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
《检阅》教学反思
2016/02/22 职场文书