网页设计与制作模板代码免费-H5模板代码一键生成器

H5模板代码一键生成器

2021-01

技术交流或业务合作：QQ(591033633)微信()

演示地址见文中。

目录

特征

作为多年的资深开发者，笔者深知调试前端UI是后端开发者最害怕的事情，也厌倦了无休无止的Ctrl+C、Ctrl+V工作。 最近闲暇的时候，我就想是否可以调试一些复杂的任务。 释放体力劳动（Ctrl+C 和 Ctrl+V）？ 百度搜索发现网上一键h5代码生成器很多，但是能同时绑定业务数据和前端展示的功能框架很少，所以我花了2周的时间研究这个一键h5代码生成实现同步绑定。 业务数据和前端UI模板自动生成页面功能。 现贡献开发过程。 本文末尾会给出案例访问地址。

工具使用效果图：

生成页面效果：

请忽略丑陋的布局。 布局与模板html和css设计有关，开发者是非专业UI。

准备

这个工具的开发是基于我之前开发的《通用数据接口管理系统》。 详细信息请参见：

查看文档

%E9%80%9A%E7%94%A8%E6%95%B0%E6%8D%AE%E6%8E%A5%E5%8F%A3%E7%AE%A1%E7%90%86%E7 %B3%BB%E7%BB%9FCDI%E4%BB%8B%E7%BB%8D.docx

查看源代码：

步骤分为三步：

以图形方式定义数据接口（参见上述文档）； 选择一套UI静态框架在线下载； 对下载的UI静态框架进行模板分析，添加到模板库中； 设计工具自行绑定UI模板和数据接口网页设计与制作模板代码免费，自动生成相应的目标代码； 演示地址及步骤

登录账号密码：guest/1

3.1. 后台数据接口图形化定义

这部分的详细理解参见《通用数据接口管理系统CDI简介.docx》

下载链接：

%E9%80%9A%E7%94%A8%E6%95%B0%E6%8D%AE%E6%8E%A5%E5%8F%A3%E7%AE%A1%E7%90%86%E7 %B3%BB%E7%BB%9FCDI%E4%BB%8B%E7%BB%8D.docx

3.2. 后台数据接口在线调试

3.3. 前端页面模板定义

本测试用例中已经存在部分模板卡通人物，暂时不允许新的模板操作；

3.3. 业务数据添加操作

您可以自行添加各种业务数据。 在这种情况下卡通人物，暂时不允许添加新的业务数据库表；

3.4、h5静态框架

在此测试用例中网页设计与制作模板代码免费，第一个框架添加了一个完成模板。 建议选择第一个框架来实现自动代码生成；

3.4. 一键生成H5代码

页面也可以单独加载：

操作见下图

点击 ”

“您可以点击连接

将弹出一个页面。 登录后输入地址

看下效果：

案例效果下载demo地址及分析：

下载后浏览器可以直接加载访问：

….本地相关文件夹地址/main/login.html

3.4. 生成页面demo分析

描述文件：

common.js是常见的js函数

template_tag.js 是模板文件

TemprageIFaceLink.json 是菜单的常用 json

biz_name为demo自动生成的页面代码文件

biz_name/biz_name.html 页面文件

可以在页面上找到

标签AC001标题

加载页面的数据容器

/*************************分向線********************** ****/

biz_name/biz_name.json文件，是数据接口和页面模板元素相关的信息

读取模板IFaceLinkPage(

“A01_A00002”：{

“标签AAAC001_模板”：{

"$1003": "ENT_CODE",

"$1004": "CREATE_DATE",

"$1001": "URL_PATH",

"$1002": "ENT_NAME",

"$1005": "区域代码",

"$1006": "MAIN_ID"

},

“A01_A00002_ENCODE”：{

“URL_PATH”：“1”

/*************************分向線********************** ****/

biz_name/biz_name.js 动态加载本页面的数据js，common.js中定义了各种通用函数

var APP_USER_ZXY = {};

//业务逻辑数据开始

函数 biz_start()

/*生意开始*/

Get_APP_USER_ZXY(空);

/*业务结束*/

/*商业步骤开始*/

函数Get_APP_USER_ZXY（数据）{

如果（数据！=空）

APP_USER_ZXY = 数据；

if(jsonReadCommonRes != null && typeof(jsonReadCommonRes) != "未定义" && jsonReadCommonRes.hasOwnProperty("A01_A00002"))

A01_A00002_0(jsonReadCommonRes);

否则 if(APP_USER_ZXY != null && typeof(APP_USER_ZXY) != "未定义" && APP_USER_ZXY.hasOwnProperty("A01_A00002"))

A01_A00002_0(APP_USER_ZXY);

别的

//请传入对应的接口参数

var inputdata = {"param_name":"A01_A00002","session_id":session_id,"login_id":login_id};

get_ajax_baseurl(inputdata,"A01_A00002_0");

函数A01_A00002_0（输入）{

数据=输入.A01_A00002;

var AAA_PATH = "";

var s_result = "1";

var error_desc = "";

for (var key in data[0]) {

if (key == 's_result')

s_结果 = 数据[0].s_结果;

error_desc = 数据[0].error_desc;

如果（s_结果==“0”）{

swal("获取数据异常！", "获取数据异常！:A01_A00002"+error_desc, "警告");

别的

$.each(数据,函数(i, obj)

var template_temp = set_template(tagAAAC001_template,"tagAAAC001_template",obj,"A01_A00002").replace("$AAA",AAA_PATH);

$("#tagAAAC001").append(template_temp);

});

层.close(ly_index);

/*商务步骤结束*/

$(文档).ready(函数() {

//页面初始化

//init_page();

});

window.onpageshow = 函数(e){

if(e.persisted || (window.performance.navigation.type == 2)){

is_history_back = 1;

别的{

is_history_back = 0;

if(jsonReadCommonRes != null && typeof(jsonReadCommonRes) != "未定义" && jsonReadCommonRes.hasOwnProperty("T01_sel_t_app_menu_bottom"))

init_result(jsonReadCommonRes);

别的

init_page();