公司动态

小流程概要

小流程是一种不须要浏览加装方可使用的加速应用领域，它实现了应用领域屈艾的操作；使用者扫一扫或搜一下方可关上应用领域，完全不须要加装，因此小流程不仅可提高的使用者的应用领域新体验，也方便快捷应用领域的传蔓延。责任编辑带大家加速进阶刘刚合作开发，了解从自然环境构筑到合作开发出两个简单hello world流程，从而入门小流程合作开发，让你加速成功小流程合作开发人员。后，想合作开发怎样的小流程，就能他们研究和努力了。

上面，是并行渐经的关键步骤：

​1、注册注册登记小流程在合作开发之前，当然须要先注册两个小流程帐号。步入QQ社会公众网络平台展开注册注册登记。这儿须要注意的是电子邮箱必须是未被QQ社会公众网络平台注册注册登记、未被QQ开放网络平台注册注册登记、未被个人QQ号存取的才有效。递交后登入你注册注册登记用的电子邮箱，会接到两个条转化成你的QQ小流程的电子邮件，点选电子邮件中的转化成镜像去完善重要信息注册登记方可转化成帐户。

​ 2、以获取AppID登入小流程帐号后他们须要先核对小流程重要信息，接着能在右侧EditGrid中找出合作开发方便快捷快捷键，点选步入斯皮特安后展开点选tab中的合作开发增设方便快捷快捷键。就能看到属于他们的AppID，这是QQ社会公众网络平台上的小流程ID。QQ透过它来确定小流程身分及提供相应的机能USB。

3、加装QQ合作开发辅助工具在QQ非官方文件格式-小流程的合作开发网页中，他们能找出辅助工具方便快捷快捷键，选择适宜他们计算机系统版的展开浏览（这儿布季谢的是Windows 64），holds运行浏览好的应用软件接着下一步到底方可，加装完合作开发人员辅助工具后会手动在图形介面加进QQ合作开发人员辅助工具方便快捷快捷工具栏。透过点选QQ合作开发人员辅助工具工具栏关上QQ小流程合作开发辅助工具，接着用他们的QQ应用软件扫描器条码登入，就可步入QQweb合作开发人员辅助工具。​ 4、软件系统合作开发自然环境加装合作开发辅助工具后就能展开合作开发了。用你注册注册登记小流程的QQ帐号条码登入QQ合作开发人员辅助工具就能开始建立小流程工程项目了。上面是QQ合作开发人员辅助工具关上工程项目后的显示介面。非官方辅助工具中的标识符撰稿机能太弱，只有基本的标识符撰稿机能难于满足撑工程项目加速合作开发的需求。（不过调及试手动更新机能还是很强悍的）。

所以他们能使用QQ合作开发人员辅助工具再搭配一款IDE来一起合作开发。比如：VSCode，VSCode是一款免费开源的轻量级跨网络平台标识符撰稿器，软件系统了大部分标识符撰稿的器的优点，软件系统GIT、标识符调试、语法高亮。最主要是拥有强悍丰富的插件系统，几乎支持所有主流的合作开发语言且运行稳定，系统内存占用率低非常适宜构筑IDE。

5、合作开发第两个小流程开始：建立工程项目建立小流程工程项目。QQ合作开发人员辅助工具支持小流程、小游戏、标识符片段及社会公众号网页工程项目合作开发，默认选择小流程。

​点选右侧空白处的+号来建立新工程项目或者导入已有工程项目，这儿的AppID就是前面注册注册登记小流程的时候以获取的。

初始操作时，应该建立两个空目录，用于存放工程项目文件。

6、建立app.js文件在目录中建立两个app.js文件，该文件作为工程项目的入口文件，透过App() 函数来注册注册登记两个小流程的应用领域。 该函数接受两个object参数(function 和 data)，比如小流程的生命周期函数。这儿他们先不管那些生命周期函数，只要定义个空参数的App({})函数方可注册注册登记小流程。

//app.js App({})

7、建立两个hello world网页他们须要显示Hello World内容，所以这儿他们须要建立两个网页。在目录中建立两个helloworld.wxml文件，这儿布季谢个视图容器view标签来显示Hello World内容。

// helloworld.wxml Hello World

8、注册注册登记helloword网页小流程中的每个网页都须要在网页对应的 js 文件中展开注册注册登记，所以这儿他们须要在目录中建立两个helloworld.js文件并透过Page() 函数用来注册注册登记两个网页。该函数同样接受两个 object参数，能是该网页的初始数据、生命周期函数、事件处理函数等。这儿他们还是先不管那些生命周期函数，只要定义个空参数的Page({})函数方可注册注册登记网页。

// helloword.js Page({})

9、建立app.json文件网页注册注册登记好了他们就须要来配置网页路径了，告诉小流程要加载的网页在哪里。这就须要他们在根目录下建立两个app.json文件，透过该文件来对小流程展开全局配置。而其中的pages对象就是用来指定小流程由哪些网页组成，每一项都对应两个网页的 路径（含文件名） 重要信息。注意：文件名不须要写文件后缀，框架会手动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件展开处理。​​​​​​​数组的第一项代表小流程的初始网页（即首页），小流程中新增/减少网页时都须要对 pages数组展开修改。

// app.json文件 {   "pages": [     "helloworld"   //由于该文件目前存放在根目录，所以这儿直接填文件名   ], }

10、调试接下来他们就能关上QQ合作开发人员辅助工具并切换到导入工程项目网页，在目录栏中选择他们的工程项目文件夹。AppID没有的能选择游客模式，点选导入按钮方可。流程会手动生成project.config.json配置文件和sitemap.json站点地图配置文件（能暂时忽略），在右侧的模拟器中他们能看到在小流程中显示了他们的Hello Word内容。

​到这儿他们就建立了两个最简单的Hello Word小流程。

想美化网页显示如果你想美化网页显示样式。他们能继续建立两个helloword.wxss文件，在这儿他们能WXML 的组件样式展开控制。WXSS的写法和CSS相似，很容易入门的！

到此，以上简单10步，10两分钟。他们就合作开发出了两个小流程，就已进阶小流程合作开发了。你已经是两个小流程合作开发人员了。

补充知识小流程目录结构说明两个小流程主体至少须要app.js和app.json这两个文件组成且必须放在工程项目的根目录（文件名也必须为app）。app.wxss为全局样式表，主要是用来美化视觉样式的，没有也能，也能实现机能。而通常的小流程网页由四个文件组成，分别定义了网页的：结构、样式、机能逻辑、配置重要信息。如下做简单介绍：

app.js文件每个小流程都须要在 app.js 中调用 App 方法来注册注册登记小流程实例，是小流程的入口文件。同时该文件也是用来定义小流程的全局数据和函数，控制、监听小流程的全生命周期。定义的函数及数据都是全局共享的，其他网页能直接使用全局函数和数据。而生命周期函数能针对不同场景能调用不同的生命周期函数，如：onlaunch：监听小流程初始化；onshow：监听小流程显示；onhide：监听小流程隐藏；注意：App() 必须在 app.js 中注册注册登记且只有两个 App 实例，透过 getApp 方法能以获取到全局唯一的 App 实例，但不要在 App() 函数中调用 getApp() 方法，使用 this 就能拿到 App 实例。

这儿再讲一点高级技巧，对于将来你做小流程合作开发很重要：标识符保护！由文件名也可知，这是app.js是个js文件。而他们知道，js文件是明文的、小流程也是能反编译的。如果你辛苦合作开发了两个小流程，被别人反编译，很轻松就能获得你写的标识符，很容易就能修改、复制你的流程。那么，他们须要有产品保护意识：标识符是保护起来的。有两个网络平台，叫作JShaman，传统做前后端合作开发的流程员都知道，这是两个JS标识符保护网络平台辅助工具，能把JS标识符展开混淆加密，使标识符不可读不可分析，其目的就是防止他们别的标识符被别人复制修复了使用。在小流程合作开发中，同样能用到这个网络平台，能把app.js中的标识符经JShaman加密了，再发布小流程。这样即使别人反编译了你的小流程，他也没办法用里面的标识符。而且，经还有两个神奇的用于：过审。因为小流程很多了，很多互相拷贝的小流程也很多，标识符几乎是一样的，而小流程不允许同样或雷同度过高的小流程发布，所以很多小流程卡在过审环节。而用JShaman加密标识符后，过审就不会因为标识符雷同而被卡。回到正题，上面讲了app.js。上面再介绍小流程其它三个重要文件。

app.json文件该文件是两个json对象，用于对小流程展开全局配置（该文件中不能有注释）。它能配置网页路径，窗口表现，tabBar标签导航，网络超时，debug模式，其中pages对象用来配置小流程的里面所有的网页路径（该对象是个数组且第两个是小流程的首页），网页路径不须要写任何后缀，系统会手动去加载同名的 .json、.js、.wxml、.wxss 文件。window对象用于增设小流程的窗口表现，包括状态栏、导航条、标题、窗口背景色等。tabBar对象用于增设标签导航，就是小流程窗口底部的EditGrid，能实现加速切换网页。

WXML文件WXML是一套类似HTML的标签语言，是用来构建网页结构的。标签虽然与HTML有点不同但用法基本一致，同时还具备了类似Vue框架的特性，支持列表循环、条件渲染、模板引用及数据存取等机能。一段完整的WXML语句由两个开始标签和两个结束标签组成，在标签中能是内容也能是其它WXML标签。这儿须要注意的是WXML要求标签必须是严格闭合的，没有闭合将会导致编译错误。

WXSS文件WXSS是一套样式语言，用于描述 WXML 的组件样式。透过定义WXSS来控制网页的呈现样式的，这个跟HTML中的CSS机能差不多（WXSS 具有 CSS 大部分特性并在CSS基础上展开了扩充以及修改）。app.wxss与网页中的.wxss文件不同之处在于它的作用域是全局，而网页中的.wxss文件只能作用于当前网页。

掌握以上内容，你便进阶了小流程合作开发，是名小流程合作开发人员了。

另外，重要的小知识：

如果你是两个非纯原创者，搬运了个产品或标识符，在过检时，一般都会被提示标识符重复，这时，通常能用JShaman这个网络平台，对小流程的js标识符展开加密混淆，就能过检了。