一、背景

第一次写博客，想和大家分享一下UniApp 这款前端框架，并一点点更新开发电商商城，大佬勿喷，有错欢迎提出。接触的时间大概是18年12月份，之前一直是在用vue进行移动端开发，没有开发过APP得经验。记得那天老板接了个APP的项目需要我们进行开发，还必须要求我们用UniApp 这款框架进行开发，说真的那时候是真的连听都没听过，接手的过程中也是一堆的坑，几乎接近崩溃。比如：用滚动监听，去操作导航栏悬浮，这个在网页上是相当好实现的，然后咔咔咔就动手写，浏览器上运行，emm~nice,手机真机测试以后，好家伙，反应咋能这么慢，半天了导航栏才悬浮起来,简直坑到没朋友。算一算当时用了3种方法，都是一样的效果，没办法，最后采用自带的导航栏渐变模式才表示能看一点。话不多说动手写吧…

二、用Vue-cli命令行创建项目

1.官网说的很详细，复制链接查看创建项目过程: https://uniapp.dcloud.io/quickstart?id=通过vue-cli命令行
2. 创建好后，项目的结构大概如下:

components -------------------- 用来存放可复用的组件(在多个页面中需要用到)
pages -------------------- 存放自己所写的页面
static -------------------- 存放静态资源(图片、视频等)
App.vue -------------------- 用来配置全局的样式(值得注意的一点是页面渲染时，首先会渲染这里面的样式，在去渲染其余的页面)
main.js -------------------- 入口文件
manifest.json -------------------- 配置文件
pages.json -------------------- 配置页面的路由/导航条/底部选项卡等

三、编译器插件安装

编译器顶部菜单中找到：工具–>插件安装–>找到自己需要的组件进行安装，安装完成后如果没有实现，就将编译重开即可。

注：这里我安装了(scss/sass)这个组件。

四、创建并运行项目

1、编写如下代码:

2、编译器顶部菜单栏找到，运行–>运行到手机或浏览器–>运行[手机设备型号]

注:①需手机连接数据线，手机上如果有东西跳出需要点确认
②IOS连接方法查看右侧链接：http://ask.dcloud.net.cn/article/97

3.运行结果如下：

五、下篇预告

1、轮播图
2、沉浸式
3、渐变式搜索框

使用UniApp 编写APP相关推荐

多端开发之uniapp开发app
最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯 ...
uni-app生成app的兼容性调研报告
最近在尝试将现有的uni-app项目编译成app,过程中出现许多坑.现在记录一下编译打包过程主要顺序以及要注意的点. uni-app是跨平台开发框架,开发一次IOS.Android都有了,uni-ap ...
5+App和uni-app在App开发上有何区别？
抛开uni-app可以开发多端,而5+App只能开发App不谈.本文只谈仅做App的情况下,uni-app的App和5+App有什么区别. 5+App是DCloud上一代产品,基于webview扩展的 ...
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app的app项目中使用live-pusher实现人脸识别前言一.环境二.使用步骤三.permission.js源代码四.face.vue源代码五.代码效果总结前言在uni ...
基于spring-boot+uni-app实现app支付功能（微信/支付宝）服务端
基于spring-boot+uni-app实现app支付功能(微信/支付宝)服务端支付宝支付 1 准备工作申请支付能力接口加签方式 2代码依赖支付宝支付配置类支付宝控制层异步通知微信支 ...
uniapp开发APP从开发到上架全过程（一）
前端时间受朋友委托帮他开发了一款APP,综合考虑了下,没有上原生,使用了uniapp这一套技术栈来进行开发 uniapp是dcloud推出的一套跨端前端解决方案,可以通过一套代码生成小程序.安卓.IO ...
uniapp开发app——nvue
Nvue是一个基于weex改进的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流畅,但是缺点也很明显,没有足够的api能力,语法限制太大,所以nvue适用于特定场景(需要高性能的区域 ...
Android Studio(6)---编写APP
编写APP Android Studio 包含每个开发阶段用到的工具,但最重要的功能是编写应用:编写代码.构建布局.创建映像,并在这个过程中保持高效. 本部分要介绍的是可帮助您快速编写应用的工具. 编 ...
5-2 uniapp 打包 app 自定义开屏页
5-2 uniapp 打包 app 自定义开屏页下载链接点击下载使用方法解压到项目根目录 App.vue -> onLaunch 添加代码 // #ifdef APP-PLUS plus ...

使用UniApp 编写APP