微信小程序的开发框架
wxss:是一套样式语言,用来描述wxml的组件样式;小程序在css基础上做的修改和扩充的版本
css:是一套样式语言,样式表,用来描述xml和html文件样式的呈现;
设备像素:是图片在设备上显示的小点,这些是固定不变的
css像素:逻辑像素,是我们一套标准来显示屏幕的宽
ppi:独立设备显示的密度

dpr:设备像素除以逻辑像素
微信给的屏幕的宽750px , 我们在750px的基础上进行自适应
尺寸单位:rpx(响应式像素)
样式导入:
在css的文件中,在引入另一个css的文件:
@import "文件路径"
正常情况下,你在同名的wxss上样式,就是对应的wxml元素上的样式;
内联样式:在wxml文件中通过标签上的style属性来操作样式;
选择器:id class 标签 并级 伪类
优先级概念 权重概念;
无穷大的案例:
color:red !important; 这个字体颜色为红色 无穷大的权限
nodejs中的javascript
ECMAscript:
Native: 用这个模块,来使用原生js,实现原先不具备的功能
NPM:通过npm扩展包,快速的实现一些功能;
小程序中的JavaScript
ECMAScript
小程序框架
小程序api
浏览器中的JavaScript
ECMAscript
Dom
Bom
ECMAScript的有哪些东西:语法 类型 语句 关键字 操作符 对象
JavaScript的运行平台:
iOS平台:JavaScriptCore
android平台(安卓):x5内核
ide:nwjs(微信开发者工具)
wxs:小程序自己的脚本语言 用于过滤处理和计算处理;
wxs与js的区别?
微信小程序的js不能在wxml中书写,只能在js的文件中书写,而wxs就是为了解决这个需求,可以在wxml中书写,wxs和js的语法差不多
模板:在wxml中写在wxs标签中 wxs的属性module的属性值,表示是哪个wxs模板
模板的内容:数据内容写在 module.exprots={"属性":"属性值"} 对象中;
使用模板的内容:{{ 哪个模板的属性 }}
模板的引用:分两种情况;
第一种:在wxml中引用:
模板文件(以 .wxs 做后缀的文件名)中直接写模板的内容,不需要写wxs标签;
module.exprots={"属性":"属性值"}
在 wxml中 <wxs src="wxs的文件路径" module="模板名在这写"></wxs>
引入模板内容:<view>{{模板名.属性}}</view>
第二种:先在wxs文件中,引入另一个wxs的文件,在引入到wxml文件中
在wxs中引入另一个wxs文件:module.exprots=require("wxs的文件路径");
模板的内容:module.exprots={"属性":"属性值"}
将模板引入到wxml文件中,就是第一种情况了
注意:在一个页面中不要重复的声明wxs文件名,否则后者会覆盖掉前者;
变量:
wxs的变量用法和es5的变量用法一致 (es变量用法:var 和 function)
注释:(小程序注释有个特别有意思的地方)
单行注释: //
多行注释: /* */
结束注释: /* 后面的代码都不会执行
运算符:
wxs的七种运算符:(就是不知道为什么分这么细致)
等值运算:=== ==
赋值运算:=
二元逻辑运算:a||b a&&b
基本运算:加减乘除
一元运算:自增,自减
位运算:

比较运算: > < >= <= != 等等;
语句:
就是不支持try catch 语句
判断数据类型:
constructor
数据类型:
Number Boolean String Object Date Array Function RegExp (就是没有Math)
注意的点:获取时间和正则:不能用new了 要用get
var date=get Date;
var reg=get RegExp;
基础类库:
Console // 只提供了 console.log()的方法
Math
JSON
Number
Date:
Date.pass() 解析字符串形式的日期时间,返回该时间的时间戳
Date.now() 返回当前时间的时间戳
Data.utc() 返回指定时间的时间戳
Global(全局)
注意:小程序的所有文件中,不能有一处出错,不然都会导致报错,不执行;
微信小程序的开发框架的更多相关文章
- 微信小程序云开发框架
概述 一直做后端服务器开发,最近看了一篇文章介绍小程序的云开发模式,觉得挺有意思,就尝试了一下,由本文做个记录. 因为不是专业的小程序开发人员,也没有做过网页开发,所以论述中出现错误难以避免,请多谅解 ...
- 微信小程序一:微信小程序UI组件、开发框架、实用库
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...
- 微信小程序UI组件、开发框架、实用库...
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- 微信小程序开源项目库集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
- 史诗手册!微信小程序新手自学入门宝典!
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
- 微信小程序个人心得
尊重原创:http://blog.csdn.net/qq_28832135/article/details/52796048 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文 ...
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 微信小程序框架集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
随机推荐
- JVM可视化监控工具jconsole以及jvisualvm的配置
使用jdk自带的jconsole.jvisualvm插件,监控远程linux服务器中tomcat的jvm情况 (jconsole.jvisualvm插件可查看堆内存变化情况,线程状态,CPU使用情况, ...
- Flash存储模块调试
Flash存储模块 Flash存储模块之前SPI一直读deviceID有问题原因如下: 用正点原子的例程是可以的,但是转移到自己的工程项目里就不行!!原因是正点原子没有在SPI初始化里 RCC ...
- HDFS中NameNode和Secondary NameNode工作机制
NameNode工作机制 0)启动概述 Namenode启动时,首先将映像文件(fsimage)载入内存,并执行编辑日志(edits)中的各项操作.一旦在内存中成功建立文件系统元数据的映像,则创建一个 ...
- C# DataSet转JSON
经常会遇到系统数据交互采用JSON数据格式进行交互的,避免不必要的重复工作,记录下自己的处理方式. 获取数据集之后,通过函数对数据集信息进行整理通过.Net Framework3.5提出的JavaSc ...
- webpack打包html里的img图片
对待css里的图片, 因为已经通过引入css文件到js,打包了,可以正常通过module.rules.test检测到,然后正常打包. 但是对于html里的图片, 这个需要安装一个插件html-with ...
- npm基本介绍及使用
1.什么是npm npm全称node package manager,是node包管理和分发工具.可以理解为前端的maven.通过npm可以很方便的下载js库,管理前端工程.node已经集成npm工具 ...
- C/C++表达式求值问题
转载:https://originlee.com/2016/05/01/eval-expression-in-c-and-cpp/ 前几日,一个刚学编程的老朋友问了我一个问题: int i = 0;i ...
- display:table的几个用法 块级子元素垂直居中
DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比 ...
- ES6精解:变量的解构赋值
1.数组的解构赋值 我们知道以前我们给一个变量赋值要这样如下: let a = 1; let b = 2; let c = 3; 但是ES6出来之后,我们可以这样: let [a, b, c] = [ ...
- java定时任务详解
首先,要创建你自己想要定时的实体类 @Service("smsService")@Transactionalpublic class SmsSendUtil { @Autowire ...