PHP开发的基于微信小程序的税务局管理系统?

都知道小程序的体验要比app里面直接嵌入h5的体验要好,都知道小程序其实也是运行在app上的。那么我们为什么不能用小程序来开发app呢?这样不仅可以小程序和app只要开发一次,小程序和app都有了。还可以实现app动态更新不需要提交应用市场审核,我们只要做个小程序载体的app壳(类微信端小程序 sdk),而且体验效果也接近原生。做一个类似小程序平台把我们现在的app项目框架从组件化改成为小程序平台构架。

每个业务程序都是一个个小程序,原生提供原生能力。

首先我们要知道小程序是啥?现在市场上的小程序有很多,微信小程序、百度小程序、支付宝小程序、字节跳动小程序等但都差不多。与传统app相比,小程序无需安装、卸载,运行在微信、百度、支付宝等这样大型app载体上。虽然每种小程序都差不太多,但都定义了自己的开发语言和规范,这对开发者来说也是不少的麻烦。

小程序是介于web网页应用和原生应用的一种产物;

APP就是用app的webview去加载一个h5文件,然后webview通过js桥梁和原生通信,实现js调用h5方法,h5方法调原生方法。来弥补h5无法拍照、打电话等不足。但是做出来的效果h5都会有短暂白屏,体验也无法达到原生效果(提供一个简单的demo)。后来接触了小程序,觉得小程序的体验和原生差不了多少了,可以说不是专业人员基本是看不出区别的,原先以为小程序是类似RN、weex这样的原生渲染,后面才知道它也是webview渲染。竟然也是hybird app,那它的体验是什么上去的?都是webview渲染,为什么小程序的体验会比普通的h5好?这让我非常感兴趣,于是就开始了小程序的深入了解。

初步了解用h5做Hybrid APP和小程序的区别:

2.都是js通过桥接和原生通信

3.都可以调用原生组件

4.都可以把资源文件下载本地加载渲染

2.小程序有服务层,负责处理业务逻辑和数据处理

3.小程序页面有原生页面的生命周期管理

4.小程序tab和bar是原生控件

6.小程序基于微信跨平台

下面以微信小程序为例,进一步展开小程序原理

都知道微信小程序有自己的开发语言,wx开头的方法也不少,那它是什么转化为微信app能识别的语言呢?微信开发工具开发完提交审核,审核通过下发到微信端的是什么样的文件呢?带着这些问题我查阅了很多资料,小程序在技术架构上非常清晰易懂。JS负责业务逻辑的实现,而表现层则WXML和WXSS来共同实现,前者其实就是一种微信定义的模板语言,而后者类似CSS。但是语法毕竟是自定义的,所以要么在下发的之前进行编译,要么就是在渲染的时候进行转化成webview能够识别的语法。我们发现这2个节点微信都做了处理,拿到下发到微信端的wxapkg格式的小程序包,解开后都是js和html已经不是我们开发的WXML和WXSS格式了。但是这一个个html直接用浏览器打开却是空白的。没错<body></body>里面是空的,渲染的时候动态加进入内容的。

1.小程序是如何编译的

我们先来看看打包编译这层,微信都做了些啥呢?微信的打包和编译都在服务端进行,我这边找了个类似的来描述下,不一定准确,只能参考下。

  • 清空并创建指定的输出目录
  • 根据service.html模板,带上版本信息输出到指定的目录中
  • 读取所有小程序代码中所有的JS文件,同时判断其是否在app.json中定义,如果其没被定义也不是app.js,说明其为引入的module, 将这些JS路径名存入一个数组中,并确保app.js和页面文件放置在数组尾部
  • 遍历JS文件数组并读取它们,根据用户设置项判断是否使用Babel将其转换为es5的代码

其他步骤应该都不难理解,我认为最难的应该是wxml,wxss生成相应的页面文件,这个页面不是普通的html文件,前面也说过它的body是空的。如果你安装了微信的开发工具的化你可以找下是否有wcc和wcsc这2个小工具。wxss

