本站同款APP部署详解之RuleAPP-星泽V社

星泽
2022-05-03 / 0 评论 / 339 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年05月03日,已超过56天没有更新,若内容或图片失效,请留言反馈。

项目介绍

前端APP模板我采用了不暇大佬开发的 RuleApp ,这是一款功能全面,用户交互良好,数据本地缓存,集成邮箱验证,在线投稿,(内置Mardown编辑器),快捷评论的的博客资讯APP,同时兼容H5和微信小程序,最重要的——开源项目。

基础功能

1.基于标签,分类,搜索词,文章字段,随机为一体的数据查询调用
2.集成了基于邮箱验证的登录注册,邮箱修改
3.集成了在线评论,在线投稿,编辑文章等用户操作模块
4.集成了用户签到,打赏,收藏,点赞等基本交互模块
5.整合积分商城,付费阅读,在线充值(微信和支付宝),提现审核,简易后台
6.本地列表数据缓存,更优秀的加载体验。
7.兼容安卓苹果APP,H5网页,微信小程序等所有小程序平台,更多支持正在开发...

HbuilderX

1.uniapp的主要开发软件是HbuilderX,直接在官方的这里下载: 传送门
下载的时候,务必选择“APP开发版”,大概需要几百M,下载完之后,请第一时间注册开发者账号,完成登录之后,才可以进行傻瓜式的云打包。
l2q99d8u.png
2.完成HbuilderX安装后,请前往官方的插件商城,下载一些必须的插件: 传送门
其实就只需要如下两个插件就好,安装的过程也很傻瓜式,直接点击按钮就行。
l2q9dca9.png
l2q9djci.png
l2q9dp2e.png

安装部署

APP源码项目上面已经写了,自行下载。

RuleAPP需要进行修改的配置文件主要有三个,其中两个是uniapp自带的,分别是 manifest.jsonpages.json ,还有一个则是RuleAPP本身的全局配置文件 /utils/api.js
根据下图来看源码目录的所有信息。
l2q9hctm.png

从/utils/api.js开始
RuleAPP的轮播图,推荐文章,和工具页面的软件工具,都是基于typecho标签的文章调用,并且在 /utils/api.js 中进行定义。而这个文件定义了整个APP的所有配置和接口的定义,打开后可以看到如下的页面。
l2q9i92y.png
先从开头的四个字段开始,它们分别如下:

var API_URL = 'https://api.ruletree.club/';   //API地址
var WEB_URL = 'https://www.ruletree.club/';   //Typecho网站地址
var GroupUrl = 'https://jq.qq.com/?_wv=1027&k=XX5SFavQ';   //群聊地址
var GithubUrl = 'https://github.com/buxia97/RuleApp';   //github地址

除了前两个比较重要外,剩下的两个都是可以自行去除或者DIY。比如,群聊地址的调用对应如下这里。
l2q9ks8q.png
而github地址只有一个页面调用。
l2q9l3qj.png
想必这里已经看出来了,通过HbuliderX将RuleAPP运行到内置浏览器后,就可以看到访问页面的路径。通过这些路径就可以找到对应的页面,就可以开始自己修改。但是,这需要有网页知识和vue的基础才行。

跳过简单的部分,来看看如下的配置
l2q9mbjc.png

这里提到了无数次的mid,这个就是typecho分类和标签的id,因为typecho的分类和标签都在同一个表,也就是typecho_metas。其中就可以看到标签的mid。所以,其实这里,就是根据标签或者分类的mid,调用标签或者分类下的所有文章。
l2q9org3.png
而文章发布的时候,是会让你选择分类或者输入标签的,比如 设置一个“幻灯”的标签作为轮播图数据来源,只要给文章的标签设置“幻灯”,然后去typecho_metas表找到“幻灯”的mid,填入api.js,那么设置了“幻灯”这个标签的文章都会被获取图片,显示在app的首页轮播中。
l2q9p7cl.png
l2q9qwq1.png

图片上传方法的修改

在apijs中找到upload方法,可以看到如下,我默认开启的cos上传,但是还提供了其它上传方法,分别是本地上传,oss上传,远程ftp上传,这里需要根据自己的需求进行修改,比如大多数人都是用本地上传,那就要将上传方法切换为本地的。
l2q9s4sa.png

manifest.json说明

对于RuleAPP而言,这个文件负责配置第三方登录,微信支付(对的,有且只有微信支付在这里配置),图标和启动图,还有打包相关。图标和启动图想必已经很直观了,这里就只说几个注意点。
1.第三方登录
这里有个注意点就是,用的就开,用不上的别开,开了打包肯定报错。QQ微博微信这三个的,都去各自的开发者平台申请appid等信息,每个APP都是不一样的,具体的各自的开发者平台都有教程。
l2q9uoow.png
2.微信支付
请务必切记,支付宝不需要在这里进行配置!!!只有微信!!!只有微信!!!!
Ruleapp需要配置的支付就只有微信,其它的不需要开启,当然如果不用的话也不要开。如果还想要支持其它的支付,就只有自行二次开发了。
l2q9veyi.png
3.网页唤醒APP
找到如下图所示的位置,设置APP的UrlSchemes,这里自己定义一个英文的名称就好(小写),千万不要和我的一样,不然可能会直接在你的网页唤醒规则之树的APP(不过你免费打广告我也乐意)
l2q9w6vv.png
设置完成后,比如我设置的名称是ruleapp,那么在网页中,就可以通过超链接的或者js跳转的形式直接点击打开,比如如下代码:

