微信小程序开发技术预研分析报告

预研背景

本次预研是对微信小程序使用流程及开发技术的研究。

预研目的和意义

本次预研在于了解小程序具体语法、接口功能、具体实现方式等。

预研目标

通过微信小程序的技术研究可实现自主完成小程序的功能开发。

预研技术概述

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

微信小程序整个研发流程如下：

1）首先需要注册一个企业版微信小程序账号；

2）如小程序需要支持支付，需要开通微信支付认证。如果已有微信公众号，可以在上面申请小程序账号，申请关联，然后微信公众号和小程序只需要认证一次，节省费用；

3）搭建自己的服务器，或租用一个服务器（阿里云/腾讯云），然后申请域名并备案，域名需要支持https；

4）需求收集和分析，根据需求设计小程序原型界面，用户展示的小程序一般包括首页，主要功能菜单，我的等；

5）根据需求完善数据库表设计；

6）后台数据接口设计和开发；

7）小程序前端页面的开发，可使用微信开发者工具与后台服务进行联调测试；

8）后台管理系统的开发；

9）部署应用到服务器，测试小程序，上传小程序代码到微信平台审核；

10）后期需求变更及维护。

预研技术实现
1. 自主开发实现
  1. 开发条件

自主开发小程序，开发团队需要具备如下技术技能：

1）设计：原型界面设计，软件架构设计、接口设计、数据库设计；

2）一种数据库：mysql、oracle、sqlserver等；

3）一种后台语言：java、php、python等；

4）前端：javascript、css、html；

5）美工：photoshop；

小程序与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
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

小程序构成

使用微信开发者工具创建一个测试用的小程序，微信小程序目录结构可以分为3个部分：框架全局文件，框架页面文件和工具类文件，如图：

框架全局文件

一个小程序的主体部分由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，就都可以渲染全局样式里的效果。

框架界面文件

框架界面文件目录中一般存放待开发的小程序文件,包含后缀名为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 脚本文件来处理用户的操作。

微信小程序开放能力

微信小程序除了提供可视化开发界面外，其自身以接口的形式提供了一系列的扩展能力，包含基础能力、硬件能力、开放能力等。

基础能力

微信小程序基础能力主要包含网络传输、本地缓存、文件系统、画布、多线程任务、服务端能力、自定义的tabBar、数据预拉取、周期性更新等功能。

硬件能力

微信小程序硬件能力主要提供蓝牙、NFC、WIFI硬件设备接口的调用。

开放能力

微信小程序提供了获取微信用户信息、获取手机号、生物认证、转发消息、打开第三方APP、向微信用户进行消息推送、获取位置信息等开放能力。

外包实现
1. 凡科轻站小程序

凡科轻站小程序是凡科旗下的微信小程序制作工具。通过凡科轻站小程序，企业或门店商家能够快速制作小程序官网或小程序服务平台，从而实现基于小程序的营销推广及线上交易。服务模式是常见的SaaS（软件即服务）模式。凡科轻站主要针对政府机关、旅游、教育、家居、医疗等行业，提供信息展示、预约咨询的服务。例如政府机关信息公开、家具信息展示、酒店预约、教育咨询。

针对于各个行业有固定的模板，管理端配备了托拉拽功能，可以实现快速建站的需求，但对于个性化需求需要定制，收费模式一般采用按年收费的方式。其特点费用较低，模板较为固定，建站速度快。

定制开发小程序

将所有业务委托于第三方有行业经验的小程序开发公司，第三方开发公司提供全方位的解决方案及产品。优点是独一无二的，专为企业定制的，功能自主，需求自主，后期修改BUG方便，二次开发添加功能也很方便，拥有永久使用权。缺点是：价格较高，一般一万到十几万不等，具体需看具体功能而定。

预研技术对比

名称	优点	缺点
自主开发	可根据需求实现各种所需的功能，维护响应速度快	成本高
三分钟实现	固定模板快速实现，费用低	不支持二次开发
第三方定制开发	有行业经验，功能自主，有开发经验，添加功能方便	成本高

微信小程序开发技术预研分析报告相关推荐

微信小程序存在的风险_微信小程序开发技术风险存在，如何规避是重点
微信小程序开发技术风险存在,如何规避是重点微信小程序自上线以来已经历经三年的时间,不断推陈出新,推展业务,如今已形成了一定规模和影响力,线上购物.在线点餐.预订服务.便捷出行.小游戏等多种多样的小程 ...
基于CKEditor网页富文本编辑工具转PDF文件的技术预研分析报告
目录基于CKEditor网页富文本编辑工具转PDF文件的技术预研分析报告 1 1. 预研背景 4 2. 预研目的和意义 4 3. 预研目标 4 4. 预研技术概述 4 5. 预研技术实现 7 5 ...
微信小程序|前端技术主要框架分析
1.框架微信提供了一套自己的用于开发小程序的前端框架,和目前主流的前端框架相比,其既有类似的地方,也有特殊的地方. 特殊的地方在于其只能在微信小程序开发工具内使用,并做了相对严格的使用和配置限制,开 ...
微信小程序开发技术介绍有哪些？
小程序相对于app大部分公司还是不愿意将主营业务放到微信平台上,以免受制于与腾讯, 不过随着现在小程序生态的逐渐形成,小程序也逐渐融入每个人的生活当中,日活动用户量高达2亿多,学习门槛不高,学习简单, ...
微信小程序开发之——附近酒店-分析(1)
一概述 map组件展示地图信息通过腾讯地图提供的微信小程序javaScript SDK-关键词搜索(酒店)和逆地址解析(精度和纬度获取当前位置名称) 模拟器和真机演示,接口及显示问题二腾讯地图 ...
微信小程序开发技术栈
uniapp 一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百 ...
前后端微信小程序开发
随着移动互联网的迅猛发展,微信小程序已经成为了一种非常流行的开发方式,它不仅可以节约用户空间,提高用户体验,而且开发成本也相对较低.因此,前后端微信小程序开发技术也日渐成熟. 本篇文章将介绍前后端微信 ...
1个月uni-app微信小程序开发上线实战专栏介绍
一.专栏介绍: <uni-app开发微信小程序1个月上线实战>,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍:国服第二切图仔--资深前端开发工程师,具有六年以上的前端 ...
云服务器定时启动程序_过去、现在和未来：开发一款微信小程序的技术迭代全过程...
2019 年 10 月 19 日,由腾讯云与微信小程序团队联合举办的"小程序·云开发"技术峰会在北京召开.23 万小程序·云开发注册账户,50 多万开发者上手使用,这是腾讯云与微信 ...

微信小程序开发技术预研分析报告

微信小程序开发技术预研分析报告相关推荐

最新文章

热门文章