Wordpress网站转APP和小程序
本项目旨在将Wordpress网站转成原生的APP和小程序项目,而不是简单粗暴的H5套用。同时,集成了一些会员登录和会员卡的功能,避免了与移动端浏览器相同的用户体验,极大提高了提高苹果应用商店和微信小程序、百度智能小程序的审核通过率。
之前已经预报过,本项目即将合并到“通版商城V2”这个项目中,后续不会有大的版本更新了。“通版商城V2”提供强大的智能建站功能,管理后台功能丰富,同样支持APP和微信、支付宝、百度等小程序自动生成,将于近期上传到github上,之前已经有一些人拿到了项目源代码。
1 在线预览
2 项目概况
2.1 项目主页
-
项目的设置和使用说明发布在这里:需要注册才能查看,使用手机号码登录即可。
https://yanyubao.tseo.cn/Supplier/WordpressMgr/index/setting_type/source_code.html
-
主页镜像:定期同步项目主页内容,更新略有延迟
2.2 源代码下载
-
直接下载压缩包
https://yanyubao.tseo.cn/download/wordpress-plugin/yanyubao-wp-to-app.zip
-
最新的代码发布在Github上,喜欢记得点个小星星!
-
考虑到Github在国内访问速度较慢,也可以通过国内的Gitee查看。
-
因为是uniapp项目,所以也直接直接在uniapp网站上下载。
2.3 功能扩展:Wordpress企业211主题
-
产品介绍和客户案例
-
延誉宝企业211主题使用帮助
2.4 问题与交流
使用上的问题和疑问,请用微信扫码查看其他开发者的提问和回复记录,也可以在文章末尾写留言。
3 常用路径设置说明
如果你不会代码开发,那么在后台设置路径和挂接这些路径链接,即可以将你的WordPress网站组织成个性化的,功能丰富的小程序或者手机APP,APP完全符合苹果应用商店(App Store)的上架要求。
设置路径:SaaS云后台>>智能建站>>网站转APP和小程序>>基础信息 【传送门】
3.1 小程序内链接设置
-
主要跳转链接:可直接挂在底部导航栏:
-
首页 /pages/index/index
-
个人中心 /pages/index/usercenter
-
分类列表和标签列表 /pages/index/topic
-
关于页面 /pages/about/about
-
-
跳转文章列表:支持以下参数:
-
/pages/wordpress/list
不带任何参数,返回所有的文章列表,按照最后更新时间排序。
-
/pages/wordpress/list?categorySlug=ebiz
显示分类别名为“ebiz”的文章列表,同时自动读取分类的名称和图片。
-
/pages/wordpress/list?categoryID=1234
categoryID为分类ID,可以在Wordpress网站后台找到。
-
/pages/wordpress/list?search=延誉宝
则按照关键词“延誉宝”搜素指定的文章并形成列表,需要做URL编码。
-
/pages/wordpress/list?tag_id=167&tag_name=延誉宝
显示内容中包含标签ID为167的文章列表,多个标签ID用半角逗号分开;同时将标签名称显示为“延誉宝”。
-
/pages/wordpress/list?action=my_favorite
显示我的收藏。
-
/pages/wordpress/list?action=my_like
显示我的点赞。
-
可以(1)追加参数“categoryName=文章分类”指定显示的文章分类名称;(2)追加参数 “categorySrc=http开头的图片网址”指定文章列表上方显示的头部图片。
-
其他重要路径链接
-
跳转文章详情
-
/pages/wordpress/detail?id=1234
id为文章ID,可以在Wordpress网站后台找到。
可以直接参数参数one_article=1,不显示相关的文章列表。
-
-
跳转页面详情(新)
-
/pages/wordpress/detail?id=1234&is_page=1&page_no_comment=1
id为页面ID,可以在Wordpress网站后台找到。 is_page=1为必填参数,省略会按照文章查询而得不到查询结果。 page_no_comment为可选参数,如果设置了且值等于1,则页面显示评论列表和发表评论的功能。 备注:如果在服务器后台关闭了整个项目的评论功能,此参数(page_no_comment=1)也无法打开。
-
-
跳转页面详情(旧)
- /pages/wordpress/page?id=1234
id为页面ID,可以在Wordpress网站后台找到。
- /pages/wordpress/page?id=1234
-
个人资料页面(有退出登录的按钮)
- /pages/user/userinfo
可以修改个人资料,也可以退出登录
- /pages/user/userinfo
-
修改账号和密码
- /pages/user/usersetting?account=1
可以从个人资料页面跳转过来,也可以直接挂接。
- /pages/user/usersetting?account=1
-
修改昵称
- /pages/user/usersetting?nickname=1
可以从个人资料页面跳转过来,也可以直接挂接。
- /pages/user/usersetting?nickname=1
-
修改手机号
- /pages/user/usersetting?mobile=1
可以从个人资料页面跳转过来,也可以直接挂接。
- /pages/user/usersetting?mobile=1
-
“关于”页面
- switchTab pages/about/about
需要增加 switchTab,没有其他特殊要求。
- switchTab pages/about/about
-
自定义页面 【设置选项】
- 入口01: /pages/welcome_page/welcome_page?scene=1234@4321@cms
1234为CMS的文章ID,4321为推荐者的userid,可以设置为0,cms为平台标志,支持cms和pic两个值。
- 入口02: /pages/welcome_page/welcome_page?parentid=4321&data_url=https%3A%2F%2Fyanyubao.tseo.cn%2Fopenapi%2FTestData%2Fwelcome_data
parentid为推荐者的userid,data_url为获取的要显示的内容。
- 入口01: /pages/welcome_page/welcome_page?scene=1234@4321@cms
-
万能表单 【设置选项】
- 支持对万能表单和文章自定义属性的挂接, 点击设置选型查看详情。
- CMS万能表单:/pages/publish/publish_write?form_type=2&token=abcdefg&formid=1234
token为CMS控制台的项目token,设置路径为: 系统设置 > 全局配置选项 >商城头条token, 【 点击这里设置】,formid为CMS控制台的表单ID。
小工具和小游戏
-
简约时钟 /pages/tools/clock
-
计算器 /pages/tools/calculator
-
掷骰子 /pages/tools/dice
-
扫雷 /pages/tools/mine_clearing
-
拼图 /pages/tools/puzzle (内测版)
-
涂鸦 /pages/tools/graffiti (微信小程序中正常,H5和APP中待验证)
3.2 Tab页面和非Tab页面跳转
-
如果页面被tabBar包含,那么跳转的时候,需要指定,具体格式为:
switchTab [pagepath]
用空格分开,switchTab跳转的页面,不能带任何多余的参数,即不可以出现“?”及其后面的内容。
例如:跳转到用户中心的链接,可以设置为 switchTab /pages/index/usercenter
例如:跳转到关于页面的链接,可以设置为 switchTab pages/about/about
-
如果页面没有被tabBar包含,那么跳转的时候,需要指定,具体格式为:
navigateTo [pagepath]
用空格分开,navigateTo跳转的页面,可以带参数,参数放在“?”后面。
3.3 跳转到H5页面链接设置
-
跳转到H5页面,直接填写https://开头的网址,需要说明的是,对应的域名必须是在小程序登记的业务域名中,否则无法显示页面。
http链接中支持的变量有:%oneclicklogin%, %ensellerid%, %wxa_appid%, %wxa_openid%,具体说明如下:
- %oneclicklogin%一键登录获取用户信息参数,
- %ensellerid%商户编码,
- %wxa_appid%小程序appid,
- %wxa_openid%微信公众号粉丝openid。
-
可以跳转到H5的具体的应用
-
嵌入H5网页的时候,如果页面内设置了头部导航栏,会与小程序默认的导航栏重复,影响页面美观。
在延誉宝系统的H5页面中,我们都做了自动判断,如果被小程序中引用,会自动隐藏H5的导航栏;如果是在APP中引用延誉宝的H5,请在页面网址中增加参数“hidden_nav_header_h5=1”以达到隐藏的目的。
-
跳转H5网页默认方式为“navigateTo”,即小程序的左上角会显示返回的箭头图标;可以指定使用“redirectTo”跳转,跳转后左上角显示的是小房子图标,用于快速回到首页。
- 对于H5页面内需要反复跳转的网页应用,建议使用redirectTo跳转,以避免用户反复点击返回键产生疑惑。
- 设置方式:在H5网页的末尾添加“#redirectTo”。
- 支持“redirectTo”的跳转设置为:
3.4 跳转到其他小程序链接设置
-
跳转到其他小程序,使用填写以下格式:
miniprogram [url] [appid] [pagepath] [extraData]
用空格分开,具体的参数含义为:
- [url]替换为网址,[appid]替换为要跳转的小程序,
- [pagepath]替换为小程序的路径,可以包含参数,如 /pages/detail/detail?id=1577
- [extraData]为模板小程序应用级别的参数(App.onLaunch,App.onShow中获取),如 {"sellerid":"abcdef","userid":"1234"},内容中不能留空格,变量名称和变量值必须用双引号。
-
在APP中唤起微信小程序,设置相同,会识别APP环境,唤起微信并自动打开小程序和对应的页面;需要将appid换成小程序账号(gh_开头的),同时extraData参数不会被使用。
-
百度小程序中的相互跳转,设置相同,需要将appid换成百度智能小程序的app key,而不是填几个数字的appid。
-
小程序官方平台最新的升级,要求跳转其他小程序需要先申明要跳转的小程序ID,所以这里的appid,需要在发布小程序新版本的时候添加,登录延誉宝CMS后的设置路径为:(已经无此限制)项目设置 >>小程序版本控制
3.5 拨打电话
-
如果需要拨打电话,请按照以下格式填写:
tel:[phone_number]
- 举例 “tel:13812345678”。
4 二次开发文档
如果你会简单的代码开发,最好了解一点微信小程序的开发工具,那么,接下来的文档完全可以简单读懂。
4.1 源代码:自定义开发和重新编译
源代码的编译和二次开发,在uniapp环境操作,具体的步骤如下:
- 下载项目源代码:
通过uniapp网站或github或延誉服务器下载,建议通过github下载最新版本的源代码。
-
在HBuilder X中打开项目。
-
修改配置:
- 【必改】打开项目根目录下的 abot_data.js,如下图所示:
- 修改 default_sellerid 为自己的延誉宝商户编号;
- 修改xiaochengxu_appid为自己的小程序appid;
- 修改current_platform为当前要发布的平台名称,可以设置的值有: app, h5, mp-weixin, mp-alipay, mp-baidu。
-
【选改】在项目根目录下,打开pages.json,
- 找到 navigationBarTitleText 将值改为自己的网站名称,还可以自定义标题文字的颜色和顶部导航的背景色。
备注:微信小程序、百度智能小程序、支付宝小程序对应的appid各不相同,请不要填错了。
- 通过 HBuilder X将项目导入到不同的小程序开发环境中编译并提交发布。
4.2 WordPress网站中如何设置?
建议在Wordpress网站中安装我们的插件,可以提供以下丰富的功能扩展:
- 自定义内容分类的图标、简介。
- 自定义每篇文章在文章列表中丰富的展示形式,包括小图片形式和横幅图片形式等。
- 自动生成文章分享的二维码或者小程序码海报。
- 丰富的百度小程序和微信小程序SEO优化功能。
安装WordPress插件的操作步骤如下:
-
下载Wordpress插件
包括“WP转APP和小程序”和“WP-PostViews”两个插件,并在后台启用,如下图所示:
-
下载插件“WP转APP和小程序”:下载地址见本文第一部分。
-
下载插件“WP-PostViews”:https://yanyubao.tseo.cn/download/wordpress-plugin/wp-postviews.zip
-
管理WordPress缓存
-
查看缓存空间大小: https://yanyubao.tseo.cn/openapi/Wordpress/restapi_cache_list_size?sellerid=pNJNyxkkP
-
删除所有缓存: https://yanyubao.tseo.cn/openapi/Wordpress/restapi_cache_list_clear?sellerid=pNJNyxkkP
-
删除指定缓存(url): https://yanyubao.tseo.cn/openapi/Wordpress/restapi_cache_list_clear?sellerid=pNJNyxkkP&cacheurl={{完整的WP网址}} 其中cacheurl为对应的实际请求网址,举例:
-
删除指定缓存(md5): https://yanyubao.tseo.cn/openapi/Wordpress/restapi_cache_list_clear?sellerid=pNJNyxkkP&cacheidmd5={{WP网址的MD5值}} 其中cacheidmd5为对应的实际请求网址的md5字符串。
-
- 在Wordpress后台的路径“设置>>网站转APP设置”中,
-
(1)填写延誉宝商户编号“pQNNmSkaq”,如上图,如果没有编号,登录延誉宝后台获取。
-
(2)设置默认的文章分类的封面,如上图。
-
在Wordpress后台的路径“文章>>分类目录”中,
增加或编辑某个目录的时候,设置目录封面,也可以自定义封面,如下图。
-
设置电子会员卡,路径为:“信息中心>>电子会员卡”。
电子会员卡的设置非常简单,帮助手册是针对不懂技术的用户制作的,查看地址为:
所以对于开发者来说,属于傻瓜文档!
5 更多关于此项目的案例请参考下图
6 常见问题(FAQ)
网站转APP和小程序这个项目是免费的吗? 是的,网站转APP和小程序这个项目免费且开源(开放源代码)。
关于开源的说明:客户端是完全开源的,方便个性化的二次开发以及编译发布;同时,我们也提供基于小程序第三方开放服务商模式的自动生成小程序。
因为受到SSL证书等安全限制,同时需要解决大并发、高频访问等,所以基于多点部署的服务器端应用想开源几乎是不现实。
虽然SaaS云服务维护成本和技术成本比普通服务器高,但是这个项目目前的政策依然是“免费”。
为什么需要设置商户编号? 基于运营监管政策的需要,几乎所有网站都面临内容审查的压力;同时,基于Wordpress网站的各种垃圾评论插件层出不穷, 所以要求访问者登录后才可以评论和点赞是非常必要的。
设置延誉宝的商户编号,可以一键集成用户登录和身份认证等复杂功能,减少开发难度,降低上线门槛。
个人中心必须显示会员卡功能吗,可以隐藏吗? 个人中心的会员卡功能没有隐藏选项,当然,你可以自定义开发,删除和隐藏这些功能,因为这个项目是开源的,小程序和APP客户端可以自由定制。
将网站转为APP和小程序(包括微信小程序、支付宝小程序、百度智能小程序、抖音小程序等),不可以认为只是简单的将内容展示形式做个改变, 因为那样在用户体验上没有任何提升,使用手机浏览器完全可以实现相同的效果。
个人中心集成会员卡功能,是延誉宝“网站转APP和小程序”解决方案的亮点,提现了APP和小程序为访问者提供新功能的目的,所以推荐保留会员卡功能。
7 主要升级记录
2020.3.6.
1.删除了部分页面多余css代码
2.对部分页面的布局进行调整
3.对多个页面添加注释
2020.3.9.
完善二维码海报功能
2020.4.28.
客服按钮支持自定义图片;
2020.5.18.
1、升级文章详情内容展示的组件;
2、可以自定义首页功能图标是否显示;
2020.5.23.
1、新增万能表单功能;
2、可以在服务器端控制给不同小程序平台返回不同的配置。
2021.1.20.
1、登录页面和用户中心增加了返回首页的按钮。
2、优化微信小程序中sitemap.json的结构。