mui技术点01.手机网络连接的判断

问题说明

手机未连接网络，app访问后台接口时出现错误。

解决方案

每个画面初始时，判断网络是否连接，网络如果处于断网阶段，弹出窗口信息直接退出app，或者画面显示[未联网]消息提示，提示用户刷新网络（比如：点击刷新按钮，或者下拉等操作）。

详细代码

直接退出app

检测是否连接网络

//mui检测是否连接网络  
function getSysInfo() {  
//  var str = "";  
//  str += "名称：" + plus.os.name + "\n";  
//  str += "版本：" + plus.os.version + "\n";  
//  str += "语言：" + plus.os.language + "\n";  
//  str += "厂商：" + plus.os.vendor + "\n";  
//  str += "网络类型：";  

types = {};  
types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";  
types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";  
types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";  
types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";  
types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";  
types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";  
types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";  

var str = types[plus.networkinfo.getCurrentType()];  
if (str == '未知' || str == '未连接网络') {  
    return false;  
} else {  
    return true;  
}  
}

调用及处理

mui.plusReady(function() {  
//如果未连接网络，退出app（针对mui框架）  
if (!(getSysInfo())) {  
    alert('网络连接失败，请退出并重置网络！');  
    plus.runtime.quit();//退出app（针对mui框架）  
    return;  
}  
});

画面显示提示按钮，让用户手动刷新

点击按钮，进行画面刷新

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport"  
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
<title>网络未连接</title>  
<link href="css/mui.min.css" rel="stylesheet" />  
<style>  
    .mui-btn {  
        display: block;  
        width: 60px;  
        margin: 10px auto;  
    }  

    #info {  
        padding: 10px 5px;  
    }  
</style>  
</head>  
<body>  

<header class="mui-bar mui-bar-nav">  
    <h1 class="mui-title">按钮点击刷新</h1>  
</header>  

<div id="content" class="mui-content">  
    <div class="mui-content-padded" style="margin: 50px;text-align: center;">  
        <div id="info"></div>  
        <button id="button" type="button" class="mui-btn mui-btn-outlined">刷新</button>  
    </div>  
</div>  

<script src="js/mui.min.js"></script>  
<script type="text/javascript" charset="utf-8">  
    mui.init();  
    var info = document.getElementById("info");  
    (function($) {  
        mui.toast('画面初始化！');  
        info.innerText = '网络未连接，请连接网络后刷新！';  
    })(mui);  

    document.getElementById("button").addEventListener('tap', function() {  
        location.reload();  
    });  
</script>  
</body>  
</html>

下划画面刷新

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport"  
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title>网络未连接</title>  
    <link href="css/mui.min.css" rel="stylesheet" />  
    <style>  
        #info {  
            padding: 10px 5px;  
        }  
    </style>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <h1 class="mui-title">画面下拉刷新</h1>  
    </header>  

    <div id="content" class="mui-content">  
        <div class="mui-content-padded" style="margin: 50px;text-align: center;">  
            <div id="info"></div>  
        </div>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        var info = document.getElementById("info");  
        mui.init({  
        pullRefresh: {  
                container: "#content", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等  
                down: { //下拉刷新  
                    style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式  
                    height: 50, //可选,默认50.触发下拉刷新拖动距离,  
                    auto: false, //可选,默认false.首次加载自动下拉刷新一次  
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容  
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容  
                    contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容  
                    callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                        //模拟向服务器获取数据的等待时间  
                        sleep(1000);  
                        location.reload();  
                    }  
                }  
            }  
        });  

        (function($) {  
            info.innerText = '网络未连接，请网络连接后，下拉刷新进行页面刷新！';  
            mui.toast('画面初始化！');  
        })(mui);  

        //模拟线程等待,ms:单位毫秒  
        function sleep(ms) {  
            return new Promise(resolve => setTimeout(resolve, ms));  
        }  
    </script>  
</body>  
</html>

注意

内置浏览器技术实现，但手机上未必实现，调研的结果在手机上验证之后，在进行项目代码合并。
关于下拉刷新详细的参数，请参照官网的文档说明：https://dev.dcloud.net.cn/mui/pulldown/

继续阅读 »

问题说明

手机未连接网络，app访问后台接口时出现错误。

解决方案

每个画面初始时，判断网络是否连接，网络如果处于断网阶段，弹出窗口信息直接退出app，或者画面显示[未联网]消息提示，提示用户刷新网络（比如：点击刷新按钮，或者下拉等操作）。

详细代码

直接退出app

检测是否连接网络

//mui检测是否连接网络  
function getSysInfo() {  
//  var str = "";  
//  str += "名称：" + plus.os.name + "\n";  
//  str += "版本：" + plus.os.version + "\n";  
//  str += "语言：" + plus.os.language + "\n";  
//  str += "厂商：" + plus.os.vendor + "\n";  
//  str += "网络类型：";  

types = {};  
types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";  
types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";  
types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";  
types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";  
types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";  
types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";  
types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";  

var str = types[plus.networkinfo.getCurrentType()];  
if (str == '未知' || str == '未连接网络') {  
    return false;  
} else {  
    return true;  
}  
}

调用及处理

mui.plusReady(function() {  
//如果未连接网络，退出app（针对mui框架）  
if (!(getSysInfo())) {  
    alert('网络连接失败，请退出并重置网络！');  
    plus.runtime.quit();//退出app（针对mui框架）  
    return;  
}  
});

画面显示提示按钮，让用户手动刷新

点击按钮，进行画面刷新

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport"  
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
<title>网络未连接</title>  
<link href="css/mui.min.css" rel="stylesheet" />  
<style>  
    .mui-btn {  
        display: block;  
        width: 60px;  
        margin: 10px auto;  
    }  

    #info {  
        padding: 10px 5px;  
    }  
</style>  
</head>  
<body>  

<header class="mui-bar mui-bar-nav">  
    <h1 class="mui-title">按钮点击刷新</h1>  
</header>  

<div id="content" class="mui-content">  
    <div class="mui-content-padded" style="margin: 50px;text-align: center;">  
        <div id="info"></div>  
        <button id="button" type="button" class="mui-btn mui-btn-outlined">刷新</button>  
    </div>  
</div>  

<script src="js/mui.min.js"></script>  
<script type="text/javascript" charset="utf-8">  
    mui.init();  
    var info = document.getElementById("info");  
    (function($) {  
        mui.toast('画面初始化！');  
        info.innerText = '网络未连接，请连接网络后刷新！';  
    })(mui);  

    document.getElementById("button").addEventListener('tap', function() {  
        location.reload();  
    });  
</script>  
</body>  
</html>

下划画面刷新

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport"  
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title>网络未连接</title>  
    <link href="css/mui.min.css" rel="stylesheet" />  
    <style>  
        #info {  
            padding: 10px 5px;  
        }  
    </style>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <h1 class="mui-title">画面下拉刷新</h1>  
    </header>  

    <div id="content" class="mui-content">  
        <div class="mui-content-padded" style="margin: 50px;text-align: center;">  
            <div id="info"></div>  
        </div>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        var info = document.getElementById("info");  
        mui.init({  
        pullRefresh: {  
                container: "#content", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等  
                down: { //下拉刷新  
                    style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式  
                    height: 50, //可选,默认50.触发下拉刷新拖动距离,  
                    auto: false, //可选,默认false.首次加载自动下拉刷新一次  
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容  
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容  
                    contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容  
                    callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                        //模拟向服务器获取数据的等待时间  
                        sleep(1000);  
                        location.reload();  
                    }  
                }  
            }  
        });  

        (function($) {  
            info.innerText = '网络未连接，请网络连接后，下拉刷新进行页面刷新！';  
            mui.toast('画面初始化！');  
        })(mui);  

        //模拟线程等待,ms:单位毫秒  
        function sleep(ms) {  
            return new Promise(resolve => setTimeout(resolve, ms));  
        }  
    </script>  
</body>  
</html>

注意

内置浏览器技术实现，但手机上未必实现，调研的结果在手机上验证之后，在进行项目代码合并。
关于下拉刷新详细的参数，请参照官网的文档说明：https://dev.dcloud.net.cn/mui/pulldown/

收起阅读 »

修复uni.preloadPage预加载tabBar页面，正式打包切换tabBar报错/出错

uni统计预加载

