微信小程序初探

在阅读微信小程序开发文档时，做了些笔记如下。

页面组成

一个小程序页面由四个组件组成

文件类型	必填	作用
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 文件的变动需要重启小程序才能生效。

参考资料：

微信小程序设计指南· 小程序

简易教程· 小程序