uni-app实战之社区交友APP(1)项目介绍和环境搭建

CuterCorley 等级 1339 0 0

如需查看本项目实际运行效果,可点击uni-app实战之社区交友APP(1)项目介绍和环境搭建(免费试读)进行浏览。 如需本项目完整前端uni-app代码和资源文件,可以点击https://download.csdn.net/download/CUFEECR/15316002下载,或者订阅本专栏uni-app社区交友APP开发实战,即可在本专栏下序号为5的整数倍的博客(例如uni-app实战之社区交友APP(5)搜索和发布页开发uni-app实战之社区交友APP(10)登录、个人空间开发和动画优化)文末获取百度网盘链接和提取码。同时为了感谢各位读者的支持,订阅本专栏的各位小伙伴还可以获得uni-app入门视频和本专栏同步视频作为额外奖励。

前言

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

一、项目介绍

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

动态演示效果可点击https://v.youku.com/v_show/id_XNTA3MDA0MTM0NA==.html查看。

二、环境搭建和创建项目

1.开发环境搭建

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

打开后,界面如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

为了加速开发,可以安装一些插件,点击导航栏 → 工具插件 → 安装即可选择所需插件安装,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,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

创建之后,即可调试运行,可以运行到APP、小程序等多端。 以Android APP调试为例,如果选择真机测试,需要提前连接手机并打开USB调试,过程如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

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

三、多端调试环境搭建

1.安卓手机调试配置

真机调试会最大程度地显示APP在实际运行中的状态。 以华为 Nova2为例说明,USB数据线连接到手机后,需要将连接方式改为传输文件,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

再打开开发者模式,如果是第一次打开,需要多次点击版本号,再打开USB调试,过程如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

此时在运行选项中即多了刚刚添加的真机设备,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

此时即可点击进行调试,过程与“二、环境搭建和创建项目”中运行到APP相同。 同时支持在更改项目代码时,实时更新到APP、动态调试,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

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

2.iOS真机调试配置

使用数据线链接iPhone并安装iTunes用于投屏显示。 进行调试时,可能会出现如下提示: uni-app实战之社区交友APP(1)项目介绍和环境搭建

未受信任的企业级开发者,需要进行设置,进入设置 → 通用 → 设备管理 → 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第二部分。

运行过程如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

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

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

在使用支付宝小程序调试之前,需要安装小程序开发者工具,可点击https://opendocs.alipay.com/mini/ide/download选择合适的版本和系统并安装。 安装后,需要设置支付宝小程序开发者工具路径,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

此时再运行到支付宝小程序开发者工具,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

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

除了在开发者工具中预览之外,也可以进行真机预览,如下: uni-app实战之社区交友APP(1)项目介绍和环境搭建

实现了相同的预览效果。

总结

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

收藏
评论区

相关推荐

uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。 如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
uni-app入门教程(7)第三方登录和分享
前言本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uniapp实现有不同的接口和实现方式。 一、通用配置因为小程序和APP登录接口不同,需要在前端进行跨端兼容处理,同时微信等平台的小程序一般只支持所属宿主程序的第三方登录,而无法包括其他的
uni-app入门教程(9)字体库、自定义组件、打包和新闻实战
# 前言本文主要介绍了4方面内容:在uni-app项目中使用iconfont提供的图标字体库,美化页面;实现自定义组件,并且可以自定义属性和实现父子组件之间的消息传递;微信小程序预览和真机测试,APP端云打包和本地打包;新闻列表和详情实战练习。# 一、使用iconfont字体库uni-app中可以使用**iconfont**()提供的图标字体。大致过程如下:
APP渠道:APP渠道归因的探索及一点思考
![](https://oscimg.oschina.net/oscnet/3b823d1a37ec21075a65979133517f356c5.jpg) **APP渠道归因之痛** APP分析与网站分析最大的不同之处在于:在网站端完成渠道归因那是轻松简单加愉快,但APP的渠道归因却是个巨大无比的坑。这个坑有多大呢?有专门做APP渠道归因的公司,做到被
APP的三种开发模式
阅读目录: 1.Naive APP 2.WebAPP 3.HybridAPP 4.三种APP技术特性   Native APP 的优缺点:     web APP 的优缺点:     Hybrid APP 的优缺点: 5.3种APP对比分析 *     1.主要区别 *    2.开发难度区别 *     3.发布渠道
4.app是怎么炼成的
【转载】 作者:曾健生,公众号ID:appbackend 比目科技:[http://click.bmob.cn/?sid=752c854d8a91772b828a](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fclick.bmob.cn%2F%3Fsid%3D752c854d8a917
2019年前端开发前景如何?前端开发会被淘汰吗?
****后台回复“********送书********”,免费参与送书活动**** 在之前一段时间,网传有个技术团队做了个移动端的APP,发布上线时候称可以直接生成网页效果,于是有很多人一下子慌了。 最近就有不少人纷纷来问李老师,“现在手机APP可以直接生成网页了,都可以取代前端开发工程师的工作了,以后APP发展越来越厉害,前端开发工程师的产品应用是不是
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗? 随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗? **其实前端绝不仅仅是网页开发而已**。微信小程序和 App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
2019年前端开发前景如何?前端开发会被淘汰吗?
****后台回复“********送书********”,免费参与送书活动**** 在之前一段时间,网传有个技术团队做了个移动端的APP,发布上线时候称可以直接生成网页效果,于是有很多人一下子慌了。 最近就有不少人纷纷来问李老师,“现在手机APP可以直接生成网页了,都可以取代前端开发工程师的工作了,以后APP发展越来越厉害,前端开发工程师的产品应用是不是
2021年前端还有前景吗?
或许很多刚刚入门前端的同学都会思考:2021年前端还有前景吗? 随着微信小程序的普及,以及app的下载,留给网页端的空间会越来越小吗?大公司固然无所谓,可是对于小公司与其耗费精力做网页,还不如开个公众号小程序。所以学前端会有未来吗? **其实前端绝不仅仅是网页开发而已**。微信小程序和 App,其实都离不开前端范畴。尤其是微信小程序,几乎就是前端垄断的世
APICloud的发展和应用
前言 -- 随着近几年互联网进入下沉期,C端app产品告别了早期的抢占市场阶段,进入寡头时代。微信、支付宝、头条等超级app们希望建立起自有生态主导流量分发,纷纷推出了各自的小程序开发技术,允许用户在其app内运行一个“小app”,分享超级app的流量红利。 App作为移动互联网时代企业业务非常重要的载体之一,如果企业没有技术团队怎么办?技术团队实力不强
Android与H5混合开发
        Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力,且具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以App和H5页面相结合就显得尤为重要。而android
DCloud
**ylbtech-DCloud-MUI:Hello mui** MUI-最接近原生App体验的前端框架 **1.** 返回顶部 1、 MUI-最接近原生App体验的前端框架 **极小** 100k的js文件,60k的css文件。原生编写,不依赖任何三方框架 **极强** xcode和Android studio里所有原生控件都具备 **高
IOS和android交互
第一次做和原生app的混合开发,其中有一些活动页面需要我这边用h5来做。 那么必定涉及一个问题。就是和原生app做交互。 分为ios和android。方法不同,逻辑思路都差不多。 大体思路就是我和app端约定一个方法,类似于?接头暗号? 比如说我们约定了一个方法:’蓝天白云‘,那么当我js调用这个方法的时候,app端通过'蓝天白云',认出了我,并作出
Python全栈快餐教程(1)
Python全栈快餐教程(1) - 用Flask处理HTTP请求 ================================ 初识Flask ------- Flask是最流行的Python web框架之一。 我们来写个最小的web应用,只有一个路由先跑进来玩玩吧。 from flask import Flask #