修复方法如下：

修改uni统计源代码(修改后的uni-stat见附件)

打开HBuilderX安装目录，找到 HBuilderX安装目录\plugins\uniapp-cli\node_modules\@dcloudio\uni-stat\dist\index.js 这个文件。需注意package.json文件中version指定的版本，我的是uni-stat 2.0.0-32920211119001这个版本。

如果你的项目不是使用HBuilderX创建的，你可能需要修改 HBuilderX安装目录\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\uni-stat\dist 文件夹下的 uni-stat.cjs.js和uni-stat.es.js这两个文件，改造方法应该和下面的相同（因为我的项目没有用到这两个js代码，所以不清楚这两个代码在什么环境下起作用）。至于怎么查看用到的是哪个目录中的uni-stat，可以通过查看项目编译后的app-service.js文件，搜索关键字“@dcloudio/uni-stat@”, 可以定位到uni-stat的版本

下面开工改造：

1. 修改getRoute方法

const getRoute = () => {    
  var pages = getCurrentPages();    
  var page = pages[pages.length - 1];    
  if (!page) return ''    
  // preloadPage的nvue页面$vm为undefined    
  let _self = page.$vm;    
  // 为preloadPage的nvue页面尝试从$page获取route属性    
  let _page = page.$page;    
  if (getPlatformName() === 'bd' && _self) {    
    return _self.$mp && _self.$mp.page.is;    
  } else if (_self){    
    return (_self.$scope && _self.$scope.route) || (_self.$mp && _self.$mp.page.route);    
  } else if (_page){    
    return _page.route    
  } else {    
    console.error('未找到路径')    
    return ''    
  }    
};

2. 修改getPageRoute方法

const getPageRoute = (self) => {    
  var pages = getCurrentPages();    
  var page = pages[pages.length - 1];    
  if (!page) return ''    
  let _self = page.$vm;    
  let _page = page.$page;    
  let query = self._query;    
  let str = query && JSON.stringify(query) !== '{}' ? '?' + JSON.stringify(query) : '';    
  // clear    
  self._query = '';    
  if (getPlatformName() === 'bd' && _self) {    
    return _self.$mp && _self.$mp.page.is + str;    
  } else if (_self) {    
    return (_self.$scope && _self.$scope.route + str) || (_self.$mp && _self.$mp.page.route + str);    
  } else if (_page){    
    return _page.route    
  } else {    
    console.error('未找到路径')    
    return ''    
  }    
};

3. 修改class Stat的load方法

class Stat extends Util {    
  ....此处省略    
  load(options, self) {    
    if (!self.$scope && !self.$mp) {    
      // 如果是preloadPage nvue页面, 则这里拿不到对应的页面（也就是nvue页面不在CurrentPages页面栈中），需要使用route判断一下正确性    
      // 否则会把错误的页面赋值给self.$scope，进而引发Cannot read property '__call_hook' of undefined的错误    
      const page = getCurrentPages();    
      const route = page[page.length - 1].route;    
      if (self.$options && self.$options.route === route) {    
        self.$scope = page[page.length - 1];    
      }    
    }    
    this.self = self;    
    this._query = options;    
  }    
}

4. 在lifecycle前定义函数tryinterceptShare

const tryinterceptShare = function(ctx) {    
    if (ctx.$scope && ctx.$scope.onShareAppMessage) {    
        let oldShareAppMessage = ctx.$scope.onShareAppMessage;    
        ctx.$scope.onShareAppMessage = function(options) {    
          stat.interceptShare(false);    
          return oldShareAppMessage.call(ctx, options)    
        };    
    }    
}

5. 修改lifecycle 的 onLoad 方法

  onLoad(options) {    
    stat.load(options, this);    
    // 重写分享，获取分享上报事件    
    tryinterceptShare(this)    
    // preloadPage nvue页面，$scope可能为undefined    
    if (!this.$scope) {    
        var $scope = undefined;    
        var self = this;    
        Object.defineProperty(this, '$scope', {    
            get() {    
                return $scope    
            },    
            set(val) {    
                $scope = val;    
                setTimeout(()=>{    
                    tryinterceptShare(self)    
                }, 0)    
            }    
        })    
    }    
  }

6. try catch lifecycle 中的所有方法，防止uni-stat统计出错引发应用异常

在 lifecycle定义后，添加如下代码  

const ERROR_PREFIX = 'uni-stat@' + STAT_VERSION;    

// 把lifecycle的方法全都try catch起来，防止出什么错导致应用页面打不开    
const tryfunc = function(func, name) {    
    return function() {    
        try {    
            let args = [].slice.call(arguments);    
            func.apply(this, args)    
        } catch(e) {    
            console.error(ERROR_PREFIX + ' error in function '+ name);    
            console.error(JSON.stringify(e))    
        }    
    }    
}    
Object.keys(lifecycle).forEach(k=>{    
    lifecycle[k] = tryfunc(lifecycle[k], k)    
})

至此改造完毕。因为我也不知道这么修改会不会在其它平台出现错误，所以大家还是在修改后调试一下再发布，不过目前我自己在安卓机子上测试没发现问题。

继续阅读 »

修复方法如下：

修改uni统计源代码(修改后的uni-stat见附件)

打开HBuilderX安装目录，找到 HBuilderX安装目录\plugins\uniapp-cli\node_modules\@dcloudio\uni-stat\dist\index.js 这个文件。需注意package.json文件中version指定的版本，我的是uni-stat 2.0.0-32920211119001这个版本。

如果你的项目不是使用HBuilderX创建的，你可能需要修改 HBuilderX安装目录\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\uni-stat\dist 文件夹下的 uni-stat.cjs.js和uni-stat.es.js这两个文件，改造方法应该和下面的相同（因为我的项目没有用到这两个js代码，所以不清楚这两个代码在什么环境下起作用）。至于怎么查看用到的是哪个目录中的uni-stat，可以通过查看项目编译后的app-service.js文件，搜索关键字“@dcloudio/uni-stat@”, 可以定位到uni-stat的版本

下面开工改造：

1. 修改getRoute方法

const getRoute = () => {    
  var pages = getCurrentPages();    
  var page = pages[pages.length - 1];    
  if (!page) return ''    
  // preloadPage的nvue页面$vm为undefined    
  let _self = page.$vm;    
  // 为preloadPage的nvue页面尝试从$page获取route属性    
  let _page = page.$page;    
  if (getPlatformName() === 'bd' && _self) {    
    return _self.$mp && _self.$mp.page.is;    
  } else if (_self){    
    return (_self.$scope && _self.$scope.route) || (_self.$mp && _self.$mp.page.route);    
  } else if (_page){    
    return _page.route    
  } else {    
    console.error('未找到路径')    
    return ''    
  }    
};

2. 修改getPageRoute方法

const getPageRoute = (self) => {    
  var pages = getCurrentPages();    
  var page = pages[pages.length - 1];    
  if (!page) return ''    
  let _self = page.$vm;    
  let _page = page.$page;    
  let query = self._query;    
  let str = query && JSON.stringify(query) !== '{}' ? '?' + JSON.stringify(query) : '';    
  // clear    
  self._query = '';    
  if (getPlatformName() === 'bd' && _self) {    
    return _self.$mp && _self.$mp.page.is + str;    
  } else if (_self) {    
    return (_self.$scope && _self.$scope.route + str) || (_self.$mp && _self.$mp.page.route + str);    
  } else if (_page){    
    return _page.route    
  } else {    
    console.error('未找到路径')    
    return ''    
  }    
};

3. 修改class Stat的load方法

class Stat extends Util {    
  ....此处省略    
  load(options, self) {    
    if (!self.$scope && !self.$mp) {    
      // 如果是preloadPage nvue页面, 则这里拿不到对应的页面（也就是nvue页面不在CurrentPages页面栈中），需要使用route判断一下正确性    
      // 否则会把错误的页面赋值给self.$scope，进而引发Cannot read property '__call_hook' of undefined的错误    
      const page = getCurrentPages();    
      const route = page[page.length - 1].route;    
      if (self.$options && self.$options.route === route) {    
        self.$scope = page[page.length - 1];    
      }    
    }    
    this.self = self;    
    this._query = options;    
  }    
}

4. 在lifecycle前定义函数tryinterceptShare