2.编译好的小程序包如何下发解析

再看下下面这张图,微信下发的wxapkg格式的文件(每个小程序都是这样的一个包),这个文件可以通过从越狱的iPhone或者root的安卓手机上拿到。有部分人用charles通过https抓包拿到了下载链接,也拿到了包。解压出来就是这样的目录格式。简单解释下这每个文件的作用以及是什么来的:

下拉刷新也要自己重新做的原因。自定义navigationBar就不再是原生的了,它默认下拉刷新效果是在原生navigationBar下的整个webview做动画效果,这显然满足不了我们的需求。

entryPagePath:这个节点就简单了,小程序的入口页面的配置

pages节点:页面路径数组 对应小程序源代码里面的app.json文件里面的pages节点

global节点:全局设置和全局变量等;window 整个小程序的私有页面都起作用,也就是说每个页面没有自己单独设置都直接用这个全局设置的效果。

ext、extAppid节点:对应的就是ext.json文件 第三方平台部署小程序才需要

tabBar节点:对原生tabBar的样式设置和页面路径和图标等配置

app-service.js文件:这个是小程序一个很重要的文件,小程序体验好一个很重要的环节。从下图截取的代码片段很容易看出这个文件就是小程序里面全部js文件内容的集合。通过__wxRoute来路由,wxRouteBegin=true来标记启始页面。

除了小程序每个页面的js还包含了app.js 这个包含小程序的整个生命周期管理逻辑的js文件内容也都在这个文件里面。在微信端里面小程序的sdk会有一个单独的webview来加载app-service.js文件当作这个小程序的服务层,负责每个页面逻辑处理,而且这个服务在这个小程序的整个生命周期它是一直在的,每个页面的js文件都已经压缩在这个文件里面,并在小程序服务启动的时候已经加载到内存中,所以在点击按钮需要做逻辑交互的时候体验会那么快。

App Service(逻辑层)主要就是由app-service.js文件和集成在微信app里面的WAService.js组成,如一个页面加载需要网络请求就是由逻辑层处理请求参数并交给原生来进行请求,原生把请求到的数据返回给App Service(逻辑层)进行数据处理,最后把处理好的数据通过原生JSBridge传给view(试图层)进行渲染。对 逻辑层和视图层没有直接的交互,逻辑服务层和视图层也不在一个线程里面,2个webview 只能通过原生来进行通信。

几个文件夹没啥特别的 就是和你微信小程序开发的目录是一样,放的都是你的页面和组件的html文件。但是值得一提的是这里面的html文件内容很少,它不是一个完整的页面,可以说这个页面的样式,静态内容都不在这个html里面。里面放的是这个页面css、路由路径和加载入口方法的调用generateFunc:

这是一个很简单的小程序页面代码,那它编译后的html页面代码是什么样的呢?下面我展示出来给大家看。

发现了啥?“hello world page2“ 这样页面关键内容不见了,那它是如何渲染的?懂js的人估计很容易就可以看到这个页面的入口方法generateFunc: $gwx 是的 这个方法是一个很重要的方法。那么这个方法在哪里?“hello world page2“ 这样页面关键元素又在哪里?肯定是跟着这个资源包一起下发的。对的所以的页面标签、元素 内容都在page-frame.html文件里面。也就是wxml文件的代码都编译压缩到page-frame.html文件里面,而对应页面的html文件只放对应的wxss文件代码和入口js代码。而入口方法的触发是由原生app调用js"generateFuncReady"事件触发调用。原生sdk这块后面可以以OC为例贴出对应代码,再展开说明下。

page-frame.html文件:这个文件应该是一个小程序包里面最大一个文件,所以里面的代码也不好都贴出来,简单介绍下里面的组成和作用。第一大块:模版 View(视图)层如何绘制每个页面都是公共的,如何把vdom渲染到webview上。$gwx方法就在这个模版里面,一个页面的入口。

