一、前期准备

（一）微信开发者工具

小程序开发工具是腾讯官方发布的用于开发微信小程序的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如图，点击开发管理后再点击开发设置，最后直接复制，避免不必要的错误。

初始化云环境：点击云开发

找到环境设置，复制环境ID

如图在app.js中初始化云开发环境，输入环境ID

onLaunch方法：小程序已启动就会执行。

// app.js
App({
    onLaunch(){
        console.log('小程序开始启动啦')
        wx.cloud.init({
            env:'输入云开发环境ID'//云开发环境id
        })
    }
})

云数据库创建：

在app.json中创建文件夹格式如图

（注：页面和页面之间用“,”隔开，最后一页不用。）

点击云开发，然后点击数据库

数据库创建集合

添加数据

数据库权限改为所有用户可读 

小程序创建一个空白页面还是比较简单的。

pages文件夹下就是一个个页面组件

想要新增页面组件则找到app.json里面的pages数组，然后添加一组数据即可得到一个页面组件了。

然后就会生成一堆文件，在里面就可以编写代码了。