const tryinterceptShare = function(ctx) {    
    if (ctx.$scope && ctx.$scope.onShareAppMessage) {    
        let oldShareAppMessage = ctx.$scope.onShareAppMessage;    
        ctx.$scope.onShareAppMessage = function(options) {    
          stat.interceptShare(false);    
          return oldShareAppMessage.call(ctx, options)    
        };    
    }    
}

5. 修改lifecycle 的 onLoad 方法

  onLoad(options) {    
    stat.load(options, this);    
    // 重写分享，获取分享上报事件    
    tryinterceptShare(this)    
    // preloadPage nvue页面，$scope可能为undefined    
    if (!this.$scope) {    
        var $scope = undefined;    
        var self = this;    
        Object.defineProperty(this, '$scope', {    
            get() {    
                return $scope    
            },    
            set(val) {    
                $scope = val;    
                setTimeout(()=>{    
                    tryinterceptShare(self)    
                }, 0)    
            }    
        })    
    }    
  }

6. try catch lifecycle 中的所有方法，防止uni-stat统计出错引发应用异常

在 lifecycle定义后，添加如下代码  

const ERROR_PREFIX = 'uni-stat@' + STAT_VERSION;    

// 把lifecycle的方法全都try catch起来，防止出什么错导致应用页面打不开    
const tryfunc = function(func, name) {    
    return function() {    
        try {    
            let args = [].slice.call(arguments);    
            func.apply(this, args)    
        } catch(e) {    
            console.error(ERROR_PREFIX + ' error in function '+ name);    
            console.error(JSON.stringify(e))    
        }    
    }    
}    
Object.keys(lifecycle).forEach(k=>{    
    lifecycle[k] = tryfunc(lifecycle[k], k)    
})

至此改造完毕。因为我也不知道这么修改会不会在其它平台出现错误，所以大家还是在修改后调试一下再发布，不过目前我自己在安卓机子上测试没发现问题。

收起阅读 »

uni-商城开源项目，寻求志同道合开发者

开源

https://github.com/gooking/uni-app-mall

[码云镜像：] https://gitee.com/javazj/uni-app-mall

对 uni 有兴趣，热爱开源，有适当的业余时间，乐于助人的朋友，欢迎一起加入到开发团队中来～

技术栈：

uni-app
uview 2.0
没有其他了

继续阅读 »

mui疑难杂症01.HBuilderX未检测到手机或模拟器

一、问题

我使用Android 9版本的手机，开发者选项已开启USB调试，但是HBuilderX未检测到手机或模拟器。

二、解决问题

找到HBuilderX安装目录下的D:\Archive\HBuilderX\plugins\launcher\tools\adbs
先备份该录下的除了文件夹外的其他三个文件。
然后把1.0.31目录下的文件拷贝到D:\Archive\HBuilderX\plugins\launcher\tools\adbs，直接覆盖即可。
重启HBuilderX就可以检测到手机了。

备注：adb全称Android Debug Bridge（安卓调试桥），它用于通过电脑端与模拟器或者真实设备交互。

继续阅读 »

知识付费系统源码（开源知识付费平台系统源码下载）

源码分享

　　知识付费系统源码是几乎每一个成功企业的重要组成部分。然而，为什么许多新企业和初创企业忽视了它作为一个可选的组成部分？管理和定期维护知识库的昂贵成本是主要原因。使用复杂工具更新知识文章是企业避免建立知识库的另一个原因。然而，使用正确的KMS，您可以避免所有这些问题。并在很小的预算内建立一个易于管理的知识库。在本指南中，我们将仔细研究系统，以找到适合您平台的知识付费系统源码。
　　开源知识付费系统平台源码：zs.xcxyms.top
　　什么是知识付费系统源码？
　　知识付费系统可以用多种方式定义。对一些人来说，这是一个教学和学习的平台。对其他许多人来说，这是一个有效解决问题的平台。
　　简单地说，知识管理系统就是你用来分享知识的平台或工具。
　　例如，使用知识管理系统，您可以创建文章、文档和指南。然后，您可以将它们提供给您的客户或员工，让他们找到与您的产品相关的常见问题的解决方案。
　　无论是教育你的客户如何使用产品。或者教你的员工如何处理不同的情况。我们都同意，知识库在许多方面对所有类型的企业都是有益的。
　　●知识与管理的利益共享
　　如果您还需要进一步的说服力，这里只是知识管理的诸多好处中的一小部分。
　　●降低客户支持成本
　　有了知识库，您就可以让您的客户和员工自己找到解决方案。
　　如果客户遇到问题，他们可以在知识库中搜索答案。员工可以使用知识库查找如何处理某些情况的指南，如响应客户的询问。
　　不管怎样，它都有助于减少回复电子邮件和电话的时间和成本。
　　●培训员工和团队
　　私人知识库通常被公司用来培训和教育他们的员工和团队。您可以为每个部门创建多个知识库。用课程、解决方案和指南将其填满。这样他们就可以自己找到常见问题的教程指南了。
　　●更快的解决问题
　　知识库还通过提供按需解决方案帮助您节省时间。客户不再需要打电话等待数小时来解决问题。员工不需要经过数月的培训来回答简单的问题。都在知识库里。只需一次搜索就可以了。
　　●分享专业知识
　　请教专家已成为过去。有了知识库，你就成了专家。知识库中充满了由专家编写的指南和文件。没有必要在别处寻求帮助。
　　●更好的搜索引擎排名
　　公共知识库也可以作为搜索引擎优化的一个很好的来源。你可以优化知识文章和内容，在搜索引擎上为特定关键字排名更高。
　　不同类型的知识管理系统
　　开发知识管理系统的第一步是制定明确的目标。你的知识库的主要目的是什么？是服务客户还是管理自己的部门？
　　一旦你有了明确的目标，你就可以根据不同类型的知识库找到正确的知识管理系统。
　　●客户支持系统
　　这些是您为服务客户而制作的公共知识库系统。客户支持知识库包括教程和指南。尤其是对与产品或服务相关的常见问题的解答。这使得客户无需联系客户支持就可以找到解决方案。
　　●专家知识系统
　　专家知识系统通常是私有的，为公司的团队或部门服务。例如，客户支持部门可以使用专家知识系统快速找到客户常见问题的答案。这类知识库包括关于特定主题的专家指南。
　　●文件管理系统
　　顾名思义，文档管理系统是管理文档的知识库。它对于提供多种产品或服务的企业特别有用。文档管理系统帮助您在一个地方为所有产品创建一个大手册。
　　●数据库管理系统
　　数据库管理系统用于存储和共享与产品或业务相关的不同类型的数据。无论是与客户或产品历史相关的数据，数据库管理都有助于保持一切井井有条。
　　最佳知识付费系统源码和解决方案
　　我们想找到最好的知识付费系统源码和解决方案，你可以用来建立不同类型的知识库。
　　1、KnowAll
　　KnowAll是为企业和教育构建各种知识管理系统的完整解决方案。
　　使用KnowAll的主要好处是很容易开始。它基本上是WordPress的即插即用主题。一切都是为了帮助你在短时间内建立你的知识库，并定制它，使之与你的品牌保持一致。
　　有了KnowAll，建立你的知识库就像开始写博客一样简单。你只需点击几下就可以创建新的文章，对它们进行排序，并按类别和子类别对它们进行组织。主题提供多种设计选项，以满足您在用户界面方面的需求。
　　但这并不是全部，知识库之上的附加值是统计数据。使用KnowAll，您可以看到哪些文章是您浏览量最大的，并向您的读者征求一些反馈，这样您就可以看到哪些文章是有用的，哪些文章需要改进。
　　KnowAll的最佳功能
　　易于启动：安装主题，就可以发布第一篇文章了。
　　易于组织：创建多个类别和子类别来组织文章并按您选择的顺序显示文章
　　多个设计选项：您可以从多个设计中选择并自定义它们以匹配您的品牌。
　　分析和报告：获取用户对您文章的反馈
　　2、Document360
　　Document360是一个自助式知识库软件，属于知识管理系统的范畴。它是一个完整的解决方案，用于收集、组织、检索和共享您可以定义的客户和内部用户的知识。
　　文档的最佳功能360
　　Document360屏幕截图
　　多个仪表板：它支持许多项目或文档网站，因此当产品列表扩展时，您不必再去其他任何地方。
　　强大的编辑：支持Markdown编辑器和WYSIWYG（你看到的就是你得到的）编辑器，以实现高效和结构化的写作。
　　类似谷歌的硬盘：存储和管理文件、图像、视频，并随时将其插入知识库。
　　版本控制和回滚：能够轻松地回滚到文章的前一个版本。
　　第三方集成：它可以与对讲机、Freshdesk、Microsoft和Zendesk等集成。
　　类别级别的安全性：Document360具有多个级别的高级安全访问，可以覆盖所有场景。您可以提供不同级别的读者访问权限。
　　分析和报告：提供有关客户地理位置、性能和搜索概述的详细报告的强大见解。
　　3、Zendesk
　　Zendesk被认为是最好的客户支持管理软件之一。但是，它可以处理的不仅仅是支持票和实时聊天。
　　Zendesk还具有一个称为Zendesk指南的平滑的知识管理系统。你可以使用它来建立私人和公共知识库，为客户和员工服务。
　　Zendesk指南是Zendesk软件套件的一部分。订阅Zendesk后，您可以访问其他几个工具。这使得它成为更适合大企业和企业的选择。
　　Zendesk的最佳功能
　　zendesk预览
　　初学者友好界面：Zendesk具有一个非常适合初学者的用户界面。它允许你管理你的知识库没有复杂的问题。
　　从一个地方管理一切：Zendesk还有一个全渠道仪表盘。有了它，你可以从一个地方管理你的知识库、支持票证、聊天、电话等等。
　　所见即所得编辑器：Zendesk指南包括一个What You See Is What You Get样式编辑器。您可以使用此编辑器创建丰富的内容设计。
　　内置CRM：Zendesk使用Sunshine，它自己的CRM允许你为客户提供个性化的体验。
　　4、HelpJuice
　　HelpJuice是一款现代且易于使用的知识库软件，非常适合初创企业和小型企业。沃尔玛等许多知名大品牌都在使用这款软件，比如周一这样的初创企业。
　　与大多数其他知识库软件不同，HelpJuice更易于设置和管理。它还有一个创新的编辑器，允许您创建结构良好的内容，同时保留更改历史记录。
　　帮助果汁的最佳功能
　　helpjuice预览
　　强大的编辑：工具集编辑器支持许多有用的功能。比如协作和控制访问。
　　简易设置：HelpJuice很容易设置。实际上，你可以在几分钟内建立并运行一个知识库。
　　主题和自定义：您还可以使用预先制作的主题自定义知识库的设计。
　　第三方集成：HelpJuice还支持Slack、Zendesk、SalesForce和其他集成。
　　你应该使用哪种知识付费系统源码？
　　WordPress是为中小型企业和初创企业建立知识库的理想选择。你可以用它来建立各种公共和私人知识库。它支持数千个扩展功能的插件。而且非常实惠。
　　对于大型企业和公司，我们建议使用像Zendesk这样的一体式解决方案。从一个地方管理你的客户服务和知识库是值得的。尤其是当你需要监督很多部门和团队的时候。
　　当然，你不应该只相信我们的话。做更多的研究和探索更多的选择，为您的企业找到正确的知识管理系统。你也可以看看我们自己的知识管理产品。我们有一系列工具，专门用来建立各种类型的知识库。

