微信小程序入门（四）

时间：2022-09-08 05:24:21

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

相关文章