精华内容
下载资源
问答
  • hbuilderx开发app案例
    2022-04-07 23:54:06

    简介:
    (1)HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。
    (2)H5+运行于手机端的强化Web引擎,除了支持标准HTML5以外,还支持更多扩展的js api,使得js的能力不输于原生。包括有二维码、摇一摇、相册、拍照等常用API,可以方便简单的编写,并且可以跨平台。
    运行H5+规范当中包含很多的API接口,官网中可以看到:HTML5+ API接口官网
    在这里插入图片描述

    1、打开HbuilderX,依次点击文件-新建-项目。在这里插入图片描述
    2、选择5+APP,在右侧栏目中填写“项目名称”和“项目位置”,接着选择“mui项目”,点击“创建”。
    在这里插入图片描述
    3、至此,一个基于MUI下的移动端APP框架新建完毕,结构如下所示。
    在这里插入图片描述
    相关链接
    1、MUI的简介
    2、MUI的字体图标
    3、MUI的事件处理
    4、HbuilderX中新建MUI下的移动端App
    5、H5+ Webview窗口对象
    6、MUI-底栏实现-页面切换
    7、MUI-标题栏实现-样式复写效果
    8、MUI-栅格系统-实现元素排版
    9、MUI-列表实现
    10、MUI-列表实现2
    11、MUI-轮播插件实现-UI组件
    12、MUI-弹出菜单
    13、MUI-页面刷新
    14、MUI-新建子页面
    15、MUI-页面之间传值(打开新的子页面)
    16、HTML5+规范API-拍照功能
    17、HTML5+规范API-系统相册获取功能
    18、HTML5+规范API-地理位置获取
    19、MUI-上拉刷新和下拉刷新
    20、HTML5+规范API-扫码功能
    21、HTML5+规范API-系统通讯录获取功能
    22、Hbuilder无法完成应用程序云打包,一直报错需要打包校验
    23、Hbuilder-应用程序打包
    24、移动APP开发的三种常见模式
    25、IOS系统测试APP时发现input内无法选中并输入值

    更多相关内容
  • 还是众所周知,HBuilderX开发app很方便,以mui框架为例子。 我们写好了若干个网页,一个主页面里涉及到跳转问题。我们就会发现,代码没有问题的情况下,运行到网页的话这个跳转链接是不能正常使用的,每次调试打包...

    一,前言

    众所周知,HBuilderX的功能特别强大,HBuilderX对字处理提供了更崇高的支持。
    更强大的多光标、智能双击、选区管理…
    让文字处理的效率大幅提升。

    二,HBuilderX

    还是众所周知,HBuilderX开发app很方便,以mui框架为例子。
    我们写好了若干个网页,一个主页面里涉及到跳转问题。我们就会发现,代码没有问题的情况下,运行到网页的话这个跳转链接是不能正常使用的,每次调试打包过于麻烦,所以我们应该使用设计模拟器。

    三,手机模拟器

    众所周知,现在主流的手机模拟器有:腾讯、逍遥、mumu、夜神、雷电、蓝叠。
    众所周知主流的手机模拟器的对应端口号为

    手机模拟器名称对应端口号
    夜神模拟器62001
    天天模拟器6555
    海马玩模拟器26944
    逍遥模拟器21503
    网易mumu模拟器7555

    四,环境配置

    我们随机下载一个mumu模拟器。

    之后找到HBuilderX里面的adbs路径,如下:

    HBuilderX\plugins\launcher\tools\adbs
    

    4.1,复制adbs路径

    在这里插入图片描述

    4.2,配置环境变量

    4.2.1,打开电脑的环境配置:

    在这里插入图片描述

    4.2.2,进入环境变量

    在这里插入图片描述

    4.2.3,找到path,点击进入

    在这里插入图片描述

    4.2.4,新建->将加入adbs路径加入进去

    在这里插入图片描述

    4.3,测试adbs是否可用

    4.3.1,输入adb version 查看adbs版本。

    adb version
    

    在这里插入图片描述
    显示版本号,没有啥问题哈。

    4.3.2,查看已连接的端口

    adb devices
    

    因为我之前连过了,一般应该是没有已连接的端口的。
    在这里插入图片描述

    4.3.3,使用adb命令 让模拟器连接上电脑

    如果是网易mumu模拟器,众所周知它的端口号为7555。
    输入命令:

    adb connect 127.0.0.1:7555
    

    显示连接成功。

    五,Hbuilder连接到手机模拟器

    在这里插入图片描述
    如果是网易mumu模拟器,众所周知它的端口号为7555。填入7555.
    在这里插入图片描述

    六,启动模拟器

    在这里插入图片描述

    七,运行项目到模拟器

    在这里插入图片描述
    在这里插入图片描述

    八,启动成功

    在这里插入图片描述
    运行到模拟器上就,可以正常的调试了,非常的方便。

    展开全文
  • 背单词太无聊,为了自己学习单词不那么无聊,在网上找了一些图像法记单词的联想词库,发现手机上看文档实在是不方便,就自己写了个网页小应用,可以用HBuilder打包成APK,安装到自己的手机上很方便. 代码使用vue ,运行前...
  • 第一步:先到DCLOUD官方网站下载HBuilderX开发工具,下载地址https://www.dcloud.io/hbuilderx.html如下图点击下载APP开发版,下载完成后打开压缩包把HBuilderX解压到桌面。 第二步,打开HB.

    很多人初学WAP2APP的打包小白看不懂官方的文档,这里我就给大家写一个WAP2APP打包操作教程,希望能够帮助到使用HBuilderX的初学者,这里先教大家如何将已有的WAP2APP源码导入到HBuilderX工具里然后打包成APP的方法。

    第一步:先到DCLOUD官方网站下载HBuilderX开发工具,下载地址https://www.dcloud.io/hbuilderx.html如下图点击下载APP开发版,下载完成后打开压缩包把HBuilderX解压到桌面。

     

    第二步,打开HBuilderX开发工具

    第三步:导入已有的DCLOUD系列的APP源码,这里以WAP2APP为示列。

    1.打开开发工具后点击左上角的文件如下图:

    2.选择要打开的APP源码既可导入到开发工具如下图:

    3.配置APP信息基础配置应用名称就是你的APP名字,应用版本名称就是你的APP版本号。

    4.配置APP图标配置。

    5.APP模块参数配置如下图:

     第四步:发行原生APP云打包生成APK或ipa文件。

     第五步:提包ipa文件或apk文件,既完成APP发布了。

     

    展开全文
  • 简单的hbuilderAPP

    2018-01-03 22:52:37
    使用hbuilder mui设计的实现爬取豆瓣网的信息,非常适合初学者!
  • 使用HBuilderX搭建uni-app

    千次阅读 2021-03-04 14:17:54
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 查看更多 1、工具...

     

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

    查看更多

    1、工具安装

    HBuilderX:官方IDE下载地址

    2、创建uni-app

    创建项目:

    创建完后目录结构(common目录是手动创建的)

    3、使用vuex

    vuex是HBuilderX已经内置好了,可以直接使用

    代码如下

    index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import componentView from './modules/componentView'
    
    
    Vue.use(Vuex)
    const store = new Vuex.Store({
      // 开启严格模式  确保state 中的数据只能 mutations 修改 不开启就可以随便修改
      //strict:true,
      state: {
      },
      mutations: {
        //
      },
      actions: {
        //
      },
      modules: {
        componentView
      }
    })
    
    export default store;
    

    componentView.js

    /**
     * 动态组件状态
     * @type {{state: {componentView: string}, mutations: {setRoleManageDetailState(*, *): void, setAuthoritySettingState(*, *): void}, getters: {getRoleManageDetail: (function(*): *)}, actions: {showRoleManageDetail({commit: *}, *=): void, showAuthoritySetting({commit: *}, *=): void}}}
     */
    const componentView = {
      state: {
        componentView: Math.ceil(Math.random()*1000)
      },
      mutations: {
        setComponentViewState (state, flg) {
          state.componentView = flg
        }
      },
      getters: {
        getComponentViewState: state => {
          return state.componentView
        }
      },
      actions: {
        showComponentView ({ commit }, flg) {
          commit('setComponentViewState', flg)
        },
        showMathComponentView ({ commit }) {
    		let number = Math.ceil(Math.random()*1000);
    		console.log(number);
          commit('setComponentViewState', number)
        }
      }
    }
    
    export default componentView
    

    修改main.js

    4、测试

    以上项目基本框架已经搭建好了。下面就是模拟运行了。

    双击manifest.json配置,进行自定义配置即可。

    需要配置微信开发工具安全设置,如图

     

    运行结果:

     

     

    以上就是一个简单的uni-app搭建过程。

     

    展开全文
  • 1.选择模板 uni-ui 2.得到创建项目 3.获取APPid 在微信小程序电脑后台获取APPID 这个方法适用于自己申请的微信小程序(自己用的小程序)...HBuilderX打包方法 vue-cli打包方法 5.打包后,微信小程序工具打开项目 ,
  • 前端MUI+H5+HBuilderX开发APP,学习与实践文章,更新中(一)一级目录二级目录 此项目为本人本科毕业设计,不喜勿喷,只是想边学习边分享。如果能帮助到你,一定要点个赞哦! 此文章作为本人学习开发的笔记。希望能...
  • 使用HBuilderX 编写uniapp

    千次阅读 2020-11-12 09:24:56
    一、下载HBuilderX、微信开发者工具 HBuilderX下载地址添加链接描述 微信开发者工具稳定版下载地址添加链接描述 二、HBuilderX配置 工具–>插件安装 启动微信开发者工具: 工具–>外部命令–>运行设置 ...
  • 三、这时你的项目已经创建好了,自动由hbuilderX打开,项目大致文件内容如图: 四、设置底部导航跳转,打开pages.json文件(pages是路由跳转地址,tabBar是配置底部导航栏),如果顶部导航想要添加相应的按钮图标,...
  • 如何在Hbuilder中制作app底部导航栏

    千次阅读 2021-01-14 16:45:12
    1 问题描述最近在使用Hbuilder进行移动app前端开发中,我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块,再通过css叠层样式表对相应模块加以修饰。但在分析Hbuilder提供的移动app底部选项...
  • 通过uni.request()请求数据并显示,以及不同页面间参数的传递
  • 这是一个原创系列连载文章,基于企业真实项目案例分享经验,带你快速入门uni-app开发!欢迎点击头像关注,避免迷路! ​ 前几天,不少读者私信咨询前文中项目案例的种种实现细节,本文先揭晓使用的开发工具。 ​ ...
  • 本系统实现一个基于安卓开发的健身app,分为服务器端和客户端两种用户。服务器端可以在网站后台进行管理;用户通过手机端自由登录客户端平台进行管理。 具体功能描述如下: 服务器端模块包括: 1. 个人中心:可以...
  • 最后以此逻辑分别复制粘贴其它三个页面,修改相应的subx.html就可以了,sub2.html: <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = ...
  • 单应用 uni-app是一个使用Vue.js开发小程序,H5,App的统一前端框架。官网地址: : Vue.js 开发者使用Vue语法编写代码, uni-app框架将其编译到小程序(微信...uni-app支持通过vue-cli命令, HBuilderX可视化界面两种方
  • iOS13真机运行,需要升级至HBuilderX 2.2.5+以上版本。 Android11系统真机运行,暂不支持Android Studio自带的Android11模拟器,请使用真实手机,如果碰到Android11手机无法真机运行,请单独发帖,并提供详细设备...
  • 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP.本文最大特点:- webpack4- 多页面- 跨域Proxy代理- VConsole移动端调试- es6/es7 babel 转换# 项目地址 [GitHub](https://github.com/...
  • HBuilder将项目生成安卓手机app

    千次阅读 2018-10-14 20:25:53
    HBuilder生成安卓手机app 首先我们需要安装HBuilder:该软件是中国国产的软件,纯中文的操作,不管会不会编程的小伙伴都可以卸载安装,操作简单。 下载地址:http://www.dcloud.io/    创建一个移动App项目:...
  • 1.8.5 new features: * 1.支持数据预取 bugfix: * 1.getStorage 相关 API 判断 Date 格式问题 mac 文件地址; windows 文件地址; ...new features: * 1.IDE ...修复 AppData 面板修改数据后页面反复切换数据丢失问题 m
  • HbuilderX 2.6.15 版本说明

    千次阅读 2020-04-25 10:36:13
    新增 【重要】内置浏览器运行时,将日志直接输出到HBuilderX控制台 新增 内置web服务器 支持自定义端口 (菜单【设置】【运行配置】) 新增 FTP插件 支持通过commands在【自定义快捷键】中配置快捷键 详情 新增 项目...
  • mui+vue开发的商城APP实例, 前端开发实例代码。vue.min.js,mui.js
  • 1 项目整体使用Vue+HbuilderX开发 2 Vue实现基本页面跳转,增删改查等app基本功能,当需要使用到app原生功能则使用mui.js 3 最后通过HbuilderX将vue项目打包成app包 开发实践 1 运行打包app 这一步的步骤...
  • HBuilder开发旅游类APP(一) 实现地图插件调用、苹果和安卓同步混合开发 作者:班尼科 本博文内容参考了网络资源,但文章完全是本人原创,喜欢请给我点赞,转载请注明出处哦. 标签: 旅游 HBuilder H5+ MUI 地图插件 ...
  • 开发工具:Hbuilder,前端框架:mui,类型:混合开发App. 1. 商城app效果图: 商城首页 商城分类页 商品详情页 商品兑换页 2. 代码部分 2.1 商城首页shop.html,部分代码说明: ...
  • 这是一个原创系列连载文章,本文是第 2 篇《Uni-App 跨端开发 H5、小程序、iOS、Android(二):开发工具 HBuilderX 使用技巧》,主要讲解 HbuilderX 高效使用技巧,欢迎持续关注! 当前内容版权归码字科技所有并...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述最近在使用Hbuilder进行移动app前端开发...
  • uni-app登录实例的实现

    热门讨论 2018-10-29 11:40:26
    使用HBuilderX开发登录实例。我的博客主页:https://blog.csdn.net/k571039838k?orderby=UpdateTime
  • uni-app项目模板(不喜勿喷)一个5年的web前端开源的uni-app快速开发模板,参考学习一同进步建议uni-app使用时间达到1年以上的程序员来学习使用步骤下载下来,解压成文件夹把项目包丢到HBuilder X里面HBuilder X要...
  • 2017年,个人最大的收获,是第一次完成了这一款APP开发并顺利上架,同时获得了还算可观的收益。 这是我前公司的项目,公司的主营业务是旅游,并不是什么科技公司,我之前一直在公司任职技术中心负责人,负责开发...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 769
精华内容 307
关键字:

hbuilderx开发app案例