微享商盟系统开发底层框架搭建原理

微享商盟主要基于微信小程序框架开发,小程序采用HTML,CSS和JS等搭建的一套框架,微信官方给它们取了一个很牛逼的名字:WXML,WXSS,但本质上还是在整个WEB体系之下构建的。

WXML,个人猜测在取这个名字的是微信的Xml,说到底就是xml的一个子集。WXML采用微信自定义的少量标签WXSS,大家可以理解为就是自定义的CSS。实现逻辑部分的JS还是通用的ES规范,并且runtime还是Webview(IOS WKWEBVIEW, ANDROID X5)。

小程序

小程序目录结构

微享商盟系统开发,微享商盟小程序开发  134.java.2220.php.2839..net  框架结构搭建欢迎交流!

一个完整的小程序主要由以下几部分组成: 
一个入口文件:app.js 
一个全局样式:app.wxss 
一个全局配置:app.json 
页面:pages下,每个页面再按文件夹划分,每个页面4个文件 
视图:wxml,wxss 
逻辑:js,json(页面配置,不是必须)

注:pages里面还可以再根据模块划分子目录,孙子目录,只需要在app.json里注册时填写路径就行。

小程序打包

开发完成后,我们就可以通过这里可视化的按钮,点击直接打包上传发布,审核通过后用户就可以搜索到了。 

那么打包怎么实现的呢? 
这就涉及到这个编辑器的实现原理和方式了,它本身也是基于WEB技术体系实现的,nwjs+react,nwjs是什么:简单是说就是node+webkit,node提供给我们本地api能力,而webkit提供给我们web能力,两者结合就能让我们使用JS+HTML实现本地应用程序。 
既然有nodejs,那上面的打包选项里的功能就好实现了。 
ES6转ES5:引入babel-core的node包 
CSS补全:引入postcss和autoprefixer的node包(postcss和autoprefixer的原理看这里) 
代码压缩:引入uglifyjs的node包

注:在android上使用的x5内核,对ES6的支持不好,要兼容的话,要么使用ES5的语法或者引入babel-polyfill兼容库。

打包后的目录结构

小程序打包后的结构如下: 

所有的小程序基本都最后都被打成上面的结构 
1、WAService.js 框架JS库,提供逻辑层基础的API能力 
2、WAWebview.js 框架JS库,提供视图层基础的API能力 
3、WAConsole.js 框架JS库,控制台 
4、app-config.js 小程序完整的配置,包含我们通过app.json里的所有配置,综合了默认配置型 
5、app-service.js 我们自己的JS代码,全部打包到这个文件 
6、page-frame.html 小程序视图的模板文件,所有的页面都使用此加载渲染,且所有的WXML都拆解为JS实现打包到这里 
7、pages 所有的页面,这个不是我们之前的wxml文件了,主要是处理WXSS转换,使用js插入到header区域。

小程序架构

微信小程序的框架包含两部分View视图层、App Service逻辑层,View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用,它们在两个进程(两个Webview)里运行。 
视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

小程序架构图: 

小程序启动时会从CDN下载小程序的完整包,一般是数字命名的,如:_-2082693788_4.wxapkg

小程序技术实现

小程序的UI视图和逻辑处理是用多个webview实现的,逻辑处理的JS代码全部加载到一个Webview里面,称之为AppService,整个小程序只有一个,并且整个生命周期常驻内存,而所有的视图(wxml和wxss)都是单独的Webview来承载,称之为AppView。所以一个小程序打开至少就会有2个webview进程,正式因为每个视图都是一个独立的webview进程,考虑到性能消耗,小程序不允许打开超过5个层级的页面,当然同是也是为了体验更好。

AppService

可以理解AppService即一个简单的页面,主要功能是负责逻辑处理部分的执行,底层提供一个WAService.js的文件来提供各种api接口,主要是以下几个部分: 
消息通信封装为WeixinJSBridge(开发环境为window.postMessage, IOS下为WKWebview的window.webkit.messageHandlers.invokeHandler.postMessage,android下用WeixinJSCore.invokeHandler)

1、日志组件Reporter封装 
2、wx对象下面的api方法 
3、全局的App,Page,getApp,getCurrentPages等全局方法 
4、还有就是对AMD模块规范的实现

然后整个页面就是加载一堆JS文件,包括小程序配置config,上面的WAService.js(调试模式下有asdebug.js),剩下就是我们自己写的全部的js文件,一次性都加载。

时间: 2024-11-07 00:31:35

微享商盟系统开发底层框架搭建原理的相关文章

安徽微享商盟系统开发程序分析

很多人干IT这一行都冲着"收入高"这一点的,因为只要学会一点HTML.DIV+CSS,要做一个页面开发人员并不是一件难事,而且做一个页面开发人员更容易找到工作,收入比普通的工作还要高一些,所以成为了很多高校毕业生的选择. 微享商盟小程序是互联网+线上.线下的趋势,整合的趋势来达到大众创业,万众创新的新局面.安微微享商盟系统开发程序:151-1222-4001(微/电),互联网+一直都是2017一个新机会. 选择合适的工具 JAVA.C#.PHP.C++.VB--10多种热门的开发语言,

安徽微享商盟系统解析和开发

