使用HBuilderX创建一个小程序

一.下载HBuilderX并安装

A.下载HBuilderX并安装 ,下载正式版  下载地址:https://www.dcloud.io/hbuilderx.html

 

 a.1 下载完成后,解压文件

 

 a.2 在减压完成后点击 .exe文件运行

 

 

a.3 根据个人喜好选择

 

 

 a.4 ctrl+shift+n 新建一个窗体或者选择视图→新建窗体→新建项目

 

 a.5 选择uni-app 自定义一个项目名称点击创建

 

 

 a.6 安装所需要插件 点击工具下的插件安装

 

 a.7 选择安装新插件,点击安装uni-app

 

 a.8 点击前往插件市场安装less插件,搜索less点击搜索,在搜索结果中找到第一个下载

 

 

 

 

a.9 使用HBuilderX 导入插件,这步需要登录邮箱,登录完成后自动下载并安装

 

 

 a.10 此时会弹出一个询问框，点击继续，浏览器会询问是否打开HBuilderX，选择打开。

 

 

 a.11 这时用HBuilderX新建一个c.less，保存后，会自动在同级目录生成同名的c.css，只是扩展名不同,需要手动改下后缀

 

 以上是HBuilderX配置完成

 

 

B.下载微信小程序开发者工具 ,我是的电脑是64位,所以选择了稳定版的64位 ,点击Windows64即可自动下载  

   b.1下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 

 

 

 

 b.2  点击安装小程序,需要注意记录安装路径后面运行会用到

 

 b.3在安装完成后,使用手机扫二维码登录到下面页面

 

 b.4 点击设置打开端口

 

 b.5 在网上搜索相关开发一个简单的微信小程序代码后,点击运行，运行到小程序模拟器，选择第一个微信开发者工具

 

 b.6 复制粘贴刚才安装微信小程序开发工具的路径即可

 

 b.7 第一次运行，会下载编译工具，等待下载安装完成即可

 

b.8 下载完成后需要重新运行一遍

b.9 运行成功后，微信开发者工具会自动打开，HBuilder X已成功运行微信小程序项目

 

转载请说明