@@ -4,19 +4,19 @@ | |||
} | |||
<style> | |||
.lr-form-item-title { | |||
/* .lr-form-item-title { | |||
width: 117px; | |||
padding-right: 21px; | |||
} | |||
</style> | |||
*/</style> | |||
<div class="lr-form-wrap" id="form"> | |||
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> | |||
<div class="lr-form-item-title">上班时间</div> | |||
<input id="WorkTime" type="text" class="form-control" /> | |||
<div class="lr-form-item-title">上班时间<font face="宋体">*</font></div> | |||
<input id="WorkTime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" /> | |||
</div> | |||
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> | |||
<div class="lr-form-item-title">下班时间</div> | |||
<input id="CloseTime" type="text" class="form-control" /> | |||
<div class="lr-form-item-title">下班时间<font face="宋体">*</font></div> | |||
<input id="CloseTime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" /> | |||
</div> | |||
@*<div class="col-xs-6 lr-form-item" data-table="ADR_Restriction" > | |||
<div class="lr-form-item-title">签到有效时间</div> | |||
@@ -35,20 +35,20 @@ | |||
<input id="SignOutEndTime" type="text" class="form-control "/> | |||
</div>*@ | |||
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> | |||
<div class="lr-form-item-title">允许迟到范围(分)</div> | |||
<input id="LateOvertime" type="text" class="form-control" /> | |||
<div class="lr-form-item-title">允许迟到(分)<font face="宋体">*</font></div> | |||
<input id="LateOvertime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" /> | |||
</div> | |||
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> | |||
<div class="lr-form-item-title">允许早退范围(分)</div> | |||
<input id="LeaveOverTime" type="text" class="form-control" /> | |||
<div class="lr-form-item-title">允许早退(分)<font face="宋体">*</font></div> | |||
<input id="LeaveOverTime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" /> | |||
</div> | |||
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> | |||
<div class="lr-form-item-title">未签到,记为</div> | |||
<div id="NoSignIn"></div> | |||
<div class="lr-form-item-title">未签到,记为<font face="宋体">*</font></div> | |||
<div id="NoSignIn" isvalid="yes" checkexpession="NotNull"></div> | |||
</div> | |||
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> | |||
<div class="lr-form-item-title">未签退,记为</div> | |||
<div id="NoSignOut"></div> | |||
<div class="lr-form-item-title">未签退,记为<font face="宋体">*</font></div> | |||
<div id="NoSignOut" isvalid="yes" checkexpession="NotNull"></div> | |||
</div> | |||
</div> | |||
@Html.AppendJsFile("/Areas/PersonnelManagement/Views/ADR_Restriction/Form.js") |
@@ -5,43 +5,46 @@ export default { | |||
// 考虑到用户刷新网页时会丢失全局数据、页面栈、页面数据等,因此直接跳回首页即可 | |||
async onLaunch(param) { | |||
//应用的生命周期 应用启动后触发 | |||
// #ifdef H5 || APP-VUE | |||
// H5 刷新时获取当前页面路径 | |||
const pagePath = '/' + param.path | |||
const pagePath = "/" + param.path; | |||
// 如果 H5 刷新后访问的不是首页/登录页/注册页,直接跳转回首页 | |||
if (!['/pages/login', '/pages/home', '/pages/signup'].includes(pagePath)) { | |||
if (!["/pages/login", "/pages/home", "/pages/signup"].includes(pagePath)) { | |||
this.$nextTick(() => { | |||
this.TAB_TO('/pages/home') | |||
return | |||
}) | |||
this.TAB_TO("/pages/home"); | |||
return; | |||
}); | |||
} | |||
// #endif | |||
// #ifdef MP-WEIXIN | |||
// 小程序端,处理更新 (支付宝/钉钉暂不支持) | |||
const updateManager = uni.getUpdateManager() | |||
const updateManager = uni.getUpdateManager(); | |||
updateManager.onUpdateReady(() => { | |||
this.HIDE_LOADING() | |||
this.HIDE_LOADING(); | |||
uni.showModal({ | |||
title: '更新提示', | |||
content: '小程序新版本已准备好,是否更新应用?', | |||
title: "更新提示", | |||
content: "小程序新版本已准备好,是否更新应用?", | |||
success: ({ confirm }) => { | |||
if (confirm) { | |||
updateManager.applyUpdate() | |||
updateManager.applyUpdate(); | |||
} | |||
} | |||
}) | |||
}) | |||
}, | |||
}); | |||
}); | |||
// #endif | |||
} | |||
} | |||
}, | |||
onError(error) { | |||
console.log(error); | |||
}, | |||
}; | |||
</script> | |||
<style lang="less"> | |||
// 现在 CSS 必须在 <style> 中引入,参考:https://ask.dcloud.net.cn/question/86907 | |||
// 后续 uni-app 升级后可能会支持直接 import 样式,到时候可以省略下行代码 | |||
@import '~@/components/learun-mpui/styles/index.css'; | |||
@import "~@/components/learun-mpui/styles/index.css"; | |||
page { | |||
background-color: #f3f3f3; | |||
@@ -5,7 +5,7 @@ HBuilderX 版本不低于:2.7.9 | |||
(本文档只是对初次使用框架做简单的介绍,对于框架 API、组件、平台差异等,您可查看 **/docs** 目录下的详细说明文档) | |||
(本文档格式为 markdown,您可以使用浏览器等工具来打开,获取更佳的阅读体验) | |||
# 文档目录 | |||
- **/README.md** : 二次开发手册(本文档); | |||
- **/docs/api.md** : 框架 API 文档; | |||
@@ -15,9 +15,9 @@ HBuilderX 版本不低于:2.7.9 | |||
# 开发前的准备 | |||
力软框架移动端使用 uni-app 技术来开发。 | |||
使用 uni-app,您只需编写一套 Vue 代码,就能编译输出成手机 App、各小程序平台、H5 网页端等多个平台的成品。 | |||
力软框架移动端支持 H5、安卓 App/iOS App、微信/支付宝/钉钉小程序。 | |||
需要下载安装以下工具: | |||
- 【必装工具】:[HBuilderX](https://www.dcloud.io/hbuilderx.html) ,uni-app 的官方开发工具,**注意请下载App开发版** | |||
- 开发微信小程序:[微信小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) | |||
@@ -25,10 +25,10 @@ HBuilderX 版本不低于:2.7.9 | |||
- 开发 iOS /安卓 App / H5:HBuilderX 内置网页版调试工具,也可以连接手机真机调试,无需安装其他软件。 | |||
**注意:**请使用最新版 HBuilderX。如果您已安装,可以点击菜单栏的「帮助」>「检查更新」来升级到最新版。请确保您的 HBuilderX 版本不低于本文档开头所标注的HBuilderX 开发工具版本。 | |||
HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX.exe 即可启动; | |||
小程序开发工具则按照指引,依次点击下一步即可完成安装。 | |||
**本文档只负责提示您开发过程中易错点,以及对力软框架提供的 API、工具类等给出说明,不是使用 uni-app 开发移动应用的教程。** | |||
学习 uni-app 移动端开发,或是在以上工具的安装、使用过程中遇到问题时,可以参考以下文档: | |||
- [uni-app 介绍与文档](https://uniapp.dcloud.io/) | |||
@@ -39,7 +39,7 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX | |||
# 起步 | |||
启动 HBuilderX,点击左上角菜单:「文件」>「打开目录」,然后选择本项目的文件夹,即可打开本项目。 | |||
安装后**首次**运行 HBuilderX 时,需要的操作: | |||
- 【必做】 点击左上角菜单>「工具」>「插件安装」,在打开的插件列表中安装「less 编译」; | |||
- 【必做】 找到 /config.js 文件,修改公司名称、后台接口地址等相关配置; | |||
@@ -49,14 +49,14 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX | |||
## 小程序主体注册 | |||
如果是开发小程序,您需要在对应的平台来申请注册自己的小程序主体账号,然后提交小程序名称、图标、类目,并申请小程序 AppID; | |||
后续提交审核、发布小程序,均需要在小程序公众平台上进行操作。 | |||
请先申请小程序 AppID: | |||
[微信小程序后台](https://mp.weixin.qq.com/) | |||
[钉钉小程序后台](https://open-dev.dingtalk.com/) | |||
[支付宝小程序后台](https://openhome.alipay.com/) | |||
申请了小程序 AppID,打开项目根目录下的 manifest.json,请在其中「微信/支付宝小程序配置」页面填入 AppID。 | |||
## 项目目录介绍 | |||
打开本项目后,可以在左侧的浏览项目目录和文件,点击文件即可进行编辑。 | |||
本项目的目录文件介绍: | |||
@@ -70,6 +70,7 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX | |||
- /node_modules: 使用到的 npm 库 | |||
- /unpackage (从未运行过的项目没有此文件夹): 运行项目时会自动把编译生成的代码放在此目录下 | |||
(文件): | |||
- App.vue: 【重要】 运行时的全局 Vue 对象,可以用来设置应用生命周期钩子、导入全局样式等 | |||
- config.js: 【重要】 多个页面的配置文件,可以控制页面显示的内容和方式 | |||
@@ -81,10 +82,10 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX | |||
- index.html: 编译到 H5 端时的页面模板 | |||
## uni-app 页面开发 | |||
uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS、CSS 代码; | |||
文件中可以引入其他 JS、CSS,引入安装好的 npm 库,也可以引入图片视频音乐等媒体。 | |||
**需要注意的是,所有页面必须放置于 /pages 目录中, 且每个页面都必须在 /pages.json 中添加一条对应的记录,否则页面无法导航。** | |||
**当您向力软框架中添加新的页面时,请及时修改 /pages.json 文件,确保所有页面都登记在该文件中。** | |||
例如: | |||
@@ -92,20 +93,22 @@ uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS | |||
`/pages/mypage/index.vue` | |||
那么在 /pages.json 里,需要在 pages 列表中添加一条记录: | |||
`{ "path": "pages/mypage/index", "style": { "navigationBarTitleText": "我是页面的标题" } }` | |||
# 使用力软代码生成器 | |||
请先确保代码生成器的版本和 App 版本相同,不同版本可能会引发错误。 | |||
以下是使用力软代码生成器创建页面的流程: | |||
- 【自动】 使用力软代码生成器发布功能时,会在 /pages 目录下生成相应的页面文件; | |||
- 【手动】 您需要在 /pages.json 页面配置文件中,手动把这些页面添加到 pages 字段中。 | |||
例如: | |||
假设您使用代码生成器时,设置的输出目录名为 LR_Codedemo,功能类名为 wxtest,那么代码生成器会自动生成两个文件: | |||
`/pages/LR_Codedemo/wxtest/list.vue` (移动页面主页面); | |||
`/pages/LR_Codedemo/wxtest/single.vue` (移动表单页)。 | |||
然后,需要配置 /pages.json 文件: | |||
在 pages 数组里添加以下两条(navigationStyle 是页面的标题,可以自行更改): | |||
``` | |||
{ | |||
"pages": [ | |||
@@ -117,16 +120,16 @@ uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS | |||
} | |||
``` | |||
这样就完成了新自定义页面的生成。 | |||
按照小程序和 uni-app 的规范, 每个页面均需要单独建立一个文件夹;但是这样将使得工程目录过于复杂,因此力软框架中,每个页面使用单个 .vue 文件,和传统 Web 开发相同,请知悉。 | |||
也因为以上原因,新建页面时,请不要勾选「创建同名目录」这一项。 | |||
----- | |||
# 二次开发指南 | |||
**注意:** 小程序端不同于常规 Web 端,它没有浏览器上的 DOM 、BOM,也就是说没有 document、window 对象,因此也无法使用 jQuery 等工具;但是有同类的工具和 API 可以替代。 | |||
**注意:** 本框架中的每个页面为单个 .vue 文件,无需按照小程序或 uni-app 的要求,为每个页面单独建一个文件夹,因为这样会导致目录结构过于复杂。 | |||
每个 .vue 文件的格式如下: | |||
``` html | |||
<template> | |||
@@ -144,7 +147,7 @@ export default { | |||
/* 页面样式 */ | |||
</style> | |||
``` | |||
## 页面模板相关注意事项: | |||
- 模板遵循 Vue 模板写法,[uni-app 页面模板文档](https://uniapp.dcloud.io/component/README); | |||
- 网页中的 `<div>`、`<span>`、`<img>` 等标签,在 uni-app 中需要分别写成 `<view>`、`<text>`、`<image>` 等; | |||