微信小程序 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和css(外部文件)
Apr 17 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python实现石头剪刀布程序
2021/01/20 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
财务会计专业毕业生自荐信
2013/10/02 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL