⼩程序开发技术预研分析报告
1. 预研背景
本次预研是对⼩程序使⽤流程及开发技术的研究。
1. 预研⽬的和意义
本次预研在于了解⼩程序具体语法、接⼝功能、具体实现⽅式等。
1. 预研⽬标
通过⼩程序的技术研究可实现⾃主完成⼩程序的功能开发。
1. 预研技术概述
⼩程序是⼀种全新的连接⽤户与服务的⽅式，它可以在内被便捷地获取和传播，同时具有出⾊的使⽤体验。⼩程序提供了⼀个简单、⾼效的应⽤开发框架和丰富的组件及API，帮助开发者在中开发具有原⽣ APP 体验的服务。
⼩程序整个研发流程如下：
1）⾸先需要注册⼀个企业版⼩程序账号；
2） 如⼩程序需要⽀持⽀付，需要开通⽀付认证。如果已有，可以在上⾯申请⼩程序账号，申请关联，然后和⼩程序只需要认证⼀次，节省费⽤；
3）搭建⾃⼰的服务器，或租⽤⼀个服务器（阿⾥云/腾讯云），然后申请域名并备案，域名需要⽀持https；
4）需求收集和分析，根据需求设计⼩程序原型界⾯，⽤户展⽰的⼩程序⼀般包括⾸页，主要功能菜单，我的等；
5）根据需求完善数据库表设计；
6）后台数据接⼝设计和开发；
7）⼩程序前端页⾯的开发，可使⽤开发者⼯具与后台服务进⾏联调测试；
8）后台管理系统的开发；
9）部署应⽤到服务器，测试⼩程序，上传⼩程序代码到平台审核；
10）后期需求变更及维护。
1. 预研技术实现 ⾃主开发实现 开发条件
⾃主开发⼩程序，开发团队需要具备如下技术技能：
1）设计：原型界⾯设计，软件架构设计、接⼝设计、数据库设计；
2）⼀种数据库：mysql、oracle、sqlserver等；
3）⼀种后台语⾔：java、php、python等；
4）前端：javascript、css、html；
5）美⼯：photoshop；
1.
1.
1. ⼩程序与H5开发的区别
⼩程序的主要开发语⾔是 JavaScript ，⼩程序的开发同普通的⽹页开发相⽐有很⼤的相似性。对于前端开发者⽽⾔，从⽹页开发迁移到⼩程序的开发成本并不⾼，但是⼆者还是有些许区别的。⽹页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运⾏可能会导致页⾯失去响应，⽽在⼩程序中，⼆者是分开的，分别运⾏在不同的线程中。⽹页开发者可以使⽤到各种浏览器暴露出来的 DOM API，进⾏DOM 选中和操作。⽽⼩程序的逻辑层和渲染层是分开的，逻辑层运⾏在 JSCore 中，并没有⼀个完整浏览器对象，因⽽缺少相关的DOM API和BOM API。这⼀区别导致了前端开发⾮常熟悉的⼀些库，例如 jQuery、 Zepto 等，在⼩程序中是⽆法运⾏的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以⼀些 NPM 的包在⼩程序中也是⽆法运⾏的。
前端页面模板
⽹页开发者需要⾯对的环境是各式各样的浏览器，PC 端需要⾯对 IE、Chrome、QQ浏览器等，在移动端需要⾯对Safari、Chrome以及iOS、Android 系统中的各式 WebView 。⽽⼩程序开发过程中需要⾯对的是两⼤操作系统 iOS 和 Android 的客户端，以及⽤于辅助开发的⼩程序开发者⼯具，⼩程序中三⼤运⾏环境也是有所区别的，如下表所⽰。
运⾏环境逻辑层渲染层
iOS JavaScriptCore WKWebView
安卓V8chromium定制内核
⼩程序开发者⼯具NWJS Chrome WebView
⽹页开发者在开发⽹页的时候，只需要使⽤到浏览器，并且搭配上⼀些辅助⼯具或者编辑器即可。⼩程序的开发则有所不同，需要经过申请⼩程序帐号、安装⼩程序开发者⼯具、配置项⽬等等过程⽅可完成。
1.
1.
1. ⼩程序构成
使⽤开发者⼯具创建⼀个测试⽤的⼩程序，⼩程序⽬录结构可以分为3个部分：框架全局⽂件，框架页⾯⽂件和⼯具类⽂件，如图：
1.
1.
1.
1. 框架全局⽂件
⼀个⼩程序的主体部分由3个⽂件组成，作为全局⽂件，必须放在项⽬的根⽬录中，框架全局⽂件包括3个⽂件：app.js⼩程序逻辑（定义全局数据以及定义函数⽂件）， app.json⼩程序公共设置， app.wxss⼩程序公共样式表。它们对所有页⾯都有效。
app.js⼩程序逻辑：app.js⽂件⽤来定义全局数据和函数是的使⽤，它可以指定⼩程序的⽣命周期函数。⽣命周期函数可以理解为⼩程序⾃⼰定义的函数，如onlaunch(监听⼩程序初始化)，onshow(监听⼩程序显⽰),onhide(监听⼩程序隐藏)等，在不同阶段，不同场景可以使⽤不同的⽣命周期函数。app.js中还可以定义⼀些全局的函数和数据，其他页⾯引⽤app.js⽂件后就可以直接使⽤全局函数和数据。
⼩程序公共设置：app.json⽂件可以对5个功能进⾏设置。
配置页⾯路径、配置窗⼝表现、配置标签导航、配置⽹络超时、配置debug模式、配置页⾯路径。页⾯路径定义了⼀个数组，存放多个页⾯的访问路径，他是进⾏页⾯访问的必要条件。如果这⾥没有配置页⾯的访问路径，页⾯访问就会报错，如果在这⾥定义了访问路径，⼩程序框架就可以在页⾯⽂件夹下创建相应名称的⽂件夹以及⽂件，免去了⼿动创建⽂件夹的⿇烦。
配置页⾯路径
窗⼝⽤于配置⼩程序的状态栏，导航条，标题，窗⼝背景⾊。
配置窗⼝表现
标签导航是很多移动app都会采⽤的⼀种导航⽅式，⼩程序同样可以实现这样的效果。配置导航条需要在app.json⾥配置tabBar属性，tarBar是⼀个对象，可以配置标签导航⽂字的默认颜⾊，选中颜⾊，标签导航背景颜⾊以及边框颜⾊。标签导航存放在list数组⾥
⾯，list⾥⾯每个对象对应⼀个标签导航。
配置标签导航
app.wxss⼩程序公共样式表：app.wxss⽂件对css样式进⾏了拓展，和css的使⽤⽅式⼀样，只要页⾯有全局样式的class，就都可以渲染全局样式⾥的效果。
1.
1.
1.
1. 框架界⾯⽂件
框架界⾯⽂件⽬录中⼀般存放待开发的⼩程序⽂件，包含后缀名为js、wxml、wxss、json，其中json 后缀的 JSON 配置⽂件、wxml 后缀的 WXML 模板⽂件、wxss 后缀的 WXSS 样式⽂件、js 后缀的 JS 脚本逻辑⽂件。
WXML 模板：从事过⽹页编程的⼈知道，⽹页编程采⽤的是 HTML + CSS + JS 这样的组合，其中 HTML 是⽤来描述当前这个页⾯的结构，CSS ⽤来描述页⾯的样⼦，JS 通常是⽤来处理这个页⾯和⽤户的交互。同样道理，在⼩程序中也有同样的⾓⾊，其中 WXML 充当的就是类似 HTML 的⾓⾊。打开 pages/index/index.wxml，你会看到以下的内容:
正在上传…
和 HTML ⾮常相似，有标签、属性等等构成。但是也有很多不⼀样的地⽅，我们来⼀⼀阐述⼀下：
标签名字有点不⼀样，往往写 HTML 的时候，经常会⽤到的标签是 div, p, span，开发者在写⼀个页⾯的时候可以根据这些基础的标签组合出不⼀样的组件，从上边的例⼦可以看到，⼩程序的 WXML ⽤的标签是 view, button, text 等等，这些标签就是⼩程序给开发者包装好的基本能⼒，我们还提供了地图、视频、⾳频等等组件能⼒。多了⼀些 wx:if 这样的属性以及 {{ }} 这样的表达式 在⽹页的⼀般开发
流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产⽣的树)，以引起界⾯的⼀些变化响应⽤户的⾏为。例如，⽤户点击某个按钮的时候，JS 会记录⼀些状态到 JS 变量⾥边，同时通过 DOM API 操控 DOM 的属性或者⾏为，进⽽引起界⾯⼀些变化。当项⽬越来越⼤的时候，代码会充斥着⾮常多的界⾯交互逻辑和程序的各种状态变量，显然这不是⼀个很好的开发模式，因此就有了 MVVM 的开发模式(例如 React, Vue)，提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过⼀种模板语法来描述状态和界⾯结构的关系即可。⼩程序的框架也是⽤到了这个思路，如果需要把⼀个 Hello World 的字符串显⽰在界⾯上。通过 {{ }}的语法把⼀个变量绑定到界⾯上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界⾯的关系，还需要 if/else, for等控制能⼒，在⼩程序⾥边，这些控制能⼒都⽤ wx: 开头的属性来表达。
WXSS 样式：WXSS 具有 CSS ⼤部分的特性，⼩程序在 WXSS 也做了⼀些扩充和修改。新增了尺⼨单位。在写 CSS 样式时，开发者需要考虑到⼿机设备的屏幕会有不同的宽度和设备像素⽐，采⽤⼀些技巧来换算⼀些像素单位。WXSS 在底层⽀持新的尺⼨单位 rpx ，开发者可以免去换算的烦恼，只要交给⼩程序底层来换算即可，由于换算采⽤的浮点数运算，所以运算结果会和预期结果有⼀点点偏差。提供了全局的样式和局部样式。全局样式会作⽤于⼩程序的所有页⾯，局部页⾯样式 page.wxss 仅对当前页⾯⽣效。
JS 交互逻辑：⼀个服务仅仅只有界⾯展⽰是不够的，还需要和⽤户做交互：响应⽤户的点击、获取⽤
户的位置等等。在⼩程序⾥边，我们就通过编写 JS 脚本⽂件来处理⽤户的操作。
1.
1.
1. ⼩程序开放能⼒
⼩程序除了提供可视化开发界⾯外，其⾃⾝以接⼝的形式提供了⼀系列的扩展能⼒，包含基础能⼒、硬件能⼒、开放能⼒等。
1.
1.
1.
1. 基础能⼒
⼩程序基础能⼒主要包含⽹络传输、本地缓存、⽂件系统、画布、多线程任务、服务端能⼒、⾃定义的tabBar、数据预拉取、周期性更新等功能。
1.
1.
1.
1. 硬件能⼒
⼩程序硬件能⼒主要提供蓝⽛、NFC、WIFI硬件设备接⼝的调⽤。
1.
1.
1.
1. 开放能⼒
⼩程序提供了获取⽤户信息、获取⼿机号、⽣物认证、转发消息、打开第三⽅APP、向⽤户进⾏消息推送、获取位置信息等开放能⼒。
1.
1. 外包实现 凡科轻站⼩程序
凡科轻站⼩程序是凡科旗下的⼩程序制作⼯具。通过凡科轻站⼩程序，企业或门店商家能够快速制作⼩程序官⽹或⼩程序服务平台，从⽽实现基于⼩程序的营销推⼴及线上交易。服务模式是常见的SaaS（软件即服务）模式。凡科轻站主要针对政府机关、旅游、教育、家居、医疗等⾏业，提供信息展⽰、预约咨询的服务。例如政府机关信息公开、家具信息展⽰、酒店预约、教育咨询。
针对于各个⾏业有固定的模板，管理端配备了托拉拽功能，可以实现快速建站的需求，但对于个性化需求需要定制，收费模式⼀般采⽤按年收费的⽅式。其特点费⽤较低，模板较为固定，建站速度快。
1.
1.
1.  定制开发⼩程序
将所有业务委托于第三⽅有⾏业经验的⼩程序开发公司，第三⽅开发公司提供全⽅位的解决⽅案及产品。优点是独⼀⽆⼆的，专为企业定制的，功能⾃主，需求⾃主，后期修改BUG⽅便，⼆次开发添加功能也很⽅便，拥有永久使⽤权。缺点是：价格较⾼，⼀般⼀万到⼗⼏万不等，具体需看具体功能⽽定。
1. 预研技术对⽐
名称优点缺点
⾃主开发可根据需求实现各种所需的功能，维护响应速度快成本⾼
三分钟实现固定模板快速实现，费⽤低不⽀持⼆次开发
第三⽅定制开发有⾏业经验，功能⾃主，有开发经验，添加功能⽅便成本⾼

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。