uni-app利用hbuildx开发微信小程序环境搭建

最新推荐文章于 2024-06-28 16:00:21 发布
最新推荐文章于 2024-06-28 16:00:21 发布
阅读量6.8k 收藏 4
点赞数 1
分类专栏： 微信小程序、uni-app、hbuildx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbiao68/article/details/102759398
版权

文章目录

问题描述

工欲善其事必先利其器，技术选型选中了uni-app，那么就一定要使用hbuildx工具开发，因为之前用这个非常少，很多快捷键使用不方便，包括常用的操作，还有 如何跟微信小程序开发关联等，因此，搭建环境是第一步。因此，先写个环境搭建的学习笔记

ctrl+R 启动编译

先配置 微信小程序的安装路径

在这里插入图片描述

微信小程序需要打开端口，允许hbuildx拉起

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

hbuildx 支持将scss转为CSS

在这里插入图片描述

在这里插入图片描述

hbuildx 快捷键与vscode保持一致

在这里插入图片描述

文件和左侧资源管理关联

在这里插入图片描述

胖鹅68
关注
专栏目录
Hbuildx中使用uni-app 新建 微信小程序项目 以及 运行相关配置
weixin_43139068的博客
07-28 1485
Hbuildx使用uni-app新建微信小程序项目 1、打开Hbuildx，在左上角选择“文件”→“新建”→“项目”→“新建”，在弹出的“新建项目”进行配置，如下图所示：
Uniapp 本应用无法独立运行,需与HBuilderx搭配使用
m0_43449107的博客
08-23 1567
项目里面不要有中文文件或者文件夹
HbuildX--关联微信小程序 启动微信小程序项目 (详情版)
最新发布
zbl1340301274的博客
06-28 452
注意：如果这里如果报错，需要根据提示解决问题，如：sass组件没有安装等，需要自行安装sass组件（在工具--安装插件中安装需要的插件）如果没有安装微信web开发工具，需要先根据上面的提示地址下载，之后把本地的安装路径配置到如下图位置。4、在微信开发者网站，注册小程序开发用户，获取appId（点击项目的mainfest.json）获取如下红色圈出的部分，填写到上图Hbuildx的mainfest.json的配置中。6、启动到模拟器中（运行到小程序模拟器---微信开发者工具）5、启动终端，下载需要的依赖。
uni-app学习笔记(一):HbuildX+uni-app搭建小程序项目
langko的博客
06-29 2288
//采用真机测试和微信开发者工具测试1.安装HbuildX(只有10几M，C++构架比java和electron快不少)HBuilderX-高效极客技巧2.下载微信开发者工具调试小程序端，如果是支付宝或者百度的小程序就用相应的开发者工具3.HbuildX创建一个uni-app项目，点击运行，下载真机运行插件(以后就不用下载了)4.下载完成再点击运行app，点击运行到安卓基座，(手机打开开发者模式并打开USB调试连接电脑)//咱们最好是打开项目里的app.vue文件再点击运行//安装成功我们先停止一下，再点击
使用HBuilderX高效搭建Uni-App微信小程序开发环境
qq_31226163的博客
05-24 3348
Uni-App是一个使用Vue.js开发所有前端应用的框架，支持发布到iOS、Android、H5、以及各种小程序平台（包括微信小程序、支付宝小程序等）。它的核心优势在于一套代码可以编译到多个平台，大大降低了跨平台开发的成本。HBuilderX是DCloud推出的一款专为前端开发者设计的开发工具，内置了对Vue.js、uni-app的完美支持，提供了强大的代码提示、智能感知、模板快速生成等功能，让开发效率飞升。从零开始，申请开通微信小程序全流程_微信公众号申请小程序 csdn-CSDN博客。
vue-cli 构建uniapp项目 对比 HBuilderX，哪个好？
wcdunf的博客
04-22 1550
两种构建 uniapp 项目的方式各有优缺点，您可以根据自己的需求选择适合自己的方法。
快速使用uni-app搭建小程序项目
weixin_61949766的博客
05-23 1943
快速搭建uniapp 微信小程序项目
uni-app-resp:uni-app项目搭建
05-28
Uni-app是一款由HBuilderX团队开发的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ小程序等多个平台运行。本项目“uni-app-resp”是一个通用...
uni-app优乐购商城小程序搭建
L1311621的博客
06-18 683
uniapp是一框强大的框架，在学习的过程中受到了很多的启发，希望我这篇文章能对一些有需要的人获得帮助，在此我也给大家分享一些在学习中受到的启发，学习uniapp需要多多练习，通过多次的练习来不断提高自己的技术水平，在学习的过程中也要多思考问题，找到适合自己的学习方式，来帮助自己更加高效的学习。点击我的页面中的全部订单 待付款 代收款 会跳到另一个页面，需要渲染数据 ，需要请求接口，接口里面传的参数值为type 他为number类型 所以我们得到type之后 需要将他进行一个数据类型转换。
uni-app多端开发
weixin_43993776的博客
11-08 1433
开场白： 要是在 vscode 书写代码， 需要添加 几个插件来支持 uni-app。
uni-app的开发环境
weixin_54048131的博客
09-01 2024
如果我们想给组件封装一个click事件，应该在home.Vue事件中在页面上配置自定义事件：设置事件：在组件中。
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台
09-28
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，管理后台是skyshop电商程序，用PHP+mysql开发的，简单部署了一下，可以使用。
如何使用Hbuilderx运行微信小程序
热门推荐
04-22 4万+
1. 首先进入Hbuilderx官网下载IDE 2.下载并安装完成后，运行Hbuilderx 3.点击 左上角文件，新建/导入uni-app项目 4.点击左侧项目名称后 ，在顶部操作栏点击运行--运行到小程序模拟器---微信开发工具 最终效果： 注意：如果是导入项目的话，需要先让管理员将自己添加为小程序开发者，不然运行会报错 ...
uni-app Hbuild 启动微信小程序开发工具问题总结
u010227042的博客
05-21 5039
自动启动且自动编译配置如下：
【uniapp】HbuilderX发布微信小程序
Web_boom的博客
09-19 1万+
一、首先配置HbuilderX 与微信开发者工具关联，在HbuilderX中打开【工具】-【设置】-【运行配置】中找到小程序运行配置，在下面微信开发者工具路径将你本地微信开发者工具目录进行设置。提到微信公众平台后的代码为开发版本，想要将开发版本发布成线上版本之前要提交审核，审核通过后就会在审核版本一栏出现，这时就可以将小程序进行发布为线上版本。执行该命令后，微信小程序将会在小程序模拟器中进行打开，这个时候我们就可以看到小程序具体的页面了，相当于开发前端页面时把html在浏览器中进行打开。
HbuilderX运行uni-app开发的微信小程序
jieyucx的博客
12-08 3234
HbuilderX运行uni-app开发的微信小程序
如何使用HbuilderX运行小程序项目
m0_61663332的博客
02-24 2万+
如何使用HbuilderX运行小程序项目，创建新的页面，git管理
uni-app开发环境配置的过程
m0_53690581的博客
03-07 1317
1，安装HbuildX - 官网下载：https://www.dcloud.io/hbuilderx.html 选择APP开发版 - 解压后使用并安装插件 - 安装插件：工具=>插件安装（uni-app(vue2)编译、uni-app(vue3)编译、scss/sass编译） 2，创建第一个uni-app - 启动HbuildX，文件=>新建=>项目=>选择uni-app=>填写项目名，项目路径=>选择项目模板：uni-ui项目=>点击创建..
微信小程序云开发——HbuilderX(数据库)
afeiying_的博客
01-14 2775
<template> <view class="content"> <view> <button @click="add()">增</button> </view> <view> <button @click="shan()">删</button> </view> <view> <button @click="shanx()">删x</butt.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值