专栏首页有趣的django微信小程序入门(四)

微信小程序入门(四)

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 条评论
登录 后参与评论

相关文章

  • 微信小程序入门(三)

    四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出...

    zhang_derek
  • Django打造大型企业官网(三) 四、前端首页

    搜索person-->>添加入库-->>添加至项目-->>编辑图标-->>放大-->>仅保存-->>查看在线链接

    zhang_derek
  • 微信小程序入门(六)

    zhang_derek
  • 【七夕佳节】今晚我们还是谈谈Bug好了

    最近看了「简书」上的一篇文章《女生如何优雅的上下车》,可是,额,我腿短,下车时依然是艰难得一点点‘挪’出去,正如懂得很多道理,却依然过不好这一生,啧啧,又如程序...

    BestSDK
  • Element 多个相同类型的输入框共用一条校验规则

    在Element中一个输入框对应一条校验规则,如果有多条相同类型的输入框想共用一条校验规则,如何实现呢?以下是代码实现(官网其实有介绍):

    越陌度阡
  • 软件测试人员不通过QQ、微信上报Bug的原因解析

    十多年前,客户在使用过程中遇到了 Bug,直接就截个图,或者是用 Word 文档整理在一起,从 QQ 或者邮件上把 Bug 信息发送给开发,开发收到后再修复更新...

    新梦想IT职业教育
  • Bug,项目过程中的重要数据

    项目过程中不可能没Bug,但是我们要利用已有Bug减少未来Bug数,提高产品质量。

    测试开发社区
  • MySQL的Bugs

    相信有小伙伴在使用MySQL的过程中,会遇到一些不明原因的问题,经过不断努力排查之后,还是无法确认这是一个什么情况,这时你可能需要查看一下这个现象是不是MySQ...

    MySQLSE
  • 不会定位BUG根因的测试工程师,要来有何用?

    看Bug表象,往往都是无效Bug;往往也只能临时解决Bug,甚至拆东墙补西墙;而且,长此以往,毫无成长 ;

    IDO老徐
  • H3C的静态路由配置

    #Oct 11 20:08:28:820 2017 RT1 SHELL/4/LOGIN: 

    py3study

扫码关注云+社区

领取腾讯云代金券