HBuilderX从入门到发布教程

最新推荐文章于 2024-07-29 22:50:13 发布

romulusla1

最新推荐文章于 2024-07-29 22:50:13 发布

阅读量6.8w

点赞数 50

分类专栏： HBuilderX 文章标签： HBuilderX

本文链接：https://blog.csdn.net/romulusla01/article/details/101053889

版权

HBuilderX 专栏收录该内容

1 篇文章 10 订阅

订阅专栏

一、环境安装和配置
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中填写要上传的参数
在这里插入图片描述