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

CuterCorley 等级 678 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,也可以快速实现一套代码发布到多个平台的效果。

收藏
评论区

相关推荐

uniapp中全局变量globalData使用
使用uniapp开发时,可以通过在app.vue中定义全局变量,在每个页面内通过globalData获取 1、app.vue文件的写法 <script export default { globalData: { loginSta: false }, onLaunch: function() {
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
Android通过URL打开Activity
关注公众号 QXF069 为每个 Activity 绑定一个 url 可以方便的让第三方 app 直接打开这些 Activity。也可以方便在 app 内部进行页面跳转,解耦。 背景 举一个常见的案例,假设我们有个产品 A,产品 A 包含 h5 网页端和客户端,当用户在手机打开我们的 h5 网页端的时候,我们会期望如果用户手机安装了我们的客户端,则直接打
uni-app实战之社区交友APP(1)项目介绍和环境搭建
如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/details/112793245)(免费试读)进行浏览。 如需本项目完整前端uniapp代码和资源文件,可以点击https://download.csdn.net/downloa
uni-app实战之社区交友APP(11)API环境搭建和登录API开发
牛年第一篇文章,金鼠辞旧岁、金牛报春时,我携全家以及秘书安南、保镖普京、管家布莱尔、司机布什、家奴小泉、水扁等向各位读者大佬朋友们致以节日的问候:祝新年快乐,玩得开心o( ̄▽ ̄)o 如需查看本项目实际运行效果,可点击uniapp实战之社区交友APP(1)项目介绍和环境搭建(https://blog.csdn.net/CUFEECR/article/d
iOS开发:后台运行以及保持程序在后台长时间运行
第一部分 1.先说说iOS 应用程序5个状态:停止运行应用程序已经终止,或者还未启动。不活动应用程序处于前台但不再接收事件(例如,用户在app处于活动时锁住了设备)。活动app处于“使用中”的状态。后台app不再屏幕上显示,但它仍然执行代码。挂起app仍然驻留内存但不再执行代码。按下Home键时,app从活动状态转入后台,绝大部分app通
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
uni-app入门教程(1)uni-app简介、部署和目录结构
@toc 前言本文主要介绍了uniapp的基本情况,并引导快速创建和运行第一个uniapp项目,同时对项目的目录结构和代码规范进行详细说明,适合uniapp零基础初学者。 一、uniapp介绍uniapp是DCloud官方推出的重要产品,是一个使用Vue.js开发跨平台应用的前端框架,官网是。开发者通过编写一套Vue.js代码,即可
uni-app入门教程(2)页面样式、配置文件和生命周期
前言本文先介绍uniapp的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。 一、页面样式与布局 1.尺寸单位uniapp框架目前仅支持长度单位px和%。与传统web页面不同,px是相对于基准宽度
uni-app入门教程(7)第三方登录和分享
前言本文主要介绍了APP开发的两大基本功能,即第三方登录登录和分享:包括登录通用配置,微信小程序和APP的第三方登录方式,和分享到聊天和朋友圈,使用uniapp实现有不同的接口和实现方式。 一、通用配置因为小程序和APP登录接口不同,需要在前端进行跨端兼容处理,同时微信等平台的小程序一般只支持所属宿主程序的第三方登录,而无法包括其他的
uni-app入门教程(9)字体库、自定义组件、打包和新闻实战
# 前言本文主要介绍了4方面内容:在uni-app项目中使用iconfont提供的图标字体库,美化页面;实现自定义组件,并且可以自定义属性和实现父子组件之间的消息传递;微信小程序预览和真机测试,APP端云打包和本地打包;新闻列表和详情实战练习。# 一、使用iconfont字体库uni-app中可以使用**iconfont**()提供的图标字体。大致过程如下:
牛逼!五分钟开发一款桌面版应用
1、下载nw.jshttps://nwjs.io/最好下载sdk版本。 2、解压打开安装包下载完之后,解压打开图中的app文件夹是我自己创建的,你也需要自己创建一个,里面放你项目文件。app文件夹中一般放一个index.html(页面展示),另外还需要创建一个package.json文件(参数配置):         "name":  "first  ap
某站App签名算法解析(一)
一、目标我们来分析某站 App的sign签名算法,先搜索一下 游戏 ,抓包结果: 二、步骤 这个sign依然是32位的字符串都9020年了,这种规模用户的App应该是不会裸奔在java层了,我们就直接一点,在so里面搜索 sign可惜没有结果…… 藏起来的东西一定是重要的东西so层导出函数给java层调用,有两种方法,一种是静态注册,直接会体现在so的导出表
SCF构建小型服务端并结合uni-app
使用腾讯云SCF构建小型服务端并结合uniapp()小程序我们这里手写了一个nodejs环境下的用户体系使用了之前写的一个数据库连接插件dmhqmysqlpool比较垃圾 凑合用文档地址为 也使用了md5 npm install jsmd5这里使用邮箱发送验证码先在本地写好 再上传云函数 配置数据库连接安装 npm install dmhsqmysqlpo
APP 开发技术该如何选型 ?
目前 按照 APP 开发分类,分为以下三大类 原生 APP  \[ Android Swift  \] WEB APP Hybrid App \[混合 APP  \] 在找工作的当中,很多岗位 要求 会开发 H5 App ,那到底什么是H5 APP 呢?一开始我也有点疑惑,没接触这块,按自己理解 就是 采用 HTML5 技术