再找找我们刚才html页面消失的关键元素“hello world page2“在哪里?把每个元素都转化为Z数组了,每个页面都是一个类似这样的代码块。由于混淆和压缩加大了我们阅读的难度,但是如果你以为看完这个文件就完了,那就错了。View(视图)层除了这几个html文件外 还需要一个很重要的文件,那就是放在微信app包里面的WAWebview.js文件。和服务层里面也有一个WAService.js文件配合使用达到和原生交互的效果。

和原生交互这块是属于小程序框架,所以肯定不会在下发的小程序包里面,除了原生sdk代码之外,还有2个很重要的js文件就是上面提到的WAService.js文件和文件。接下来我们就开始简单了解下:

为了方便理解我整理了js和原生的一些API,有app(小程序)级别的、有页面级别的、有原生组件级别的。可见js和原生交互是非常频繁的,可以说每个操作都是需要提供View(视图)层的WAWebview.js调用原生的桥梁需要原生处理就原生处理后再调用app Service(逻辑)层的WAService.js 由WAService.js通知 逻辑层处理对应逻辑,再把处理结果返回到原生。

小程序在App中执行时的时候分为三个不同的模块,View/Service/Native,各司其职。View和Service都在WKWebView中执行,互相无法调用,不直接操作DOM。他们之间通过Native层通信。Native和WebView之间通过webkit.messagehandler和evaluateJavascript互相调用。小程序借助的是JSBridge实现了对底层API接口的调用,所以在小程序里面开发,开发者不用太多去考虑IOS,安卓的实现差异的问题,安心在上层的视图层和逻辑层进行开发即可。

启动小程序服务startAppWithAppInfo根据appid等基本信息判断小程序是否已经下载到本地,没有的话下载解压加载配置信息等。然后进入manager,manager其实也是分为几部分一个是小程序级别的管理,一个是单个小程序的管理。具体的可以通过下面的类图更加直观。

下图显示了小程序启动时会从CDN和服务器校验和下载资源。也就是是小程序启动的时候会有点慢的主要原因,还有一些时间就是需要初值化小程序本地服务。

关于小程序的生命周期,可以两个部分来理解:应用生命周期(左侧蓝色部分)和页面生命周期(右侧绿色部分)。

其中应用的生命周期是这样一个流程:1、用户首次打开小程序,触发 onLaunch(全局只触发一次)。2、小程序初始化完成后,触发onShow方法,监听小程序显示。3、小程序从前台进入后台,触发 onHide方法。4、小程序从后台进入前台显示,触发 onShow方法。5、小程序后台运行一定时间,或系统资源占用过高,会被销毁。

页面生命周期是这样的一个流程:1、小程序注册完成后,加载页面,触发onLoad方法。2、页面载入后触发onShow方法,显示页面。3、首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。4、当小程序后台运行或跳转到其他页面时,触发onHide方法。5、当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload。同时,应用生命周期会影响到页面生命周期。

用Page 实例说明的页面的生命周期

由上图可知,小程序由两大线程组成:负责界面的视图线程(view thread)和负责数据、服务处理的服务线程(appservice thread),两者协同工作,完成小程序页面生命周期的调用。

  • 初始化状态:初始化视图线程所需要的工作,初始化完成后向 “服务线程”发送初始化完成信号,然后进入等待状态,等待服务线程提供初始化数据。
  • 首次渲染状态:当收到服务线程提供的初始化数据后(json和js中的data数据),渲染小程序界面,渲染完毕后,发送“首次渲染完成信号”给服务线程,并将页面展示给用户。
  • 持续渲染状态:此时界面线程继续一直等待“服务线程”通过this.setdata()函数发送来的界面数据,只要收到就重新局部渲染,也因此只要更新数据并发送信号,界面就自动更新。
  • 结束状态:页面被回收或者销毁、应用被系统回收、销毁时触发。
  • 初始化状态:此阶段仅启动服务线程所需的基本功能,比如信号发送模块。系统的初始化工作完毕,就调用自定义的onload和onshow,然后等待视图线程的“视图线程初始化完成”号。onload是只会首次渲染的时候执行一次,onshow是每次界面切换都会执行,简单理解,这就是唯一差别。
  • 等待激活状态:接收到“视图线程初始化完成”信号后,将初始化数据发送给“视图线程”,等待视图线程完成初次渲染。
  • 激活状态:收到视图线程发送来的“首次渲染完成”信号后,就进入激活状态既程序的正常运行状态,并调用自定义的onReady()函数。此状态下就可以通过 this.setData 函数发送界面数据给界面线程进行局部渲染,更新页面。
  • 后台运行状态:如果界面进入后台,服务线程就进入后台运行状态,从目前的官方解读来说,这个状态挺奇怪的,和激活状态是相同的,也可以通过setdata函数更新界面的。毕竟小程序的框架刚推出,应该后续会有很大不同吧。
  • 结束状态:页面被回收或者销毁、应用被系统回收、销毁时触发。

