xubin 发表于 2024-1-29 15:59:26

说一说: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>

好人你我他 发表于 2024-1-29 16:02:36

路过,支持一下啦

爱心你我他 发表于 2024-1-29 16:03:15

有竞争才有进步嘛

葛飞 发表于 2024-1-29 16:04:48

我是个凑数的。。。

千思万搂 发表于 2024-1-29 16:10:03

我是个凑数的。。。

我亦疯狂 发表于 2024-1-29 16:14:20

为自己家乡的社区网贡献点力量,回个帖子

青色的六月 发表于 2024-1-29 16:14:44

有竞争才有进步嘛
页: [1]
查看完整版本: 说一说:APP应用在线开发教程