uniapp开发qq小程序

Uniapp是一款基于vue语法的跨平台前端开发框架，能够同时构建多端应用。借助Uniapp，我们可以使用同一份代码构建微信小程序、支付宝小程序、H5、APP等多个端的应用，并且和原生应用有着相同的体验。因此，开发一个QQ小程序也不在话下，下面将详细介绍Uniapp开发QQ小程序的原理以及操作步骤。

1. 准备工作

首先，我们需要下载安装好Uniapp的开发工具[HBuilderX](https://www.dcloud.io/hbuilderx.html)。安装好后，打开HBuilderX，选择新建项目，选择uni-app，然后输入项目名称，点击创建即可。在uni-app中，我们需要选择目标平台，如下图所示：


在这里我们需要切换至mp-QQ（注意不是mp-qq），因为QQ小程序在开放平台中是以mp-QQ方式接入的。

2. 配置manifest.json

在HBuilderX中，我们可以通过修改manifest.json配置文件实现项目基本配置。配置文件的路径为/uni-app/manifest.json。我们需要将生成的appid（接入QQ小程序平台后获取）填入manifest.json中的“qqappid”中。具体操作如下：


这里还需要注意的是，我们需要将QQ小程序的appid添加到小程序管理中，并且获取到QQ小程序的AppSercret，然后在manifest.json中添加配置：

```

"mp-QQ": {

"appid": "your_qq_appid",

"AppSecret": "your_qq_appsecret"

}

```

3. 编写代码

然后我们就可以开始编写代码了。Uniapp与Vue框架非常相似，可以先创建一个vue文件，在其中编写代码，然后通过修改pages.json来完成页面的跳转。当然，我们可以使用uni-app官方提供的组件库，具体请访问官方文档。

4. 打包上传

最后一步是打包上传。我们需要通过HBuilderX菜单中的“发行”，选择“QQ小程序”进行打包，然后将打包好的文件上传到开放平台中，即可完成小程序的提交和审核。

5. 注意事项

在进行开发过程中，我们需要注意以下几点：

① QQ小程序不支持vue中的下面这种语法：

```javascript

data() {

return {

a: 'a';

}

}

```

我们需要写成：

```javascript

data: {

a: 'a'

}

```

② 不要依赖mui组件（好像现在也没法用了）

③ 在manifest.json的页面配置中，使用相对路径。

## 结论

通过Uniapp开发QQ小程序，我们可以极大地提高开发效率，用一套代码开发多个端，大大减少了开发工作量。同时，学习和掌握Uniapp技术也可以为我们未来的跨平台开发之路打下良好的基础。