简介

通过Wordpress，dcloud旗下的h5+应用（包括但不限于5+、wap2app等格式）可以借助WP H5Plus Update插件灵活地在线检测新版本。
插件由山茨昕雨开发并开源，使用MIT协议进行分发。

快速上手

配置参数

在阁下Wordpress网站后台中，进入 设置>APP参数修改，按需修改以下参数：

• 应用ID
• 应用版本号
• 内部版本号
• 更新标题
• 更新日志
  此项目可用php换行符“\n”对文本进行换行
• 下载链接
• 重要性
  此项目分两种，字符“1”为重要，字符“0”为不重要

以上参数中部分可以在你的应用源码中的mainfest.json文件中查看，保存更新后需要手动更新页面来查看你配置的参数

新建页面

在Wordpress中新建一个页面，选择页面类型为“安卓更新接口模板”，设置好Url即可开始请求

调试页面

在阁下的Url后面添加并修改以下字符：?appid=阁下的应用ID&version=阁下的应用版本号
例如：https://exmaple.com/check/update?appid=W2Aexmaple.com&version=1.0

客户端配置

JavaScript代码分两种模式，本代码仅包含Core，配置时请更改检查更新地址，其他业务实现请自行编辑代码。

开屏自动更新

var ua = navigator.userAgent;  
//Html5Plus环境，但不是流应用环境    
if (ua.indexOf('Html5Plus') > -1 && ua.indexOf('StreamApp') == -1) {  
    var url = "https://exmaple.com/check/update"; //检查更新地址    
    var req = { //升级检测数据  
        "appid": plus.runtime.appid,  
        "version": plus.runtime.version  
    };  
    wap2app.ajax.get(url, req, function(rsp) {  
        if (rsp.level == 1) { //判断是否重要（是1就更新  
            if (rsp && rsp.status) {  
                //需要更新，提示用户  
                plus.nativeUI.confirm(rsp.note, function(event) {  
                    if (0 == event.index) { //用户点击了“立即更新”按钮    
                        plus.runtime.openURL(rsp.url);  
                    }  
                }, rsp.title, ["立即更新", " ", "取消"]);  
            }  
        }  
    });  
}  

该模式仅在App更新级别为重要时才会进行更新

关于页检测更新

var ua = navigator.userAgent;  
//Html5Plus环境，但不是流应用环境    
if (ua.indexOf('Html5Plus') > -1 && ua.indexOf('StreamApp') == -1) {  
    var url = "https://exmaple.com/check/update"; //检查更新地址    
    var req = { //升级检测数据    
        "appid": plus.runtime.appid,  
        "version": plus.runtime.version  
    };  
    wap2app.ajax.get(url, req, function(rsp) {  
        if (rsp && rsp.status) {  
            //需要更新，提示用户    
            plus.nativeUI.confirm(rsp.note, function(event) {  
                if (0 == event.index) { //用户点击了“立即更新”按钮    
                    plus.runtime.openURL(rsp.url);  
                }  
            }, rsp.title, ["立即更新", " ", "取消"]);  
        } else {  
            plus.nativeUI.toast("没有可用的版本更新");  
        }  
    });  
}  

该模式可以检查最新级别的更新，如无更新会弹出原生提示

版权信息

本协议采用MIT进行分发，项目官方地址为：https://github.com/sancerain/wp-h5plus-update
项目作者：@finderz&@江程训
所属组织：廊坊市山茨网络科技有限公司 Sancerain LLC

> 因为本系列教程所有的混合开发平台都需要用到接口，所以本系列教程第一阶段将从0到一开发一套api接口出来。

相关文章

开了一个WordPress使用uni-app开发app和小程序的教程，来捧个场吧。
WordPress开发APP系列教程：UNI、Flutter、Ionic、各种小程序，这次一网打尽
WordPress+uni-app：实战今日头条前言

强烈建议在看本系列教程之前先看一下我前面发布的《WordPress主题开发系列教程初阶》。因为在本套api接口开发过程中基本上都会使用到WordPress封装的函数，看完那套教程再来看这个，你将少走很多弯路。

