下载完成安装后，使用微信登录，点击小程序，开始创建小程序。AppID在小程序平台获取。

 

注：后端服务最好选择不使用云服务（自己初始化云环境），因为会带来很多没有用的文件格式，模板选择不使用模板。

获取AppID如图，点击开发管理后再点击开发设置，最后直接复制，避免不必要的错误。

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

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

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

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

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

云数据库创建：

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

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

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

 

数据库创建集合

添加数据

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

 

推荐阅读：

微信小程序如何上传代码、提交审核、发布代码操作？怎样登录微信公众号平台的小程序和微信公众号后台？_南北极之间的博客-CSDN博客_微信小程序上传根据资料一步步往下做即可。资料在后面：我是扫码登陆的。因为我之前断断续续注册过。我扫描之后。系统让我选择之前注册的账号。在手机上选择好了之后。网页上自动就登陆跳转了。因为我之前已经设置好了。所以这里收起了。可以点开看详情。这里可以设置小程序基本信息，包括名称、头像、介绍及服务范围，开发设置中的服务器域名设置等微信开发者工具下载地址：稳定版 Stable Build | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtoohttps://blog.csdn.net/qq_22182989/article/details/116589066

1.创建uni-app

2种创建方法：

第一种方法：HBuilderX可视化界面

具体方法：

利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app,填写项目名称，项目创建的目录

uni-app支持通过 可视化界面、vue-cli命令行 (opens new window)两种方式快速创建项目。

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址(opens new window)

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。

如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。

#创建uni-app

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

#运行uni-app

浏览器运行：进入hello-uniapp项目，点击工具栏的运行 -> 选择自己想运行的环境即可：

发布：

也是按照自己的需求选择：

第二种方法：使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目

• 使用正式版（对应HBuilderX最新正式版）

  vue create -p dcloudio/uni-preset-vue my-project
  

• 使用alpha版（对应HBuilderX最新alpha版）

  vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
  

• 使用Vue3/Vite版

  • 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee (opens new window)下载模板）

    npx degit dcloudio/uni-preset-vue#vite my-vue3-project
    

  • 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee (opens new window)下载模板）

    npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：

自定义模板

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

例子：我们这里使用正式版命令：

vue create -p dcloudio/uni-preset-vue my-project

具体步骤：

1.需要电脑提前全局安装vue-cli

环境安装

全局安装vue-cli

npm install -g @vue/cli@4

安装好了之后，继续下一步：

2.打开cmd选择好要安装的目录之后。执行以下命令：

vue create -p dcloudio/uni-preset-vue my-project

3.选择hello uni-app 项目模板

不同模板的区别：

安装好了之后，

4.进入到my-project目录

cd my-project

5.运行项目：

以下2个命令都行

npm run dev
npm run serve

6.查看项目的网页效果

点击网址，就可以查看我们创建的uniapp项目了！

 

7.打包、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

 8.微信开发者工具里面运行

如果想在微信开发者工具里面运行的话：

首先要先安装好微信开发者工具，配置好之后，

可以在hbuilder x里打开，或者直接在微信开发者工具里导入项目都可以运行。

如果是在hbuilder x里，点击运行到微信开发者工具即可：

效果：

 

使用cli创建项目和使用HBuilderX可视化界面创建项目有什么区别

编译器的区别

• cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，可以使用 @dcloudio/uvm (opens new window)管理编译器的版本，如 npx @dcloudio/uvm。
• HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

开发工具的区别

• cli创建的项目，内置了d.ts，同其他常规npm库一样，可在vscode (opens new window)、webstorm (opens new window)等支持d.ts的开发工具里正常开发并有语法提示。
• 使用HBuilderX创建的项目不带d.ts，HBuilderX内置了uni-app语法提示库。如需把HBuilderX创建的项目在其他编辑器打开并且补充d.ts，可以在项目下先执行 npm init，然后npm i @types/uni-app -D，来补充d.ts。
• 但vscode等其他开发工具，在vue或uni-app领域，开发效率比不过HBuilderX。详见：https://ask.dcloud.net.cn/article/35451(opens new window)
• 发布App时，仍然需要使用HBuilderX。其他开发工具无法发布App，但可以发布H5、各种小程序。如需开发App，可以先在HBuilderX里运行起来，然后在其他编辑器里修改保存代码，代码修改后会自动同步到手机基座。
• 如果使用cli创建项目，那下载HBuilderX时只需下载23.31M的标准版即可。因为编译器已经安装到项目下了。
• 对 cli 使用有疑问，欢迎扫码加入 uni-app 微信交流群讨论：

注意：HBuilderX创建的项目，一样可以使用npm

目录

前期准备

1.预约开发账号

 2.下载安装开发者工具

开发 

1.创建QQ小程序

2.进入开发者工具

3.基本文件目录结构简单了解

---

前期准备

1.预约开发账号

（1）在QQ小程序开发平台注册好个人信息，预约开发账号：QQ 开放平台

打开之后，需要注册管理员账户，安装流程进行就可以，

（2）之后需要进行邮箱的激活认证账号，

 （3）认证之后，就会出现这个页面，

 2.下载安装开发者工具

（1）进入小程序开发者工具 | 文档

根据自己电脑要求下载小程序开发者工具的版本， 

 这里我选择的是windows-x64版本进行下载的，

 等待下载完成，

 （2）下载完成之后，双击打开，就会进入安装流程。

 此处可以选择开发者工具的下载路径，点击“next”进入下一页，

 此处可以选择是否在桌面上创建快捷方式，点击“next”进入下一页，

点击“install”进入安装， 等待安装完成，

 等待安装完成，

此处可以选择是否现在要开启qq小程序开发者工具，点击“finish”完成，

注意：选择现在要开启qq小程序开发者工具之后，就会弹出这个页面，

 

 （3）QQ登录qq小程序开发者工具之后，现在我们还不能创建一个新的项目，因为我们现在还没有申请小程序appid，

 好了，那下一步我们就需要申请小程序appid。

开发 

1.创建QQ小程序

QQ小程序开发文档

（1）qq小程序的AppID (小程序ID)和AppSecret (小程序密钥)可以找到在QQ小程序，（需要登录账号）

2.进入开发者工具

（1）打开QQ 开放平台，点击“创建小程序”，

 按流程要求进行，

 创建之后，就可以看到我们新创建的小程序了，

 （2）这时，我们就已经申请成功了，将AppID复制下来，我们就可以开始在qq小程序开发工具里创建项目了，

界面上可以看到就会出现一个新的项目，

3.基本文件目录结构简单了解

（1）点击进入项目，我们就能看见我们创建的这个项目的一些基层的文件目录结构，

 对于QQ小程序开发本质上和微信的小程序开发是很相似的。

OK，今天先到这里。