星宿UI0.6 wordpress开源小程序微信小程序开发支持QQ端

直到后来看到你恋爱的样子 才知道自己从来没有被你爱过

星宿UI0.6 wordpress开源小程序微信小程序开发支持QQ端

标语

星宿:山有木兮木有枝

唠叨一会

经过国庆大家挺的催更后0.6在更新ui界面的同时也在计划是增加其他的微信公众号引流方式,但是处于安全考虑很多好的思路不敢用在上面;0.6发布后估计枫瑞会消失一段时间,时隔一个月我要去补考科目一了!

特别赞助

TERA, 木可, 庸人自扰, Distance,  宋传焕,  昊森网络

UI指导

ps小欧

更新说明

1.修改缓存方式,每个界面发起请求
2.修复首页 图片显示比例
3.修复新用户分享加载无数据
4.修复搜索页标签无法显示完整
5.金刚区支持多个 支持滑动
6.php焦点新增图片参数
7.分享列表无法打开
8.UI整体细节提升
9.修复QQ端激励视频
10.搜索页 标签出现滚动条
11.新增第一次打开 引导添加到我的小程序
12.优化深色模式

界面截图

星宿UI0.6 wordpress开源小程序微信小程序开发支持QQ端

体验预览

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 1

wordpress安装

1.安装wordpress博客系统,过程请百度

2.设置https

宝塔后台可以申请SSL证书,且实用比较方便
如果自有SSL证数如果配置:首先下载你的SSL证书,右键记事本打开(推举hbuilder x)key内容复制到密钥(KEY)中。证书(PEM格式)是域名证书.crt + 根证书(root_bundle).crt,先打开域名证书crt格式的复制到宝塔中随后空格一行后面在粘贴root_bundle.crt就可以了

3.设置伪静态

静态设置选择wordpress,保存即可

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 2

源码下载

关注枫瑞博客网微信公众号回复:星宿UI

开发工具

1.下载hbuilder x,微信小程序,QQ小程序等开发工具

2.hbuilder 运行环境配置

windos和mac设置操作会有不同;一下为mac为例安装后打开hbuilder 左上角点击偏好设置设置—–运行配置—-配置相对于的开发工具路径

星宿UI0.6 wordpress开源小程序微信小程序开发支持QQ端

3.点击运行—-运行小程序模拟器—-微信小程序开发者工具

如果启动错误,一般是微信开发者工具没有登入,或者工具没有打开安全端口(设置-安全设置-安全)

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 3

4.打开manifest.json修改

打开manifest.json文件找到微信/QQ小程序配置将appid修改成你的或者为空,不然无法运行小程序

小程序源码

以上步骤操作结束后;点击运行—-运行小程序模拟器—-微信小程序开发者工具可以运行到小程序开发者工具中

1.域名配置在components/api.js中修改

 export const API = 'https://www.frbkw.com/';

2.关于自定义请求的php文件,可随意上到博客后台任何目录和自定义名字只要能和api文件中的Getresources对应起来就好

export const Getresources = 'https://www.frbkw.com/wp-content/plugins/xingsu.php';

3.注意调试的时候大家需要点击微信开发工具右上角详情
****不验证https合法域名 这个不能打勾
****调试基础库不能低于2.11

3.QQ端出现 项目配置文件出错

这个是因为qq小程序不支持深色模式导致出新错误;需要在pages.json文件中将颜色变量替换成指定颜色

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 4

4.如果微信端出现缺少theme.json文件或者项目配置文件出错

请手动将theme.json复制到unpackage/dist/builder/mp-weixin/目录xia

php文件说明

1.php文件可以上传到任意目录 只要小程序里面的地址可以正常访问到就可以了

2.关注php不需要的文件注释;字段只有单个可以注释如果有多个就留空

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 5

wordpress设置

1.按上面说的配置伪静态

2.后台—-设置—-固定链接—–设置成%post_id%

3.分类目录特色图片在php文件中配置

4.文章特色图片需要在主题的funtions文件中添加

add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 );
function my_rest_prepare_post( $data, $post, $request ) {
$_data = $data->data;
if ( has_post_thumbnail() ) {
$thumbnail_id = get_post_thumbnail_id( $_data['id'] );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );
$thumbnailurl = $thumbnail[0];
$featuredimgurl = $featuredimg[0];
if( ! empty($thumbnailurl)){
$_data['thumbnailurl'] = $thumbnailurl;
}
}else{
$_data['thumbnailurl'] = null;
}
$data->data = $_data;
return $data;
}

小程序后台配置

1.小程序设置关联微信公众号

公众号关注组件。当用户扫小程序码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内,前往小程序后台,在“设置”->“关注公众号”中设置要展示的公众号。注:设置的公众号需与小程序主体一致

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 6

2.微信端客服如何回复消息

首先需要在微信小程序后台配置客服微信号

网页客服回复消息:https://mpkf.weixin.qq.com/

微信小程序回复消息

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 7

其他相关问题

1.在之前有成员反映小程序图片有点模糊但是自己上传的图片质量都是可以高清?这情况可能是图床那边压缩过分了自己在图床设置了某些参数,另外一个就是MDZZ博客后台自己设置了略缩图,在博客后台—–设置—-媒体中取消略缩图(如何分辨是不是给裁剪了,在控制台插件图片路径后面是不是多了一些参数比如150*150,300*300等)

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 8

视频教程

https://v.qq.com/x/page/e3159zzf0fn.html

相关阅读

星宿UI0.5:微信小程序深色模式适配

真uni-app框架微信小程序深色模式配置教程

源码下载

关注枫瑞博客微信公众号回复“星宿UI”下载

如果您喜欢该作品请赞助一元买个洗面奶

星宿UI0.6  wordpress开源小程序微信小程序开发支持QQ端 9

 

0
分享到:

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
掉头发中!小程序慢更新
没有账号? 忘记密码?
var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?18b345cf548f88d90a655d9ce1fa4140"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();