最近使用框架将官网做成了一个小程序并发布上线。
首先感谢作者 开源这个框架,让有更多的可能,仅以此文介绍下框架及总结。
官方文档
自己看着做的，略丑轻喷。😂
是一个跨平台 框架，可用于各种小程序、5、原生应用。
者可以通过 语言 ，一套代码同时运行在以下平台。
百度小程序
字节小程序、飞书小程序
(5)
提供了丰富的组件、接口，者可以轻松地为应用添加平台扩展。
以上摘自官网简介,详细请查看官方文档
以下是鄙人拙见,如有错误欢迎指正。
是版的：裁剪非必须渲染层打包成并通过 框架在小程序上运行的变种框架。
实际上是让将项目运行在小程序上,借用在小程序下搭建一个可运行的模拟环境
那么的缺陷也就很明显了
不少 不支持 核心
很多三方库不能直接使用如果三方库引入了不支持的则无法使用支持的三方库;是可以直接使用的。如工具类、日志打印等。
不少基础组件都需自行实现如、 针对小程序及的组件库
而优点也是很明显的。
将封装好、、、底层部分。者只需关注代码编写及极小的差异化配置即可
维护部分必要三方库针对小程序的适配 如网络请求、;状态管理、、等。者只需要同环境下一样的使用方式即可
封装小程序及让者可调用小程序的组件及-如 、、、等功能
扩展方便-如有需要可联系作者扩展到其它小程序平台。不过感觉没有必要😂
技术栈的者可丝滑的过渡进行小程序
以笔者做完整个项目来看--包括前端、、、、;以及后端数据录入等、、、等相关功能。是能满足绝大多数应用场景的。商用是没有问题的,大家可放心食用。
官网有完整详细的 、、三个平台下环境配置配置文档,此处不详细展开。只着重提一下笔者配置过程遇到的容易出错点
下 环境变量配置-注意全局环境变量配置并且要区分系统以下摘自.
如图出现 则为未配置好造成需在 文件增加 其中改为自己目录 如笔者的完整路径为 则 为 最后执行 保证变量即刻生效。再执行一切正常。
新增
平台下使用要借助工具 ,否则直接在 执行会提示异常。打开然后 到项目目录下,再执行
异常提示 执行正常出处
在模式下如需在中实时预览效果需修改文件夹下的文件。将设置的为本机,且真机调试时保证下,端口一定不能修改。
不能同时调试两个项目或者在项目运行或调试时再次点击运行或调试否则会出现端口占用问题
真机调试时模拟器选择或自定义,避免真机上页面显示异常。
模拟器与真机分辨率不一致如下图
模拟器与真机分辨率一致如下图
笔者使用版本,以下功能总结亦是基于此版本。截止目前最新版本为
笔者是从过来的,相信做过的都被启动的黑屏/白屏困扰过。
因为是加载故在进入程序或切换新页面会先显示小程序的页面待 页面加载出来再渲染到。这个过程有近的时间,这段时间没有内容故显示出白屏/黑屏状态。这个是框架()造成,目前能做的是在做一个效果在一侧做同一种效果。
首先在增加一个背景让旋转圆圈居中,再增加一个旋转圆圈 。
最后在设置即可,其中为承载的容器
可以看到先是一个小程序端的蓝色再是一个端的绿色--故意在端每日一换的彩虹主题色(周四绿色😂)。
差强人意,当然这是简单做一个过渡让人不要以为程序卡住。者可根据实际情况做其它更精美的效果。这里权当抛砖引玉了。
及微信小程序是支持的,遗憾的是笔者时还不支持的。根据最新消息新版本已支持。官方文档-深色模式适配指南
这里介绍下自己实现流程,仅供参考。
首先:根据 微信文档 部分进行 配置。此处不做赘余
其次:通过监听系统主题变化。此处需通过库可进行相应监听。接收到主题变化后再通过获取系统属性中的 通过返回值判断主题。
最后:通过状态管理库或或进行相应主题变更即可。
效果概览动态切换主题
升级了版本尝试了下。框架层可获取系统当前主题。但是没有对应监听---即打开小程序情况下更改系统主题,是无法实时获取当前主题的，故根据自己需求使用。
这块本身是支持的,且也有对应的支持,关键需要找到小程序及页面路径即可。
此处分享一下查找流程。
小程序有个招聘岗位跳转功能。故以此为例。
很好找-直接点击进入小程序详情页,点击更多资料赫然在列。
比较难找的是。后台录入的是端的网页,一般这种网页理论上是有手机端的。然后试着通过微信打开。果不其然弹框直接提示。这不是巧了么这不是。
然后右上角得到一个网页,然后再通过端打开然后点击得到一个如下页面
然后右键拖动到部分。关键代码如下
是不是呼之欲出。还可以看到参数有个应该是类似的东西刚好是网页 部分使用字符串切割获取即可。
最终的 为至此即可跳转页面。
打开其它小程序详情页面
跳转其它小程序如法炮制。关键点得找到这个一般是不会对外公开的。只有找下对应网站的版有没有类似跳转小程序功能可通过查看源码方式进行获取。(如笔者就没有找到跳转对应岗位详情的网页,只找到跳转岗位发布人详情页面,有知道跳转岗位详情的方法万望不吝赐教,感谢！！！)
注意:该方式适用于之前版本。开始分享功能实现更简单,根据自己版本做选择。
提供用于传递分享参数用于点击打开小程序后获取对应参数。
比较重要的是在回调参数返回用于告诉微信需要打开小程序的页面,对路径固定为 固定参数用于告诉打开页面的路由。其它参数则依次拼接其后。如参数拼接模式最后进入页面后可通过获取到对象
其中即为目标路由与中调用一样效果。进入目标路由则可通过其它参数进行相关操作。如分享资讯详情页,点击即可直达对应的详情页面。详情页面拿到请求网络渲染即可。
分享给好友好友点开
如所示笔者做的操作是先进入主页面再二次跳转到目标页面。这里自己业务场景处理即可。
版本升级了分享功能。具体可参考官方文档-分享小程序页面至微信,热乎的。
升级了版本。果然参数传递要简单很多。
分享标题(默认)
分享封面图(默认当前分享页面截图)
指定点击分享后打开路由(默认根布局)
指定传递到路由的参数
小程序有个资讯中心模块,用于展示后台编辑的代码。维护了一套库用于渲染代码。不过天不遂人愿,并不能渲染出来我们后台的。起初以为是的锅，结果我在环境下使用原版也是渲染不出来的。然后我开始自我怀疑了：,但是转念一想。于是我在环境下用结果是完美解析的。那么只有一个😀
于是参考源码借助及库将后台解析成并根据标签转义成端的组件即可。
好在咱们后台就 、、、等为数不多的效果。解析起来工作量也还行,还原度还是不错。
端效果 效果小程序效果
将平台下顶部去掉,因自定义在下无法去掉。--不知道为啥？(有知道的麻烦扫一下知识盲区😂)
于是在下隐藏掉自定义的并且将搜索按钮放在处。其它平台不变。
改变前
改变后
治好了我多年的强迫症😀
5月 正式发布,至此全平台进入状态。想搞得都可以搞起来了。
将扩展到小程序让我们看到了的更多可能,尽管还有诸多不足。但是瑕不掩瑜还是值得大家学习尝试一下的。。
再次感谢作者 的开源精神。
另外:有什么使用有什么问题,可以直接提,作者是住的反馈很及时。给作者点赞👍👍👍
其中 框架层支持及分享参数逻辑优化已在支持。
:
:
:
