初探微信小程序

       张小龙在朋友圈里这样解释道：小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

从技术层面上来说，微信小程序 = XML + CSS + JS + JSON的移动应用程序。

1、开发工具

       腾讯为小程序的开发提供了专门的IDE——微信web开发者工具，其实就是个web编辑器~下载完后直接安装，安装后会弹出一个二维码，要求开发者扫码登陆，其实也不难想到，毕竟小程序是运行在微信平台，所以，在开发前确定开发者身份有利于后面的小程序发布

2、创建项目

我们选择小程序开发（公众号开发自行百度），然后就会出现如下图

这里有个很重要的元素——AppID，其实这个ID就是小程序的唯一标识！这个ID需要去小程序注册，我们这里使用测试ID，点击图上红框部分，会生成一个测试ID，项目名等细节信息填写完成后点击“添加项目”，最后是这个样子的

有个很重要的地方，如下图

在写测试代码的时候建议把红框部分勾起来，否则将会无法进行网络请求

3、项目结构介绍

app.js：定义了全局的一些重要事件，比如程序启动时要做些什么，如何获取微信用户信息等等。App函数是一个全局函数，它的作用就是用来创建一个应用程序实例，每个应用程序都会有它的生命周期，因此一些重要的生命周期事件都会在这里定义。例如，onLaunch事件就是程序在启动时需要干什么。

app.json 则定义了程序有哪些页面，以及窗口标题及相关样式等

app.wxss 则定义了全局样式，其实就是web开发里面的css样式

xxxx.js 则是每个页面的业务逻辑

xxxx.wxml则类似于web开发的布局效果

4、撸码注意事项

相比于Android来说，小程序的底部导航栏实现起来真的是很简单！看上图，底部两个导航按钮，只需要在app.json配置下，然后编译，就一切OK了，点击效果什么的都不需要考虑。Android原生则需要XML+Java各种布局和方法的实现，小程序里面简直不要太爽。另外，修改导航按钮的默认颜色需要在tabBar的Json的一级目录下面设置，否则无效

现在主要说下小程序里面逻辑相关的代码

逻辑代码都是写在js里面的Page代码块里面的，有很多方法和变量。这个data既是程序第一次加载时候的默认数据，也是你根据后台数据定义的变量。

小程序有它自己的生命周期，所以，代码逻辑的实现，需要根据具体情况选择在不同的生命周期的方法中实现方法。定义方法也很直接，不像Android需要写 public void onCreate()等，直接就是方法名：function（）｛｝，如下图

网络请求，微信已经封装好了相应的API，也比较方便。

看得出来，网络请求其实和Android里面的Okhttp很像，一目了然，就不多说了。请求完成后，会有三个方法需要我们具体实现success: function(res) {｝、fail: function(res) {｝、complete: function(res) {｝，也就是Android网络请求完之后的三个状态，成功、失败、完成。既然数据请求完了，怎么绑定呢？

这就说到了前面的data，一定要和后台返回的数据结构一样，不然数据无法正常绑定。

以上是获取数据，在小程序里面我们不需要解析Json，因为我们返回的数据就是按照上面我们自己定义的data这种结构的，可以说是已经解析过了的，可以直接绑定。数据绑定，与wxml有很大的关系！

看图

我用红色先标出来的地方就是数据绑定的目的地！

｛｛｝｝

双重花括号表示这地方需要根据后台数据实时绑定数据，就类似Android里面的Adapter模块，上个Adapter给你们看看

这里就是Android里面根据item位置获取不同的图片的Adapter。

咱再看下上面的wxml，img标签里面是这么写的“”

<image class='news_img' src="{{items[idx].pic}}" mode="aspectFill"></image>

前面说过｛｛｝｝里面是需要绑定数据的地方，类似于Android的

Glide.with(mContext).load(userIcon).into(mCirIcons)

而

items[idx].pic

就类似于Android的

mUserIconList.get(position)

所以，在结合Android代码去理解这个微信小程序的数据绑定的时候也就简单了。附上最终效果图：

最后：

       本篇主要是了解微信小程序是什么，最基本的小程序结构是什么样子的，怎么进行网络请求的。踩了一些坑，总结下。接下来将会出个ReactNative（Facebook推出的移动跨平台框架）和Flutter（Google推出的移动跨平台框架）的文章，这俩公司总是对互杠，最后苦的还是我们这些开发者啊，语言太多，学不完啊...........那么今天就到此结束啦..........