微信小程序初探

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

 

页面组成

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

文件类型必填作用is是页面逻辑wxml是页面结构wxss否页面样式json否页面配置

wxml 是展示层，js 为逻辑层。wxml 中的动态数据均来自对应 js 文件中 Page 的data。

例如

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

 

//sample.jsPage({　　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.jsPage({    click_event : function(){       console.log("clicked");     } })    

 

js 模块化

在 JavaScript 文件中声明的变量和函数只在当前文件中有效。

可以将公共的代码抽离成为一个单独的 js 文件，作为一个模块，通过 module.exports 对外暴露接口。​在其他文件中，使用 require(path) 将公共代码引入。

// common.jsfunction 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 文件的变动需要重启小程序才能生效。

转自：http://www.cnblogs.com/TonyYPZhang/p/5942037.html

参考资料：

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

简易教程· 小程序