继续阅读 »

　　知识付费系统源码是几乎每一个成功企业的重要组成部分。然而，为什么许多新企业和初创企业忽视了它作为一个可选的组成部分？管理和定期维护知识库的昂贵成本是主要原因。使用复杂工具更新知识文章是企业避免建立知识库的另一个原因。然而，使用正确的KMS，您可以避免所有这些问题。并在很小的预算内建立一个易于管理的知识库。在本指南中，我们将仔细研究系统，以找到适合您平台的知识付费系统源码。
　　开源知识付费系统平台源码：zs.xcxyms.top
　　什么是知识付费系统源码？
　　知识付费系统可以用多种方式定义。对一些人来说，这是一个教学和学习的平台。对其他许多人来说，这是一个有效解决问题的平台。
　　简单地说，知识管理系统就是你用来分享知识的平台或工具。
　　例如，使用知识管理系统，您可以创建文章、文档和指南。然后，您可以将它们提供给您的客户或员工，让他们找到与您的产品相关的常见问题的解决方案。
　　无论是教育你的客户如何使用产品。或者教你的员工如何处理不同的情况。我们都同意，知识库在许多方面对所有类型的企业都是有益的。
　　●知识与管理的利益共享
　　如果您还需要进一步的说服力，这里只是知识管理的诸多好处中的一小部分。
　　●降低客户支持成本
　　有了知识库，您就可以让您的客户和员工自己找到解决方案。
　　如果客户遇到问题，他们可以在知识库中搜索答案。员工可以使用知识库查找如何处理某些情况的指南，如响应客户的询问。
　　不管怎样，它都有助于减少回复电子邮件和电话的时间和成本。
　　●培训员工和团队
　　私人知识库通常被公司用来培训和教育他们的员工和团队。您可以为每个部门创建多个知识库。用课程、解决方案和指南将其填满。这样他们就可以自己找到常见问题的教程指南了。
　　●更快的解决问题
　　知识库还通过提供按需解决方案帮助您节省时间。客户不再需要打电话等待数小时来解决问题。员工不需要经过数月的培训来回答简单的问题。都在知识库里。只需一次搜索就可以了。
　　●分享专业知识
　　请教专家已成为过去。有了知识库，你就成了专家。知识库中充满了由专家编写的指南和文件。没有必要在别处寻求帮助。
　　●更好的搜索引擎排名
　　公共知识库也可以作为搜索引擎优化的一个很好的来源。你可以优化知识文章和内容，在搜索引擎上为特定关键字排名更高。
　　不同类型的知识管理系统
　　开发知识管理系统的第一步是制定明确的目标。你的知识库的主要目的是什么？是服务客户还是管理自己的部门？
　　一旦你有了明确的目标，你就可以根据不同类型的知识库找到正确的知识管理系统。
　　●客户支持系统
　　这些是您为服务客户而制作的公共知识库系统。客户支持知识库包括教程和指南。尤其是对与产品或服务相关的常见问题的解答。这使得客户无需联系客户支持就可以找到解决方案。
　　●专家知识系统
　　专家知识系统通常是私有的，为公司的团队或部门服务。例如，客户支持部门可以使用专家知识系统快速找到客户常见问题的答案。这类知识库包括关于特定主题的专家指南。
　　●文件管理系统
　　顾名思义，文档管理系统是管理文档的知识库。它对于提供多种产品或服务的企业特别有用。文档管理系统帮助您在一个地方为所有产品创建一个大手册。
　　●数据库管理系统
　　数据库管理系统用于存储和共享与产品或业务相关的不同类型的数据。无论是与客户或产品历史相关的数据，数据库管理都有助于保持一切井井有条。
　　最佳知识付费系统源码和解决方案
　　我们想找到最好的知识付费系统源码和解决方案，你可以用来建立不同类型的知识库。
　　1、KnowAll
　　KnowAll是为企业和教育构建各种知识管理系统的完整解决方案。
　　使用KnowAll的主要好处是很容易开始。它基本上是WordPress的即插即用主题。一切都是为了帮助你在短时间内建立你的知识库，并定制它，使之与你的品牌保持一致。
　　有了KnowAll，建立你的知识库就像开始写博客一样简单。你只需点击几下就可以创建新的文章，对它们进行排序，并按类别和子类别对它们进行组织。主题提供多种设计选项，以满足您在用户界面方面的需求。
　　但这并不是全部，知识库之上的附加值是统计数据。使用KnowAll，您可以看到哪些文章是您浏览量最大的，并向您的读者征求一些反馈，这样您就可以看到哪些文章是有用的，哪些文章需要改进。
　　KnowAll的最佳功能
　　易于启动：安装主题，就可以发布第一篇文章了。
　　易于组织：创建多个类别和子类别来组织文章并按您选择的顺序显示文章
　　多个设计选项：您可以从多个设计中选择并自定义它们以匹配您的品牌。
　　分析和报告：获取用户对您文章的反馈
　　2、Document360
　　Document360是一个自助式知识库软件，属于知识管理系统的范畴。它是一个完整的解决方案，用于收集、组织、检索和共享您可以定义的客户和内部用户的知识。
　　文档的最佳功能360
　　Document360屏幕截图
　　多个仪表板：它支持许多项目或文档网站，因此当产品列表扩展时，您不必再去其他任何地方。
　　强大的编辑：支持Markdown编辑器和WYSIWYG（你看到的就是你得到的）编辑器，以实现高效和结构化的写作。
　　类似谷歌的硬盘：存储和管理文件、图像、视频，并随时将其插入知识库。
　　版本控制和回滚：能够轻松地回滚到文章的前一个版本。
　　第三方集成：它可以与对讲机、Freshdesk、Microsoft和Zendesk等集成。
　　类别级别的安全性：Document360具有多个级别的高级安全访问，可以覆盖所有场景。您可以提供不同级别的读者访问权限。
　　分析和报告：提供有关客户地理位置、性能和搜索概述的详细报告的强大见解。
　　3、Zendesk
　　Zendesk被认为是最好的客户支持管理软件之一。但是，它可以处理的不仅仅是支持票和实时聊天。
　　Zendesk还具有一个称为Zendesk指南的平滑的知识管理系统。你可以使用它来建立私人和公共知识库，为客户和员工服务。
　　Zendesk指南是Zendesk软件套件的一部分。订阅Zendesk后，您可以访问其他几个工具。这使得它成为更适合大企业和企业的选择。
　　Zendesk的最佳功能
　　zendesk预览
　　初学者友好界面：Zendesk具有一个非常适合初学者的用户界面。它允许你管理你的知识库没有复杂的问题。
　　从一个地方管理一切：Zendesk还有一个全渠道仪表盘。有了它，你可以从一个地方管理你的知识库、支持票证、聊天、电话等等。
　　所见即所得编辑器：Zendesk指南包括一个What You See Is What You Get样式编辑器。您可以使用此编辑器创建丰富的内容设计。
　　内置CRM：Zendesk使用Sunshine，它自己的CRM允许你为客户提供个性化的体验。
　　4、HelpJuice
　　HelpJuice是一款现代且易于使用的知识库软件，非常适合初创企业和小型企业。沃尔玛等许多知名大品牌都在使用这款软件，比如周一这样的初创企业。
　　与大多数其他知识库软件不同，HelpJuice更易于设置和管理。它还有一个创新的编辑器，允许您创建结构良好的内容，同时保留更改历史记录。
　　帮助果汁的最佳功能
　　helpjuice预览
　　强大的编辑：工具集编辑器支持许多有用的功能。比如协作和控制访问。
　　简易设置：HelpJuice很容易设置。实际上，你可以在几分钟内建立并运行一个知识库。
　　主题和自定义：您还可以使用预先制作的主题自定义知识库的设计。
　　第三方集成：HelpJuice还支持Slack、Zendesk、SalesForce和其他集成。
　　你应该使用哪种知识付费系统源码？
　　WordPress是为中小型企业和初创企业建立知识库的理想选择。你可以用它来建立各种公共和私人知识库。它支持数千个扩展功能的插件。而且非常实惠。
　　对于大型企业和公司，我们建议使用像Zendesk这样的一体式解决方案。从一个地方管理你的客户服务和知识库是值得的。尤其是当你需要监督很多部门和团队的时候。
　　当然，你不应该只相信我们的话。做更多的研究和探索更多的选择，为您的企业找到正确的知识管理系统。你也可以看看我们自己的知识管理产品。我们有一系列工具，专门用来建立各种类型的知识库。

