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。
组件主要包含的是小程序中可用的组件，更多请移步官方文档：组件

四、数据绑定与列表渲染

1. 我们先说明如何数据绑定。在原始网页开发中，我们若想操控视图中的数据，首先需要通过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语法
    },
})

2. 条件渲染。在组件中，使用 wx:if=""来判断是否需要渲染该代码块，更多内容请移步官方文档：条件渲染
3. 列表渲染。在组件上使用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属性。更多事件内容移步官方文档：事件

六、页面间的数据传递

1. js中如何加载js模块

首先我们在待输出的js文件中定义待输出的数据，定义接口

    module.export={
                postList : local_database
    }

随后我们在待接收文件中接收接收数据，访问接口

    var postsData = require('../data/postsdata.js');

后面通过postData.xx 即可访问

2. 父页面带参数向子页面跳转

我们在父页面组件中，用data-开头连接的属性名，赋上属性值，通过点击事件让脚本获取到属性值，注意，currentTartget指的是事件捕获的组件，而target指的是当前点击的组件。

    var postId = e.currentTarget.dataset.postid    //postid即为自定义的属性名

可以通过url来携带需传入的数据。

    url : ".......?id="+postId,     //id  即后面字页面接收参数名

随后我们在子页面onLoad()方法中接收参数

    var postId = options.id;

3. 应用程序全局变量在子页面中获取

    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  "..."

八、常用小知识点

1. 交互反馈，详情请移步官方文档：交互反馈

2. 音乐播放，详情请移步官方文档：背景音频

3. 路由，详情移步官方文档：路由

4. form组件，详情移步官方文档：form组件

5. map组件，详情移步官方文档：地图组件

6. 给定的图片处理模式，详情移步官方文档：image组件

7. 下拉刷新，详情移步官方文档：window全局配置