微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)
上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS。
1. WXSS:小程序版CSS。
WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特性一样。它用来决定WXML的样式,同时在CSS基础上进行了修改扩充。 其中扩展属性有尺寸单位、样式导入。
1.1.尺寸单位
1.1.1 介绍
rpx 可以根据屏幕宽度进行自适应。 与px的换算关系,下图可以看出不同的手机型号,px与rpx之间换算关系是不一样的,官方建议使用iPhone6作为视觉稿的标准
1.1.2 使用案例
<view style="width:375rpx;height:300rpx;border:1px solid black">测试RPX</view><view style="width:162px;height:300px;border:1px solid black">测试PX</view>
复制代码
iPhone5机型
iPhone6机型 由此可以看出rpx是根据机型等比例缩放的,而px是固定大小的。因此机型的适应性上建议使用rpx。
1.2.样式导入
1.2.1介绍
看官文描述使用@import语句进行样式导入。 因此对于公共的样式可以统一设置,然后导入即可。
1.2.2测试
创建style文件夹创建testImport.wxss文件
text{color: rgb(22, 71, 207);
}
复制代码
引入该样式
/* pages/eventTest/eventTest.wxss */
@import "../../style/testImport.wxss";
复制代码
测试
1.3.内联样式
1.在标签中增加style设置样式,样式的值可以{{}}动态获取,但是运行时会进行解析影响运行效率。
<view style="color:{{color}};" />
复制代码
1.在标签中class 指定样式规则。具体规则内容写在WXSS文件中如:
<view class="inputNumber" />
复制代码
/* pages/eventTest/eventTest.wxss */
.inputNumber{ border:1px solid gray; padding:2px; margin:1px 20px 1px 20px;
}
复制代码
1.4.选择器
支持的选择器有:
1.5.全局样式与局部样式
定义在最外层的app.wxss文件中的样式都为全局样式。而自己定义的页面中的wxss文件中的样式则为局部样式优先级高,设置的样式如果与全局的样式相同则覆盖全局样式。
至此WXSS:小程序版CSS结束
2.WXS:小程序版JavaScript
2.1模块
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。
复制代码
2.1.1 module 属性
module是wxs标签必填属性,且各个wxs的module属性需要唯一,不能重复没否则会被后者覆盖 module的值命名,首字母必须英文(大小写)、下划线,剩下的字符可以是英文(大小写)、下划线、数字
测试
<!--pages/wxsTest/wxsTest.wxml-->
<text>pages/wxsTest/wxsTest.wxml</text>
<wxs module="test01">
var some_msg = "hello wxsTest";
module.exports = { msg : some_msg, }
</wxs>
<view>{{test01.msg}}</view>
复制代码
2.1.2 src 属性
src 属性可以用来引用其他的 wxs 文件模块。
引用的时候,要注意如下几点:
只能引用 .wxs 文件模块,且必须使用相对路径。
wxs 模块均为单例, wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地
方,多次引用,使用的都是同一个 wxs 模块对象。
如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
复制代码
新建pages/comm.wxs
// /pages/comm.wxs
var foo = "'hello world' from comm.wxs";
var bar = function(d) { return d;
}
module.exports = { foo: foo, bar: bar };
module.exports.msg = "some msg";
复制代码
引用
<wxs src="../../pages/comm.wxs" module="comm"/>
<view>{{comm.msg}}</view>
<view>{{comm.bar(comm.foo)}}</view>
复制代码
测试
require函数:在 .wxs 模块中引用其他 wxs 文件模块,可以使用 require 函数。
tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
复制代码
comm.wxs
// /pages/comm.wxs
var tools = require("./tools.wxs");
console.log(tools.FOO);
console.log(tools.bar("comm.wxs"));
console.log(tools.msg);
复制代码
引入wxsTest.wxml
<!-- /page/index/wxsTest.wxml -->
<wxs src="../../pages/comm.wxs" module="logic" />
复制代码
2.2变量
2.3注释
2.4运算符
2.5语句
2.6数据类型
2.7基础类库
到此小程序框架基础部分就结束了,然后后面的: (微信小程序框架组件、微信小程序自定义组件、微信小程序框架api)模块在实战中展开讲吧。
下一篇: 微信小程序后端Java接口开发
微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)相关推荐
- 微信小程序实战 《跨时空》旅行日记小程序
题外话 我喜欢旅行,在正文开始前,先向有共同兴趣的朋友推荐一个自己每次出行前必装的 APP -- 面包旅行.我主要用它来写旅行日志,每天行程结束,我都会将当天拍的照片上传并做简单的文字记录,记录是回顾 ...
- 【小程序实战学习(一)】购物小程序-首页
一.搭建目录结构 目录名 作用 styles 公共样式 components 组件 lib 第三方库 utils 自己的帮助库 request 自己的接口帮助 二.引入字体和图标 阿里巴巴字体图标网 ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- 微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列(2)
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程 ...
- 微信小程序实战视频教程附源码课件与多个微信小程序源码 14课
课程介绍: 两天微信小程序实战,结合豆瓣API开发豆瓣小程序,附带微信官方小程序开发工具win版与mac版.还有几个小程序源码可供剖析. 课程目录: 第一天 01-内容介绍 02-微信小程序开发工具的 ...
- 微信小程序实战-仿盒马鲜生
盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分 项目功能 * 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面 小程序设计过程 ...
- 前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来 进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
- 学习最新《微信小程序实战入门第二版》PDF+源程序代码+刘明洋
学习了第2版的微信小程序实战入门,还是比较容易上手的,通过案例学习小程序语言的实战技巧,更容易理解,并能马上学以致用.对于每一部分具体内容,都设计了相应的示例程序,一方面可以帮助加深理解,另一方面也可 ...
- 微信小程序实战 (WXML:小程序版HTML)
上一篇讲了小程序框架基础,这一篇介绍WXML:小程序版HTML. 1.标签与属性 常用基础标签text view 特征: text 类似html span标签 行内元素,不换行: view 类似htm ...
最新文章
- 微服务架构及分布式事务解决方案
- 硬核!这所大学包下高铁,接滞留湖北的学生返校!
- 给 AI 讲故事,如何教它脑补画面?
- windows本地凭据备份与还原
- 账户注销完自动登录账户,并且不需要再点击屏幕的账户头像
- 如何检查正在运行脚本的Python版本?
- shell中find详解
- 传智燕青学成在线项目视频分享
- 从零开始入门单片机(一):必会背景知识总结
- 关闭Ubuntu错误报告
- 中国平安会不会成为美国的世通或者安然?
- 阿里高P谈技术人如何高速成长?
- 我见过最“骚”的代码注释!神兽版都来了
- TNS-12555: TNS:permission denied
- 天龙八部元宝兑换代码 1
- 区块链基于WebSocket 构建P2P网络
- 机器学习(五)——时间序列ARIMA模型
- 与美国移民局合作,微软和亚马逊遭员工组团抗议
- 基于Android实现之智慧记单词APP【100011028】
- EasyScheduler学习(一):部署与安装