收起阅读 »

mui初相识02：hello mui

mui hellomui

通过HBuilder X创建H5+项目

demo_01：标题栏

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport"  
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>标题栏</title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  

        <div class="mui-content">  
            hello mui  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </body>  
</html>

demo_02：折叠面板

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">折叠面板</h1>  
    </header>  

    <div class="mui-content">  
        <ul class="mui-table-view">  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板1</a>  
                <div class="mui-collapse-content">  
                    <p>面板1子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板2</a>  
                    <div class="mui-collapse-content">  
                    <p>面板2子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板3</a>  
                <div class="mui-collapse-content">  
                    <p>面板3子内容</p>  
                </div>  
            </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</body>  
</html>

demo_03：操作表

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">操作表</h1>  
    </header>  

    <div class="mui-content">  
        <a id="openSheet" class="mui-btn mui-btn-primary mui-btn-block" onclick="showMenu();">打开操作表</a>  
    </div>  

    <div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">  
        <!-- 可选择菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#">菜单1</a>  
          </li>  
          <li class="mui-table-view-cell">  
            <a href="#">菜单2</a>  
          </li>  
        </ul>  
        <!-- 取消菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#sheet"><b>取消</b></a>  
          </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  

        function showMenu(){  
            mui('#sheet').popover('toggle');  
        }  
    </script>  
</body>  
</html>

以上示例很简单，目标是了解mui的标签基础，顺利完成！

继续阅读 »

通过HBuilder X创建H5+项目

demo_01：标题栏

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport"  
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <title>标题栏</title>  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  
    <body>  

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">标题</h1>  
        </header>  

        <div class="mui-content">  
            hello mui  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </body>  
</html>

demo_02：折叠面板

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">折叠面板</h1>  
    </header>  

    <div class="mui-content">  
        <ul class="mui-table-view">  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板1</a>  
                <div class="mui-collapse-content">  
                    <p>面板1子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板2</a>  
                    <div class="mui-collapse-content">  
                    <p>面板2子内容</p>  
                </div>  
            </li>  
            <li class="mui-table-view-cell mui-collapse">  
                <a class="mui-navigate-right" href="#">面板3</a>  
                <div class="mui-collapse-content">  
                    <p>面板3子内容</p>  
                </div>  
            </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
</body>  
</html>

demo_03：操作表

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
</head>  
<body>  

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">操作表</h1>  
    </header>  

    <div class="mui-content">  
        <a id="openSheet" class="mui-btn mui-btn-primary mui-btn-block" onclick="showMenu();">打开操作表</a>  
    </div>  

    <div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">  
        <!-- 可选择菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#">菜单1</a>  
          </li>  
          <li class="mui-table-view-cell">  
            <a href="#">菜单2</a>  
          </li>  
        </ul>  
        <!-- 取消菜单 -->  
        <ul class="mui-table-view">  
          <li class="mui-table-view-cell">  
            <a href="#sheet"><b>取消</b></a>  
          </li>  
        </ul>  
    </div>  

    <script src="js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  

        function showMenu(){  
            mui('#sheet').popover('toggle');  
        }  
    </script>  
</body>  
</html>

以上示例很简单，目标是了解mui的标签基础，顺利完成！

收起阅读 »

如何禁用X5内核浏览器的竖直滑块？

使用X5内核浏览器时，x5内核渲染页面的滚动条，会随着页面内容的长短显示滚动滑块。关于如何禁用滚动滑块，找了一天没找到解决方法，最后在腾讯浏览服务中心的文档（https://x5.tencent.com/docs/webview.html）中查看到可以禁用滚动滑块的接口：

//竖直快速滑块，设置null可去除  
mWebview.getX5WebViewExtension().setVerticalTrackDrawable (Drawable drawable)

但是mWebview是个全限定名为 com.tencent.smtt.sdk.WebView 的 java对象，想要在js中调用java方法setVerticalTrackDrawable，有两个方案：方案一、使用Native.js；方案二、自己写个uniapp原生插件

首先尝试了方案一，但最终失败。方案一的js代码如下：

失败原因是使用x5内核时，无法使用plus api获取到webview的nativeInstanceObject对象。这个应该是一个bug。

    var pages = getCurrentPages();    
    var page = pages[pages.length - 1];    

    var wv1 = page.$getAppWebview();  

    console.log('$getAppWebview', wv1)  
    // 尝试拿到webview的原生对象  
    let mWebView = wv1.nativeInstanceObject();    

    // 当不使用x5内核时 mWebView 可以获取到值，当使用x5内核时 mWebView 总是为 null  
    console.log('mWebView', mWebView)  
    var clazz = plus.android.invoke(mWebView, 'getClass')  
    console.log('mWebView class', clazz);  
    var name = plus.android.invoke(clazz, 'getName')  
    console.log('mWebView class name', name);  
    console.log('invoke getX5WebViewExtension')  
    var extension = plus.android.invoke(mWebView, 'getX5WebViewExtension')  
    console.log('getX5WebViewExtension result:', extension)  
    if (extension != null) {  
        plus.android.invoke(mWebView, 'setVerticalTrackDrawable', null)  
        console.log('invoke setVerticalTrackDrawable success')  
    }

