uniapp体验(初试HbuilderX)

94 阅读2分钟

用原生的微信小程序属实有点难受,毕竟vue写久了,还是会写错和不习惯,还是希望有一个框架来方便我们写代码。

由此,uniapp就来了

啥是uni-app

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

怎么开发呢?

官网有两种方式,要么vscode,

image.png

要么就是下面这个↓HBuilderX

image.png

先讲讲这个HbuilderX

国内的一个开发工具,自己人的东西用起来就是爽~

跳过前面的安装与设置,直接看一些重要的东西

1 点击文件--》新建--》项目,他能够一整个模板给你给弄下来,然后做调整 image.png

2 新建出来的项目里面已经配置好了

image.png

文件里面对应的信息与功能

image.png

记得创建之后,打开manifest.json的小程序配置,去把id填上 image.png

3 创建完项目,可以打开运行界面,根据你的需要来打开想要运行在哪里

image.png

4 点击运行微信开发者工具,他会弹框出来提醒你正在编译了

image.png

编译完后,会多两个东西:

image.png

.hbuilderx是启动调试时的配置,unpackage是帮你打包好的文件

接着打开打包文件,可以看到里面存了已经帮你编译好的vx初始化文件

image.png

怎么在小程序上面打开?

打开小程序--》点击创建,把打包后的路径放进去

切记!一定是刚刚我启动开发工具编译出来的打包文件,里面的路径不能错,路径没放错的话,appID会自动显示出来,放错了它不会显示的

image.png

直接新鲜出炉~

image.png

然后可以打开pages里面的index进行操作了,终于可以用回vue的写法! 不需要在分开好几个页面来写了

image.png

另外的

在vsc里面用插件,我们在这里也是需要的!

工具--》插件安装

image.png

可以打开插件市场,挑选自己需要的插件工具

ext.dcloud.net.cn/