1. 准备工作：搭建开发环境（linux+宝塔+WordPress 5.2.3）
2. 开发首页纯列表接口
3. 开发首页模块类型列表接口
4. 开发阅读详情页接口
5. 开发获取评论列表接口
6. 开发JWT鉴权登录接口
7. 开发邮箱验证码注册接口
8. 开发发布评论接口
9. 开发点赞接口
10. 开发收藏接口
11. 开发关注接口
12. 开发作者主页接口
13. 开发个人中心接口
14. 开发投稿接口
15. 更多待补充……

及时更新动态请关注

textarea 如录入有换行 显示时就不能显示换行，这个问题怎么解决

新人报道，多多支持

最近不清楚是更新了HBuilder的版本问题，还是更新了android版本的问题，重新在本地发布apk后，进行图片下载。发现读取的时候，文件名读取不到，后面在模拟器中，测试后，发现文件名都变成GetUrl的文件，之后看了下官方文档。怀疑是未指定路径导致的。直接上代码：
旧代码：
plus.io.resolveLocalFileSystemURL(
'_downloads/'+item.FileName,
function(entry){
entry.remove(function(entry) {
var dtask = plus.downloader.createDownload(item.Path, {retry:1}**, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功："+item.Path)
} else { //下载失败
console.log("下载失败："+item.Path)
}
});
dtask.start();
}, function(e) {
var dtask = plus.downloader.createDownload(item.Path, {retry:1}**, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功2："+item.Path)
} else { //下载失败
console.log("下载失败2："+item.Path)
}
});
dtask.start();
});
},
function(e){
var dtask = plus.downloader.createDownload(item.Path, {retry:1}**, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功3："+item.Path)
} else { //下载失败
console.log("下载失败3："+item.Path)
}
});
dtask.start();
}
);

新代码：
var dtask = plus.downloader.createDownload(item.Path, {retry:1,filename:'_downloads/'+item.FileName}, function(d, status) {
if (status == 200) { // 下载成功
console.log("下载成功2："+item.Path)
} else { //下载失败
console.log("下载失败2："+item.Path)
}
});
dtask.start();

主要是在createDownload的参数区别，不清楚各位有没有遇到，就当给自己做个记录吧。

使用yarn安装至uniapp(同vue)项目

yarn add jsencrypt --dep
或者使用npm

npm install jsencrypt --dep
引入jsencrypt

项目中会出现node_modules文件见进入文件，再进jsencrypt***，再进bin文件用下面的附件解压出来替换jsencrypt.js文件

引入jsencrypt
import { JSEncrypt } from 'jsencrypt'

公钥或私钥跟后台要

methods: {  
    //  加密  
    encryptedData(publicKey, data) {  
      // 新建JSEncrypt对象  
      let encryptor = new JSEncrypt();  
      // 设置公钥  
      encryptor.setPublicKey(publicKey);  
      // 加密数据  
      return encryptor.encrypt(data);  
    },  
    // 解密  
    decryptData(privateKey,data){  
      // 新建JSEncrypt对象  
      let decrypt= new JSEncrypt();  
      // 设置私钥  
      decrypt.setPrivateKey(privateKey);  
      // 解密数据  
      return decrypt.decrypt(secretWord);  
    }  
  }

uni-app 中在manifest.json 配置 navigateToMiniProgramAppIdLis

WordPress开发APP系列教程：UNI、Flutter、Ionic、各种小程序，这次一网打尽

uni-app

既然帖子发在了这儿，我相信大家都知道uni-app是什么了。

但是在这里我还是要提一下，就是uni-app的确很6，主要是它解决了当下行业产品快速上线的痛点。总所周知当下移动应用四分五裂，这家出个原生的，那家出个自己平台的小程序等等。

而现在软件市场上的需求也是各有各的想法，这个要app又能H5的，那家要app又能小程序的，而且小程序平台还不一致（QQ、微信、今日头条）等等。而uni-app的出现就直接解决了这一系列技术重新开始的痛点。看了看论坛，虽然现在bug和体验性还美中不足，但是我相信uni-app是会越来越好的，因为它在软件市场上在逐渐的成为一种开发模式（我在公司面试招人的时候首先就是问会不会vue、搞没搞过un-app，如果没搞过这，上报上去基本就是不要的）。

