使用APICloud AVM框架开发人事档案管理助手app实战

由于人事档案具有涉密性，所以本应用没有使用后台服务，全部功能都在APP本地实现。

开发工具采用　APICloud Studio3，基于VSCode的（PS：比基于Atom的autio2好用太多）；

数据库采用sqllite，没有使用UI框架，个人觉得AVM本身支持的flex布局配合自写CSS样式，完全可以实现市面上所有的ＵＩ框架的元素，这个取决于个人功力。

一、项目思维脑图

二、功能介绍

１、人员花名册

２、编制情况

３、个人中心

三、技术要点

手势密码验证，本地数据库操作，语音播报。

用到的模块

项目文件目录

引用一下官方的关于目录结构的介绍

四、功能开发详解

1、首页导航

系统首页使用tabLayout，可以将相关参数配置在JSON文件中，再在config.xml中将content的值设置成该JSON文件的路径。如果底部导航没有特殊需求这里强烈建议大家使用tabLayout为APP进行布局，官方已经将各类手机屏幕及不同的分辨率进行了适配，免去了很多关于适配方面的问题。

​app.json文件内容，关于json文件的命名是没有限制的，我习惯用app。​

{
    "name": "root",
    "textOffset": 6,
    "color": "#999999",
    "selectedColor": "#006aff",
    "scrollEnabled": false,
    "hideNavigationBar": false,
    "bgColor": "#fff",
    "navigationBar": {
        "background": "#006aff",
        "shadow": "rgba(0,0,0,0)",
        "color": "#fff",
        "fontSize": 18,
        "hideBackButton": true
    },
    "tabBar": {
      "background": "#fff",
      "shadow": "#eee",
      "color": "#5E5E5E",
      "selectedColor": "#006aff",
      "textOffset": 3,
      "fontSize": 11,
      "scrollEnabled": true,
      "index": 1,
      "preload": 0,
      "frames": [
        {
          "title": "编制情况",
          "name": "home",
          "url": "./pages/records/organ"
        },
        {
          "title": "人员花名册",
          "name": "course",
          "url": "./pages/person/organ"
        },
        {
          "title": "个人中心",
          "name": "user",
          "url": "./pages/main/main"
        }
      ],
      "list": [
        {
          "text": "编制",
          "iconPath": "./image/authoried-o.png",
          "selectedIconPath": "./image/authoried.png"
        },
        {
          "text": "人员",
          "iconPath": "./image/person-o.png",
          "selectedIconPath": "./image/person.png"
        },
        {
          "text": "我的",
          "iconPath": "./image/user-o.png",
          "selectedIconPath": "./image/user.png"
        }
      ]
    }
  }

2、列表显示及分页

​通过上拉刷新和下拉操作，配合JS方法实现分页查询功能。​

<template name='list'>
    <scroll-view scroll-y class="main" enable-back-to-top refresher-enabled refresher-triggered={refresherTriggered} onrefresherrefresh={this.onrefresherrefresh} onscrolltolower={this.onscrolltolower}>
        <view class="item-box">
            <view class="item" data-id={item.id} v-for="(item, index) in personList" tapmode onclick="openTab">
                <image class="avator" src={item.photo} mode="widthFix"></image>
                <text class="item-title">{item.name}</text>
                <text class="item-sub-title">{item.nation}</text>
            </view>
        </view>
        <view class="footer">
            <text class="loadDesc">{loadStateDesc}</text>
        </view>     
    </scroll-view>
</template>

