|
@@ -5,7 +5,7 @@ HBuilderX 版本不低于:2.7.9 |
|
|
|
|
|
|
|
|
(本文档只是对初次使用框架做简单的介绍,对于框架 API、组件、平台差异等,您可查看 **/docs** 目录下的详细说明文档) |
|
|
(本文档只是对初次使用框架做简单的介绍,对于框架 API、组件、平台差异等,您可查看 **/docs** 目录下的详细说明文档) |
|
|
(本文档格式为 markdown,您可以使用浏览器等工具来打开,获取更佳的阅读体验) |
|
|
(本文档格式为 markdown,您可以使用浏览器等工具来打开,获取更佳的阅读体验) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# 文档目录 |
|
|
# 文档目录 |
|
|
- **/README.md** : 二次开发手册(本文档); |
|
|
- **/README.md** : 二次开发手册(本文档); |
|
|
- **/docs/api.md** : 框架 API 文档; |
|
|
- **/docs/api.md** : 框架 API 文档; |
|
@@ -15,9 +15,9 @@ HBuilderX 版本不低于:2.7.9 |
|
|
# 开发前的准备 |
|
|
# 开发前的准备 |
|
|
力软框架移动端使用 uni-app 技术来开发。 |
|
|
力软框架移动端使用 uni-app 技术来开发。 |
|
|
使用 uni-app,您只需编写一套 Vue 代码,就能编译输出成手机 App、各小程序平台、H5 网页端等多个平台的成品。 |
|
|
使用 uni-app,您只需编写一套 Vue 代码,就能编译输出成手机 App、各小程序平台、H5 网页端等多个平台的成品。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
力软框架移动端支持 H5、安卓 App/iOS App、微信/支付宝/钉钉小程序。 |
|
|
力软框架移动端支持 H5、安卓 App/iOS App、微信/支付宝/钉钉小程序。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
需要下载安装以下工具: |
|
|
需要下载安装以下工具: |
|
|
- 【必装工具】:[HBuilderX](https://www.dcloud.io/hbuilderx.html) ,uni-app 的官方开发工具,**注意请下载App开发版** |
|
|
- 【必装工具】:[HBuilderX](https://www.dcloud.io/hbuilderx.html) ,uni-app 的官方开发工具,**注意请下载App开发版** |
|
|
- 开发微信小程序:[微信小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) |
|
|
- 开发微信小程序:[微信小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) |
|
@@ -25,10 +25,10 @@ HBuilderX 版本不低于:2.7.9 |
|
|
- 开发 iOS /安卓 App / H5:HBuilderX 内置网页版调试工具,也可以连接手机真机调试,无需安装其他软件。 |
|
|
- 开发 iOS /安卓 App / H5:HBuilderX 内置网页版调试工具,也可以连接手机真机调试,无需安装其他软件。 |
|
|
|
|
|
|
|
|
**注意:**请使用最新版 HBuilderX。如果您已安装,可以点击菜单栏的「帮助」>「检查更新」来升级到最新版。请确保您的 HBuilderX 版本不低于本文档开头所标注的HBuilderX 开发工具版本。 |
|
|
**注意:**请使用最新版 HBuilderX。如果您已安装,可以点击菜单栏的「帮助」>「检查更新」来升级到最新版。请确保您的 HBuilderX 版本不低于本文档开头所标注的HBuilderX 开发工具版本。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX.exe 即可启动; |
|
|
HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX.exe 即可启动; |
|
|
小程序开发工具则按照指引,依次点击下一步即可完成安装。 |
|
|
小程序开发工具则按照指引,依次点击下一步即可完成安装。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**本文档只负责提示您开发过程中易错点,以及对力软框架提供的 API、工具类等给出说明,不是使用 uni-app 开发移动应用的教程。** |
|
|
**本文档只负责提示您开发过程中易错点,以及对力软框架提供的 API、工具类等给出说明,不是使用 uni-app 开发移动应用的教程。** |
|
|
学习 uni-app 移动端开发,或是在以上工具的安装、使用过程中遇到问题时,可以参考以下文档: |
|
|
学习 uni-app 移动端开发,或是在以上工具的安装、使用过程中遇到问题时,可以参考以下文档: |
|
|
- [uni-app 介绍与文档](https://uniapp.dcloud.io/) |
|
|
- [uni-app 介绍与文档](https://uniapp.dcloud.io/) |
|
@@ -39,7 +39,7 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX |
|
|
|
|
|
|
|
|
# 起步 |
|
|
# 起步 |
|
|
启动 HBuilderX,点击左上角菜单:「文件」>「打开目录」,然后选择本项目的文件夹,即可打开本项目。 |
|
|
启动 HBuilderX,点击左上角菜单:「文件」>「打开目录」,然后选择本项目的文件夹,即可打开本项目。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
安装后**首次**运行 HBuilderX 时,需要的操作: |
|
|
安装后**首次**运行 HBuilderX 时,需要的操作: |
|
|
- 【必做】 点击左上角菜单>「工具」>「插件安装」,在打开的插件列表中安装「less 编译」; |
|
|
- 【必做】 点击左上角菜单>「工具」>「插件安装」,在打开的插件列表中安装「less 编译」; |
|
|
- 【必做】 找到 /config.js 文件,修改公司名称、后台接口地址等相关配置; |
|
|
- 【必做】 找到 /config.js 文件,修改公司名称、后台接口地址等相关配置; |
|
@@ -49,14 +49,14 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX |
|
|
## 小程序主体注册 |
|
|
## 小程序主体注册 |
|
|
如果是开发小程序,您需要在对应的平台来申请注册自己的小程序主体账号,然后提交小程序名称、图标、类目,并申请小程序 AppID; |
|
|
如果是开发小程序,您需要在对应的平台来申请注册自己的小程序主体账号,然后提交小程序名称、图标、类目,并申请小程序 AppID; |
|
|
后续提交审核、发布小程序,均需要在小程序公众平台上进行操作。 |
|
|
后续提交审核、发布小程序,均需要在小程序公众平台上进行操作。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
请先申请小程序 AppID: |
|
|
请先申请小程序 AppID: |
|
|
[微信小程序后台](https://mp.weixin.qq.com/) |
|
|
[微信小程序后台](https://mp.weixin.qq.com/) |
|
|
[钉钉小程序后台](https://open-dev.dingtalk.com/) |
|
|
[钉钉小程序后台](https://open-dev.dingtalk.com/) |
|
|
[支付宝小程序后台](https://openhome.alipay.com/) |
|
|
[支付宝小程序后台](https://openhome.alipay.com/) |
|
|
|
|
|
|
|
|
申请了小程序 AppID,打开项目根目录下的 manifest.json,请在其中「微信/支付宝小程序配置」页面填入 AppID。 |
|
|
申请了小程序 AppID,打开项目根目录下的 manifest.json,请在其中「微信/支付宝小程序配置」页面填入 AppID。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 项目目录介绍 |
|
|
## 项目目录介绍 |
|
|
打开本项目后,可以在左侧的浏览项目目录和文件,点击文件即可进行编辑。 |
|
|
打开本项目后,可以在左侧的浏览项目目录和文件,点击文件即可进行编辑。 |
|
|
本项目的目录文件介绍: |
|
|
本项目的目录文件介绍: |
|
@@ -70,6 +70,7 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX |
|
|
- /node_modules: 使用到的 npm 库 |
|
|
- /node_modules: 使用到的 npm 库 |
|
|
- /unpackage (从未运行过的项目没有此文件夹): 运行项目时会自动把编译生成的代码放在此目录下 |
|
|
- /unpackage (从未运行过的项目没有此文件夹): 运行项目时会自动把编译生成的代码放在此目录下 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
(文件): |
|
|
(文件): |
|
|
- App.vue: 【重要】 运行时的全局 Vue 对象,可以用来设置应用生命周期钩子、导入全局样式等 |
|
|
- App.vue: 【重要】 运行时的全局 Vue 对象,可以用来设置应用生命周期钩子、导入全局样式等 |
|
|
- config.js: 【重要】 多个页面的配置文件,可以控制页面显示的内容和方式 |
|
|
- config.js: 【重要】 多个页面的配置文件,可以控制页面显示的内容和方式 |
|
@@ -81,10 +82,10 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX |
|
|
- index.html: 编译到 H5 端时的页面模板 |
|
|
- index.html: 编译到 H5 端时的页面模板 |
|
|
|
|
|
|
|
|
## uni-app 页面开发 |
|
|
## uni-app 页面开发 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS、CSS 代码; |
|
|
uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS、CSS 代码; |
|
|
文件中可以引入其他 JS、CSS,引入安装好的 npm 库,也可以引入图片视频音乐等媒体。 |
|
|
文件中可以引入其他 JS、CSS,引入安装好的 npm 库,也可以引入图片视频音乐等媒体。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**需要注意的是,所有页面必须放置于 /pages 目录中, 且每个页面都必须在 /pages.json 中添加一条对应的记录,否则页面无法导航。** |
|
|
**需要注意的是,所有页面必须放置于 /pages 目录中, 且每个页面都必须在 /pages.json 中添加一条对应的记录,否则页面无法导航。** |
|
|
**当您向力软框架中添加新的页面时,请及时修改 /pages.json 文件,确保所有页面都登记在该文件中。** |
|
|
**当您向力软框架中添加新的页面时,请及时修改 /pages.json 文件,确保所有页面都登记在该文件中。** |
|
|
例如: |
|
|
例如: |
|
@@ -92,20 +93,22 @@ uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS |
|
|
`/pages/mypage/index.vue` |
|
|
`/pages/mypage/index.vue` |
|
|
那么在 /pages.json 里,需要在 pages 列表中添加一条记录: |
|
|
那么在 /pages.json 里,需要在 pages 列表中添加一条记录: |
|
|
`{ "path": "pages/mypage/index", "style": { "navigationBarTitleText": "我是页面的标题" } }` |
|
|
`{ "path": "pages/mypage/index", "style": { "navigationBarTitleText": "我是页面的标题" } }` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# 使用力软代码生成器 |
|
|
# 使用力软代码生成器 |
|
|
请先确保代码生成器的版本和 App 版本相同,不同版本可能会引发错误。 |
|
|
请先确保代码生成器的版本和 App 版本相同,不同版本可能会引发错误。 |
|
|
以下是使用力软代码生成器创建页面的流程: |
|
|
以下是使用力软代码生成器创建页面的流程: |
|
|
- 【自动】 使用力软代码生成器发布功能时,会在 /pages 目录下生成相应的页面文件; |
|
|
- 【自动】 使用力软代码生成器发布功能时,会在 /pages 目录下生成相应的页面文件; |
|
|
- 【手动】 您需要在 /pages.json 页面配置文件中,手动把这些页面添加到 pages 字段中。 |
|
|
- 【手动】 您需要在 /pages.json 页面配置文件中,手动把这些页面添加到 pages 字段中。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
例如: |
|
|
例如: |
|
|
假设您使用代码生成器时,设置的输出目录名为 LR_Codedemo,功能类名为 wxtest,那么代码生成器会自动生成两个文件: |
|
|
假设您使用代码生成器时,设置的输出目录名为 LR_Codedemo,功能类名为 wxtest,那么代码生成器会自动生成两个文件: |
|
|
`/pages/LR_Codedemo/wxtest/list.vue` (移动页面主页面); |
|
|
`/pages/LR_Codedemo/wxtest/list.vue` (移动页面主页面); |
|
|
`/pages/LR_Codedemo/wxtest/single.vue` (移动表单页)。 |
|
|
`/pages/LR_Codedemo/wxtest/single.vue` (移动表单页)。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
然后,需要配置 /pages.json 文件: |
|
|
然后,需要配置 /pages.json 文件: |
|
|
在 pages 数组里添加以下两条(navigationStyle 是页面的标题,可以自行更改): |
|
|
在 pages 数组里添加以下两条(navigationStyle 是页面的标题,可以自行更改): |
|
|
|
|
|
|
|
|
``` |
|
|
``` |
|
|
{ |
|
|
{ |
|
|
"pages": [ |
|
|
"pages": [ |
|
@@ -117,16 +120,16 @@ uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS |
|
|
} |
|
|
} |
|
|
``` |
|
|
``` |
|
|
这样就完成了新自定义页面的生成。 |
|
|
这样就完成了新自定义页面的生成。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
按照小程序和 uni-app 的规范, 每个页面均需要单独建立一个文件夹;但是这样将使得工程目录过于复杂,因此力软框架中,每个页面使用单个 .vue 文件,和传统 Web 开发相同,请知悉。 |
|
|
按照小程序和 uni-app 的规范, 每个页面均需要单独建立一个文件夹;但是这样将使得工程目录过于复杂,因此力软框架中,每个页面使用单个 .vue 文件,和传统 Web 开发相同,请知悉。 |
|
|
也因为以上原因,新建页面时,请不要勾选「创建同名目录」这一项。 |
|
|
也因为以上原因,新建页面时,请不要勾选「创建同名目录」这一项。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
----- |
|
|
----- |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# 二次开发指南 |
|
|
# 二次开发指南 |
|
|
**注意:** 小程序端不同于常规 Web 端,它没有浏览器上的 DOM 、BOM,也就是说没有 document、window 对象,因此也无法使用 jQuery 等工具;但是有同类的工具和 API 可以替代。 |
|
|
**注意:** 小程序端不同于常规 Web 端,它没有浏览器上的 DOM 、BOM,也就是说没有 document、window 对象,因此也无法使用 jQuery 等工具;但是有同类的工具和 API 可以替代。 |
|
|
**注意:** 本框架中的每个页面为单个 .vue 文件,无需按照小程序或 uni-app 的要求,为每个页面单独建一个文件夹,因为这样会导致目录结构过于复杂。 |
|
|
**注意:** 本框架中的每个页面为单个 .vue 文件,无需按照小程序或 uni-app 的要求,为每个页面单独建一个文件夹,因为这样会导致目录结构过于复杂。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
每个 .vue 文件的格式如下: |
|
|
每个 .vue 文件的格式如下: |
|
|
``` html |
|
|
``` html |
|
|
<template> |
|
|
<template> |
|
@@ -144,7 +147,7 @@ export default { |
|
|
/* 页面样式 */ |
|
|
/* 页面样式 */ |
|
|
</style> |
|
|
</style> |
|
|
``` |
|
|
``` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 页面模板相关注意事项: |
|
|
## 页面模板相关注意事项: |
|
|
- 模板遵循 Vue 模板写法,[uni-app 页面模板文档](https://uniapp.dcloud.io/component/README); |
|
|
- 模板遵循 Vue 模板写法,[uni-app 页面模板文档](https://uniapp.dcloud.io/component/README); |
|
|
- 网页中的 `<div>`、`<span>`、`<img>` 等标签,在 uni-app 中需要分别写成 `<view>`、`<text>`、`<image>` 等; |
|
|
- 网页中的 `<div>`、`<span>`、`<img>` 等标签,在 uni-app 中需要分别写成 `<view>`、`<text>`、`<image>` 等; |
|
|