微信小程序入门(四)
16.WXSS特性之模板及引用
模板引用
index.wxml
<template name="tempItem">
<view>
<view>收件人:{{name}}</view>
<view>手机号:{{phone}}</view>
<view>地址:{{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>
index.js
Page({
data:{
item:{
name:'derek',
phone:'110',
'address':'美国'
}
}
})
结果
![](http://139.199.131.146/wp-content/uploads/2018/08/6154fe32b2854b7db6fb447ade033d12.png)
import文件引用
index.wxml
<import src="a.wxml"></import>
<template is="a"></template>
a.wxml
<view>这里不会显示</view>
<template name='a'> hello world </template>
结果:只能引用文件的模板
17.WXSS特性之响应式像素
概念
WXSS(WeiXin Style Sheets)是一套样式语言,用于WXML的组件样式
rpx的几个要素
18.WXSS特性之样式
外联样式引入
index.wxml
<view class='container'>hello world</view>
index.wxss
@import 'assets.wxss';
.container{
color: red;
}
assets.wxss
.container{
border: 1px solid #000;
}
结果
内联样式
index.html
<view style="width:500px;height:30px;background-color:{{colorValue}}">
hello world
</view>
index.js
Page({
data:{
colorValue:'red'
}
})
19. WXSS特性之选择器
选择器
优先级
20.JavaScript介绍
概念
javascript是一种轻量级、解释型的、面向对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象、命令行和函数式的编程风格。
21.小程序javascript实现
组成
- ECMAScript
- 小程序框架
- 小程序API
ECMAScript
22.小程序宿主环境差异
不同平台
- IOS:JavaScriptCore
- android: X5内核
- IDE:nwjs
23.学会使用WXS
wxs模块
- 定义的变量默认为私有的,可通过module.exports让外部访问
- 在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。
实例一:外部访问
index.wxml
<wxs module="m1">
module.exports = {
message:'hello world'
}
</wxs>
<view>{{m1.message}}</view>
实例二:文件引用
index.wxml
<wxs src='m2.wxs' module='m2'></wxs>
<view>{{m2.message}}</view>
m2.wxs
module.exports = require('m1.wxs')
m1.wxs
module.exports = {
message:'good night'
}
wxs注释
- // 单行
- /* */ 多行
wxs基础类库
- Number
- Date
- Golobal
- Console
- Math
-Json
posted on 2018-08-15 17:02 zhang_derek 阅读(729) 评论(0) 编辑 收藏 举报