微信小程序初探

在閱讀微信小程序開發文檔時，做了些筆記如下。

 

頁面組成

一個小程序頁面由四個組件組成

文件類型	必填	作用
is	是	頁面邏輯
wxml	是	頁面結構
wxss	否	頁面樣式
json	否	頁面配置

wxml 是展示層，js 為邏輯層。wxml 中的動態數據均來自對應 js 文件中 Page 的data。

例如

<!-- sample.wxml-->
<view> {{msg}} </view>

 

//sample.js
Page({
　　data : {
　　　　msg : 'hello world'
　　}
})

 

tabBar

tabBar 位於小程序頁面的底部。只有一個 tab 的小程序，tabBar 不顯示，有多個 tab 的應用 tabBar 才顯示，用於切換頁面。例子如下

// app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/message/message"
  ]
  "tabBar" : {
    "list" : [{
        "pagePath" : "pages/index/index",
        "text" : "home"
    },{
      "pagePath" : "pages/log/log",
      "text" : "Log"
    },{
      "pagePath" : "pages/message/message",
      "text" : "Message"
    }
    ],
    "color" : "#999",
    "selectedColor" : "#258"
  }
}

 

 

事件綁定

在 wxml 中觸發事件后，微信框架在對應的 js 文件中找對應的函數進行處理。例子如下

<!-- evantHandler.wxml -->
<view bindtap="click_event"> click me </view>

 

// eventHandler.js
Page({
    click_event : function(){
       console.log("clicked"); 
    } 
})    

 

js 模塊化

在 JavaScript 文件中聲明的變量和函數只在當前文件中有效。

可以將公共的代碼抽離成為一個單獨的 js 文件，作為一個模塊，通過 module.exports 對外暴露接口。​在其他文件中，使用 require(path) 將公共代碼引入。

// common.js
function sayHi(name){
     console.log('Hi, ' + name);
}

module.exports = {
  sayHi : sayHi  
}

引入公用文件 common.js 的代碼

var common = require('common.js')

Page({
     click_event : function(){
       common.sayHi('Tony') 
     }     
})    

 

組件

組件是頁面的基本組成單元，例如視圖容器的 view, 基礎內容的 text,  表單的 button 等，完整列表。

注意，<block /> 可以來包含一組組件，但是 <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。例子如下

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

 

列表渲染

列表渲染一般采用 wx:for 控制屬性綁定一個數組來實現。默認的當前下標為 index, 默認的當前元素為 item

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    items: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-index 可以指定當前下標名，使用 wx:for-item 可以指定當前元素名。例如

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

 

WXML 引用

import 可以在當前文件中使用目標文件定義的 template

在 item.wxml 中定義了一個 item 的 template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用 item.wxml，就可以使用 item 的模板

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 不支持鏈式效果

即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

 

樣式

微信小程序采用 WXSS(WeiXin Style Sheets) 樣式語言，用於描述組件樣式，類似 CSS 在網頁的功能

在 app.wxss 中定義的樣式為全局樣式，作用於每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

 

修改生效

簡單測試了微信web開發者工具發現，json 文件的數據變更能直接生效，.wxml .js .wxss 文件的變動需要重啟小程序才能生效。

 

參考資料：

微信小程序設計指南· 小程序

簡易教程· 小程序