所以没事多折腾折腾，是很有必要的。

一句话就是无论6不6，无论有用没用，大家都在折腾，大家都在学，自己学点儿也没啥。

WordPress

当然也许你知道uni-app但并不知道WordPress，所以我这里会说一下。

WordPress是一个款国外开源的著名【博客】程序，它由全世界的开源贡献者一起开发，现在已经成为了一个款CMS建站系统首选的程序。据不完全统计每十个网站中起码有一个使用WordPress开发的！

请注意我这里将这个博客打了个符号关起来了。因为经过我多年折腾，我发现将WordPress定义为博客程序实在是太狭隘了。我觉得那仅仅是没用用好的说法，用得好了WordPress可以做任何事情，用得好了WordPress就仅仅是一个类似于其他php开发框架的框架！

并且它比任何php框架开发起来都要迅速，因为它封装了数以万计开箱即用的函数、钩子。

而且，它是由全世界的开源贡献者一起开发的，在安全性方面也是毫不逊色。

WordPress+uni-app

试想一下如果你现在要用uni-app开发app你需要什么？

api接口？

做api接口又得用php框架写一个后台管理系统？

然后自己再从0到1开发一系列的接口？

那么你有么有想过用WordPress来当做后台管理系统，而你只负责ap接口的输出层？

这个方法也是从0到1？不不不，使用这套组合你可以调用WordPress数以万计的函数来加快你的开发！

关于本系列教程

相信想要折腾WordPress+uni-app的人肯定意见看见过我前面做的那套教程。

原本上套教程我只想抛个砖，让大家自己折腾折腾，但根据收集而来的五花八门的问题来看，大家好想并不太了解我这块砖。大家想要的是有用的、能上线的真正的项目。

因此我决定放弃那套教程，从0开始实战。从api接口开发开始。保证开发出来的项目能上线，教程中没一小节都拥有干货，且代码能复用！

此文档仅描述5+ App项目如何适配暗黑模式，uni-app项目请参考：https://uniapp.dcloud.net.cn/tutorial/darkmode

iOS13开始引入了暗黑模式（DarkMode），Android10 引入暗黑模式，在暗黑模式下，系统界面配色都会相应变暗，同时App也需要进行适配。

HBuilderX2.6.3+支持iOS平台适配暗黑模式
HBuilderX3.6.9+支持Android平台适配暗黑模式

特别说明

iOS平台

苹果近日对App Store商店的审核指南做了一次更新并发了一份公告，要求所有的APP 在4月30号前使用iOS 13 SDK开发应用，很多开发者错误理解成使用iOS 13 SDK开发应用就必须适配暗黑模式，实际上苹果的官方开发者文档从未强制要求应用必须适配深色样式（暗黑模式），完整解读参考：https://ask.dcloud.net.cn/article/37037。
重点：不适配暗黑模式，一样可以正常上Appstore。但是适配了暗黑模式，没适配利索，页面有黑有白，就可能会被拒绝上架。

注意：必须iOS13+设备上才支持

Android平台

注意：必须Android10+设备上才支持

开启适配暗黑模式（DarkMode）

为了保证应用的兼容性，HBuilderX打包生成的App默认已关闭兼容暗黑模式，需按以下方法配置开启适配暗黑模式。
开启适配暗黑模式后，弹出系统授权框将按当前系统设置的外观样式显示（可在 "设置" -> "显示与亮度" -> "外观" 中更改），应用中的页面则需要开发者根据下面的API获取当前系统外观模式进行适配处理。
注意：如果未开启适配黑暗模式，将无法获取当前系统的外观样式
打开项目的manifest.json文件，切换到“源码视图”项

