找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
网推大家坛 首页 新闻时态 互联网 查看内容

微信小程序应用开发全流程待续

2017-1-11 22:09| 发布者: qvoclop| 查看: 131| 评论: 0

简介:  小程序概述  小程序是什么?它又能做什么?跟手机APP又有什么不同,而优势在哪?带着这些问题,我们来开始小程序之旅。。。。  依小龙哥之前的说法,如下图  我的理解就是:简洁易用,小而美。  微信小 ...

  小程序概述

  小程序是什么?它又能做什么?跟手机APP又有什么不同,而优势在哪?带着这些问题,我们来开始小程序之旅。。。。

  依小龙哥之前的说法,如下图

  我的理解就是:简洁易用,小而美。

  微信小程序是一种介于原生app、和web app的hybrid。通过微信进行加载,实现类似原生app的流畅。相对原生app来说,小程序更加轻量、更新实时、跨平台;相对web app来说,小程序资源离线,体验更流畅。微信小程序的设计目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

  对于使用用户来说,小程序安装包<=1MB,下载安装极其快速,以现在的网速来讲,基本上可以忽略了,感观上不会很明显,同时大大解放了手机内存。界面风格统一,反应速度快,保证了良好的用户体验,沿用了微信的设计理念。小程序定位在高频使用场景。

  对于开发应用者来说,一次开发,多个平台都能用。不同于像开发手机APP一样,开发Adriond版本又要开发IOS版本,完全一样功能的APP要开发两套系统,开发成本与维护成本颇大。而小程序是依附在微信上运行的,只要安装了微信就可以使用小程序开发出来的应用(直接在微信里面打开使用)。微信小程序提供了详细的 UI、运营等规范,统一用小程序语言进行开发。开发周期短而快,开发成本相对低些,特别是微信已解决了兼容性的问题,而这些对创业公司的MP产品尤为重要(将产品快速开发推出到市场进行试验。从做生意的角度来考虑,用户在哪里、用户更多时间花在哪里,就应该在哪里构建入口)。

  总的优势来讲:低门槛下载,跨平台,开发成本低,体验更流畅,可以使用微信的支付功能

  而局限在于:

  1.开发基于微信框架,部分功能受限,不支持现有的其他第三方插件;

  2.小程序页面只能同时打开5个,如果交互流程较长难以支持;

  3.小程序包大小限制为1M(目前),所有只适合轻量级

  说了这么多,入口呢,还是要看回龙哥朋友圈(裂屏。。。。龙哥持俭住家好男人?)

  最后,上一个小应用Demo