目前暂时有效的方法：方案二

方案二，目前仅配适了安卓。关于如何自定义原生插件，见：https://nativesupport.dcloud.net.cn/NativePlugin/course/android
自定义的原生插件，java代码如下：

package io.dcloud.uniplugin;  

import android.util.Log;  
import android.view.View;  
import android.view.ViewGroup;  

import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.WXSDKInstance;  
import com.tencent.smtt.export.external.extension.interfaces.IX5WebViewExtension;  

import java.util.HashSet;  
import java.util.LinkedList;  
import java.util.Set;  

import io.dcloud.common.DHInterface.IApp;  
import io.dcloud.common.DHInterface.IWebAppRootView;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  
import io.dcloud.feature.weex.WeexInstanceMgr;  
import io.dcloud.feature.x5.X5WebView;  

public class X5Util extends UniModule {  
    private final static String TAG = "X5Util";  

    //run ui thread  
    @UniJSMethod(uiThread = true)  
    public void disableVerticalTrack2(JSONObject options, UniJSCallback callback) {  
        JSONObject jsonObject = this.disableVerticalTrack();  
        callback.invoke(jsonObject);  
    }  

    /**  
     * {@link io.dcloud.feature.weex.extend.PlusModule#exec(String, String)}  
     * @return  
     */  
    //run JS thread  
    @UniJSMethod (uiThread = false)  
    public JSONObject disableVerticalTrack(){  
        JSONObject data = new JSONObject();  
        data.put("code", "error");  
        try {  
            WXSDKInstance instance = this.mWXSDKInstance;  
            if (instance != null && instance.isDestroy()) {  
                // ignore  
                return data;  
            } else {  
                IWebview hostWebview = WeexInstanceMgr.self().findWebview(instance);  
                IApp iApp = hostWebview.obtainApp();  
                if (iApp != null) {  
                    IWebAppRootView iWebAppRootView = iApp.obtainWebAppRootView();  
                    View view = iWebAppRootView.obtainMainView();  
                    if (view instanceof ViewGroup) {  
                        ViewGroup vg = (ViewGroup) view;  
                        Set<X5WebView> set = new HashSet<>();  
                        getChildViewGroup(vg, set);  

                        for (X5WebView iWebview : set) {  
                            disableVerticalTrackDrawable(iWebview, data);  
                        }  
                    }  
                }  
            }  
        } catch (Exception e) {  
            Log.e(TAG, "disableVerticalTrack exception: ", e);  
        }  

        return data;  
    }  

    void disableVerticalTrackDrawable(X5WebView x5, JSONObject data) {  
        IX5WebViewExtension x5WebViewExtension = x5.getX5WebViewExtension();  
        if (x5WebViewExtension != null) {  
            x5WebViewExtension.setVerticalTrackDrawable(null);  
            data.put("code", "success");  
        }  
    }  
    void getChildViewGroup(ViewGroup vg, Set<X5WebView> dist) {  
        LinkedList<ViewGroup> list = new LinkedList<>();  
        list.add(vg);  

        while (!list.isEmpty()) {  
            vg = list.removeFirst();  
            int childCount = vg.getChildCount();  
            for (int i = 0; i < childCount; i++) {  
                View childAt = vg.getChildAt(i);  
                if (childAt instanceof X5WebView) {  
                    dist.add((X5WebView)childAt);  
                } else if (childAt instanceof ViewGroup) {  
                    list.addLast((ViewGroup) childAt);  
                }  
            }  
        }  
    }  
}

在js中调用：

    // #ifdef APP-PLUS  
    //禁用滑动按钮，这个插件会遍历所有view对象，找到X5WebView，然后禁用竖直快速滑块  
    const X5Util = uni.requireNativePlugin('X5Util')  
    X5Util.disableVerticalTrack()  
    // #endif

因为没有找到如何准确地获取当前页面webview对象(也就是X5WebView对象实例), 所以想了个笨办法：遍历IWebAppRootView对象的所有子孙view然后禁用竖直滑块。存在的问题有：1. 遍历查询存在性能问题； 2. 禁用的是所有的X5WebView的竖直滑块。

如果哪位大神知道如何准确地获取X5WebView请告知一下，这样就可以解决上述两个问题了。

继续阅读 »

使用X5内核浏览器时，x5内核渲染页面的滚动条，会随着页面内容的长短显示滚动滑块。关于如何禁用滚动滑块，找了一天没找到解决方法，最后在腾讯浏览服务中心的文档（https://x5.tencent.com/docs/webview.html）中查看到可以禁用滚动滑块的接口：

//竖直快速滑块，设置null可去除  
mWebview.getX5WebViewExtension().setVerticalTrackDrawable (Drawable drawable)

但是mWebview是个全限定名为 com.tencent.smtt.sdk.WebView 的 java对象，想要在js中调用java方法setVerticalTrackDrawable，有两个方案：方案一、使用Native.js；方案二、自己写个uniapp原生插件

首先尝试了方案一，但最终失败。方案一的js代码如下：

失败原因是使用x5内核时，无法使用plus api获取到webview的nativeInstanceObject对象。这个应该是一个bug。

    var pages = getCurrentPages();    
    var page = pages[pages.length - 1];    

    var wv1 = page.$getAppWebview();  

    console.log('$getAppWebview', wv1)  
    // 尝试拿到webview的原生对象  
    let mWebView = wv1.nativeInstanceObject();    

    // 当不使用x5内核时 mWebView 可以获取到值，当使用x5内核时 mWebView 总是为 null  
    console.log('mWebView', mWebView)  
    var clazz = plus.android.invoke(mWebView, 'getClass')  
    console.log('mWebView class', clazz);  
    var name = plus.android.invoke(clazz, 'getName')  
    console.log('mWebView class name', name);  
    console.log('invoke getX5WebViewExtension')  
    var extension = plus.android.invoke(mWebView, 'getX5WebViewExtension')  
    console.log('getX5WebViewExtension result:', extension)  
    if (extension != null) {  
        plus.android.invoke(mWebView, 'setVerticalTrackDrawable', null)  
        console.log('invoke setVerticalTrackDrawable success')  
    }

目前暂时有效的方法：方案二

方案二，目前仅配适了安卓。关于如何自定义原生插件，见：https://nativesupport.dcloud.net.cn/NativePlugin/course/android
自定义的原生插件，java代码如下：

package io.dcloud.uniplugin;  

import android.util.Log;  
import android.view.View;  
import android.view.ViewGroup;  

import com.alibaba.fastjson.JSONObject;  
import com.taobao.weex.WXSDKInstance;  
import com.tencent.smtt.export.external.extension.interfaces.IX5WebViewExtension;  

import java.util.HashSet;  
import java.util.LinkedList;  
import java.util.Set;  

import io.dcloud.common.DHInterface.IApp;  
import io.dcloud.common.DHInterface.IWebAppRootView;  
import io.dcloud.common.DHInterface.IWebview;  
import io.dcloud.feature.uniapp.annotation.UniJSMethod;  
import io.dcloud.feature.uniapp.bridge.UniJSCallback;  
import io.dcloud.feature.uniapp.common.UniModule;  
import io.dcloud.feature.weex.WeexInstanceMgr;  
import io.dcloud.feature.x5.X5WebView;  

public class X5Util extends UniModule {  
    private final static String TAG = "X5Util";  

    //run ui thread  
    @UniJSMethod(uiThread = true)  
    public void disableVerticalTrack2(JSONObject options, UniJSCallback callback) {  
        JSONObject jsonObject = this.disableVerticalTrack();  
        callback.invoke(jsonObject);  
    }  