• iOS平台
  在 "plus" -> "distribute" -> "apple" 节点下添加 defaultTheme 节点

  "plus": {  
  "distribute": {  
    "apple": {  
     "UIUserInterfaceStyle": "Automatic",   //不推荐使用，设置light或dark后将无法跟随系统  
     "defaultTheme": "light" | "dark" | "auto"   //HBuilderX 3.6.10及以上版本支持  
      //...  
    },  
    //...  
  },  
  //...

• Android平台
  在 "plus" -> "distribute" -> "google" 节点下添加 defaultNightMode 节点

  "plus": {  
  "distribute": {  
    "google": {  
      "defaultNightMode": "light" | "dark" | "auto"  
      //...  
    },  
    //...  
  },  
  //...

保存后，提交云端打包后生效

暗黑模式适配主要包括启动界面，应用中的页面，另一部分是特定功能弹出系统原生界面（如alert提示框）和iOS平台安全区域外背景颜色，下面会详细说明分别如何适配。

启动页

官方提供的默认启动页已适配 '暗黑模式'，会自动跟随系统模式改变背景颜色；自定义启动页请参考文档 自定义启动页

<a id="safearea"/>

iOS安全区域适配

开启安全区域占位

在 manifest.json文件的"plus" 节点下添加 "safearea" 适配iOS的安全区域，"background" 对应正常模式下安全区域外的背景颜色，"backgroundDark"对应暗黑模式下安全区域外的背景颜色

"plus" : {  
    "safearea": { //iOS平台的安全区域  
        "background": "#ffffff",  
        "backgroundDark": "#2f0508", // HX 3.1.19+支持  
        "bottom": {  
            "offset": "auto"  
        }  
    }  
...  
}

关闭安全区域占位

将 "offset" 置为 “none” 关闭安全区域的占位，注：关闭安全区域占位在刘海屏页面内容可能会被 “homeBar” 挡住，需要自行适配，具体请参考文档 iOS刘海屏适配

"safearea": {    
    "bottom": {    
        "offset": "none"    
    }    
}

更多关于 "safearea" 的说明请参考 manifest.json 说明

应用中页面适配暗黑模式

在应用中需要获取当前系统设置的外观模式格是否为暗黑模式，如果是则需要调整应用整体UI风格样式进行适配。

html页面可通过CSS适配

推荐使用CSS中的媒体查询 prefers-color-scheme 进行适配

@media (prefers-color-scheme: dark){  
    .content {  
        background-color: #1B1C1E;  
        color: white;  
    }  
}

注意：如果未开启适配黑暗模式，以上媒体查询样式将不会生效

获取当前系统外观模式

对于页面中的原生标题栏（TitleNView），则需获取当前的外观模式，动态修改样式进行适配。

5+ API：plus.navigator.getUIStyle获取当前系统外观模式。
返回"dark"表示当前为深色样式（DarkMode），即暗黑模式；"light"表示当前为浅色样式（LightMode），即普通模式。

function getUIStyle(){  
  var style = plus.navigator.getUIStyle();  
  if('dark'==style){  
    console.log('当前为暗黑模式');  
  }else{  
    console.log('当前为普通模式');  
  }  
}

监听系统外观模式改变

应用启动后，用户有可能改变系统外观，这时候可以通过监听切换暗黑模式事件进行处理。
5+ App（WAP2APP）项目，可在在页面中监听"uistylechange"事件

  document.addEventListener('uistylechange', function(){  
    var style = plus.navigator.getUIStyle();  
    console.log(('dark'==plus.navigator.getUIStyle())?'切换为暗黑模式':'切换为普通模式');  
  }, false);

系统原生界面适配暗黑模式

应用开启适配暗黑模式后，系统原生界面（plus.nativeUI）默认会自动适配系统设置的外观样式。
如果系统当前设置为深色外观（暗黑模式），则plus.nativeUI弹出的所有界面自动显示为深色（暗黑模式）样式；如果系统当前设置为浅色外观，则plus.nativeUI弹出的所有界面显示为浅色样式。

如系统提示框（plus.nativeUI.alert)）

• 深色（暗黑模式）样式效果
  
  
• 浅色（普通模式）样式效果
  
  

如果不想自动适配系统设置的外观样式，可以调用plus.nativeUI.setUIStyle强制设置原生界面的外观样式。
以下示例强制应用弹出原生界面为深色（暗黑模式）外观样式，即使系统没有设置为深色外观（暗黑模式）：

plus.nativeUI.setUIStyle('dark');  // ‘light’表示浅色外观样式

即使应用没有开启适配暗黑模式，此API也可生效

受影响的5+ API弹出系统原生界面

• plus.nativeUI.actionSheet
• plus.nativeUI.alert
• plus.nativeUI.confirm
• plus.nativeUI.previewImage
• plus.nativeUI.showWaiting
  仅在不指定背景颜色的情况会自动适配，如果代码中指定了背景颜色则需要根据不同模式进行适配设置合适的背景颜色。
• plus.nativeUI.pickDate
• plus.nativeUI.pickTime
• plus.nativeUI.pickTime
• plus.nativeUI.prompt
• plus.nativeUI.toast

受影响的uni-app弹出系统原生界面

• uni.showToast
• uni.showLoading
• uni.showModal
• uni.showActionSheet
• uni.previewImage
• picker（仅时间选择器，即：mode = time）

Hbuilder X内置浏览器和终端调节宽度或者高度的体验有点不好，需要鼠标恰好移到位置才能调节，容差太小

前言

WordPress做为最火的一个建站程序，相信现在在折腾网站的人肯定都是人手一个了。但是有了网站就够了吗？谁都知道，现在是移动端的天下，所以这个时候将你的WordPress网站转成一个app就颇为重要了！

而对于移动端开发，在很久以前也许这还是一个难题，但现在有了各种混合开发的技术栈，这一切都将迎刃而解，只要你掌握了api的开发方式、掌握了HTML、JS你就可以迅速做出一个app。（本人做的app 一隅 IONIC版只用了两周，flutter版只用了一周）。

于是折腾多年WordPress的本人，且尤其喜欢混合开发技术的我决定做一系列的WordPress开发app的实战教程，记住，是实战，是真实的可以上线的app，什么安全性问题、用户体验性问题等等这次都会涉及。

不再是像上个教程那样只是让你窥窥门径。

且通过上个教程我发现，你们要的是实战，是真正能用能上线的。

所以在本系列教程中，这些都将满足你们！

关于这个系列

既然是一个系列那么它就不简简单单的只是UNI-APP了，还包括了所有移动端。如下：

1. WordPress+uni-app打造cms资讯系统
2. WordPress+flutter打造cms系统。
3. WordPress+微信小程序打造CMS系统
4. WordPress+QQ小程序打造CMS系统
5. WordPress+IONIC 打造CMS系统

教程展现形式

为了通俗易懂本教程将以视频、文档+源码的方式展现

适合什么人

1. 会HTML、JS
2. 起码掌握NG、VUE其中一种开发思想
3. 起码能看懂PHP代码
4. 建议看本系列教程之前可以先看一下WordPress主题开发系列教程

实战项目

这次实战项目我将选择最火的资讯app 今日头条。当然，今日头条这么大一个app肯定不是我一个人所能完成的，所以在此教程中我将只实现app内以下功能：

首页
搜索
收藏
分享
阅读详情页
个人中心、登录注册
点赞、关注、评论
用户反馈
视频模块
作者个人主页
个人中心文章列表
个人中心投稿
更多待补充……

可以看出，即便只是实现了以上这些部分功能，这也是一个干货满满的教程啊哈！

教程目录

WordPress+uni-app：实战今日头条前言

第一阶段：WordPress开发移动app：api接口开发篇

关于本人

四年折腾开发经验折腾WordPress四年，各行各业各种类型全部用WordPress做。

折腾混合app四年，市面上所有混合开发框架全部折腾过。

文档，踩坑，谷歌，百度……

毫不夸张的说你想学的，我都会，都折腾过，而且都是不复制不粘贴，纯手工撸码。

WordPress开发APP系列教程详情

本人是一个少儿编程老师，平时也开发一些应用。因为同学们的兴趣，正在给他们持续录制一个从零实战App教学系列点击直达网站欢迎大家关注黑板助教公众号 一起来交流学习