APICloud+Vue+Vant 快速构建移动端APP

框架简介APICloud文档非常齐全，采用免费+收费形式，对于一个普通的APP来讲完全够用云编译的形式，避免了环境繁琐的配置，非常方便这里有一些资料，供参考：创建第一个apphttps://docs.apicloud.com/APICloud/creating-first-appAPICloud七天在线培训课教程https://github.com/apicloud...

lvye1221

7248人浏览 · 2018-08-22 16:24:01

lvye1221 · 2018-08-22 16:24:01 发布

框架简介

APICloud

文档非常齐全，采用免费+收费形式，对于一个普通的APP来讲完全够用
云编译的形式，避免了环境繁琐的配置，非常方便

这里有一些资料，供参考：

创建第一个app
https://docs.apicloud.com/APICloud/creating-first-app

APICloud七天在线培训课教程
https://github.com/apicloudcom/APICloud-7Days-Online-Training-Tutorials

课程第一天
https://docs.apicloud.com/Seven/Day1

一周一APP 完整技术架构和流程
https://github.com/xiaoqiang730730/vue_apicloud/blob/master/doc/oneweekoneapp.md

Vue

中国比较流行的渐进式开发框架，开发体验很好，开发速度快。

官网： https://cn.vuejs.org/

官网教程： https://cn.vuejs.org/v2/guide/

官网API： https://cn.vuejs.org/v2/api/

Vant

因为查找的资料中使用了这个移动端框架，就用它了，当然还有很多推荐，例如：

AUI
https://github.com/liulangnan/aui
http://www.auicss.com/

SUI
http://m.sui.taobao.org/getting-started/

这里是Vant的官网：
https://youzan.github.io/vant/#/zh-CN/quickstart

基本使用记录

vue 脚手架开发

https://github.com/xiaoqiang730730/vue_apicloud/tree/master/doc

Vue项目中如何使用APICloud的接口

直接调用即可，不过需要在模拟器中进行调用才行。在浏览器中，会提示找不到对象

例如，在点击函数中，双向数据绑定：

this.msg = api.systemType

引入库
.barelrc 配置。当然安装依赖什么的，就直接参考文档安装即可。

vue init xiaoqiang730730/vue_apicloud my-project

cnpm install

cnpm i babel-plugin-import -D
cnpm i vant -S

cnpm run start

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", ["import", {
    "libraryName": "vant",
    "libraryDirectory": "es",
    "style": true
  }]],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

使用组件

关闭elint验证， config/index.js, 配置选项：

useEslint: false,

组件使用测试代码：

<van-button type="default">清空</van-button>

import { Button } from "vant";



export default {
  name: "HelloWorld",

  components: {
    [Button.name]: Button
  },

};

APICloud 源代码配置，采用热更新的方式，其中配置方式，
主要步骤

（1）APIStudio 新建项目

（2）网页云控制台，模块/编译自定义 Loader

编辑模板案例中的 index.html 文件，修改结构和 js 代码

<body>
    <div id="wrap">
        <div id="header">
        </div>
        <div id="main" class="flex-con">
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    window.apiready = function(){

        var header = $api.byId('header');
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(header);

        var headerPos = $api.offset(header);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        api.openFrame({
            name: 'main',
            //url: 'dist/html/index.html',
            //url: 'html/main.html',
            //url: 'http://172.16.5.6:8010/index.html',
            url: 'http://172.16.5.6:8080',
            bounces: true,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: mainPos.h
            }
        });

    };
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^