    /**  
     * {@link io.dcloud.feature.weex.extend.PlusModule#exec(String, String)}  
     * @return  
     */  
    //run JS thread  
    @UniJSMethod (uiThread = false)  
    public JSONObject disableVerticalTrack(){  
        JSONObject data = new JSONObject();  
        data.put("code", "error");  
        try {  
            WXSDKInstance instance = this.mWXSDKInstance;  
            if (instance != null && instance.isDestroy()) {  
                // ignore  
                return data;  
            } else {  
                IWebview hostWebview = WeexInstanceMgr.self().findWebview(instance);  
                IApp iApp = hostWebview.obtainApp();  
                if (iApp != null) {  
                    IWebAppRootView iWebAppRootView = iApp.obtainWebAppRootView();  
                    View view = iWebAppRootView.obtainMainView();  
                    if (view instanceof ViewGroup) {  
                        ViewGroup vg = (ViewGroup) view;  
                        Set<X5WebView> set = new HashSet<>();  
                        getChildViewGroup(vg, set);  

                        for (X5WebView iWebview : set) {  
                            disableVerticalTrackDrawable(iWebview, data);  
                        }  
                    }  
                }  
            }  
        } catch (Exception e) {  
            Log.e(TAG, "disableVerticalTrack exception: ", e);  
        }  

        return data;  
    }  

    void disableVerticalTrackDrawable(X5WebView x5, JSONObject data) {  
        IX5WebViewExtension x5WebViewExtension = x5.getX5WebViewExtension();  
        if (x5WebViewExtension != null) {  
            x5WebViewExtension.setVerticalTrackDrawable(null);  
            data.put("code", "success");  
        }  
    }  
    void getChildViewGroup(ViewGroup vg, Set<X5WebView> dist) {  
        LinkedList<ViewGroup> list = new LinkedList<>();  
        list.add(vg);  

        while (!list.isEmpty()) {  
            vg = list.removeFirst();  
            int childCount = vg.getChildCount();  
            for (int i = 0; i < childCount; i++) {  
                View childAt = vg.getChildAt(i);  
                if (childAt instanceof X5WebView) {  
                    dist.add((X5WebView)childAt);  
                } else if (childAt instanceof ViewGroup) {  
                    list.addLast((ViewGroup) childAt);  
                }  
            }  
        }  
    }  
}

在js中调用：

    // #ifdef APP-PLUS  
    //禁用滑动按钮，这个插件会遍历所有view对象，找到X5WebView，然后禁用竖直快速滑块  
    const X5Util = uni.requireNativePlugin('X5Util')  
    X5Util.disableVerticalTrack()  
    // #endif

因为没有找到如何准确地获取当前页面webview对象(也就是X5WebView对象实例), 所以想了个笨办法：遍历IWebAppRootView对象的所有子孙view然后禁用竖直滑块。存在的问题有：1. 遍历查询存在性能问题； 2. 禁用的是所有的X5WebView的竖直滑块。

如果哪位大神知道如何准确地获取X5WebView请告知一下，这样就可以解决上述两个问题了。

收起阅读 »

FirstUI组件库：始于颜值、陷于品质、忠于服务

组件

一、产品介绍

