说一说:APP应用在线开发教程
app开发本质上涉及到多方面的知识:html css js java php mysql.......;从底层技术开始学周期太长,并不适用,特别是对于非计算机出生的同学。本课程的目的希望能够在选择合适的开发工具的基础上,自顶向下进行学习,以尽早实现app案例开发为目标,先入门然后进行更深入的学习。维尼科技网http://ayhyyy.com的具体问题可以到我们网站了解一下,也有业内领域专业的客服为您解答问题,值得您的信赖!
当代app开发的趋势:无代码开发与低代码开发
无代码开发的代表:ivx,氚云,简道云,牛刀......
低代码开发:国内工具:apicloud uniapp 国外: flutter 等
选择apicloud的原因:灵活性与易用性的折中
apicloud收费的问题
https://www.apicloud.com/
开发工具下载 https://www.apicloud.com/studio3#downloadBtn
相关app开发视频教程:http://www.apicloud.com/video_play/18_1
https://docs.apicloud.com/apicloud3/#/overview/index?index=0&subIndex=0
APICloud 自 3.0 起,已从跨平台技术全面升级为多端技术:
使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致;现有 api 直接映射兼容小程序接口,延续已有开发习惯;
同时 APICloud 3.0 仍然保留了 2.0 的所有技术栈和开发体验,为方便开发者对跨平台技术和多端技术的理解和区分,我们对创建的应用类型进行了明确的区分。
主要包括四种类型:
Native App Native App 适合功能强大、性能卓越的 App 开发,如果您仅有 App 需求,应选择 Native App 模式MX App MX App 适合小程序优先的场景,如果您的业务重点在小程序端,不需要丰富的功能和苛刻的体验,应选择 MX App 模式。开发完的小程序代码,可百分百编译为同等功能的 App,相当于开发一个小程序,“白送”一个 AppApp Clip 苹果小程序Web App
https://docs.apicloud.com/apicloud3/#/basic/project?index=1&subIndex=0
page 文件夹下包含了所有的页面文件stml 其他文件夹保存的是上述stml文件需要调用的资源 config文件对应的app的一些基本设置
stml(single template markup language)文件是一个专用的文件类型,其结构和 Vue 的单文件组件 (SFC)相似,用类 Html 语法描述一个组件/页面。更多关于 stml 可参考(https://docs.apicloud.com/apicloud3/#/basic/stmlpage?index=1&subIndex=1)。
在创建 stml 文件之前,我们需要在项目根目录下新建一个 pages 目录,只有放置在 pages 目录下的 stml 文件才会被正确编译。
打开 APICloud Studio 3 并导入项目,在项目结构的 pages 目录上点鼠标右键,在弹出的菜单中选择“新建 stml 文件”,然后输入文件名回车确认,这样就创建了一个默认的空白的 stml 页面,我们可以简单的添加一个 text 文本。
<template name='tpl'><view class="page"><text>APICloud</text></view> </template> <script>export default{name: 'tpl',apiready(){//like created },data(){return{ }},methods:{ }}</script> <style>.page{height: 100%;}</style>
预览stml文件效果有以下三种方式:
实时预览
在 stml 页面编辑区内点鼠标右键,选择“实时预览”,将会启动 Studio 3 的内置浏览器进行预览。
WiFi 真机实时预览
说明视频 :http://www.apicloud.com/video_play/18_12
使用 WiFi 真机实时预览时,需要手机端安装 AppLoader 或者自定义 loader,并在 loader 内连接 Studio。 在 stml 页面编辑区内点鼠标右键,选择“WiFi 真机实时预览”,页面将会自动在已连接 Studio 的手机端 loader 里面显示。
https://docs.apicloud.com/Download/download
从生鲜的例子也可以看到所有页面都有stml完成,并都在page这个文件夹内
stml(single template markup language)文件是一个专用的文件类型,用类 Html 语法描述一个组件/页面。
一个 stml 文件一般包含三种类型的顶级语言块<template>,<script>和<style>,同时支持引入外部 js 或者 css 文件,以及其他 stml 组件。
stml 文件最终被分别编译为 APP、小程序代码。
其中部分负责页面元素的定义与布局,而<style>部分负责展示部分的修饰,这两个部分共同构建了app的前端。
注意这些组件主要用于小程序。但是由于这些组件本质三个源于html的组件,因此很多都有对应关系,并且对应修饰方法大多类似
比如:view 是通用容器组件,内部可以放置任意组件。默认布局方式为flex布局。view和html中的div是对应的,因此有很多配置可以借鉴 https://www.runoob.com/css/css-boxmodel.html
注意不要直接在 view 内添加文本,添加文本使用 text 组件。理解下面代码的调用规则
https://www.runoob.com/css/css-tutorial.html
class选择器 https://www.runoob.com/css/css-id-class.htmlCSS 盒子模型(Box Model) https://www.runoob.com/css/css-boxmodel.html
<template>
<scroll-view class="main" scroll-y>
<text class="title">水平布局</text>
<view class="horizontal">
<view class="item red"></view>
<view class="item green"></view>
<view class="item blue"></view>
</view>
<text class="title">垂直布局</text>
<view class="vertical">
<view class="item red"></view>
<view class="item green"></view>
<view class="item blue"></view>
</view>
</scroll-view>
</template>
<style>
.main{
width: 100%;
height: 100%;
}
.title{
padding: 10px 0;
font-size: 20px;
}
.horizontal{
flex-direction: row;
width: 300px;
height: 200px;
}
.vertical{
flex-direction: column;
width: 200px;
height: 300px;
}
.item{
flex: 1;
}
.red{
background-color: #f00;
}
.green{
background-color: #0f0;
}
.blue{
background-color: #00f;
}
</style>
<script>
export default{
name: 'test',
data(){
return{
}
},
methods:{
}
}
</script> 路过,支持一下啦 有竞争才有进步嘛 我是个凑数的。。。 我是个凑数的。。。 为自己家乡的社区网贡献点力量,回个帖子 有竞争才有进步嘛
页:
[1]