首页 > 教程 > 文章 > Uni-APP > 正文

介绍uni-app实战的社区交友:项目和环境搭建

原创2021-06-29 07:44:00 0 10

推荐(免费):uni-app开发教程

文章目录

  • 前言
  • 一、项目介绍
  • 二、环境搭建和创建项目
    • 1.开发环境搭建
    • 2.创建uni-app项目
  • 三、多端调试环境搭建
    • 1.安卓手机调试配置
    • 2.iOS真机调试配置
    • 3.微信小程序调试配置
    • 4.支付宝小程序调试配置
  • 总结

前言

本文主要介绍项目的概况和环境搭建:
本项目是基于uni-app开发的社区交友APP;环境搭建以HbuilderX为主,创建项目即可测试运行;同时为了兼容多种平台,需要进行多端调试环境的搭建,包括Android、iOS、微信小程序和支付宝小程序等等。

一、项目介绍

本项目是基于uni-app,实战开发社区交友类app,实现一次开发、多端发布,同时发布到安卓端app、iOS端app、微信小程序和支付宝小程序等平台,其中后端接口采用Python Django实现。
项目中包含了帖子模块、话题模块、搜索模块、会员模块、聊天模块、广告位模块和其他模块等,最终实现了丰富的功能、美观的界面,部分界面示意如下:


动态演示效果如下:

uni-app社区社区交友APP开发演示

二、环境搭建和创建项目

1.开发环境搭建

本项目最核心的编辑器是HBuilderX,可以在官网https://www.dcloud.io/hbuilderx.html下载,选择所需系统和版本下载即可。
下载后解压到安装目录,并点击解压目录下的HBuilderX.exe即可使用。

打开后,界面如下:

为了加速开发,可以安装一些插件,点击导航栏 → 工具插件 → 安装即可选择所需插件安装,HBuilderX已默认安装了一些核心插件,如App真机运行、uni-app App调试等,此类插件不支持从插件市场安装。
还可以选择安装scss/sass编译等,可以在DCloud插件市场https://ext.dcloud.net.cn/?cat1=1&cat2=11&orderBy=TotalDownload选择并通过使用HBuilderX导入插件安装即可。

2.创建uni-app项目

使用HBuilderX创建初始项目,选择uni-app,名为Community_Dating,如下:

创建之后,即可调试运行,可以运行到APP、小程序等多端。
以Android APP调试为例,如果选择真机测试,需要提前连接手机并打开USB调试,过程如下:

显然,已经成功将APP运行到Android端。

三、多端调试环境搭建

1.安卓手机调试配置

真机调试会最大程度地显示APP在实际运行中的状态。
以华为 Nova2为例说明,USB数据线连接到手机后,需要将连接方式改为传输文件,如下:

再打开开发者模式,如果是第一次打开,需要多次点击版本号,再打开USB调试,过程如下:

此时在运行选项中即多了刚刚添加的真机设备,如下:

此时即可点击进行调试,过程与“二、环境搭建和创建项目”中运行到APP相同。
同时支持在更改项目代码时,实时更新到APP、动态调试,如下:

可以看到,实现了动态编译并更新。

2.iOS真机调试配置

使用数据线链接iPhone并安装iTunes用于投屏显示。
进行调试时,可能会出现如下提示:

未受信任的企业级开发者,需要进行设置,进入设置 → 通用 → 设备管理 → Digital Heaven (Beijing) lnternet... → 信任“Digital Heaven(Beijing) Internet & Te...,此时再进入应用进行调试,即可成功运行APP。

3.微信小程序调试配置

使用微信小程序进行调试时,需要先安装微信开发者工具,可以直接点击https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html选择合适的系统和版本进行安装。
在进行调试前,还需要进行两步配置,分别如下:
(1)配置微信开发者工具的安装路径;
(2)微信开发者工具打开服务端口。

具体可参考https://blog.csdn.net/CUFEECR/article/details/111088889第二部分。

运行过程如下:

还可以进行真机预览和调试。

4.支付宝小程序调试配置

在使用支付宝小程序调试之前,需要安装小程序开发者工具,可点击https://opendocs.alipay.com/mini/ide/download选择合适的版本和系统并安装。
安装后,需要设置支付宝小程序开发者工具路径,如下:

此时再运行到支付宝小程序开发者工具,如下:

可以看到,运行到了支付宝小程序,同时实现了动态编译。

除了在开发者工具中预览之外,也可以进行真机预览,如下:

实现了相同的预览效果。

总结

作为使用Vue.js开发跨平台应用的前端框架,uni-app可以实现编写一套Vue.js代码,即可编译到iOS、Android、微信小程序等多个平台,实现了多端共用,大大降低了开发和学习成本,加速了开发。使用uni-app开发社区交友类APP,也可以快速实现一套代码发布到多个平台的效果。

以上就是《介绍uni-app实战的社区交友:项目和环境搭建》的详细内容,更多请关注 “设计者在线”其它相关文章!

  • 相关标签:uni-app项目介绍和环境搭建
  • 本文由 设计者在线 原创发布,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论 条评论
  • 专题推荐

    • 帝国系统

      简介:抗击新型冠状病毒感染肺炎

    • JQUERY

      简介:春节好春节好春节好春节好春节好春节好春节好春节好

    • 不忘初心牢记使命教育活动

      简介:不忘初心牢记使命教育活动

    • 我们的生活

      简介:我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活我们的生活

    • 明天会更好

      简介:明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好明天会更好

    推荐视频教程
    视频分类
    [!--date--]Y-m-d[!--date--]