微信小程序开发实践入门教程

点选下方“Java天际

控制技术该文第三天数送抵！

在今年2017年1月9日，科枫在2017QQ讲座Pro上正式发布的小流程正式宣布上架 。如今，小流程早已有足足两年天数了 。在2017年12月28日，QQ预览的 6.6.1 版对外开放了迷你游戏，「跳一跳」迷你游戏在那一整天全盘火了。虽然QQ的网络流量巨大，因此许多合作开发人员看淡小流程，我也不值得一提 。

1、甚么是小流程？

小流程是一类不须要离线方可采用的应用领域，它同时实现了应用领域“屈艾”的心愿，采用者扫一扫或是搜呵呵方可关上应用领域 。

（小流程短音频如是说，提议wifi下观赏）

2、合作开发小流程

介绍完全小学流程究竟是甚么，接下去是责任编辑的重点项目 。对没碰触过小流程程式设计的，能看回来 。小XPS15我们入坑 。这首诗大致说呵呵怎样一步棋一步棋建立个单纯的小流程出 。

具体来说，先看呵呵设计图 。即使是个自学事例，因此机能非常单纯，是两个单纯的网页展现机能 。前面有天数和心力，会再去健全机能的 。

现阶段新一代的工具是2017.12.15 预览的，版号（1.01.1712150）

下载地址：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

安装自然环境，是很单纯的，下载完安装包直接安装方可。

我们的合作开发自然环境如下：

能先不用注册小流程ID

点选确定，第三个小流程”Hello World”早已能运行了，简不单纯哈！

从上面项目结构图，能看到两个网页构成主要有三大部分构成 index.wxml 、index.wxss 、index.js 。一看，怎么跟前端的这么类似 。认真一看，这机能还真是没差别 。对于会一点前端知识的，我想，要入门小流程合作开发，应该是很单纯的 。

两个网页主要 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个网页的结构，CSS 用来描述网页的样子，JS 是用来处理这个网页和采用者的交互。小流程的网页跟这个完全相同 ，不一样的是改了个名字 。

除了以上网页的三大构成，还有项目的根目录还有两个 app.json 和 project.config.json 。

app.json 是对当前小流程的全局配置，包括了小流程的所有网页路径、界面表现、网络超时天数、底部 tab 等。

project.config.json 能针对各自喜好做一些个性化配置，例如界面颜色、编译配置等 。

（附上一张官方文档截图）

如是说完全小学流程的具体目录，接下去，带我们看看怎样配置项目的底部导航 。

小流程要同时实现这个底部导航其实很单纯，我们只要在根目录下的app.json文件中配置：

具体属性值能看底下这张截图，很明确的说明了：

具体官方文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

小流程的网页建立，都是须要在配置文件中配置呵呵路径，不然无法访问 。配置也非常单纯，只须要在app.json文件下找到两个pages的属性值 。

pages属性：接受两个数组，每一项都是字符串，来指定小流程由哪些网页组成。每一项代表对应网页的【路径+文件名】信息，数组的第三项代表小流程的初始网页。小流程中新增/减少网页，都须要对 pages 数组进行修改。

注意：文件名不须要写文件后缀 ，而且路径不能写错！

如是说完怎样建立两个新网页，下面就开始重点项目如是说，我们怎样给两个网页加上内容 。还是以一开始的例子 ，设计图如下 。我们发现这个网页是上面两个横向列表+底部是个纵向列表组成 。

要同时实现上图这个网页，具体来说你要先自学呵呵小流程合作开发组件 。小流程提供了一系列基础组件，组件是视图层的基本组成单元，两个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内 。这部分，肯定须要你花功夫自己去自学小流程的官方文档，这个不是单纯一句两句就能讲明白的 。

官方文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

自学完基本组件后，这还不够。即使上图的数据都是网络请求回来展现的，因此你还须要继续自学小流程提供的原生API 。比如下面的例子用网络怎样请求数据 等等。

自学官方文档怎样采用API：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/

1、源码早已上传到github，喜欢的能点Star呵呵，后续看情况维护 。

地址：

https://github.com/llpdev/ToutiaoWechat

3、总结

小编也只是刚碰触小流程合作开发，现阶段也只会一些单纯的，遇到不懂的，就多研究呵呵官方文档和官方提供的自学事例 。如果上面有错误，请在评论区留言 。自学小流程合作开发，最好你要有一些前端合作开发网页的基本知识，这样学起来一定会更加轻松 。

推荐流程IT圈