随着技术的发展,我们已经看到许多基于Web技术的移动开发框架,微享商盟系统开发158*/*899**4/2250*/小温*/现在你只需要牢固掌握HTML.CSS和Javascript技术就可以开发出一个移动App来. 对于大部分Web开发人员,HTML.CSS和 Javascript是他们最熟练的开发技能. 几款移动跨平台APP开发框架比较2.1 CordovaCordova 和 PhoneGap 的区别?PhoneGap 是 Apache Cordova 的一个分发版,就像 Ubuntu 是

微享商盟系统、微享商盟小程序开发解析

随着云计算的深入落地,大数据技术有了坚实的底层支撑,不断向前发展并日趋成熟,无论是传统企业还是互联网公司,都不再满足于离线批处理计算,而是更倾向于应用实时流计算,要想在残酷的企业竞争中立于不败之地,企业数据必须被快速处理并输出结果,流计算无疑将是企业Must Have的大杀器.随着小程序发展的趋势,瞬间让更多的人找到了商机,也通过共享链商家让消费者从此吃喝玩乐再也不用花钱了. 微享商盟消费返利小程序定制:张丽185-6541*3369(微电),微享商盟系统模式开发,微享商盟支付让利平台制作,微享

微享商盟系统功能与小程序开发方案(静态页面制作)

在平时开发程序的过程中,自己经常会写一些控制台小程序进行测试某个功能,事后我们会寻找这些小程序,如果不仔细管理,经常会找不到.由于每个控制台小程序都有自己独立的 Main方法,所以我们不能把他们都放在一个Solution里面,这样在编译整个项目的时候会通不过,但是又不想为每个小程序都单独建立一个项目,这样又太浪费,因为每个都是一个非常简单的代码文件.微享商盟小程序制作流程是怎样,下面会一一给大家详解! 微享商盟系统开发找:张丽185*6541*3369(微电)微享商盟小程序模式定制,微享商盟排队

开发微享商盟系统小程序

互联网终于不只在互联网圈内孤芳自赏,开始接受传统企业探究和审视的目光,也开始接受一些步子迈得相对较快的传统企业或激进或稳健或保守的尝试行动.这时候提及的主要关键词为"试水"."转型"以及"传统企业互联网化". 微享商盟系统开发.微享商盟小程序开发找何经理.自互联网商业化应用以来,互联网已经逐渐成为改变社会.商业最重要的技术及应用,而且越来越多地影响和改变着人类社会的生活方式.思维方式.学习方式.工作方式.社交方式及经济发展形式.微享商盟的系统就是

微享商盟小程序开发系统框架分析

从微信小程序发布这段时间,陆陆续续开发了不少小程序相关的项目,总结了一些通用性的组件,但是对于小程序如何做测试,依然是一头雾水,直到做了不少的项目,积累的一些经验和开源库之后才理清如何做测试,下面将会介绍如何对小程序做UI测试和单元测试. 微信小程序微享商盟具体做什么? --举例,顾客到某水果店购买商品后通过微信小程序共享链支付成功后进入微信小程序微享商盟小程序,该小程序里面会显示消费者的消费金额,奖励金额和已经到账金额,之后其他消费者也到该水果店消费,那微信小程序微享商盟系统会做一个时间排序,

惠益商盟系统软件开发

惠益商盟平台开发,惠益商盟系统开发,联系杰森团队微电188-2624-7572. 惠益商盟模式定制开发,惠益商盟软件开发,联系微电188-2624-7572. 惠益商盟平台介绍: 惠益商盟平台开发直接面向消费者,省去了营销中间环节,降低了销售成本,提高了盈利空间.同时,也由于微信分销摆脱了与消费者脱节的弊端,大大提高了营销效率. 必须由服务商或服务商业务员推荐才可以加盟<惠益商盟>成为线下联盟商家:   一:惠益商盟系统消费模式有10%,20%,两种,商家可自行选择,每单消费都要上缴相对应额度

匀加速商城系统开发模式底层框架搭建

.net框架下的B/S软件开发被广泛应用的原因在于此技术为轻量级,能够跨系统进行操作,能够捕捉动态数据及绚丽的UI设计等软件开发模式,拥有高效率的开发,容易上手.当然,也存在对服务端硬件要求较高的弊端,但不可否认的是,.net框架下B/S软件开发技术能够进一步推动世界科技的向前发展.  1 .net框架下B/S技术  1.1 WebForm  WebForm是一套完善的组建开发技术,其原理是结合用户所需的URL,找到与之相应的aspx和aspx.cs:然后将html标签和服务端标签runat=s

全民享益模式系统开发app

全民享益模式系统开发app(微or电 158.1500.1390 小凡团队)全民享益系统开发,全民享益系统模式定制开发,全民享益平台开发系统,全民享益app开发,全民享益模式开发app项目. 传统企业做门店生意,需要租房子,筹集资金,动辄几十万,上百万.而现在,微营销时代来了!微共创创始人颜总说到,移动互联网时代只需要有靠谱的产品和服务,根本不用愁销路,基于微信等社交化媒体的推动,人人都是推广者,并且我们提供的一系列的微营销基础服务设施提供给每个企业. 从传统线下渠道到PC端电商,再到移动端微商