微信小程序上线已经有一段时间了，前段时间终于开放了个人开发者注册，闲来无事，觉得好玩，就自己写了一个，现将这个小程序开源，并附上一篇文章，希望对大家入门有所帮助。

第1部分

开发前的准备

玩一玩

如果你还没有使用过小程序，可以先试用一下，扫描下方二维码或搜索“

下载代码

该项目托管于全球最大的同性恋交友平台，地址：

选择正确的编辑器

使用微信官方的“微信网页开发者工具”对于初学者来说已经足够了，但我还是更喜欢用它来调试，用“代码”作为开发工具。

必备技能

开发小程序所需要的技能和前端开发栈差不多，基本需要会 HTML、CSS，以及微信小程序自带的框架。相信很多人已经很熟悉 Web 开发三剑客了。至于学习小程序框架，可以参考官方文档，不过我建议新手还是学一下，毕竟大部分小程序框架都是参考，玩小程序可能玩腻了，但以后还是很有用的。如果还想搞点设计，就先从这款软件入手吧，移动端的 PS，还是挺好用的。

第2部分

前端程序员是最“贪心”的，不满足于前端开发，于是创造前端；不满足于后端开发，于是开始“涉足”移动端。

把微信小程序比作一个“内置后端逻辑”的 Web 更为合适。视图层是前端展现部分，逻辑层包括网页两部分，网页展示逻辑和服务端交互逻辑。如果你对 MVC 有点了解的话，逻辑层包括两部分。逻辑层一方面控制页面的渲染（C），另一方面处理数据（M）。

文件结构

打开我们的项目，微信小程序的结构跟我们网页开发很像，文件夹分别用来存放资源文件，页面文件，还有一些工具文件。

另外，根目录下还有三个配置文件，分别起到以下作用：

应用程序.js

当小程序启动的时候，我们要注册哪些参数，执行哪些操作，都在这个文件中完成。

let util = require('/utils/util.js') App({ openid: '', nickname: '', avatar_url: '', emojis: util.get_emojis() })

因为我想在启动的时候将表情注册到全局，以便后续的页面中使用，所以这个全局变量的使用方法我们后面会讲解。

emojis: util.get_emojis()

应用程序.json

json文件就不用多想了，它一定是全局配置文件，决定了页面文件的路径，窗口表现，设置网络超时，设置多个标签页等等。

{ "pages":[ "pages/landing_page/index", "pages/home/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Emojiary", "navigationBarTextStyle":"black" } }

不需要那么多配置，现在只用到两个配置项，用来表示整个小程序由多少个页面组成，第一个默认是启动页，用来设置小程序的状态栏、导航栏、标题、窗口背景颜色等，具体设置项含义就不一一阐述了。

应用程序.wxss

全局样式，一些全局共享的样式可以写在这里。

页

我们打开文件夹可以发现两个页面对应着我们的两个目录，下面我们就以启动页面为例来分析整个代码。

.wxml 和 .wxss

WXML（）是一套为框架设计的标签语言。它结合基础组件、事件系统，可以构建页面的结构。

WXSS（）是用于描述WXML组件样式的样式语言。

从官方的描述可以知道，WXML和WXSS其实都是HTML和CSS的变体，WXML集成了组件和一些事件处理，而WXSS则保留了CSS的大部分特性同时增加了样式导入和尺寸单元以保证不同分辨率的设备都能得到统一的显示效果。

与前端开发一样，我更喜欢先使用WXML和WXSS实现页面，把逻辑处理留到最后。

.js

当我们实现好页面之后，就要考虑需要实现哪些逻辑功能了。我的登录页面的逻辑很简单：

在WXML中，我们把标签称为组件。View是最基本的组件：视图容器，你可以理解为一切视觉元素的载体。还有很多其他的组件，比如我们将要用到的显示图片的组件。

<view class="userinfo-box"> <image class="userinfo-avatar ripple rotateIn" src="{{ emoji_url }}" background-size="cover">image> view>

因为图片的地址是随机的，所以需要逻辑层把地址处理一下再给我们，所以就用到了双向数据绑定，如果你见过的话，那你肯定会很熟悉。

好的，让我们转到.js并编写我们的逻辑。

let app = getApp()

还记得我们在初始化app.js时注册的全局实例吗？我们可以使用上面的方法来获取这个全局实例。

