微信小程序开发总结

代码构成：

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

配置文件：

.json后缀的JSON 配置文件

小程序配置 app.json

小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

工具配置 project.config.json

个性化配置，例如界面颜色、编译配置等等

页面配置 page.json

每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等

WXML 模板:

充当类似 HTML 的角色

1. 封装一些HTML标签构成小程序的组件，比如弹框，选择框
2. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

WXSS 样式：

充当类似 CSS 的角色

1. 具有 CSS 大部分的特性
2. 新增了尺寸单位 rpx，解决适配
3. 提供了全局的样式app.wxss和局部样式page.wxss

JS 交互逻辑：

和用户做交互

1. 响应用户的点击、获取用户的位置等等
2. 调用小程序提供的丰富的 API，例如：例如获取用户信息、本地存储、微信支付等

生命周期:

分为应用生命周期和页面生命周期

App生命周期：

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行，可以在这里做一些初始化的工作

整个小程序只有一个 App 实例，是全部页面共享的，可以通过getApp() 函数获取

可以再app.js中定义全局数据，程序运行中可以存储调用

详细请看app生命周期

Page生命周期

新建一个Page就会自动创建 .json .wxml .wxss .js四个文件

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

在.js文件的data:{}中设置页面的初始化数据。数据更改通过setData()更改。

详细请看

API

框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。success, fail, complete来接收接口调用结果

详情请看

组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

注意： boolean 属性不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false

详情请看

模块化

将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口

注意：

• 推荐采用 module.exports 来暴露模块接口
• 不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中
• 在需要使用这些模块的文件中，使用 require(path) 将公共代码引入，暂时不支持绝对路径

路由

在小程序中所有页面的路由全部由框架进行管理。

可以跳过API来跳转页面，也可以通过组件navigator来完成

路由触发的生命周期函数请看

自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

创建自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

在 json 文件中进行自定义组件声明

{
  "component": true
}

组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

<view>这里是组件的内部节点</view>
  <slot></slot>
</view>

需要使用多slot时，可以在组件js中声明启用

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  }
})

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

使用自定义组件，首先要在页面的 json 文件中进行引用声明。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />
Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

模板

简单的重复代码片段，可以用模板来实现，可以实现传值不同，显示不同内容，在不同地方引用

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})