<script>
  import $util from "../../utils/utils.js"
  export default {
    name: 'list', 
    data() {
      return{
        personList:[],
        skip: 0,
        refresherTriggered: false,
        haveMoreData: true,
        loading: false,
        organid:0
      }
    },
    computed: {     
      loadStateDesc(){
        if (this.data.loading || this.data.haveMoreData) {
          return '加载中...';
        } else if (this.personList.length > 0) {
          return '没有更多啦';
        } else {
          return '暂时没有内容';
        }
      }
    },
    methods: {
      apiready(){
        this.data.organid = api.pageParam.id;
        this.loadData(false);
        //更换头像
        api.addEventListener({
          name: 'setavator'
        }, (ret, err) => {
          this.loadData();
        });
        //新增人员信息
        api.addEventListener({
          name: 'addperson'
        }, (ret, err) => {
          this.loadData();
        });
        //删除人员信息
        api.addEventListener({
          name: 'delperson'
        }, (ret, err) => {
          this.loadData();
        });
        if(api.getPrefs({sync: true,key: 'role'})=='99'){
          //添加编辑按钮
          api.setNavBarAttr({
            rightButtons: [{
              text: '新增'
            }]
          });
          //监听右上角按钮点击事件
          api.addEventListener({
            name: 'navitembtn'
          }, (ret, err) => {
            if (ret.type == 'right') {
              $util.openWin({
                name: 'personadd',
                url: 'personadd.stml',
                title: '新增人员信息',
                pageParam:{
                  organid:this.data.organid
                }
              });
            }
          });
        }     
      },
      loadData(loadMore) {
        if (this.data.loading) {
          return;
        }
        api.showProgress();
        this.data.loading = true;
        var limit = 15;
        var skip = loadMore?(this.data.skip+1)*limit:0;
 
        // console.log('select id,name,grade,sex,nation,photo from authority where organ = '+this.data.organid+' order by id limit '+limit+' offset '+skip);
 
        var db = api.require('db');
        db.selectSql({
          name: 'doc',
          sql: 'select id,name,grade,sex,nation,photo from authorized where organ = '+this.data.organid+' order by id limit '+limit+' offset '+skip
        }, (ret, err)=> {
          // console.log(JSON.stringify(ret));
          // console.log(JSON.stringify(err));
          if (ret.status) {
            let records = ret.data;
            this.data.haveMoreData = records.length == limit;
            if (loadMore) {
              this.data.personList = this.data.personList.concat(records);
            } else {
              this.data.personList = records;
            }
            this.data.skip = skip;
          } else {
            this.data.recordsList = records;
            api.toast({
              msg:err.msg
            })
          }
          this.data.loading = false;
          this.data.refresherTriggered = false;
          api.hideProgress();
        });
      },
      /*下拉刷新页面*/
      onrefresherrefresh(){
        this.data.refresherTriggered = true;
        this.loadData(false);
      },
      onscrolltolower() {
        if (this.data.haveMoreData) {
          this.loadData(true);
        }
      },
      openTab(e){
        let id = e.currentTarget.dataset.id;
        $util.openWin({
          name: "personinfo",
          url: 'personinfo.stml',
          title: '人员信息',
          pageParam:{
            id:id
          }
        });
      }
    }
  }
</script>

3、表单提交

采用AVM自带的from控件，通过onsubmit进行数据提交

4、头像图片上传及base64转码

由于是本地sqllite数据库，人员头像图片需要转成base64编码存储到数据库中。通过官方模块trans进行图片转码操作。

​​

<image class="avator" src={this.data.src} mode="widthFix"  onclick="setavator"></image>
 
            setavator(){
        api.actionSheet({
          cancelTitle: '取消',
          buttons: ['拍照', '打开相册']
        }, (ret, err) => {
          if (ret.buttonIndex == 3) {
            return false;
          }
          var sourceType = (ret.buttonIndex == 1) ? 'camera' : 'album';
          api.getPicture({
            sourceType: sourceType,
            allowEdit: true,
            quality: 20,
            destinationType:'url'
          }, (ret, err) => {
            if (ret && ret.data) {
              var trans = api.require('trans');
              trans.decodeImgToBase64({
                imgPath: ret.data
              }, (ret, err) => {
                // console.log(JSON.stringify(ret));
                // console.log(JSON.stringify(err));
                if (ret.status) {
                  let b64 =  "data:image/jpeg;base64,"+ret.base64Str;
                  this.data.src = b64;
                } else {
                  api.toast({
                    msg:'照片上传失败，请重新选择！'
                  })
                }
              });
            }
          });
        });
      },

5、sqllite数据库 db模块

由于数据库文件需要存储的应用安装文件中，所有需要官方fs模块配合使用来进行数据库文件的操作。