小程序在App中的应用场景

说了这么多技术理论,最后说下小程序在项目中如何应用。整个项目都是小程序不现实,毕竟小程序的定义是轻量级的,像IM、消息等用原生肯定比小程序更加适合,所以用小程序和原生混合开发是不可少的。还有一个让你不得不混合开发的一个重要原因,你的app不是一个新项目,是一个现有的原生app,一次性用小程序重新做一次不现实,所以混合会是最好的选择。我这边做的混合开发不是技术层面的,我们都知道小程序是很原生通信很频繁的,它需要原生提供各种能力才能到达接近原生的体验,所以本身就是一个混合。而我这里说的混合是指业务层面的混合开发,打破我们以往对小程序的认知。不管是百度小程序还是微信小程序都是运行在他们生态下的一个独立应用程序。比如一个商城小程序它不会有部分页面是原生部分页面是小程序,也只会有一个入口,一个出口。而我们要用小程序来开发app,我们app有自己的需求我们需要让小程序看起来像原生页面一样,对用户来说它还是一个app,不存在哪个页面是原生哪个页面是原生的。所以一切都是从技术层面来说,就是小程序和原生进行混合开发的业务app。你可以理解为你的app里面嵌入h5一样的开发模式,只是小程序页面比一般的h5页面交互体验要好一些而已。

我可以从原生页面跳转到小程序的任何页面,如果必要的话也可以从小程序页面跳转到原生页面。所以小程序服务不能在进入小程序页面的时候才启动,也不能因为回到原生页面而销毁。必须根据你的业务场景来调用控制。

以上是个人对与小程序开发app的一些浅薄看法,期待和业界同仁共同探讨。你有什么想法呢?欢迎评论交流。

最后感谢业界各位大佬的贡献,在这里附上我的参考文献:

自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象。这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的渠道。随着使用WordPress版微信小程序的人越来越多,针对这套程序(包括wordpress插件)的安装和使用的问题也增加了,有些问题比较简单,都是常识,有些问题只要认真去看我的撰写的文档,都可以得到答案。为了更好进行必要的技术支持,我建了一个微信群,抽时间回答相关的技术问题,但毕竟我的时间有限,无法满足所有的提问者,因此我总结了一个安装使用的常见问题的列表,并按我的理解做出了回答,希望对你有帮助,如果回答有什么错误和不完整,请你联系我。

但插件和官方内置的rest api 会略有不同,你需要修改小程序里里的api.js 文件才能正常使用。

本小程序是基于官方的rest api 的基础上编写的,无法兼容json api插件,如果你使用的是json api,需要修改小程序里的api.js 文件,修改的方法是按json api请求方式来调整。

默认rest api 是无法直接访问的,会报出一个404无法找到该页的错误,要解决这个问题,需要做两个设置:

(1)在wordpress后台设置固定链接(permalink)。注意:请不要设置为“朴素”项。

4.网站一定要支持https?

当然,这不是我的程序的要求,而是微信小程序的要求,如果不满足这个要求是无法在手机的微信里使用本小程序。

