hbuilderx_hbuilderx实战 - CSDN
精华内容
参与话题
  • hbuilderx 使用总结

    千次阅读 2019-10-28 17:17:32
    背景 新手小白快速入门。 过程 下载安装 HBuilderX运行vue程序

    背景

    新手小白快速入门。

    过程

    展开全文
  • HBuilderX的下载和安装和使用

    千次阅读 2019-12-12 16:37:45
    HBuilderX的下载和安装 HBuilderX下载 HBuilderX:官方IDE。建议下载App开发版,如下载标准版,还需在插件管理中安装uni-app插件。 HBuilderX下载地址:下载HBuilderXHBuilderX安装 找到下载好的安装包。如图: ...

    HBuilderX的下载和安装

    HBuilderX下载
    HBuilderX:官方IDE。建议下载App开发版,如下载标准版,还需在插件管理中安装uni-app插件。
    HBuilderX下载地址:下载HBuilderX在这里插入图片描述
    在这里插入图片描述
    HBuilderX安装
    找到下载好的安装包。如图:
    在这里插入图片描述
    解压安装包。
    解压后找到HBuilderX.exe双击运行。如图:

    创建快捷方式
    选中HbuilerX.exe,右键,发送到桌面。如图:

    在这里插入图片描述

    使用如图新建或者导入老的项目:

    展开全文
  • HBuilderX从入门到发布教程

    万次阅读 2019-09-20 10:59:47
    一、环境安装和配置 1、下载HBuilderX工具 https://www.dcloud.io/hbuilderx.html 解压后打开开发工具 下载插件,打开工具-》插件安装 2、下载微信小程序ide工具 ...安装微信小程序开发工具,这里有个坑,我们系...

    一、环境安装和配置
    1、下载HBuilderX工具
    https://www.dcloud.io/hbuilderx.html
    在这里插入图片描述
    解压后打开开发工具
    在这里插入图片描述
    下载插件,打开工具-》插件安装
    在这里插入图片描述
    2、下载微信小程序ide工具
    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    安装微信小程序开发工具,这里有个坑,我们系统是64位的,下载64位的开发工具却打不开,要下载32位的才行。
    在这里插入图片描述
    在这里插入图片描述

    打开微信小程序开发工具,开启服务端口

    在这里插入图片描述
    进入开发者网站,注册微信小程序开发账号
    https://mp.weixin.qq.com/
    在这里插入图片描述在这里插入图片描述

    注意,一个邮箱好像只有一次机会,一旦输入错误,好像这个邮箱就不能用了,我就浪费掉了一个邮箱。
    在这里插入图片描述

    根据小程序发布流程获得AppID,这个AppID和后面的AppSecret很重要,后面都要用到
    在这里插入图片描述

    打开HBuilderX开发工具,创建项目,选择uni-app,模板可以挑选自己想要的,我这里为了实现登录功能,选择登录模板

    在这里插入图片描述
    建好项目后,左侧是项目目录树,找到manifest.json文件,是项目的配置页
    在这里插入图片描述

    第一个开始需要正常登录才会有,所以要先在工具左下角注册帐号
    在这里插入图片描述
    注册后登录

    然后就可以获取了

    下一步是配置微信登录鉴权,不配置安装完app会出现缺少oauth模块的错误
    里面的appid和appsecret就是微信开发者后台中申请的
    在这里插入图片描述

    下一步是配置微信小程序appid和上面一样
    在这里插入图片描述
    最后,打开工具-》设置,运行配置,把微信小程序开发工具的目录填写进去
    在这里插入图片描述

    其他配置可以根据实际需要自行选择

    二、开发
    1、打开刚刚新建的项目,找到App.vue,这是项目设置公共数据的地方,这里我们把要访问的servlet的安全链接地址作为公共参数设置在这里.
    在这里插入图片描述
    (因为微信小程序只支持访问安全链接的url)

    关于如何写servlet和https,可以自行查找。

    下面分别是我写的2个servlet,分别用于验证登录用户和查询用户列表,在浏览器中输入地址能成功访问,说明配置是成功的,后续我们会使用这个url
    在这里插入图片描述

    2、登录方法的编写
    打开pages下的login/login.vue文件,(vue文件相当于jsp,姑且这么理解)
    找到登录button,@tap="bindLogin"的含义就是单击触发方法,在script中编写bindLogin()方法

    在这里插入图片描述

    格式为
    export default {
    ……
    methods: {
    ……
    bindLogin() {
    //代码逻辑
    },
    ……
    }
    }
    这里我们看下bindLogin的逻辑,这段是限制输入框应该输入的最小字符串
    在这里插入图片描述
    下面这个是将输入的username和password传递到我们写的servlet中
    其中getApp().globalData.urlpath就是我们之前在App.vue中配置的urlpath
    所以getApp().globalData.urlpath+’/hBuilterXHttpServlet’就相当于在浏览器中的地址
    然后在data中填写要上传的参数
    在这里插入图片描述

    若验证成功就会返还如下参数
    在这里插入图片描述
    因此在success中获取返还的参数,判断
    在这里插入图片描述
    失败则提示“用户账号或密码不正确”,成功则跳转到main/main.vue页面
    在这里插入图片描述

    3、main页面,页面中写一个查询用户按钮和展示列表,(view相当于div)
    在这里插入图片描述

    相面同样是写方法
    在这里插入图片描述
    只要成功获取到servlet返还的data,就可以正常展示了。

    三、servlet篇
    代码部分参考
    public class HBuilterXHttpServlet extends HttpServlet{
    实现doGet方法

    和这个类

    public class HBuilderXSearchUsersHttpServletextends HttpServlet{
    实现doGet方法

    web.xml配置如下
    在这里插入图片描述

    四、https安全链接
    参考我做高拍仪时编写的
    struts2配置https.docx

    五、调试
    运行-》运行到微信小程序调试-》开启微信开发者工具
    在这里插入图片描述
    成功后会打开微信开发者工具界面,右下角是控制台,可以打印日志和console.log()的数据

    在这里插入图片描述

    六、打包发布
    点击发行-》原生app-云打包,按照控制台提示就可以下载到打包好的app安装包
    在这里插入图片描述

    七、微信小程序发布
    点击上传,按照他自带的提示就行了
    在这里插入图片描述

    展开全文
  • HBuilderX - 基础篇

    千次阅读 2019-03-14 12:53:16
    快捷键 复制当前行到下一行:Ctrl + Shift + R 删除当前行:Ctrl + D 切换到下一行:Alt + Enter 选择该行:Ctrl + L 注意事项 运行到模拟器的时候,如果检测到会有具体参数,如果看到是灰色,因为没有点击...

    快捷键

    1. 复制当前行到下一行:Ctrl + Shift + R
    2. 删除当前行:Ctrl + D
    3. 切换到下一行:Alt + Enter
    4. 选择该行:Ctrl + L

     

    注意事项

    1. 运行到模拟器的时候,如果检测到会有具体参数,如果看到是灰色,因为没有点击项目,所以是灰色,而并不是没有检测到模拟器,如果有具体参数出现就已经检测成功了。
    2. 因为基座属于Dcloud的原因,调试时生成的APP图标(H字母)、名称(HBuilder)都已经定死了的,而切换项目调试的时候就会导致图标和名称都没变,但是里面的内容已经变了,这使得很多新手因为图标名称和官网的“hello uni-app”APP一样,以为新生成的APP失败了。
    3. 配置“condition”时,记得要在“pages”里也得把“path”加上,否则最终也会无效。
    4. 运行到微信时,记得开启微信web开发者工具的服务端。
    5. 开发去样式的时候,如果是删除,则还会残留上次的效果,用注释的方式(或断开再运行到设备【太麻烦】)即可解决残留样式的问题。
    6. 如果页面有错误,但是已经修复好了的,但仍报错误,可以试试停止运行,重新运行编译下看看。
    展开全文
  • HBuilderX - 高效极客技巧

    万次阅读 多人点赞 2018-03-27 20:59:39
    惯常来讲,IDE和编辑器是2个产品类别。IDE侧重于某种语言的语法分析、提示...而新的HBuilderX,定位是IDE和编辑器的完美结合,那么HBuilderX就会提供世界顶级的高效字处理能力。看完这些,你一定会惊叹,原来极客是...
  • HBuilderX

    千次阅读 2019-09-03 14:42:58
    官方下载地址:http://www.dcloud.io/hbuilderx.html uni-app:https://uniapp.dcloud.io/quickstart uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等...
  • HBuilderX App开发环境搭建

    千次阅读 2019-03-05 00:17:38
    1. Nox 模拟器 1). 无脑式安装 Nox模拟器平板界面.png 2). 屏幕修改 点击右侧上方的设置按钮,在系统设置中选择手机版,点击...3)....2. HBuilderX 1). 点击右侧的Download,并选择对应平台的App开发版下载即可...
  • HBuilderX.1.7.0.20190314.zip

    2020-07-21 09:58:35
    HBuilderX,简称HX,是轻如编辑器、强如IDE的合体版本 它令我们爱不释手,希望你也会喜欢上这款免费工具。 轻巧 10M的绿色发行包 极速 不管是启动速度、大文档打开速度、 编码提示,都极速响应。 清爽护眼 界面清爽...
  • Hbuilder X 开发APP指南

    万次阅读 2019-03-22 12:16:41
    开发环境HBuilder X 开发环境Hbuilder下载 ...启动HbuilderX 在菜单栏中选择“文件”-> “新建”->“项目”,选择5+App 创建完成后,会在项目管理器中显示新建的“HelloWorld”项目 编辑程序启...
  • HBuilderX开发app实现自动更新版本

    千次阅读 2019-10-09 15:41:21
      需求说明:使用MUI+Vue等技术并且通过HBuilderX打包开发移动app,在有版本更新时需要自动提示用户有新版本,并且可以点击下载自动安装。 思路说明: 应用打开时(使用Vue的生命周期mounted),获取自己的版本...
  • HBuilderX的下载和安装

    万次阅读 2019-03-05 14:47:44
    HBuilderX下载 HBuilderX:官方IDE。建议下载App开发版,如下载标准版,还需在插件管理中安装uni-app插件。 HBuilderX下载地址:添加链接描述 HBuilderX安装 找到下载好的安装包。如图 解压安装包。 解压后...
  • hbuilder不显示代码提示解决

    万次阅读 2018-09-05 10:13:13
    右键项目——扫描索引——重新建立索引。  
  • HBuilder设置代码自动换行的方法

    万次阅读 2018-02-17 21:10:40
    HBuilder设置代码自动换行的方法
  • HBuilder工作空间修改

    万次阅读 2016-07-06 13:58:24
    HBuilder的默认工作空间的修改并不像其他ide一样,在设置里进行更改,而是在工具中进行设置。 1.单击菜单栏“工具”,选择“变更默认代码存放目录” 2.进行修改即可。
  • HbuilderX能像Hbuilder一样,左侧的项目栏文件位置和打开的文档同步,一一对应 设置 · 截图演示:
  • 1.右键项目名称2.引入框架语法提示3.选择自己使用的框架,确定
  • 编辑器版本:hbuilderX、Hbuilder 适用范围:混合app开发使用者调试应用 首先要了解的是,编辑器自带手机调试功能,但需要先打开手机的开发者模式,安装基座后才可以进行调试工作。 步骤一:使用手机usb连接电脑 ...
  • 如何在HBuilder中运行npm命令

    万次阅读 2019-07-31 14:56:51
    有时候发现自己电脑内存不是很大 如果用webstorm跑项目会很卡的话 可以试试轻量级HBuilder来跑VUE项目 VUE项目又需要执行NPM,下面教你怎么在HBuilder中使用NPM 1.首先在HBuilder上面找到运行 进入到外部工具——&...
  • 打开Hbuilder,工具->插件安装 2、使用egit  新建远程仓库 打开https://www.github.com,注册、登录、创建仓库 2.2、Hbuilder中使用Git 在Hbuilder中新建项目, 点击commit
  • 第一次发,求大神解答,HBuilder虽好,但是不能debug,错误还没提示很伤脑筋,请问HBuilder 能不能加断点调试?
1 2 3 4 5 ... 20
收藏数 7,567
精华内容 3,026
关键字:

hbuilderx