copyDB(){
            var fs = api.require('fs');
            fs.copyTo({
                oldPath: 'widget://db/doc.db',
                newPath: 'fs://db'
            }, function(ret, err) {
                // console.log(JSON.stringify(ret));
                // console.log(JSON.stringify(err));
                if (ret.status) {
                    // console.log(JSON.stringify(ret));
                    api.toast({
                        msg:'拷贝数据库成功!'
                    })
                } else {
                    // console.log(JSON.stringify(err));
                    api.toast({
                        msg:JSON.stringify(err)
                    })
                }
            });
        },
        openDB(){
            var db = api.require('db');
            db.subfile({
                directory:'fs://db'
            }, (ret, err)=> {
                // console.log(JSON.stringify(ret));
                // console.log(JSON.stringify(err));
                if (ret.status) {
                    // console.log(JSON.stringify(ret));
                    //打开数据库
                    db.openDatabase({
                        name: 'doc',
                        path: ret.files[0]
                    }, (ret, err)=> {
                        // console.log(JSON.stringify(ret));
                        // console.log(JSON.stringify(err));
                        if (ret.status) {
                            // console.log(JSON.stringify(ret));
                            api.toast({
                                msg:'打开数据库成功！'
                            })
                        } else {
                            // console.log(JSON.stringify(err));
                            api.toast({
                                msg:JSON.stringify(err)
                            })
                        }
                    });
                    
                } else {
                    // console.log(JSON.stringify(err));
                    api.toast({
                        msg:JSON.stringify(err)
                    })
                }
            });
        },
        closeDB(){
            var db = api.require('db');
            db.closeDatabase({
                name: 'doc'
            }, function(ret, err) {
                if (ret.status) {
                    console.log(JSON.stringify(ret));
                    api.toast({
                        msg:'关闭数据库成功'
                    })
                } else {
                    // console.log(JSON.stringify(err));
                    api.toast({
                        msg:JSON.stringify(err)
                    })
                }
            });
        },
        updateDB(){
            var fs = api.require('fs');
            var db = api.require('db');
            db.closeDatabase({
                name: 'doc'
            }, (ret, err) => {
                if (ret.status) {
                    //拷贝文件
                    fs.copyTo({
                        oldPath: 'widget://doc.db',
                        newPath: 'fs://db/'
                    }, (ret, err) => {
                        if (ret.status) {
                             db.subfile({
                                directory:'fs://db'
                            }, (ret, err)=> {
                                if(ret.status){
                                    //打开数据库
                                    db.openDatabase({
                                        name: 'doc',
                                        path: ret.files[0]
                                    }, (ret, err)=> {
                                        if (ret.status) {
                                            api.toast({
                                                msg:'数据库更新成功！'
                                            })
                                        } else {
                                            api.toast({
                                                msg:JSON.stringify(err)
                                            })
                                        }
                                    });
                                }
                                else{
                                    api.toast({
                                        msg:JSON.stringify(err)
                                    })
                                }                              
                            })
                        } else {
                            api.toast({
                                msg:JSON.stringify(err)
                            })
                        }
                    });
                } else {
                    api.toast({
                        msg:JSON.stringify(err)
                    })
                }
            }); 
        },

6、语音播报功能

采用官方提供的IFLyVoice模块，需要注意的是，基础资源文件和发音人资源文件（.jet文件）需要到科大讯飞开发者平台进行下载导入的项目中。还有对数字的解读不是精确，尤其是年份，最好不要用数字，而是用中文。

​​

//添加朗读按钮
          api.setNavBarAttr({
            rightButtons: [{
              text: '朗读'
            }]
          });
          //监听右上角按钮点击事件
          api.addEventListener({
            name: 'navitembtn'
          }, (ret, err) => {
            // console.log(JSON.stringify(this.data.info));
            if (ret.type == 'right') {
              var IFlyVoice = api.require('IFlyVoice');
              IFlyVoice.initSpeechSynthesizer((ret)=>{
              //   console.log(JSON.stringify(ret));
              });
              IFlyVoice.startSynthetic({
                text:this.data.info,
                commonPath_Android:'widget://res/android/common.jet',
                pronouncePath_Android:'widget://res/android/xiaoyan.jet',
                pronounceName:'xiaoyan',
                speed:40
              },(ret,err)=>{
                // console.log(JSON.stringify(ret));
                // console.log(JSON.stringify(err));
                if (ret.status) {
                  // console.log('合成成功');
                } else {
                  // console.log(JSON.stringify(err));
                }
              });
            }
          });

