企业展示模板说明

此模板为企业展示类型,主要功能包括企业信息展示、案例展示、加盟申请等。通过此模板的使用能快速上手avm多端开发技术,可以帮助企业快速拥有自己的网络名片,不但对企业的形象是一个良好的宣传,同时可以辅助企业销售,企业可以用来展示产品、案例、宣传企业文化、资讯动态等。

模板包含前后端,其中前端代码使用avm.js多端技术开发,可同时编译为Android & iOS App以及微信小程序;后端使用APICloud数据云3.0云函数自定义接口。

效果图

源码目录结构介绍

目录结构延续widget代码包的目录结构,pages目录下用于创建符合avm.js语法规范的stml文件,stml文件可用于编译为App和小程序代码。

|---widget             // widget代码根目录
|    |---components    // stml组件目录。该目录下stml文件仅被pages目录下页面引用,不单独编译
|    |---css           // 外置引用的css文件存放目录
|    |---image         // 图片资源文件目录
|    |---pages         // stml页面代码文件目录。该目录中每个文件对应一个页面,将被编译为js或者小程序的3个代码片段
|       |---index      // stml页面代码文件子目录。如果您希望您的App能够兼容微信小程序,需按照微信小程序目录结构,新增一层子目录,并将stml文件置于该目录下
|    |---html          // 标准html页面代码文件目录
|    |---res           // res目录
|    |---script        // 外置引用的js文件存放目录
|    |---config.xml    // app配置文件
|

使用步骤

1,下载最新版本的APICloud Studio 3

2,下载APICloud Studio 3,安装后打开,顶部菜单选择【项目】-【新建项目】,打开如下界面:

填写应用名称,选择相应模板,点【完成】按钮进行创建。

3,为当前项目编译自定义Loader进行真机同步调试预览。或者手机安装AppLoader,使用AppLoader进行真机同步调试预览。WIFI同步使用教程 参考WiFi真机同步

4,小程序可通过studio3编译项目后在微信开发者工具中进行预览。开发完成后可以将编译的小程序包上传到微信开放平台,审核通过后,在微信中可以搜索查看。

5,云编译 生成Android & iOS 应用安装包以及微信小程序源码包。编译iOS之前需先上传iOS证书,Android则可直接进行编译。

数据云模型导入和快速上手

体验一下

以左侧的 product 模型为例,点击模型打开“开发云函数”。在远程函数中找到 add 接口,点选后右侧就会展现相关代码实现。 接下来可以点击接口联调,打开API接口生成列表。在 product 分组下找到 add 接口,并可以点击 “Try it out”进行接口测试。

云模型 快速上手

云模型也就是云数据库。可以存取业务数据,还提供了数据访问的接口和相关API。

在一个项目中可以建立业务所需要的数据表模型。还是以 product 为例:打开模型后,是一个表格的形式展现了模型内存在的数据。 表头的内容是该模型的字段,表中的数据是模型下保存的记录。可以在头部的按钮中进行添加数据、删除数据、添加字段、设置关联等管理操作。

云函数示例代码 快速上手

获取产品信息

GET /product/detail

product.detail = async(id)=> {
  try {
    if (!id) {
      return {
        status: 1,
        msg: "id不能为空"
      }
    }
    let info = await product.findOne({
      where: {
        "id": id
      }
    });
    if (!info) {
      return {
        status: 1,
        msg: "数据不存在"
      }
    }
    let product_category = await Models.product_category.findById(info.cate_id, {fields: ["title"]});
    info.cate_name = product_category.title;
    return {
      status: 0,
      data: info,
      msg: "获取成功"
    }
  } catch (err) {
    throw new gError("获取失败!", "ADD_FAILED");
  }
};

通过阅读上面的云函数源代码,可以看到一个云函数组成是十分简单的。在编辑状态下,可以看到表单中显示出了一个云函数的一些必要元素: 选择 Model ,确定函数类型为“远程函数”,选择请求类型为“get”。完善函数名称和描述,最后设置一个函数(方法)名, 作为函数名称,也是远程接口的访问地址。

在函数中,通过模型的数据操作api来对接口做具体的功能实现:在上面的代码中, 就是从 product 模型中找到一个 id 为符合条件的数据。可以看到,查找条件是以 JSON 的形式放在 where 条件中的。 正常情况下,成功找到数据并使用 return 关键字为函数返回值。而这个值也会作为云函数生成的接口的 response 的数据域, 来返回给前端。

使用 try-catch 代码块来捕获相关错误,如果查找失败的情况下,并且也会返回给前端。 关于更多的模型方法可以参考数据云3的完整文档。

管理后台 快速上手

除了模型和云函数之外,数据云3还提供一个快速后台生成管理系统。为方便用户使用,我们内置了管理后台模块,用户开启服务后可通过 "https://appid-dev.apicloud-saas.com/admin/" 在测试环境进行访问。 此功能需要全局配置开启session服务以及开通文件存储,请在全局配置进行相关操作。 还是上面的例子:假设当前的 APPID 是 a6176110219206 ,那么对应的管理地址就是:https://a6176110219206-dev.apicloud-saas.com/admin/

默认的账号和密码是: 账号:admin 密码:123456

在后台可以进行相关数据设置和页面快速开发。后台页面开发的规则是引入了低代码框架 AMIS 。详细可以参阅:https://baidu.github.io/amis/zh-CN/docs/

深入使用和进阶

回到数据云面板,可以查看示例模型和云函数。还可以通过数据云完整文档学习完整的数据云使用方法。 数据云文档链接:https://docs.apicloud.com/Cloud-API/sentosa

技术支持

使用中若有任何疑问可到APICloud论坛AVM多端专区发帖提问。官方技术支持和众多活跃开发者会第一时间为您提供技术支持。

项目地址

项目源码git地址(https://github.com/apicloudcom/company-display