data: { emoji_url : '/asset/emojis/slightly-smiling-face.svg' },

双向数据绑定，视图层和这里是互相绑定的，视图层变量数据改变，逻辑层变量值也会改变，反之亦然。这里我给图片赋予了一个默认值，在下一个页面加载时会改变。

let emojis = app.emojis let positive_emojis = emojis['positive'] let emoji_name = positive_emojis[Math.floor(Math.random() * positive_emojis.length)] this.setData({ emoji_url : '/asset/emojis/' + emoji_name + '.svg' }) console.log(this.data.emoji_url)

第一行代码是获取全局实例中的变量，第二行和第三行获取一个随机表达式名称。在第四行中，我们使用 this.() 函数来更改值并记录变量的值。没问题。

下面的代码实现了我们的第二个逻辑：获取用户的授权信息。这部分代码我就不多说了，如果大家不知道这部分内容的话，可以参考微信公众平台的相关文档。

{// 一秒后跳转到主页面 (() => {.log('jump')wx.({url: '//home/'})}, 1000)}">

complete: () => { // 一秒后跳转到主页面 setTimeout(() => { console.log('jump') wx.redirectTo({ url: '/pages/home/index' }) }, 1000) }

获取到用户的授权信息之后，跳转到主页面，就这样，我们的小程序启动页就做好了，很简单吧？

主页面代码我就不详细解释了，毕竟这个教程只是新手教程，仔细看主页代码（不复杂）再多看官方文档就很容易上手了。

第 3 部分

微信小程序对大多数人来说毫无价值

看到这个小标题，是不是有点不爽？也许你花了一天时间看完这篇教程，现在却被告知微信小程序毫无价值。如果你还有耐心，就看完下面的开发吧。如果实在想放弃，就直接拉到文章最后吧。:)

布局

如果你仔细看我的WXSS代码，你会发现微信小程序的布局和现在网页里的盒子布局不一样，这里用的是Flex布局。Flex布局是2009年推出的，由于浏览器兼容性问题，并不是那么流行，但是微信小程序可以放心使用，因为微信小程序解析引擎是统一的。这里推荐阮一峰老师的Flex布局教程，随着浏览器的统一，相信Flex布局也会像当年的Box布局一样火爆，大家可以趁这个机会学习一下。

除了Flex布局之外，微信小程序还引入了size单位，方便我们适配不同分辨率的设备。因此在开发过程中，我们一定要以rpx为单位，避免很多麻烦。

动画组件

如果你稍微细心一点就会发现，我登录页里的旋转效果不是用官方的动画组件实现的，而是用了第三方的CSS动画库。所以微信小程序里是可以使用CSS动画效果的。官方的动画组件实在是太难用了，就当成一种方法吧。

设计

我觉得这个小程序还是可以的，作为一个审美欠缺的人，能做出这样的设计并实现，主要还是得益于这个软件，简单易用。打开/文件夹，可以发现都是矢量图，设计好之后直接导出成svg文件，在WXML中直接使用就可以了，够简单够方便了。

我的愚见

为什么我说微信小程序对于大多数人来说，是没有什么价值的呢？因为这是由应用场景决定的。就拿我写的日记小程序来说，没有人会想在写日记的时候打开微信，恐怕一打开微信，人们就只想着聊天了。有人会问，为什么不把这个小程序添加为桌面快捷方式呢？更何况iOS设备并不支持这个功能，这样做和一个普通的APP有什么区别呢？Weex等一系列优秀的框架，都是跨平台的成熟解决方案。相比之下，微信小程序大概就没有什么优势了吧？

所以我们要理解微信小程序的概念，就是微信小程序刚出来的时候我们说的“即开即用”。比如我们使用摩拜单车的时候，用微信扫二维码，摩拜单车微信小程序就弹出来了，开始使用，用完就直接关闭，没有任何推送通知等入口，这就是“即开即用”的概念体现。

没有直接的入口，我觉得大部分小程序都是没有意义的。直接的入口有扫码、微信公众平台转账、硬件接入等，如果只靠统一的入口，恐怕大部分微信小程序都会死掉。

我担心的是，我不希望一家公司垄断一切。有苹果的iOS，有谷歌的iOS，这不是很有趣吗？如果我用腾讯看电视，用腾讯聊天，用腾讯各种APP，那就太没意思了。这也是我个人的私心。