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

微信小程序入门(四)的更多相关文章

  1. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  2. 天河微信小程序入门《四》:融会贯通,form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

  3. 微信小程序入门篇

    微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...

  4. 从零开始的微信小程序入门教程(一)

    之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了.所以在还未正式写项目前,打算在空闲时间学习下小程序.本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程, ...

  5. 微信小程序入门知识点总结

    微信小程序入门知识点总结 前情介绍 ​ 微信小程序就不多介绍了,我们想要开发微信小程序首先得到微信公众平台 下方的小程序处注册相关账号并登录,接着填写小程序相关资料.在设置处可找到AppID用以开发微 ...

  6. 微信小程序入门基础

    微信小程序入门基础  视频教程(https://edu.csdn.net/course/detail/8456?pre_view=1) 第一章.认识小程序  1.工具的下载与安装  2.小程序代码构成 ...

  7. 天河微信小程序入门《三》:打通任督二脉,前后台互通

    原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...

  8. 天河微信小程序入门:阿里云tomcat免费配置https

    天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...

  9. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  10. 微信小程序入门正确姿势(一)

    [未经作者本人同意,请勿以任何形式转载] >>>前言 这是 [认真学编程] 系列的 第4篇 文章(微信小程序入门系列),欢迎点赞分享.写留言,这些都是对我最好的支持. 本系列适合有一 ...

随机推荐

  1. HTML5-桌面提醒功能

    window.webkitNotifications.requestPermission(); statue = window.webkitNotifications.checkPermission( ...

  2. 文件扩展关联命令(assoc)

    assoc 命令: // 描述: (association) --> 联想.关联 显示或修改文件扩展名关联. 如果在没有参数的情况下使用,assoc将显示所有当前文件扩展名关联的列表. // 语 ...

  3. oracle 关于房贷计算过程

    create or replace procedure fd(p_bj in number, --贷款本金 p_nll in number, --年利率 p_ns in number, --贷款年数 ...

  4. MacBook上那些好用的工具们

    https://blog.csdn.net/qq_33833327/article/details/78454703

  5. 2019.03.28 bzoj3597: [Scoi2014]方伯伯运椰子(01分数规划)

    传送门 题意咕咕咕有点麻烦不想写 思路: 考虑加了多少一定要压缩多少,这样可以改造边. 于是可以通过分数规划+spfaspfaspfa解决. 代码: #include<bits/stdc++.h ...

  6. JSOI2018 简要题解

    潜入行动 复杂度分析题. 定义状态fi,j,0/1,0/1f_{i,j,0/1,0/1}fi,j,0/1,0/1​表示以iii为根子树放jjj个机器iii这个放不放,iii这个是否已放来进行dpdpd ...

  7. CPU芯片哪家强?电视处理器这么选就对了!

    任何智能设备,CPU(Central Processing Unit/中央处理器)都是决定其性能优劣的核心组件,在家电界,最为人们熟知的CPU厂商就是Mstar以及Amlogic这两个品牌了,那两个品 ...

  8. s6 传输层

    标题 s6-1 传输层概述(2019-04-06 21:19) s6-2 UDP(2019-04-07 08:39) s6-3 通信模型(2019-04-07 08:47) s6-4 TCP 数据段( ...

  9. spring aop 切面编程中获取具体方法的方法

    spring 切面编程中获取具体方法的方法 工作中,使用环绕通知,用来捕获异常,然后通过获取方法的返回值,返回不同的数据给到调用方. 由于方法的返回值不同,我们处理异常时,也需要返回不同的格式. 这时 ...

  10. HTTP二、HTTP请求处理过程的七个步骤

      HTTP02 HTTP请求处理过程的七个步骤     1.web服务处理步骤 web服务的处理过程可总结为七个步骤:   1)发起请求:客户端向服务器端发起连接请求,建立”三次握手“: 2)接收请 ...