7、手势密码保护

手势密码保护由于官方模块存在样式问题，及原生模块存在遮罩问题，所以采用了平台上提供的H5模块。APICloud强大之处在这里进行了淋漓尽致的体现，通过AVM及原生模块无法实现的功能，可以再用H5的方式来实现！牛逼！！！！，通过设置全局变量来记录是否已设置手机密码，每次应用启动通过这个变量来判断是否开启手势密码保护。

this.data.islock =api.getPrefs({sync: true,key: 'islock'});
        if(this.data.islock=='Y'){
          api.openFrame({
            name: 'h5lock',
            url:'../../html/h5lock.html'
          })
        }
        else{
          api.toast({
            msg:'您还没有设置手势密码，为了数据安全，请尽快设置。'
          })
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>H5lock</title>
    <style type="text/css">
        body {
            text-align: center;
            background-color: #000000;
        }
        .title {
            /*color: #87888a;*/
            margin-top: 85px;
            font-size: 20px;
            font-weight:lighter;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="../script/H5lock.js"></script>
<script type="text/javascript">
    var opt = {
        chooseType: 3, // 3 , 4 , 5,
        width: 300, // lock wrap width
        height: 300, // lock wrap height
        container: 'element', // the id attribute of element
        inputEnd: function (psw){} // when draw end param is password string
    }
    var lock = new H5lock(opt);
    lock.init();
</script>
</body>
</html>

(function(){
        window.H5lock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
            this.devicePixelRatio = window.devicePixelRatio || 1;
        };
 
 
        H5lock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板 小圆圈
            this.ctx.strokeStyle = '#87888a';//密码的点点默认的颜色
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        H5lock.prototype.drawPoint = function(style) { // 初始化圆心
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.fillStyle = style;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2.5, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
        H5lock.prototype.drawStatusPoint = function(type) { // 初始化状态线条
            for (var i = 0 ; i < this.lastPoint.length ; i++) {
                this.ctx.strokeStyle = type;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.stroke();
            }
        }
        H5lock.prototype.drawLine = function(style, po, lastPoint) {//style:颜色 解锁轨迹
            this.ctx.beginPath();
            this.ctx.strokeStyle = style;
            this.ctx.lineWidth = 3;
            this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
 
            for (var i = 1 ; i < this.lastPoint.length ; i++) {
                this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
            }
            this.ctx.lineTo(po.x, po.y);
            this.ctx.stroke();
            this.ctx.closePath();
 
        }
        H5lock.prototype.createCircle = function() {// 创建解锁点的坐标，根据canvas的大小来平均分配半径
 
            var n = this.chooseType;
            var count = 0;
            this.r = this.ctx.canvas.width / (1 + 4 * n);// 公式计算
            this.lastPoint = [];
            this.arr = [];
            this.restPoint = [];
            var r = this.r;
            for (var i = 0 ; i < n ; i++) {
                for (var j = 0 ; j < n ; j++) {
                    count++;
                    var obj = {
                        x: j * 4 * r + 3 * r,
                        y: i * 4 * r + 3 * r,
                        index: count
                    };
                    this.arr.push(obj);
                    this.restPoint.push(obj);
                }
            }
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            for (var i = 0 ; i < this.arr.length ; i++) {
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }
            //return arr;
        }
        H5lock.prototype.getPosition = function(e) {// 获取touch点相对于canvas的坐标
            var rect = e.currentTarget.getBoundingClientRect();
            var po = {
                x: (e.touches[0].clientX - rect.left)*this.devicePixelRatio,
                y: (e.touches[0].clientY - rect.top)*this.devicePixelRatio
              };
            return po;
        }
        H5lock.prototype.update = function(po) {// 核心变换方法在touchmove时候调用
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
 
            for (var i = 0 ; i < this.arr.length ; i++) { // 每帧先把面板画出来
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }
 
            this.drawPoint('#27AED5');// 每帧花轨迹
            this.drawStatusPoint('#27AED5');// 每帧花轨迹
 
            this.drawLine('#27AED5',po , this.lastPoint);// 每帧画圆心
 
// if (this.lastPoint.length == 4) {
//     // debugger
// }
 
            for (var i = 0 ; i < this.restPoint.length ; i++) {
                if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
                    this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);
                    this.lastPoint.push(this.restPoint[i]);
                    this.restPoint.splice(i, 1);
                    break;
                }
            }
 
        }
        H5lock.prototype.checkPass = function(psw1, psw2) {// 检测密码
            var p1 = '',
            p2 = '';
            for (var i = 0 ; i < psw1.length ; i++) {
                p1 += psw1[i].index + psw1[i].index;
            }
            for (var i = 0 ; i < psw2.length ; i++) {
                p2 += psw2[i].index + psw2[i].index;
            }
            return p1 === p2;
        }
        H5lock.prototype.storePass = function(psw) {// touchend结束之后对密码和状态的处理
 
            if (this.pswObj.step == 1) {
                if (this.checkPass(this.pswObj.fpassword, psw)) {
                    this.pswObj.step = 2;
                    this.pswObj.spassword = psw;
                    document.getElementById('title').innerHTML = '密码保存成功';                                   
 
                    this.drawStatusPoint('#2CFF26');
                     this.drawPoint('#2CFF26');
                    window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));
                    window.localStorage.setItem('chooseType', this.chooseType);
 
                } else {
                    document.getElementById('title').innerHTML = '两次不一致，重新输入';
                    this.drawStatusPoint('red');
                     this.drawPoint('red');
                    delete this.pswObj.step;
                }
            } else if (this.pswObj.step == 2) {
                if (this.checkPass(this.pswObj.spassword, psw)) {
                    var title = document.getElementById("title");
                    title.style.color = "#2CFF26";
                    title.innerHTML = '解锁成功';
 
                    this.drawStatusPoint('#2CFF26');//小点点外圈高亮
                    this.drawPoint('#2CFF26');
                    this.drawLine('#2CFF26',this.lastPoint[this.lastPoint.length-1] , this.lastPoint);// 每帧画圆心
 
                    api.closeFrame();
                    
 
                } else if (psw.length < 4) {
                    
                    this.drawStatusPoint('red');
                    this.drawPoint('red');
                    this.drawLine('red',this.lastPoint[this.lastPoint.length-1] , this.lastPoint);// 每帧画圆心
 
                    var title = document.getElementById("title");
                    title.style.color = "red";
                    title.innerHTML = '请连接4个点';
 
                } else {
                    this.drawStatusPoint('red');
                    this.drawPoint('red');
                    this.drawLine('red',this.lastPoint[this.lastPoint.length-1] , this.lastPoint);// 每帧画圆心
 
 
                    var title = document.getElementById("title");
                    title.style.color = "red";
                    title.innerHTML = '手势密码错误，请重试';
                }
            } else {
                this.pswObj.step = 1;
                this.pswObj.fpassword = psw;
                document.getElementById('title').innerHTML = '再次输入';
            }
 
        }
        H5lock.prototype.makeState = function() {
            if (this.pswObj.step == 2) {
                // document.getElementById('updatePassword').style.display = 'block';
                //document.getElementById('chooseType').style.display = 'none';
 
                var title = document.getElementById("title");
                title.style.color = "#87888a";
                title.innerHTML = '请解锁';
 
            } else if (this.pswObj.step == 1) {
                //document.getElementById('chooseType').style.display = 'none';
                // document.getElementById('updatePassword').style.display = 'none';
            } else {
                // document.getElementById('updatePassword').style.display = 'none';
                //document.getElementById('chooseType').style.display = 'block';
            }
        }
        H5lock.prototype.setChooseType = function(type){
            chooseType = type;
            init();
        }
        H5lock.prototype.updatePassword = function(){
            window.localStorage.removeItem('passwordxx');
            window.localStorage.removeItem('chooseType');
            this.pswObj = {};
            document.getElementById('title').innerHTML = '绘制解锁图案';
            this.reset();
        }
        H5lock.prototype.initDom = function(){
            var wrap = document.createElement('div');
            var str = '<h4 id="title" class="title" style="color:#87888a">请绘制您的图形密码</h4>';
 
            wrap.setAttribute('style','position: absolute;top:0;left:0;right:0;bottom:0;');
            var canvas = document.createElement('canvas');
            canvas.setAttribute('id','canvas');
            canvas.style.cssText = 'background-color: #000;display: inline-block;margin-top: 76px;';
            wrap.innerHTML = str;
            wrap.appendChild(canvas);
 
            var width = this.width || 320;
            var height = this.height || 320;
            
            document.body.appendChild(wrap);
 
            // 高清屏锁放
            canvas.style.width = width + "px";
            canvas.style.height = height + "px";
            canvas.height = height * this.devicePixelRatio;
            canvas.width = width * this.devicePixelRatio;
            
 
        }
        H5lock.prototype.init = function() {
            this.initDom();
            this.pswObj = window.localStorage.getItem('passwordxx') ? {
                step: 2,
                spassword: JSON.parse(window.localStorage.getItem('passwordxx'))
            } : {};
            this.lastPoint = [];
            this.makeState();
            this.touchFlag = false;
            this.canvas = document.getElementById('canvas');
            this.ctx = this.canvas.getContext('2d');
            this.createCircle();
            this.bindEvent();
        }
        H5lock.prototype.reset = function() {
            this.makeState();
            this.createCircle();
        }
        H5lock.prototype.bindEvent = function() {
            var self = this;
            this.canvas.addEventListener("touchstart", function (e) {
                e.preventDefault();// 某些android 的 touchmove不宜触发 所以增加此行代码
                 var po = self.getPosition(e);
 
                 for (var i = 0 ; i < self.arr.length ; i++) {
                    if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {
 
                        self.touchFlag = true;
                        self.drawPoint(self.arr[i].x,self.arr[i].y);
                        self.lastPoint.push(self.arr[i]);
                        self.restPoint.splice(i,1);
                        break;
                    }
                 }
             }, false);
             this.canvas.addEventListener("touchmove", function (e) {
                if (self.touchFlag) {
                    self.update(self.getPosition(e));
                }
             }, false);
             this.canvas.addEventListener("touchend", function (e) {
                 if (self.touchFlag) {
                     self.touchFlag = false;
                     self.storePass(self.lastPoint);
                     setTimeout(function(){
 
                        self.reset();
                    }, 1000);
                 }
 
 
             }, false);
 
            //  document.getElementById('updatePassword').addEventListener('click', function(){
            //      self.updatePassword();
            //   });
        }
})();

