项目介绍

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

  • 项目地址： 点击进入
  • github项目地址： 点击进入
  • 演示： https://www.52xzv.cn/archives/299.html

基础功能

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

HbuilderX

1.uniapp的主要开发软件是HbuilderX，直接在官方的这里下载： 传送门
下载的时候，务必选择“APP开发版”，大概需要几百M，下载完之后，请第一时间注册开发者账号，完成登录之后，才可以进行傻瓜式的云打包。
634258cd85887.png

2.完成HbuilderX安装后，请前往官方的插件商城，下载一些必须的插件： 传送门
其实就只需要如下两个插件就好，安装的过程也很傻瓜式，直接点击按钮就行。
63425906e0821.png

63425914d5e30.png

6342592270023.png

安装部署

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

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

从/utils/api.js开始
RuleAPP的轮播图，推荐文章，和工具页面的软件工具，都是基于typecho标签的文章调用，并且在 /utils/api.js 中进行定义。而这个文件定义了整个APP的所有配置和接口的定义，打开后可以看到如下的页面。
6342593cde73e.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。比如，群聊地址的调用对应如下这里。
6342594b13587.png

而github地址只有一个页面调用。
63425956ec7c9.png

想必这里已经看出来了，通过HbuliderX将RuleAPP运行到内置浏览器后，就可以看到访问页面的路径。通过这些路径就可以找到对应的页面，就可以开始自己修改。但是，这需要有网页知识和vue的基础才行。

跳过简单的部分，来看看如下的配置
63425963d5c87.png

这里提到了无数次的mid，这个就是typecho分类和标签的id，因为typecho的分类和标签都在同一个表，也就是typecho_metas。其中就可以看到标签的mid。所以，其实这里，就是根据标签或者分类的mid，调用标签或者分类下的所有文章。
63425971096c2.png

而文章发布的时候，是会让你选择分类或者输入标签的，比如 设置一个“幻灯”的标签作为轮播图数据来源，只要给文章的标签设置“幻灯”，然后去typecho_metas表找到“幻灯”的mid，填入api.js，那么设置了“幻灯”这个标签的文章都会被获取图片，显示在app的首页轮播中。
6342597e00b5b.png

634259896c545.png

图片上传方法的修改

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

manifest.json说明

对于RuleAPP而言，这个文件负责配置第三方登录，微信支付（对的，有且只有微信支付在这里配置），图标和启动图，还有打包相关。图标和启动图想必已经很直观了，这里就只说几个注意点。
1.第三方登录
这里有个注意点就是，用的就开，用不上的别开，开了打包肯定报错。QQ微博微信这三个的，都去各自的开发者平台申请appid等信息，每个APP都是不一样的，具体的各自的开发者平台都有教程。
634259a23b53a.png

2.微信支付
请务必切记，支付宝不需要在这里进行配置！！！只有微信！！！只有微信！！！！
Ruleapp需要配置的支付就只有微信，其它的不需要开启，当然如果不用的话也不要开。如果还想要支持其它的支付，就只有自行二次开发了。
634259b06708b.png

3.网页唤醒APP
找到如下图所示的位置，设置APP的UrlSchemes，这里自己定义一个英文的名称就好（小写），千万不要和我的一样，不然可能会直接在你的网页唤醒规则之树的APP（不过你免费打广告我也乐意）
634259bde5d5f.png

设置完成后，比如我设置的名称是ruleapp，那么在网页中，就可以通过超链接的或者js跳转的形式直接点击打开，比如如下代码：

打开app

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

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

无论是在网页上采用a标签或者js自动跳转，只要用户安装了app，都可以被唤醒。
634259cba2d50.png

推荐使用RuleUser项目，已经集成相关功能了，这个后面有需要我再发，本站演示地址：https://www.52xzv.cn/user
4.首页数据推荐，专题等
用管理员账户登录APP，找到管理员中心，打开内容管理，选择已发布文章，就可以看到文章的推荐。然后回到内容管理，打开标签分类，就可以看到分类和标签的推荐，还可以设置缩略图。这里对应的就是首页的专题和推荐文章。
634259d7669e8.png

634259e54b5b2.png

pages.json

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

APP在线更新

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

634259fe5b38b.png

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

typecho模板自定义标签的兼容

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

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

这里就是模板对自定义标签的解析，只要不是代码加密的模板肯定可以找到！

首先，这是我下图的分析：
63425a16b460e.png

text = text.replace(/\[button\ a=(.*?)\](.*?)\[\/button\]/sm,`
$2
`);

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

小程序端编译

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

APP的快捷更新

最新的稳定版本请一定要在uniapp商城下载： 传送门
63425a368b749.png

更新前，需要确定manifest.json中的版本信息，因为更新的版本肯定要大于现在的版本，这样才可以配合后面的在线更新
63425a43bd5dd.png

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

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

63425a6681352.png

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

本文来自投稿，不代表本站立场，如若转载，请注明出处：
最后修改：2023 年 08 月 27 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