技术松鼠公告

QQ小程序发布啦!欢迎使用



朕已阅 去瞧瞧

星宿UI-WordPress开源uni-app小程序

641次阅读
没有评论

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

一、程序介绍

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

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

星宿UI-WordPress开源uni-app小程序

二、使用教程

1、视频教程

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

2、图文教程

最初参考的是淘小欣的CSDN博客(需follow,才能阅读全文)

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

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

星宿UI-WordPress开源uni-app小程序

该文更新于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 内的全部字段(注意编码)

星宿UI-WordPress开源uni-app小程序

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

星宿UI-WordPress开源uni-app小程序

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

星宿UI-WordPress开源uni-app小程序

2.1.2 fengrui-xingshu插件

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

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

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

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

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

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

星宿UI-WordPress开源uni-app小程序

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

星宿UI-WordPress开源uni-app小程序

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

星宿UI-WordPress开源uni-app小程序

2.2 修改代码

工具:HBuilder X (APP开发版)和 微信开发者工具

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

星宿UI-WordPress开源uni-app小程序

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

星宿UI-WordPress开源uni-app小程序

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

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

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

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

2.3 开发调试

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

星宿UI-WordPress开源uni-app小程序

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

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

文章分类的路径是:pages/category/categ_lisst.html?catepos=分类ID (我确实没多写s 星宿UI-WordPress开源uni-app小程序 )

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

星宿UI-WordPress开源uni-app小程序

3、注意事项

3.1 格子流量主

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

3.2 激励视频阅读记录

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

3.3 图片无法显示问题

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

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

三、参考资料

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

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






文件名称:星宿UI_v1.2.1
适用版本:WordPress / uni-app
更新日期:2021-06-08
文件大小:4.91M

点击下载

3
松鼠小
版权声明:本站原创文章,由松鼠小2021-07-02发表,共计1910字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
隐藏
变装