小程序初探

最近由于工作需要,研究了下小程序,不得不说,整个开发流程,官方都做的很完善,基本的组件也都实现,而语法上,作为前端基本可以直接上手。有人吐槽什么限制文件大小,不让用本地图片做背景图,组件不够多啊,等等。但是,大家想想,如果都帮你做了,还要开发干嘛,而且小程序本身的宗旨就是把一个应用的核心功能实现,我们使用一个应用,绝大多数时候都只会使用一些核心功能,而下载一个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请求。

赶紧来入坑吧!

posted @ 2017-09-03 22:24  故园苒苒  阅读(373)  评论(0编辑  收藏  举报