微信小程序入门(四)

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':'美国'
    }
  }
})

结果

----------

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏奔跑的蛙牛技术博客

ElementRef & TemplateRef & ViewContainerRef

今天在做ng项目,看着前人的代码有 viewChild() 等关键字。新手有点疑惑,索性查查资料总结一下和ng相关的几个和DOM相关的几个概念

26220
来自专栏前端侠2.0

table锁定列的一个方法.及琢磨思路

这是从http://stackoverflow.com找到一个一链接,删除多余的css,加上色就是上图。

36020
来自专栏黑泽君的专栏

粘贴到vi/vim的代码,怎样避免向右不断缩进,保持原来的格式?解决vi/vim在粘贴中会在行首多很多缩进和空格的问题。

SecureCRT会将你原来的文本原封不动的按照字符串的样式发送给服务器。所以当你的服务器上的vi/vim设置为autoindent的话,在 i 模式下,那么它...

37220
来自专栏GreenLeaves

Vue.js系列之一初识Vue

在看vue.js之前,可以先看这两篇文章,对于为什么要使用vue会有一定帮助 1、 Vue.js !important 2、界面之下:还原真实的MV*模式 !i...

23650
来自专栏coder修行路

python爬虫从入门到放弃(八)之 Selenium库的使用

一、什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium R...

80770
来自专栏专注 Java 基础分享

struts2标签库----数据标签详解

     上篇文章我们介绍struts2标签库中的控制标签的基本使用和部分原理,本篇文章接着了解下标签库中有关数据标签的使用和原理。主要涉及以下数据标签: ac...

248100
来自专栏大前端_Web

Vue与React的异同—生命周期(一)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

46850
来自专栏河湾欢儿的专栏

5.规范<1>

规范: 在一个项目中开始的时候,每个人都有自己的习惯与编码规范,在项目进行的过程中有些人会离职,那他的风格会在代码中体验,以后再来新人的时候,还得适应,这样代...

12230
来自专栏IMWeb前端团队

React性能优化

React性能优化 单个React组件的性能优化 shouldComponentUpdate React利用Virtual DOM来提高渲染性能,但是Virtu...

33150
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。 前面提到AngularJS的四大特性:   1 MVC ...

19590

扫码关注云+社区

领取腾讯云代金券