微信小程序入門（四）

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