<a href="ruleapp://">打开app</a>

而这里,我提供了两个参数,一个是快捷登录(配合会员中心项目),一个是打开app文章阅读。

ruleapp://?scan=快捷登录码
ruleapp://?info=文章ID

无论是在网页上采用a标签或者js自动跳转,只要用户安装了app,都可以被唤醒。
l2q9xjun.png
推荐使用RuleUser项目,已经集成相关功能了,这个后面有需要我再发,本站演示地址:https://www.52xzv.cn/user
4.首页数据推荐,专题等
用管理员账户登录APP,找到管理员中心,打开内容管理,选择已发布文章,就可以看到文章的推荐。然后回到内容管理,打开标签分类,就可以看到分类和标签的推荐,还可以设置缩略图。这里对应的就是首页的专题和推荐文章。
l2qa01qb.png

l2q9zmtv.png

pages.json

这个文件定义了所有可以打开的页面,如果没有在里面定义,页面就无法开启。
pages.json的底部定义了使用H5编译后打开的首页名称,和底部的四个选项卡图片和文字,可以根据自己的需求进行修改
l2qa0u6n.png

APP在线更新

在之前的教程里,安装完后端接口时,会提到一个apiResult.php文件,将这个文件放进typecho网站所在的目录,api.js里配置完WEB_URL后,就可以通过apiResult.php文件管理app的用户更新和横幅广告。

l2qa1jb4.png

版本的信息对应manifest.json文件中的版本设置,其实就是,你的最新版是什么信息,就在apiResult.php填入什么信息,程序会根据版本码判断,版本码低于最新的应用都会提示更新。manifest.json里的版本号就是版本码。

typecho模板自定义标签的兼容

一般来说,typecho的模板很多都会带一些自定义标签,就比如现在用的人很多的joe,以及我现在用的小灯泡模板。为了满足功能的需要,这些模板一般都会加自定义的,也就是markdown无法解析的标签对,所以如果遇到这种情况,就需要在RuleAPP里匹配模板的解析机制。

这很难吗?答案是不难,直接复制粘贴而已,因为模板只要有自定义标签,那就肯定有标签的解析方法,只要模板是开源的就可以找到,而且最主要的是,php的正则表达式和js没啥区别。以我的小灯泡模板为例,在/spimes/core/theme.php中,可以很清楚的看到如下代码:
l2qa2vvy.png
这里就是模板对自定义标签的解析,只要不是代码加密的模板肯定可以找到!

首先,这是我下图的分析:
l2qa36v3.png

text = text.replace(/\[button\ a=(.*?)\](.*?)\[\/button\]/sm,`<div class="btn_nt"><a class="btns" target="_blank" href="//$1">$2</a></div>`);

js的replace方法负责替换,第一个是正则表达式,直接复制PHP的就行,第二个是html代码,有网页开发基础就可以自己定义样式和内容。这段自定义标签有几个参数,用在那里,实际上每个typecho模板都肯定会写的,要做的就是复制粘贴,然后自己定义一下css。就这样,模板有几个自定义标签,就加个几行,就可以完成全部的解析,前提是找到你使用模板的标签解析方法,一般顺着function.php就可以找到。

小程序端编译

RuleAPP支持编译为微信小程序,QQ小程序,并在理论上支持所有小程序平台(如果编译出现问题,可以来群里反馈)。在编译为小程序的时候,由于图片大小和一些兼容性的限制,将部分本地图片引用改为远程。
如首页专题的引用,可以将如下图所示的图片改为远程地址:
l2qa4pi4.png

APP的快捷更新

最新的稳定版本请一定要在uniapp商城下载: 传送门
l2qa6qoi.png
更新前,需要确定manifest.json中的版本信息,因为更新的版本肯定要大于现在的版本,这样才可以配合后面的在线更新
l2qa762j.png

然后,关闭HBuilderX(尽量确认它没打开),首先备份之前的本地文件放在另一个目录,将新的zip解压,覆盖之前的项目目录全部文件。然后再从备份的目录里,将unpackage文件夹和manifest.json文件覆盖回来,这个非常重要。如果之前修改过其它的文件,或者改了样式,那这里只能把修改过的文件和样式一个个的对比放进去。
上面这个步骤务必关闭HBuilderX,弄完了再打开
l2qa7pyw.png

打开HBuilderX,让项目在内置浏览器运行,确认无误后就可以打包上传。最后就是编辑typecho网站根目录里的apiResult.php,修改里面的版本号和manifest.json完全一致,代表服务器上已经放置最新的版本。这样,所有的用户都会收到APP更新提醒。
如何打包APP请参考: uniapp从基本配置到打包发布,详细流程

l2qa855v.png

最后,有不明白的地方可以加群一起交流:695948781

本文来源于星泽V社,未经允许禁止转载,原文链接: https://www.52xzv.cn/archives/551.html

本文共 2585 个字数,平均阅读时长 ≈ 7分钟

评论 (0)

取消