1.选择模板 uni-ui

2.得到创建项目

3.获取APPid

在微信小程序电脑后台获取APPID
这个方法适用于自己申请的微信小程序（自己用的小程序）
打开微信小程序官网：https://mp.weixin.qq.com/ 并登陆

4.项目打包 打包后运行在微信小程序工具 才不会报错，如果报错app.json问题，查看此篇文章解决app.json问题
打包后多以文件夹 unpackage

打包方法：
HBuilderX打包方法

vue-cli打包方法

5.打包后，微信小程序工具打开项目 ，如果报以下错误，看图操作

6.微信小程序部分设置：
1.是否勾选不校验合法域名？？（勾中后，在开发时候就不会校验某些域名，例如下载文件和图片时候就不会校验图片的域名地址；但是必须要在小程序后台开发配置好对应域名，否则本地测试可以，但线上就会报域名错误；而不选中就可以在开发时候看到错误信息）
2.设置代理和端口

7.运行到微信小程序

8.小程序发布需要先设置：
将appID填入到使用uni-app开发的项目manifest.json中

9.具体发布小程序看 发布小程序流程

10.因为我们使用的是uni-ui，所以必须要有uni-ui的样式，这里我已经将hello-uniapp-master官方演示案例下的common拿了过来
全局使用uni-ui的样式，在App.vue中引入uni.css；
同时在这一步开启小程序发布后，自动更新提示，自动更新最新版本小程序

11.初始化npm工程

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程：

npm init -y

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。

12.vuex配置，vuex封装
注意：
1.uni-ui自带store 不需要再重新安装，可以直接创建store文件引入使用
2.在main.js内，将store对象挂载到vue实例中

13.接口uni.request请求接口封装

14.创建项目根目录下components文件夹，放公共vue组件

15.对微信小程序进行分包，uni-app分包步骤（如果不分包，后期打包代码太大会导致二维码预览失败，无法真机调试）

16.微信登录看这篇

17.如果需要自定义微信小程序的导航栏，点击微信小程序自定义tabBar

18.正式开发时候，配置好请求后，在浏览器H5页面和微信小程序工具上，调用接口是正常的，但是真机预览时候，使用真正的手机去调接口，如果没有配置在小程序官方地址上配置ip，那请求接口会无效。

配置ip：在小程序–开发–开发管理–开发设置–服务器域名–request合法域名

一、前期准备

（一）微信开发者工具

小程序开发工具是腾讯官方发布的用于开发微信小程序的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创建微信小程序项目没有问题。

下载微信开发者工具，hbuilder

在hbuilder中导入项目，在hbuilder中运行，

 ====>>选择微信开发者工具

将该项目中的AppID 要和微信小程序开发管理中的ID 保持一致

（同时微信小程序进去右上角有个设置，进入设置里面将服务端口也要打开）

（其中索引问题 下面链接可参考）

[sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引_kitiyang的博客-CSDN博客