一种适用于HybridApp的H5页面本地调试方法技术

本发明专利技术提供一种适用于HybridApp的H5页面本地调试方法，包括如下步骤：步骤一：修改路由器文件，将通过App作为入口的路由都配置meta属性标识，并通过菜单进行相关显示；步骤二：开发菜单页面，对配置了meta属性的菜单进行渲染；步骤三：对H5项目进行环境区分，设置开发环境和生产环境；步骤四：对访问H5页面的路由进行拦截，进行相关处理判断；步骤五：对步骤四中获取到的token进行识别，本发明专利技术通过采用模拟APP的登录逻辑，在H5开发人员在进行自测的时候，能够不依赖Native开发人员，自行获取token，减少H5开发人员在进行测试时与Native开发人员的交流次数，降低交流成本，在调试过程中，开发人员可以打开菜单页面，随意选择并进入想要调试页面，大大节省了开发时间。大大节省了开发时间。大大节省了开发时间。

【技术实现步骤摘要】
一种适用于HybridApp的H5页面本地调试方法


[0001]本专利技术涉及计算机网络
，具体为一种适用于HybridApp的H5页面本地调试方法。

技术介绍

[0002]自从移动互联网的热潮刮起后，众多公司前赴后继地进入，但是移动应用的开发人员太少，众多企业也无法负担养一个具备跨平台开发能力的专业移动应用开发团队，正是在这样是机缘巧合下，基于H5(HTML5)低成本跨平台开发优势又兼具Native App特质的Hybrid App技术脱颖而已，Hybrid App因为同时使用了网页语言编码，所以开发成本和难度比Native App要小很多，App在加载H5页面时会将用户token通过访问地址传递给H5页面，从而使H5页面获取权限调取接口查询数据。
[0003]在开发过程中，H5页面开发者需要在本地进行页面调试，没有token可以提供，只能在App中抓取token进行测试，token失效后重复抓取，但是很多的H5开发者并不知道怎样去App中抓取数据，所以需要和Native开发人员频繁沟通，由他们来提供token，并在访问H5页面时使用从而进行调试，会增加沟通的成本，同时H5开发者在浏览器里模拟调试时由于并非处于App环境，缺少入口，只能从代码中找到访问路径进行调试，尤其需要几个页面一起联调的时候，需要手动在浏览器中输入访问路径，提高了本地联调时间成本，降低了H5开发者了研发效率。

技术实现思路

