30分钟上手微信小程序开发
写在最前：自学笔记，往后若觉不当之处再修改
一、开发工具
1. 如下图，开发工具大体可分为四个区块：
- 顶部的开发者工具相关的设置菜单
- 左侧的编译效果预览区
- 右上侧的代码编辑器
- 右下侧的代码调试区
微信开发者工具
下面主要介绍一下编辑器区域。
2. 编辑器又细分为左区块的工程目录结构图，与右侧的代码编辑区块。
A. 工程目录
pages目录用来存放页面，内部一个文件夹表示由json , js , wxml , wxss文件组成。json对应该页面的导航栏的相关配置，js对应该页面的逻辑操作，wxml对应该页面的结构骨架，wxss对应该页面的样式。
pages外侧目录也有些许文件，对应应用程序的全局配置，其中project.config.json表示在当前机器上的开发者工具的一些配置，sitemap.json表示文件用于配置小程序及其页面是否允许被微信索引。
更多内容移步官方文档：工程目录
工程目录结构
B.编辑器
编辑器其实与其他大多程序编辑器并无差异，可用通过F1按键来获取编辑器的快捷键。
二、wxml与wxss
我们可以看到开发者工具初始给我们的示例代码中，仅仅只有wxml与wxss这两种格式文件未曾见过，其实呢这两种文件可以类比成网页开发中的html与css两种文件。
1. 标签类比
view可类比div，text可类比span。更多组件请移步官方文档：组件
2. 小程序中的元素单位
按照设计图的尺寸（设计图的宽度要求是750px），在小程序中使用相同的rpx作为单位，可在不同的客户端自适应缩放。更多尺寸请移步官方文档：尺寸
三、组件
其实我们学习小程序，学习最多的就是小程序的组件与API。
组件主要包含的是小程序中可用的组件，更多请移步官方文档：组件
四、数据绑定与列表渲染
- 我们先说明如何数据绑定。在原始网页开发中，我们若想操控视图中的数据，首先需要通过js获取DOM文档中的节点，再通过修改获取到的元素节点对象值，达到数据的修改。在小程序中我们采用虚拟DOM技术，在虚拟DOM中我们可以直接获得js中的变量值，我们只需要通过双花括号将对应js页面里data对象中的属性名括起来，即可调用属性名的值。若是从服务器返回的数据，我们必须使用 this.setData() 方法来将数据映射到data对象中。
// pages/posts/posts.js
Page({
// 页面的初始数据
data:{
},
// 生命周期--监听页面加载
onload:function (options) {
var local_database = ['a','b'];
this.setData({local_database});//ES6语法
},
})
- 条件渲染。在组件中，使用
wx:if=""来判断是否需要渲染该代码块，更多内容请移步官方文档：条件渲染 - 列表渲染。在组件上使用
wx:for=""控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。更多内容移步官方文档：列表渲染
<view class="grid-container">
<block wx:for="{{movies}}" wx:for-item="movie">
<view class="single-view-container">
<template is="movieTemplate" data="{{...movie}}" />
</view>
</block>
</view>
五、事件
如何在组件中绑定一个事件处理函数。我们在相关的组件上写上如bind:tap=""，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。同时bind:tap这种写法是支持冒泡的，若想非冒泡我们可以使用catch:tap属性。更多事件内容移步官方文档：事件
六、页面间的数据传递
- js中如何加载js模块
首先我们在待输出的js文件中定义待输出的数据，定义接口
module.export={
postList : local_database
}
随后我们在待接收文件中接收接收数据，访问接口
var postsData = require('../data/postsdata.js');
后面通过postData.xx 即可访问
- 父页面带参数向子页面跳转
我们在父页面组件中，用data-开头连接的属性名，赋上属性值，通过点击事件让脚本获取到属性值，注意，currentTartget指的是事件捕获的组件，而target指的是当前点击的组件。
var postId = e.currentTarget.dataset.postid //postid即为自定义的属性名
可以通过url来携带需传入的数据。
url : ".......?id="+postId, //id 即后面字页面接收参数名
随后我们在子页面onLoad()方法中接收参数
var postId = options.id;
- 应用程序全局变量在子页面中获取
var app = getApp();
var globalData = app.globalData; //获取到全局变量中定义的对象，同时可以修改全局变量中的值
七、template简单使用
将需要复用的wxml代码和wxss代码复制到一个新的wxml文件和wxss文件中，文件存放新建目录，注意复用的代码里面出现路径的话，需要使用绝对路径，新的wxml文件中的代码需要包裹在 template 组件中，同时写上 name 属性名，引用时 is 属性名的值与 name 属性名同值。使用template嵌套时，注意是从最小模板开始编写，而给tempalte绑定数据时，注意是从最大模板开始绑定。数据绑定可以同时传入两个数据:{{starts:starts , score:average}}
<template name = "postItem">
...
复用代码
...
</template>
在将引用 template 的 wxml 文件中，引入
<import src = "..." />
<template is = "postItem" data = {{item}} />
在将引用 template 的 wxss 文件中，引入
@import "..."