http://mp.sohu.com/profile?xpt=cHBhZzA5MzQ1YTA0MDAyZEBzb2h1LmNvbQ==
  • 小程序接入流程

  • 注册

  主要分为注册邮箱与信息登记。

  需要重新申请一个新的微信公众帐号,不能使用服务号、订阅号或企业号使用的公众帐号

  (微信公众帐号分为四种类型:订阅号,服务号,企业号,小程序)

  申请Url:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN

  官方文档:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161107

  准备资料:

  1、邮箱(未注册过公众帐号的邮箱 qq/163/sina/126等)

  2、企业名称,营业执照注册号或统一社会信用代码,[对公帐号]

  通常这一步会阻碍了很多个人开发者,肿么办呢?这里提供个小技巧巧妙绕过

  全国企业信用信息公示系统 http://gsxt.saic.gov.cn/ 从这可查询到企业统一社会信用代码

  注册方式选择微信认证,但不支付审核服务费($300)即可,这样只不支持公众号部分功能

  3、身份证

  4、手机号

  注册帐号完成后,即可获取到AppID了。注意,这个AppID与服务号或订阅号的AppID是不同

  登录帐号后,内容如下:

  • 服务器配置

  小程序要求只能通过https进行访问,也就是后台提供站点的服务器要开通SSL服务。

  1、购买主机服务器

  2、域名申请并备案

  3、服务器开通SSL服务(最低版本1.2)

  4. 布署访问站点(打开443端口)

  腾讯云提供了一站式小程序解决方案,即如果是购买腾讯云的云服务器,它会提供一整套小程序的服务器解决方案。

  Url如下:https://www.qcloud.com/solution/la

  架构图:

  SSL证书类型

  谷歌从 2017 年起,Chrome 浏览器将也会把采用 HTTP 协议的网站标记为「不安全」网站;苹果从 2017 年 iOS App 将强制使用 HTTPS;在国内热火朝天的小程序也要求必须使用 HTTPS 请求。

  通常来说,SSL 证书分为三大类,他们的安全性是递增的,当然价格和安全系数成正比。

  1. DV (Domain Validation Certificate 域名认证) DV 证书适合个人网站使用,申请证书时,CA 只验证域名信息。几分钟之内就能签发。免费的,会提示证书风险

  2. OV ( Organization Validation Certificate 所有者认证) OV 证书需要认证公司的信息。1-2天签发。收费阿里云要4000元/年,不提示风险

  3. EV ( Extended Validation Certificate DV+OV等更严格的认证) EV 证书的认证最为严格,一般会要求提供纸质材料。签发时间也较久。价格更高,不提示风险

  备注:

  • 个人博客、网站,选择 DV 证书即可;

  • 企业网站,但还不想付费,可以选择 DV 证书;

  • 综合性的企业门户网站,可以选择 OV 证书;

  • 金融、电商企业网站,选择 EV 证书。

  • 开发环境搭建

  1、公众帐号配置域名

  必须在公众帐号内配置域名,小程序的请求才能合法访问到后台站点。

  所有通过小程序发起的Url请求都需配置在此【服务器域名】中,并必须是Https。

  这里提供一个免费的后台API站点,提供几个API:put,get,del,match,list,wxlogin,wxUser

  能基本满足【增删查】的功能。

  网站:微信小程序club:http://www.wxappclub.com/

  ps:注册需用邀请码的,可以加Q或关注公众号跟我要。

  qq:117667985 公众号:hongji

  现献上一枚,先到先得:23SPW9

  2、下载安装开发工具

  官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

  本人觉得开发工具开发效率不高,只用来作调试,使用第三方开发工具进行代码开发

  sublime+插件snippet

  sublime下载地址:https://pan.baidu.com/s/1mh5Yuqk

  snippet插件下载:https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3

  具体安装详情帖子:http://www.wxappclub.com/topic/729

  小程序架构及实现机制

  小程序并不是 H5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件)。所以建议在开发小程序时不要以web app的开发思维去思考。

  小程序开发语言是独立的一整套开发语言体系,既与Html+CSS+Java一脉相承,而又有所区别,同时提供了各种自有的组件和 API。

  • 框架基本都是建立在window、document对象上,但小程序是没有window、document,或者说没有浏览器BOM这个宿主环境。你可以理解为小程序的宿主环境是类似node的宿主环境,而不是浏览器客户端。所以决定了无法使用Dom库,如JQuery。

  • 而又并非使用URL访问,而是通过信道服务进行通讯和会话管理,所以它不支持Cookie存储,同时访问不存在跨域问题。

  • 不兼容Html标记,而遵循XML语法,而提供自身封装类似的组件与API来实现页面展现。

  • 模块化,形式上支持CommonJs,加载引用更像ES6。小程序形式支持CommonJS,通过require加载,跟node、seajs类似。但是通过require加载的是引用的赋值,而不是CommonJS中的值的缓存。

  从框架组件设计来看,框架本身采用面向状态的编程方式,组件部分类似redux的设计(实际不是redux实现的)。组件的View在action操作后,只能通过action的业务处理进行更新View。而框架是单向数据绑定,无法自动更新。对于这一类View组件自带action的,建议进行必要再封装。封装可以考虑aop的方式动态的注册&卸载。

  对于业务页面的开发,可以将页面视为一个页面组件。在这个页面组件,完成了以下工作:

  1. 负责初始化组件state(微信)

  2. 负责组合子view组件形成页面效果(开发者)

  3. 确定js 与view 匹配的数据(开发者)

  4. 负责注册业务逻辑对象提供的业务逻辑方法(开发者)

  5. 负责管理业务逻辑对象(开发者)

  页面wxml与页面js的通信如下(简化了微信框架的工作)

  官方开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107

  知识储备

  1. 基础:HTML+JS+CSS

  2. 进阶:React、Vue

  3. 语法:Mustache、XML

  4. 规范:CommonJS

  微信小程序的架构

  一个小程序页面包含4个文件:

  1.WXML:页面结构 用于创建页面对象,以及处理页面生命周期控制和数据处理

  2.JS:页面逻辑 设置当前页面工作时的window的配置

  3.WXSS:页面样式 用于定义页面中元素结构,遵循XML语法,不是HTML语法,增加了flex布局

  4.JSON:页面配置 用于定义页面样式的,语法遵循CSS语法,扩展了CSS基本用法和长度单位

  小程序的实现机制

  小程序的开发是基于微信提供的一套应用框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供了一套完整的Java Api,使得开发者能够非常方便的使用到微信客户端提供的各种基础功能,快速构建一个应用。框架设计如下:

  框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java 的逻辑层框架,并在视图层与逻辑层之间通过单向数据绑定进行数据传输,使开发者更加聚焦于数据与逻辑上。

  信道服务与会话管理的实现

  信道服务是基于WebSocket完成的,而会话管理需要完成微信要求的鉴权流程。微信的请求接口 wx.request 并不支持 cookie 传递,所以会话层不能使用传统的 Session 方式。

  会话服务和信道服务与服务模块之间的关系

  小程序与业务服务器之间通信

  信道服务是基于WebSocket实现的具体流程如下:

  小程序与业务服务器之间通信流程

  建立 WebSocket 连接的过程

  会话管理的实现流程与鉴权流程如下:

  会话的建立流程

  会话的验证流程

收藏 分享 邀请
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋

看过本文的人还看过

推荐阅读

返回顶部