[0004]针对现有技术存在的不足，本专利技术目的是提供一种适用于HybridApp的H5页面本地调试方法，以解决上述
技术介绍
中提出的问题，本专利技术通过，解决了现有技术中的问题。
[0005]为了实现上述目的，本专利技术是通过如下的技术方案来实现：一种适用于HybridApp的H5页面本地调试方法，包括如下步骤：
[0006]步骤一：修改路由器文件，将通过App作为入口的路由都配置meta属性标识，并通过菜单进行相关显示；
[0007]步骤二：开发菜单页面，对配置了meta属性的菜单进行渲染；
[0008]步骤三：对H5项目进行环境区分，设置开发环境和生产环境，且在.env文件中存储环境变量NODE_ENV和用于测试的账号密码；
[0009]步骤四：对访问H5页面的路由进行拦截，在拦截时检测本地存储中是否存在token，当本地存储存在token时，会进入到与token相对应的加载页面，当本地存储中不存在token时，则会通过检测访问地址中是否携带token进行下一步的判定工作，当访问地址中携带有token时，将token存入本地存储中，并加载相关页面，当访问地址中未携带token时，则会通过判断当前所处环境进行下一步的处理工作，当处在开发环境时，会通过模拟App的登录逻辑，获取token，并将模拟App所获取的token存储到本地存储中，当处在非开发环境即处在生产环境中时，会产生错误信息，并通知App传入token；
[0010]步骤五：对步骤四中获取到的token进行识别，若token无效，则重复步骤四，若token有效，则判定相关token所访问的页面是否存在，若页面存在，则加载相关访问页面，若页面不存在，则会加载默认菜单页面。
[0011]作为对本专利技术中所述一种适用于HybridApp的H5页面本地调试方法的改进，所述步骤一中标识方法为：meta:{title：菜单名}。
[0012]作为对本专利技术中所述一种适用于HybridApp的H5页面本地调试方法的改进，所述开发环境设置步骤为：
[0013]NODE_ENV＝'development'
[0014]VUE_APP_ACCOUNT＝"00001"
[0015]VUE_APP_PASSWORD＝"123456"。
[0016]作为对本专利技术中所述一种适用于HybridApp的H5页面本地调试方法的改进，所述生产环境设置步骤为：
[0017]NODE_ENV＝'production'。
[0018]作为对本专利技术中所述一种适用于HybridApp的H5页面本地调试方法的改进，所述token过期时，会重复上述步骤，重新获取token进入访问页面。
[0019]作为对本专利技术中所述一种适用于HybridApp的H5页面本地调试方法的改进，所述模拟APPApp的登录逻辑为：模拟用户输入账户密码，通过信息录入，调取登录接口，并在登录接口出现后，从中提取相关token，并在调取登录接口的时候，通过页面信息中的Cookie信息，对登录状态进行识别，若登录不成功，将失败信息反馈工作人员。
[0020]与现有技术相比，本专利技术的有益效果：
[0021]1、本专利技术通过采用模拟APP的登录逻辑，在H5开发人员在进行自测的时候，能够不依赖Native开发人员，自行获取token，减少H5开发人员在进行测试时与Native开发人员的交流次数，降低交流成本；
[0022]2、本专利技术在调试过程中，开发人员可以打开菜单页面，随意选择并进入想要调试页面，token过期以后也不需要额外的工作就可以自动获取新的token值，可再次点击菜单继续调试，大大节省了开发时间；
[0023]3、本专利技术在后续开发者想切换账号也只需要在环境变量中修改一下用户名和密码，就可以顺利获取对应token，且内部区分了测试环境和生产环境，不会影响生产环境中代码的运行，不改变原H5页面获取token的方式，适用范围更广。
附图说明
[0024]为了更清楚地说明本专利技术具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术中描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一种实施方式，对于本领域普通技术人员来说，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0025]图1为本专利技术H5页面访问流程结构示意图；
[0026]图2为本专利技术环境变量模块结构示意图。
具体实施方式
[0027]为使本专利技术实现的技术手段、创作特征、达成目的与功效易于明白了解，下面对本专利技术具体实施方式中的技术方案进行清楚、完整的描述，以进一步阐述本专利技术，显然，所描述的具体实施方式仅仅是本专利技术的一部分实施方式，而不是全部的样式。
[0028]本具体实施方式是适用于HybridApp的H5页面本地调试方法，其H5页面访问流程结构示意图如图1所示，环境变量模块结构示意图如图2所示，该适用于HybridApp的H5页面本地调试方法，包括如下步骤：
[0029]步骤一：修改路由器文件，将通过App作为入口的路由都配置meta属性标识，并通过菜单进行相关显示；
[0030]步骤二：开发菜单页面，对配置了meta属性的菜单进行渲染；
[0031]步骤三：对H5项目进行环境区分，设置开发环境和生产环境，且在.env文件中存储环境变量NODE_ENV和用于测试的账号密码；
[0032]步骤四：对访问H5页面的路由本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种适用于HybridApp的H5页面本地调试方法，其特征在于，包括如下步骤：步骤一：修改路由器文件，将通过App作为入口的路由都配置meta属性标识，并通过菜单进行相关显示；步骤二：在开发菜单页面，对配置了meta属性的菜单进行渲染；步骤三：对H5项目进行环境区分，设置开发环境和生产环境，且在.env文件中存储环境变量NODE_ENV和用于测试的账号密码；步骤四：对访问H5页面的路由进行拦截，在拦截时检测本地存储中是否存在token，当本地存储存在token时，会进入到与token相对应的加载页面，当本地存储中不存在token时，则会通过检测访问地址中是否携带token进行下一步的判定工作，当访问地址中携带有token时，将token存入本地存储中，并加载相关页面，当访问地址中未携带token时，则会通过判断当前所处环境进行下一步的处理工作，当处在开发环境时，会通过模拟App的登录逻辑，获取token，并将模拟App所获取的token存储到本地存储中，当处在非开发环境即处在生产环境中时，会产生错误信息，并通知App传入token；步骤五：对步骤四中获取到的token进行识别，若token无效，则重复步骤四，若token有效，则判定相关token所访问的页面是否存在，若页面存在，则加载相...

【专利技术属性】
技术研发人员：王秀艳，
申请(专利权)人：紫光云南京数字技术有限公司，
类型：发明
国别省市：