8、设置手势密码

​登录成功之后，在个人中心来设置手势密码。可通过参数设置来初始化密码强度。​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>H5lock</title>
    <style type="text/css">
        body {
            text-align: center;
            background-color: #000000;
        }
        .title {
            /*color: #87888a;*/
            margin-top: 85px;
            font-size: 20px;
            font-weight:lighter;
        }
        .reset{
            position: relative;
            top: 200px;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="../script/setH5lock.js"></script>
<script type="text/javascript">
    var opt = {
        chooseType: 3, // 3 , 4 , 5,
        width: 300, // lock wrap width
        height: 300, // lock wrap height
        container: 'element', // the id attribute of element
        inputEnd: function (psw){} // when draw end param is password string
    }
    var lock = new H5lock(opt);
    lock.init();
</script>
</body>
</html>

9、修改密码

系统默认设定了用户的初始密码，用户登录系统后会提示进行密码修改，修改后的密码进行了MD5加密，由于没有后台系统，所以密码的MD5加密，采用了JS来进行加密。通过开发工具调试控制台安装js插件

安装成功之后会在文件目录中显示

​然后在用的地方直接引入即可。​

import $md5 from '../../node_modules/js-md5/build/md5.min.js'
 var db = api.require('db');
                    db.executeSql({
                        name: 'doc',
                        sql: "update user set password = '"+ md5(ret.text) +"' where id = 1"
                    }, (ret, err)=> {
                        // console.log(JSON.stringify(ret));
                        // console.log(JSON.stringify(err));
                        if (ret.status) {
                            api.alert({
                                title: '消息提醒',
                                msg: '密码修改成功，请重新登陆',
                            }, (ret, err) => {
                                //清除用户信息
                                api.removePrefs({
                                    key: 'username'
                                });
                                api.removePrefs({
                                    key: 'userid'
                                });
                                api.removePrefs({
                                    key: 'password'
                                }); 
                                $util.openWin({
                                    name: 'login',
                                    url: '../main/login.stml',
                                    title: '',
                                    hideNavigationBar:true
                                });
                            });
                        } else {            
                            api.toast({
                                msg:JSON.stringify(err)
                            })
                        }
                    });

10、封装工具类插件 utils.js

​在需要用到插件中通用方法的地方，直接引用即可。​

import $util from "../../utils/utils.js"

const $util = {
    openWin(param){
        var param = {
            name: param.name,
            url: param.url,
            title: param.title||'',
            pageParam: param.pageParam||{},
            hideNavigationBar: param.hideNavigationBar || false,
            navigationBar:{
                background:'#1492ff',
                shadow: '#fff',
                color: '#fff'
            }
        };
        if (this.isApp()) {
            api.openTabLayout(param);
        } else {
            api.openWin(param);
        }
    },
    isApp(){
        if (api.platform && api.platform == 'app') {
            return true;
        }
        return false;
    },
    fitRichText(richtext, width){
        var str = `<img style="max-width:${width}px;"`;
        var result = richtext.replace(/<img/gi, str);
        return result;
    },
    isLogin(){
        if(api.getPrefs({sync: true,key: 'userid'})){
            return true;
        }
        return false;
    },
    openDataBase(){
        var fs = api.require('fs');
        var db = api.require('db');
        db.subfile({
            directory:'fs://db'
        }, (ret, err)=> {
            if(ret.status){
                //打开数据库
                db.openDatabase({
                    name: 'doc',
                    path: ret.files[0]
                }, (ret, err)=> {
                    if (ret.status) {
                        // api.toast({
                        //     msg:'打开数据库成功！'
                        // })
                    } else {
                        api.toast({
                            msg:JSON.stringify(err)
                        })
                    }
                });
            }
            else{
                //拷贝文件
                fs.copyTo({
                    oldPath: 'widget://doc.db',
                    newPath: 'fs://db/'
                }, function(ret, err) {
                    if (ret.status) {
                        db.subfile({
                            directory:'fs://db'
                        }, (ret, err)=> {
                            if(ret.status){
                                //打开数据库
                                db.openDatabase({
                                    name: 'doc',
                                    path: ret.files[0]
                                }, (ret, err)=> {
                                    if (ret.status) {
 
                                    } else {
                                        api.toast({
                                            msg:JSON.stringify(err)
                                        })
                                    }
                                });
                            }
                            else{
                                api.toast({
                                    msg:JSON.stringify(err)
                                })
                            }
                        })   
                    } else {
                        api.toast({
                            msg:JSON.stringify(err)
                        })
                    }
                });
            }
        })
    }
}
export default $util;

11、用户功能权限

系统分为2级用户，管理员账号和领导账号。通过角色ID进行区分，管理员账号有信息的增删改查功能，领导账号只有信息的查询功能。

用于登录成功之后将用户信息进行缓存。

//登陆APP
      submit() {        
        api.showProgress();
        // console.log( "select id,username,password from user where username = '"+this.data.user+"' and password = '"+md5(this.data.psw)+"'");
        var db = api.require('db');
        db.selectSql({
          name: 'doc',
          sql: "select id,username,password,role from user where username = '"+this.data.user+"' and password = '"+md5(this.data.psw)+"'"
        }, (ret, err)=> {
          // console.log(JSON.stringify(ret));
          // console.log(JSON.stringify(err));
          if (ret.status) {
            if(ret.data.length==1){
              api.setPrefs({key:'username',value:ret.data[0].username});
              api.setPrefs({key:'userid',value:ret.data[0].id});
              api.setPrefs({key:'password',value:ret.data[0].password});
              api.setPrefs({key:'role',value:ret.data[0].role});
 
              api.sendEvent({
                name: 'loginsuccess',
              });
              api.closeWin();
            }
            else{
              api.toast({
                msg:'登陆失败，请输入正确的用户名和密码'
              })
            }
            
          } else {            
            api.toast({
              msg:JSON.stringify(err)
            })
          }
          api.hideProgress();
        });
      }

​在需要验证用户权限的地方通过获取角色ID，进行逻辑判断。​

if(api.getPrefs({sync: true,key: 'role'})=='99'){
          //添加编辑按钮
          api.setNavBarAttr({
            rightButtons: [{
              text: '编辑'
            }]
          });
          //监听右上角按钮点击事件
          api.addEventListener({
            name: 'navitembtn'
          }, (ret, err) => {
            if (ret.type == 'right') {
              $util.openWin({
                name: 'personedit',
                url: 'personedit.stml',
                title: '人员信息编辑',
                pageParam:{
                  id:this.data.id
                }
              });
            }
          });
        }
        else{
          //添加朗读按钮
          api.setNavBarAttr({
            rightButtons: [{
              text: '朗读'
            }]
          });
          //监听右上角按钮点击事件
          api.addEventListener({
            name: 'navitembtn'
          }, (ret, err) => {
            // console.log(JSON.stringify(this.data.info));
            if (ret.type == 'right') {
              var IFlyVoice = api.require('IFlyVoice');
              IFlyVoice.initSpeechSynthesizer((ret)=>{
              //   console.log(JSON.stringify(ret));
              });
              IFlyVoice.startSynthetic({
                text:this.data.info,
                commonPath_Android:'widget://res/android/common.jet',
                pronouncePath_Android:'widget://res/android/xiaoyan.jet',
                pronounceName:'xiaoyan',
                speed:40
              },(ret,err)=>{
                // console.log(JSON.stringify(ret));
                // console.log(JSON.stringify(err));
                if (ret.status) {
                  // console.log('合成成功');
                } else {
                  // console.log(JSON.stringify(err));
                }
              });
            }
          });
        }

12、双击退出应用程序

应用如果不做任何处理，在应用初始页面出发keyback事件，会弹出提示框提示是否退出程序，体验感极差。针对此进行了优化，由于应用首页采用了tablayout，所以只需要在tablayout默认选中项的索引页面中添加双击keyback事件的监听，并通过api.toast进行提示。

在登录页面也需要添加此监听，应为用户退出登录之后，会自动跳转至登录页，如果不做处理，用户点击物理返回键就会导致用户在没有登录的情况下跳回上一页。加了此监听事件用户点击返回键不做处理，双击会提示退出程序。

//监听返回  双击退出程序
        api.setPrefs({
          key: 'time_last',
          value: '0'
        });
        api.addEventListener({
          name : 'keyback'
          }, (ret, err) => {
          var time_last = api.getPrefs({sync: true,key: 'time_last'});
          var time_now = Date.parse(new Date());
          if (time_now - time_last > 2000) {
            api.setPrefs({key:'time_last',value:time_now});
            api.toast({
              msg : '再按一次退出APP',
              duration : 2000,
              location : 'bottom'
            });
          } else {
            api.closeWidget({
              silent : true
            });
          }
        });

13、应用动态权限

安卓10之后，对应用的权限要求提高，不在像老版本一样配置上就会自动获取，必须进行提示。

依据官方给出的教程进行了动态权限的设置。

添加 mianfest.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<manifest>
    <application name="targetSdkVersion" value="28"/>
</manifest>

​在系统索引页进行动态权限获取提醒，本系统只涉及到了文件存储权限的获取，如需要获取多个权限，在List[]数组中继续添加需要的权限，然后根据添加的权限个数，做相应的几个判断即可。​

let limits=[];
        //获取权限
        var resultList = api.hasPermission({
          list: ['storage']
        });
        if (resultList[0].granted) {
          // 已授权，可以继续下一步操作
        } else {
          limits.push(resultList[0].name);
        }
        if(limits.length>0){
          api.requestPermission({
            list: limits,
          }, (res) => {
            
          });
        }