当然,如果你只是在开发工具的环境里调试程序,可以不用网站支持https。在小程序开发工具-设置-项目设置里选择 -不校验安全域名、TLS 版本以及 HTTPS 证书。

有关wordpress网站如果安装和设置https,你可以参考我写的一篇文章:WordPress整站轻松开启HTTPS

不过有一点要在强调下:只有http和https方式都可以访问的情况下,再去修改wordpress的后台的“WordPress地址(URL)”和 “站点地址(URL)”

注意:小程序要求的TLS 版本需要需要大于等于1.2版本。

(1) 本小程序里有些功能,比如浏览数,点赞,赞赏等等功能是 wordpress rest api 无法提供的,于是我就在官方的rest api基础上做了定制,考虑到这是个开源的项目,我没有直接修改 rest api的函数,而是通过插件的方式来做定制化,这样可以保证兼容性,即使官方升级wordpress rest api ,也不会带来太大的影响,调整插件去兼容即可。

当然,插件的方式也给程序的开发带来了很大的工作量。

(2) 为了更好的使用小程序,我需要在wordpress 后台配置一些小程序所需的参数,比如分类封面 ,小程序的appid 和 appsecret 。

有关这个插件的使用和安装可以参考文章:

放心,我的插件是开源的,我不会窃取你的appid和appsecret ,这两个东东都保存在你自己的wordpress数据库里,除非你的数据库被人黑了,才有可能泄漏。

另外,在赞赏中使用的微信支付,需要设置商户ID和密钥,也是在微信支付服务端程序里设置,我的程序不会保存,也不会通过什么手段传到我的服务器。

如果你实在不放心,就干脆别用这套程序了。:-)

目前插件程序我还没有上传到wordpress的官方,提供的也不是压缩可安装版本,因此需要你直接上传文件夹安装和启用。

这个插件我是在php7.1的版本基础上开发的,不过考虑到向下兼容的,我测试过,最低支持 php5.3 ,如果低于这个版本,可能会出现不兼容问题。

9.为什么我的小程序提示不能匿名评论?

但你的wordpress 里设置了禁止匿名评论,或者有什么插件禁止匿名评论,也会提示匿名无法评论。

另外,开启rest api 匿名评论的功能会给wordpress网站带来一定的风险,因为有可能导致垃圾评论增加。这个作为站长要有心里准备。。

10.在回复评论的时候,如果去掉”@**:”字符后后提交评论就显示不是回复了,而是一条评论?

目前我的程序里,判断是否回复就是根据这个机制来判定的,如果你要修改这些字符,程序就没法判断到底是回复还是评论,于是程序就当作评论来处理了。因为考虑到,如果你突然不想回复,只是评论的话,就直接删除这些字符,直接评论了。

这里我还没想到更好的方法,去判断在你点发送的按钮的时候,是评论还是回复。

11.为什么我的小程序的站内链接无法跳转?

坦白说,目前的站内链接还有很多不完善的地方,比如不支持“页面”和“tag”标签的跳转,只支持文章的跳转,同时由于wordpress里设置固定链接有不止一种方式,这给小程序站内链接的跳转程序编写带来了麻烦。

目前本程序只能比较好的兼容了以下这种形式的wordpress固定链接:

后续我会完善站内链接的相关程序。

12.为什么小程序需要获取用户的微信信息?

首先获取用户微信信息(包括昵称,头像,openid等)是在明确提示用户授权的情况下进行,获取这些信息是为了更好满足程序的需要,如果你觉得不安全或者不想授权,可以禁止授权,但会影响到小程序的使用,比如评论,点赞,赞赏等功能就都不能使用了。

这个授权,主要看你选择,你选择不授权,就意味着你放弃完整使用功能。

14.为什么我的小程序的“关于”页面无法显示。

“关于”页面的设置确实有点小难度,你可以打开config.js文件,在这个文件有一行这样的代码:

