微信小程序初识

这里只对微程小程序做一个最浅显的说明，方便回顾。

小程序初识

小程序的本质就是一个网页，只不过这个网页只能微信来打开，同时为了区分微信将文件名与普通网页进行了区分，自己定义了几种文件格式。

文件结构

基于javascript的文件类型json,js,wxml,wxss

json文件包括应用的配置

包括小程序里面的页面数，及小程序的名称，颜色等参数。

{
  "pages": [
    "pages/search/search",
    "pages/device/device"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f8f8f8",
    "navigationBarTitleText": "Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f8f8f8"
  },
  "sitemapLocation": "sitemap.json"
}

js界面的逻辑处理

js文件主要负责小程序的逻辑处理,当然现在微信也出了其他的语言用于逻辑处理。

wxml页面布局

wxml负责小程序界面的控件的排版，同时针对text,button等控件可添加响应函数

 <text id='send_button' class="send_btn" bindtap="SendTap">发送</text>

bindtap用于控件绑定响应函数

wxss控件的样式

负责界面的具体样式，颜色，大小，字体等等参数。语法格式还要查看wxss的官方定义

javascript函数初识

控制响应绑定

在wxml里面绑定的函数，具体的逻辑还是JS文件中实现。

SendTap: function () {
    var that = this
    ...
    ...
}

onload函数

页面第一次加载时触发,仅一次

onReady函数

onShow函数

页面显示、切入时触发

onHide函数

页面隐藏时，打开新页面，并不关闭原页面

onUnload函数

页面卸载时调用

其他函数

变量

在js文件中定义，可在wxml中使用，用{{}}来表明变量
wxml文件中使用

<view> {{ message }} </view>

js文件中对变量进行定义与设置

Page({
  data: {
    message: 'Hello MINA!'
  }
})

总结

这里只对微信小程序的工程结构作一个大致的介绍。