HBuilderX从入门到发布教程

一、环境安装和配置
1、下载HBuilderX工具
https://www.dcloud.io/hbuilderx.html

解压后打开开发工具

下载插件，打开工具-》插件安装

2、下载微信小程序ide工具
https://developers.weixin.qq/miniprogram/dev/devtools/download.html

安装微信小程序开发工具，这里有个坑，我们系统是64位的，下载64位的开发工具却打不开，要下载32位的才行。

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

进入开发者网站，注册微信小程序开发账号
https://mp.weixin.qq/

注意，一个邮箱好像只有一次机会，一旦输入错误，好像这个邮箱就不能用了，我就浪费掉了一个邮箱。

根据小程序发布流程获得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中填写要上传的参数