FirstUI(https://www.firstui.cn/)

给大家推荐下我们做的FirstUI(https://www.firstui.cn/)，它是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。包括框架、组件、模板、功能插件几个部分。我们前后花了大概6个月的时间，目前组件、布局部分基本完成了，还做了几款简单的模板，后续会着力做模板这一块，多提供一些成熟常用的场景模板。可以实现快速上手，更好的节约使用者的时间与成本。

FirstUI我们倾注了大量的精力，很期待大家的关注试用，谢谢！

1、产品特征：

多端支持。一套代码，多端适用，支持iOS（vue和Nvue）、Android（vue和Nvue）、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
完善的组件。目前共规划118款，已上线70款，涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
丰富实用的布局、模板。基于FirstUI提供的组件，针对常用场景、行业，提供丰富实用的布局和模板。
专属社区。我们用flarum(ps:这个大家也可以试下，设计与功能方面好用，感觉用来做社区非常棒)打造了FirstU专属社区(https://forum.firstui.cn/)，用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求，也可以在社区中反馈。

2、源码及文档：

github: https://github.com/FirstUI/FirstUI （欢迎star :-D）
gitee: https://gitee.com/firstui/FirstUI （欢迎star :-D）
文档地址: https://doc.firstui.cn

3、扫码体验：

大部分组件是操作性的，大家扫码操作可以有更真切的感受。目前发布了6个平台版本，大家可以扫码体验下。考虑快速预览，所以暂未上架App应用，后续待功能完善再进行上架。

4、部分效果：

5、进展与已上线功能清单：

进展情况：

已上线功能清单：

框架
- FirstUI组件库(uni-app版)
模板
- 登录（A）模板
- 登录（B）模板
- 登录（C）模板
- 登录（D）模板
- 门户模板
组件
- 基础组件
- Color 色彩
- Icon 图标
- Button 按钮
- Footer 页脚
- Animation 动画
- 导航组件
- NavBar 导航栏
- Pagination 分页器
- SegmentedControl 分段器
- Tabbar 标签栏
- Tabs 标签页
- IndexList 索引列表
- NoticeBar 通告栏
- Sticky 吸顶容器
- Steps 步骤条
- Fab 浮动按钮
- Drawer 抽屉
- BottomPopup 底部弹出层
- TopPopup 顶部弹出层
- TimeAxis 时间轴
- 布局组件
- Layout 栅格布局
- Panel 面板
- Preview 表单预览
- List 列表
- Card 卡片
- 扩展组件
- ShareSheet 分享面板
- Result 结果页
- FilterBar 筛选栏
- DigitalRoller 数字滚轮
- DigitalKeyboard 数字键盘
- CountdownVerify 验证码倒计时
- SwiperDot 轮播图指示点
- LicensePlate 车牌号键盘
- SingleInput 单输入框
- 操作反馈
- ActionSheet 上拉菜单
- Toast 轻提示
- BackDrop 遮罩层
- Dialog 对话框
- DropdownMenu 下拉菜单
- Modal 模态框
- Landscape 压屏窗
- Loading 加载
- Message 消息提示
- SwipeAction 滑动菜单
- DropdownList 下拉菜单
- LoadAni 加载动画
- 数据组件
- Badge 徽章
- Alert 警告框
- Avatar 头像
- Tag 标签
- Progress 进度条
- Collapse 折叠面板
- Divider 分割线
- LoadMore 加载更多
- Empty 暂无数据
- 画布
- Poster 绘制分享海报
- 表单组件
- Picker 选择器
- DatePicker 日期时间选择器
- Form 表单校验
- Input 输入框
- InputNumber 数字输入框
- Radio 单选框
- Checkbox 复选框
- Switch 开关
- Textarea 多行输入框
- SearchBar 搜索栏
- JS
- Clipboard 复制文本
- Request 网络请求
- Utils 工具类
- Validator 表单验证

二、商业版与开源版

FirstUI分为开源版与商业版，部分组件为商业版可用，目前商业版的费用是￥150元，一次性费用，支持后续更新。

VIP会员权益：

完整版源码
全部组件
物料商城享VIP折扣
专属会员群指导、答疑
新特性优先体验
VIP专属文档

会员权益详情: https://www.firstui.cn/right

三、使用体验与建议

FirstUI刚刚开始成长，非常期待大家的体验使用和宝贵的建议！大家可以在文后留言，让我们有新的认识，谢谢！

继续阅读 »

一、产品介绍

FirstUI(https://www.firstui.cn/)

给大家推荐下我们做的FirstUI(https://www.firstui.cn/)，它是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。包括框架、组件、模板、功能插件几个部分。我们前后花了大概6个月的时间，目前组件、布局部分基本完成了，还做了几款简单的模板，后续会着力做模板这一块，多提供一些成熟常用的场景模板。可以实现快速上手，更好的节约使用者的时间与成本。

FirstUI我们倾注了大量的精力，很期待大家的关注试用，谢谢！

1、产品特征：

多端支持。一套代码，多端适用，支持iOS（vue和Nvue）、Android（vue和Nvue）、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
完善的组件。目前共规划118款，已上线70款，涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
丰富实用的布局、模板。基于FirstUI提供的组件，针对常用场景、行业，提供丰富实用的布局和模板。
专属社区。我们用flarum(ps:这个大家也可以试下，设计与功能方面好用，感觉用来做社区非常棒)打造了FirstU专属社区(https://forum.firstui.cn/)，用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求，也可以在社区中反馈。

2、源码及文档：

github: https://github.com/FirstUI/FirstUI （欢迎star :-D）
gitee: https://gitee.com/firstui/FirstUI （欢迎star :-D）
文档地址: https://doc.firstui.cn

3、扫码体验：

大部分组件是操作性的，大家扫码操作可以有更真切的感受。目前发布了6个平台版本，大家可以扫码体验下。考虑快速预览，所以暂未上架App应用，后续待功能完善再进行上架。

4、部分效果：

5、进展与已上线功能清单：

进展情况：

已上线功能清单：

框架
- FirstUI组件库(uni-app版)
模板
- 登录（A）模板
- 登录（B）模板
- 登录（C）模板
- 登录（D）模板
- 门户模板
组件
- 基础组件
- Color 色彩
- Icon 图标
- Button 按钮
- Footer 页脚
- Animation 动画
- 导航组件
- NavBar 导航栏
- Pagination 分页器
- SegmentedControl 分段器
- Tabbar 标签栏
- Tabs 标签页
- IndexList 索引列表
- NoticeBar 通告栏
- Sticky 吸顶容器
- Steps 步骤条
- Fab 浮动按钮
- Drawer 抽屉
- BottomPopup 底部弹出层
- TopPopup 顶部弹出层
- TimeAxis 时间轴
- 布局组件
- Layout 栅格布局
- Panel 面板
- Preview 表单预览
- List 列表
- Card 卡片
- 扩展组件
- ShareSheet 分享面板
- Result 结果页
- FilterBar 筛选栏
- DigitalRoller 数字滚轮
- DigitalKeyboard 数字键盘
- CountdownVerify 验证码倒计时
- SwiperDot 轮播图指示点
- LicensePlate 车牌号键盘
- SingleInput 单输入框
- 操作反馈
- ActionSheet 上拉菜单
- Toast 轻提示
- BackDrop 遮罩层
- Dialog 对话框
- DropdownMenu 下拉菜单
- Modal 模态框
- Landscape 压屏窗
- Loading 加载
- Message 消息提示
- SwipeAction 滑动菜单
- DropdownList 下拉菜单
- LoadAni 加载动画
- 数据组件
- Badge 徽章
- Alert 警告框
- Avatar 头像
- Tag 标签
- Progress 进度条
- Collapse 折叠面板
- Divider 分割线
- LoadMore 加载更多
- Empty 暂无数据
- 画布
- Poster 绘制分享海报
- 表单组件
- Picker 选择器
- DatePicker 日期时间选择器
- Form 表单校验
- Input 输入框
- InputNumber 数字输入框
- Radio 单选框
- Checkbox 复选框
- Switch 开关
- Textarea 多行输入框
- SearchBar 搜索栏
- JS
- Clipboard 复制文本
- Request 网络请求
- Utils 工具类
- Validator 表单验证

二、商业版与开源版

FirstUI分为开源版与商业版，部分组件为商业版可用，目前商业版的费用是￥150元，一次性费用，支持后续更新。

VIP会员权益：

完整版源码
全部组件
物料商城享VIP折扣
专属会员群指导、答疑
新特性优先体验
VIP专属文档

会员权益详情: https://www.firstui.cn/right

三、使用体验与建议

FirstUI刚刚开始成长，非常期待大家的体验使用和宝贵的建议！大家可以在文后留言，让我们有新的认识，谢谢！

收起阅读 »

redis能够查询list中id=指定值的数据集合吗，有的话用哪个方法

AMAP

谢谢

mui初相识01：路漫漫其修远兮，吾将上下而求索

mui hellomui

起心动念

想学一门手机端前端的技术，本想学习uniapp，后来被mui拐跑了，因为之前对jq有所了解，觉得mui应该和jq差不太多，先学之后不行再改uniapp。

学习计划

选课程，跟着老师做示例（学习入门阶段）；
自己设计一个有价值的产品（产品设计 & 技术调研）；
打造后台数据库及服务器，为前端提供接口（我的本职工作，小菜一碟）；
前后端交合，形成产品，造福全猿类！（口气有点大，还是吸引同类吧！）

课程选择

【前端移动端开发】MUI视频教程（移动端开发神器）

可否出个可视化操作数据库的组件

优化建议

包括数据库连接、数据库增删改查等方法，可否有个可视化操作组件，只需要配置相关的属性和关联有关的组件，即可轻松操作数据库。

HBuilderX 3.3.2+ uni.getLocation 更新注意事项

uni_app

HBuilderX 3.3.2 以下版本 App 端 uni.getLocation 存在 type 参数不生效的 bug。实际上返回的坐标类型依据打包时是否勾选了三方定位模块，当勾选了三方定位模块（如高德定位）时返回 gcj02 类型的，否则返回 wgs84 类型。

以上问题导致：部分开发者获取到了 gcj02 类型的坐标（国内一般均使用此类型）而误以为自己需要的是 wgs84 类型；部分开发者获未配置 SDK 取到了 wgs84 类型的坐标，误认为自己获取到的 gcj02 类型的坐标偏移。

更新 HBuilderX 到 3.3.2 后，修复了以上问题（type 参数将开始生效，也请注意定位 SDK 配置需要一致），如仍需获取 gcj02 类型，请在调用 uni.getLocation 时指定 type 参数以及勾选填写三方定位模块：

uni.getLocation({  
    type: 'gcj02',  
    success: function (res) {  
        console.log('当前位置的经度：' + res.longitude);  
        console.log('当前位置的纬度：' + res.latitude);  
    }  
});

继续阅读 »

HBuilderX 3.3.2 以下版本 App 端 uni.getLocation 存在 type 参数不生效的 bug。实际上返回的坐标类型依据打包时是否勾选了三方定位模块，当勾选了三方定位模块（如高德定位）时返回 gcj02 类型的，否则返回 wgs84 类型。

以上问题导致：部分开发者获取到了 gcj02 类型的坐标（国内一般均使用此类型）而误以为自己需要的是 wgs84 类型；部分开发者获未配置 SDK 取到了 wgs84 类型的坐标，误认为自己获取到的 gcj02 类型的坐标偏移。

更新 HBuilderX 到 3.3.2 后，修复了以上问题（type 参数将开始生效，也请注意定位 SDK 配置需要一致），如仍需获取 gcj02 类型，请在调用 uni.getLocation 时指定 type 参数以及勾选填写三方定位模块：

uni.getLocation({  
    type: 'gcj02',  
    success: function (res) {  
        console.log('当前位置的经度：' + res.longitude);  
        console.log('当前位置的纬度：' + res.latitude);  
    }  
});

收起阅读 »

问题说明

解决方案

详细代码

直接退出app

画面显示提示按钮，让用户手动刷新

注意

问题说明

解决方案

详细代码

直接退出app

画面显示提示按钮，让用户手动刷新

注意

修改uni统计源代码(修改后的uni-stat见附件)

1. 修改getRoute方法

2. 修改getPageRoute方法

3. 修改class Stat的load方法

4. 在lifecycle前定义函数tryinterceptShare

5. 修改lifecycle 的 onLoad 方法

6. try catch lifecycle 中的所有方法，防止uni-stat统计出错引发应用异常

修改uni统计源代码(修改后的uni-stat见附件)

1. 修改getRoute方法

2. 修改getPageRoute方法

3. 修改class Stat的load方法

4. 在lifecycle前定义函数tryinterceptShare

5. 修改lifecycle 的 onLoad 方法

6. try catch lifecycle 中的所有方法，防止uni-stat统计出错引发应用异常

首先尝试了方案一，但最终失败。方案一的js代码如下：

目前暂时有效的方法：方案二

首先尝试了方案一，但最终失败。方案一的js代码如下：

目前暂时有效的方法：方案二

一、产品介绍

FirstUI(https://www.firstui.cn/)

1、产品特征：

2、源码及文档：

3、扫码体验：

4、部分效果：

5、进展与已上线功能清单：

二、商业版与开源版

VIP会员权益：

三、使用体验与建议

一、产品介绍

FirstUI(https://www.firstui.cn/)

1、产品特征：

2、源码及文档：

3、扫码体验：

4、部分效果：

5、进展与已上线功能清单：

二、商业版与开源版

VIP会员权益：

三、使用体验与建议

起心动念

相关网站

学习计划

课程选择

相关练习

起心动念

相关网站

学习计划

课程选择

相关练习

热门文章