文章目录
 
一、前期准备
（一）微信开发者工具
（二）HbuilderX
  
二、创建项目步骤
（一）HBuilderX创建小程序工程
（二）、配置小程序AppID
（三）、运行项目到微信小程序
 

 
一、前期准备
 
（一）微信开发者工具
 
小程序开发工具是腾讯官方发布的用于开发微信小程序的IDE软件，可以从微信官方网站下载到这个工具，建议下载稳定版本的软件。
 
下载安装文件后，执行默认安装即可，初次启动需要扫码才能登陆该软件
 
【重要】为了保证微信开发者工具与HbuilderX配合使用，必须开放小程序的服务端口。这样将来HbuilderX可以把uni-app项目编译成小程序项目，通过安全端口调用小程序工具执行项目。
 
 
 
（二）HbuilderX
 
HBuilderX工具是目前国产化软件中，开发前端和移动端项目最优秀的IDE之一，甚至比JetBrains出品的WebStorm还要好用。开发UNI-APP框架的移动端项目，必然首选HBuilderX。
 
HBuilderX下载地址：链接: https://pan.baidu.com/s/1FPCEVHBtYQWWgIMnYgNiBg 密码: rpmf
 
下载安装包后直接安装即可，完成安装后，必须在HBuilerX中配置微信开发者工具的路径。首先在偏好设置中找到运行配置，然后在微信开发者工具路径中填写本机中文件的路径，使用MAC的同学可以参照我下面的截图。（windows的不一样，可参考其他教程）
 
 
二、创建项目步骤
 
（一）HBuilderX创建小程序工程
 
在HBuilderX上，创建项目，类型选择uni-app(U).
 例如，新建一个项目，叫做work-online。
 
 
（二）、配置小程序AppID
 
在manifest.json文件中填写你自己注册下来小程序AppID
 
 
（三）、运行项目到微信小程序
 
首先，必须启动本机上的微信开发者工具，并且扫码登陆
 在HBuilderX中选择运行微信小程序。
 
 在微信开发者工具中即可看到hello页面，说明利用HBuilderX创建微信小程序项目没有问题。
 

 
AppID获取及新建小程序项目原生框架目录结构介绍
 
AppID获取
小程序软件安装及新建项目
原生框架介绍
  
 

 
AppID获取
 
进入微信公众平台，点击小程序的查看详情进入
 
 
2. 鼠标滚轮滑到页面最下方，点击前往注册
 3.填写注册信息
 注意邮箱尽量使用QQ邮箱，注册后，会需要通过邮箱链接激活。
 4. 通过邮箱、密码在微信公众平台登录
 登录后界面如下图所示，点击开发设置。
 
 
 
小程序软件安装及新建项目
 
1.进入微信公共平台官网，点击小程序
 2.点击开发者工具
 3.点击下载
 4.根据电脑系统、位数选择下载
 5.双击下载的.exe文件傻瓜式安装，安装完成后会在电脑桌面有个微信开发者工具快捷图标。
 
 6.双击快捷图标打开软件，初次进入软件时使用微信扫一扫登录微信号。
 7.左侧选择小程序，右侧点击加号新建项目。
 
 软件主界面如下图。
 
 
原生框架介绍
 

 
微擎小程序通用配置图文教程，教会你怎么配置微擎小程序！
 
1、去源码下载微擎小程序，这里以官网小程序为列，教大家如何配置微擎小程序。
 
2、将对应的官网小程序后端文件夹hc_step上传到微擎的addons目录下
 
3、在微擎安装好官网小程序。
 
4、重要步骤，要去微信小程序中查看自己微信小程序的原始ID、AppID、AppSercert！！
 
重要原因是：我安装了小程序，但是并没有配置小程序(始ID、AppID、AppSercert)
 
参考下图查看你的小程序AppID和AppSecret(并配置好小程序服务器地址)
 
5、新建小程序，并配置好对应的小程序信息
 
将官网小程序文件夹放在电脑的英文目录下，路径中不能有中文，调试路径必须为英文，切换不能有任何中文目录名！！！！
 
7、打开官网小程序wxapp文件夹，正常情况下微擎通用小程序前端文件的根目录都会有siteinfo.js文件，打开配置以下参数(一般在文件最末尾)：如果没有就在app.js里面
 
module.exports = {
 
name: “官网小程序”,
 
uniacid: “58”, //此处需要查看微擎中新建的小程序在微擎对应的程序ID
 
acid: “58”, 此处需要查看微擎中新建的小程序在微擎对应的程序ID
 
multiid: “0”,
 
version: “2.0.2”, //小程序版本正确填写
 
siteroot: “https://demo.aixay.cn/app/index.php”, //www.72jz.com换成你自己的微擎域名即可
 
design_method: “3”
 
};
 
查看微擎中新建的小程序在微擎对应的程序ID方法：
 
或者用下面的方法，进入小程序配置页面->基础信息中查看
 

 

 
8、打开微信WEB开发者工具进行调试，填写小程序前端路径、项目名称、appid，配置正确后即可看到小程序页面，如下图：
 
9、微擎通用小程序配置
 
查看更多关于 小程序配置 的文章
 
完成！！

1、安装编辑器HBuilder X及插件
 
下载 HBuilderX 开发工具
 新版本下载：https://www.dcloud.io/hbuilderx.html HBuilderX
 历史版本下载地址： https://ask.dcloud.net.cn/article/37302
 安装插件
 点击工具—>插件安装
 
 
点击安装新插件安装下面插件
 
 如果里面没有则点击下面前往插件市场安装
 
 安装SCSS插件
 
 
2、新建一个项目
 

 新建一个uni-app项目，自定义项目名字和项目地址，暂且使用默认模板，确认好后，创建项目
 
 
3、将默认项目部署到安卓手机上
 
1、将手机通过USB线连接电脑，（百度打开手机开发者模式，将USB数据传输允许）
 2、安装360手机助手（可以显示安装详情）
 3、点击HBuilderX运行
 
 4、手机接收并安装就行了
 内容就是Hbuilder里面的内容
 
 
4、将项目打包到微信小程序
 
1、注册一个微信程序开发者账号微信小程序注册
 选个体户注册
 
 2、拿到开发者的AppID值
 
 3、安装微信开发者工具
 在微信公众平台点击小程序，点击查看详情
 
 
在开发者工具中找到微信开发者工具
 微信开发者工具下载
 
 4、用注册的微信小程序的管理员，扫码登录微信小程序开发工具
 
 
5、在设置中开放服务端口
 
 6、点击HBuilderX运行微信小程序
 

 7、配置基础项目的微信小程序的AppID
 
 8、配置微信开发者工具的AppID（从第二步获取的）
 
 9、预览微信小程序
 点击预览手机扫描二维码预览，微信查看小程序，