这行代码里的“1136”就是你wordpress网站里一个“页面”的id,至于这个id如何得到的,需要你自己去搜索答案,我就不赘述了。

15.为什么我的小程序按你的文档设置好了,小程序还是显示“暂时无法访问网络,下拉重试…”?

如果你完全我的文档都设置好了,还出现这个情况,可以在开发工具里打开调试器,在“Console”标签里会有相关的提示信息告诉你问题在那里。

如果你看不懂Console的错误提示,我也帮不了你了。

如果你完全按我的文档来设置的,小程序仍然显示“暂时无法访问网络,下拉重试…”,在调试器里的Console也没显示错误信息,这就是科学和宗教都没法解释的了,额,只能是人品问题了。 :-)

16.当初你为什么想着开源这个程序?

这个,还用问,我当然是为了出名。哈哈哈,开个玩笑。开源不是因为我的程序写的有多好,其实说实话,本程序很多代码写得很丑陋,我只是微信小程序的初学者,我开源的初衷有两个:

(1).本程序也是基于不少开源程序的基础上开发的,比如wxParse() 和 es6-promise(),没有这些开源者贡献,我也写不出完善的小程序。

(2)降低wordpress站长搭建网站小程序的门槛,对本程序进行简单的配置,就可以把一个wordpress网站搬到微信生态圈里,甚至产生更多的可能机会。

17.如果我捐赠赞助你写的程序,可以获得额外的支持么?

谢谢,赞赏支持我的朋友,我会尽我的可能去提供相关技术支持。

另外,如果你捐赠赞赏过我的程序,或者在你的网站撰写了介绍我的程序的文章(嘿嘿,就是软文),我会考虑在后续的pro版本的wordpress小程序,给你额外的支持和惊喜。

微信小程序目前只支持mp4。如果在本程序里播放视频的话,可以在worpress网站的正文直接插入h5的video标签

注意:视频的链接地址最好有中文字符,很可能无法在手机里播放。

19.如何开通赞赏功能?

赞赏功能其实利用就是小程序的微信支付功能。只有认证的小程序才能开通支付功能,个人小程序就无法实现了。

在配置微信小程序的微信支付的时候,微信小程序appid必须和支付里绑定对应那个商户id对应才能支付。

这个问答列表我会继续补充和完善,如果你有什么疑问,可以联系我,也可以到我建的一个微信群里去讨论,群里的高手很多,相信你会得到满意的答案。

联系我吧,让我们一起完善这套程序。

近年来,随着智能手机的广泛应用,移动互联网逐渐成为大众化网络信息平台。微信也从一个手机社交软件演变为支持多种应用的综合信息交互平台,可以实现传统互联网上的各种应用,如电子政务、电子商务等。其中,微信小程序起了关键的助推作用。因此,微信小程序的研究和开发具有重要的研究意义和实用价值。 本文对微信小程序开发的基本原理、开发方法、关键技术及开发工具进行了比较深入的研究和分析,提炼出了微信小程序开发的一般流程和技术要点。在此基础上,依据零售蔬菜的实际业务需求,遵循所提炼出的开发过程,基于HTML5语言和PHP技术开发了一套跨平台的蔬菜订购微信小程序,可以使卖家和买家通过微信进行沟通并及时完成买卖的操作。系统包含前台和后台子系统,分别面向买家和卖家,买家通过前台子系统浏览、查看蔬菜的简介,通过图文并茂的信息元素进行购买需求的确定,并通过购物车传送给卖家。卖家通过后台子系统可以完成蔬菜上架、下架、简介调整、查看买家的购买需求、库存调整等操作。同时利用PHP开发了购物车与结算子系统,实现自动计算价格、结账和生成订单等功能。 本文提炼出的微信小程序的开发流程适用于各种手机平台,具有普适性,可用于一般的微信小程序开发。所开发的蔬菜买卖微信小程序有实用价值,经过完善后即可正式上线运行。

我要回帖

更多关于 开发微信小程序需要哪些技术 的文章

 

随机推荐