发现一款极棒的开源小程序系统：星宿UI V1.2 。让你能够开发一次，多端覆盖。

一、程序介绍

星宿UI V1.2 使用 Vue.js 开发，能够实现开发一次，多端覆盖。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

二、使用教程

1、视频教程

https://www.bilibili.com/video/BV13g411d7ud/

https://www.bilibili.com/video/BV1Co4y1C7QP

2、图文教程

最初参考的是淘小欣的CSDN博客（需follow，才能阅读全文）

https://blog.csdn.net/weixin_44621343/article/details/113484212

恰好第二张图在CSDN不显示，直到找到他的微信推送，才发现是我的微信好友。

该文更新于2021-01-31，而最新版v1.2.1发布于2021-06-08。

我的教程较为简洁，并更加结合实际需求，这里以微信小程序为例。

购买域名，建立WordPress网站，新建小程序账号，这里不赘述。

详情参考：https://www.jishusongshu.com/mobile-application/weixin-miniprogram/

这里从代码插件讲起：代码用于发布小程序，插件用于小程序与网站的通信连接。

2.1 安装WP插件

有两个插件需要安装：一个是pods，另一个是fengrui-xingshu。

2.1.1 pods插件

安装好插件后，【pods】-【组件】-【Migrate: Packages】-启用

Migrate: Packages 导入 Migrate: Packages.html 内的全部字段（注意编码）

功能选项卡就会多出一个【基本配置】。

每篇文章底部也会多出设置字段

2.1.2 fengrui-xingshu插件

星宿读音应当为Xīng xiù，但作者喜欢读“宿舍”的“宿”，也当为su。

但插件命名为xingshu，代码也是如此，但看上面的banner又写对了—_—

故要改全都改，否则出错，最好不要动它。

插件安装好后，需要自己去修改插件源码来达到设置效果。

fengrui-xingshu.php是索引特色图片和标题的函数。

fengrui-dstrict.php是第二栏图标及路径设置。

fengrui-friend.php是小程序友情链接

fengrui-watch.php内的是焦点文章设置。

2.2 修改代码

工具：HBuilder X （APP开发版）和 微信开发者工具

https://www.dcloud.io/hbuilderx.html

APPID什么的配置好了，就运行看看效果。

觉得可以就发布，生成unpackage\dist\build\mp-weixin小程序文件夹。

我习惯在微信开发者工具新建一个项目，然后直接文件覆盖过去，再编辑。

发布审核，注意评论是否有用（QQ酱茄小程序被打回就是因为评论功能无效）。

还有是否有评论审核功能（微信酱茄小程序就是因此功能未通过）。

2.3 开发调试

想要复制页面路径，需先在公众号编辑文章内，添加小程序中获取。

文章的路径是：pages/data/data.html?id=文章ID

下载页路径是：pages/download/download-data.html?id=文章ID

文章分类的路径是：pages/category/categ_lisst.html?catepos=分类ID (我确实没多写s  )

注意：实际使用的路径需要去掉.html

3、注意事项

3.1 格子流量主

微信小程序后台流量主有通知6月3日正式下架格子，目前格子替换成原生广告，大佬们可以申请一个原生广告选择格子模版写在wordpress 后台基本配置里面的《微信格子广告》里面(固定宽度，不支持适配屏幕，很**)

3.2 激励视频阅读记录

新增每天第一天阅读文章需要激励视频，此后一天内可免费阅读，该功能原由大佬提议以及某厂驳回有感而发，在wordpress 后台基本配置中可以选择是否激励视频阅读记录或者每次阅读文章都需要广告，不过还是建议审核期间关闭激励视频广告

3.3 图片无法显示问题

1、检查是否设置安全域名，图片需要在安全域名内。

2、标题是否有特殊字符，如“：| （）”和空格等，导致图片的alt属性字符解析超出。

三、参考资料

1、枫瑞博客 – 星宿UI V1.2 ：wordpress开源资源下载小程序，新增插画UI细节提升

2、淘小欣 – 手把手教你搭建一个QQ微信小程序，小白也能学得会！

3、枫瑞博客 – 星宿UI V2.2 修复若干判断逻辑，移除评论邮箱

星宿UI_v2.5.2 | WordPress / uni-app

下载

关注

相关推荐

USB摄像头：电脑副屏扩展神器

一个木函-多功能效率工具箱

文件闪传-快速传输文件助手

图凌-高清图片壁纸分享平台

番茄免费小说-边看边挣零花钱