小程序入门之旅

继前期比对了微信衍生的三款产品，对于程序猿的我，肯定是对小程序最感兴趣的，最近也玩起了小程序。如果大家也对它感兴趣，就一起开启小程序的入门之旅吧。

01

—

工具篇

       首先，在本篇就忽略该操作可以参考微信公众号简易教程，https://mp.weixin.qq.com/debug/wxadoc/dev/，描述了申请小程序的过程。

        期次，可以把自己写好的demo用微信开发工具打开，小程序对于会前端开发的同事，工具使用起来会有一种似曾相识的感觉（是不是简化版的SublimeText和谷歌浏览器的结合体？）。

       该工具还提供了上传（上传到腾讯云服务器），测试（生成性能测试报告）    等功能。

02

—

架构篇

      微信小程序，架构很简单，如下图看到（图中1,2,3,4,5分别对应下面的五点讲解）。

1.app.js 主要是全局公共的js方法声明及调用所在的文件

2.app.json 是小程序整个的配置文件，所以有的页面都在要此注册，不然不允许访问

3.app.wxss 是小程序全局的css文件，公共css写在此最好不过的了

4.pages下是对应着所有页面，每个页面，可以添加四种类型的文件，.json，.wxss，.wxml，.js

5.utils 是我们公共的js存放的地方，因为微信小程序要求，每个js文件里的方法不可以直接引用或调用，必须要用 module.exports方法导出，这样pages 下的.js文件才可以调用到我们在此写的js方法。

03

—

组件篇

       前端界面的渲染，应用的是ES6的思想，通过组件化的方式渲染出来的。界面层.wxml，不关注数据如何来的，只是做一个架构。实际逻辑及数据填充，通过.js来做数据处理。

      另外.json，对应页面的配置文件。.wxss及对应css样式处理文件。

      举个栗子，如下图所示，动态实现图片切换，首先在.wxml中，搭建swiper组件框架。具体数据如何填充，该页面不管：

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{background}}" wx:key="*this">

<swiper-item>

<view class="swiper-item {{item}}"></view>

<view wx:if="{{item=='demo-text-1'}}">

<image class="animation-element-wrapper-image" src="resources/pic/swiper.png"/>

</view>

<view wx:elif="{{item=='demo-text-2'}}">

<image class="animation-element-wrapper-image" src="resources/pic/5.png"/>

</view>

</swiper-item>

</block>

</swiper>

      其次，在.js对类似{{autoplay}}的数据进行组装处理：

Page({

data: {

...

background: ['demo-text-1', 'demo-text-2'],

indicatorDots: true,//是否显示小圆点。

vertical: false,

autoplay: true,//是否自动播放。

interval: 500,//每张图片间隔时间

duration: 100//每张图片停留时间。

},

结束

---