小程序初探

最近由于工作需要，研究了下小程序，不得不说，整个开发流程，官方都做的很完善，基本的组件也都实现，而语法上，作为前端基本可以直接上手。有人吐槽什么限制文件大小，不让用本地图片做背景图，组件不够多啊，等等。但是，大家想想，如果都帮你做了，还要开发干嘛，而且小程序本身的宗旨就是把一个应用的核心功能实现，我们使用一个应用，绝大多数时候都只会使用一些核心功能，而下载一个APP动辄几十兆。当然这里面也有很多坑，需要不断总结。

注册小程序

关于注册小程序，官方很明白的介绍了，这里不再赘述。

开始小程序开发

首先我们需要下载微信小程序的开发工具，之后我们就可以新建一个项目，关于App ID，你可以填上你自己申请的也可以不填，都是可以进入项目开发的，不过无法进行手机预览。新建项目我们就可以选择是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

image.png

初始项目是有三部分，首先是app.xx这三个是项目的最外层，app.js 是项目的入口文件，app.json是项目的全局配置，app.wxss是全局样式。那么每个模块（或者叫页面）也是这样构成，配置文件，页面，逻辑，样式。utils大家应该熟悉，就是公共方法。

配置文件

根据项目目录看，配置文件分为全局配置和局部配置。全局配置主要配置顶部导航栏的背景色，文字相关，路由，底部菜单栏以及下拉上拉等。每个页面也有自己的配置，可以覆盖全局配置。

页面开发

页面开发跟前端几乎一模一样，主要区分点：
1.标签元素要使用小程序自己的（用的最多的view，相当于div，有时候整个页面各种 view，看到眼花）。
2.一些基本的组件都有，比如swiper，scroll（如果你不想使用自带的下拉上拉刷新可以用这个自定义），甚至还有canvas，浮层（cover-view，但是这个标签不能在其他标签包裹中，如下）

//会报错的
<view>
<cover-view></cover-view>
</view>

3.样式选择器，基本够用了

.class
#id 
element view    选择所有 view 组件
element, element    view, checkbox  选择所有文档的 view 组件和所有的 checkbox 组件
::after view::after 在 view 组件后边插入内容
::before    view::before    在 view 组件前边插入内容

4.适配问题，在这里使用单位rpx，都帮你配置到了（一般设计师给的750的图，你直接用px写就可以）
5.控制逻辑的（.wxs）基本跟写js一毛一样，模块方面按照node来（require/module.exports）。而每个页面都有生命周期，类似于react／vue的组件生命周期，但是要注意哪些只运行一次的东东，语法上做了适当的扩展，有需要看官方文档即可。
6.API方面，基本涵盖了你所需要的接口。包括操作微信的，手机原生接口等（页面元素操作也在这里createSelectorQuery）。

关于wepy

wepy是一个很棒的工具式框架，它简化了小程序组件的开发和使用，让你可以像开发vue一样开发小程序。
主要优势：
1.可以组件化开发项目（.wpy），一个页面或者一个小块都可以当作一个组件来做，只要一个文件，不需要创建四个文件。

<template>
    <view class="co-home">
        <coSearch></coSearch>
    </view>
</template>
<script>
    import wepy from 'wepy'
//page和小组件区别export default class extends wepy.component
    export default class extends wepy.page {
        components= {
           
        }

        data= {
            itemHeight: 0
        }

        onReady() {
        
        }
    }
</script>
<style lang="less">
    
</style>

这里要注意如果自组件引入了静态文件（图片之类的），那么他的路径要按照调用他的父组件的相对路径来，否则真机预览会失效
2.npm包可以直接使用，wepy会帮我们把里面的文件拷贝出来。
3.支持es6/7，less/sass。
4.组件通信使用props，emit-events,基本跟vue 一致，组件的其他功能也都对应vue组件。
5.他的数据绑定使用脏检查，而在函数运行周期之外的函数里去修改数据需要手动调用$apply方法。比如ajax请求。

赶紧来入坑吧！