1. app开发文档

介绍

开发b2b2c的app移动端使用HTML5进行开发，借助HBuilder提供的云打包或本地打包将可以把5+ Runtime和开发者编写的HTML5页面打包为原生App的安装包，包括Android的apk和iOS的ipa。发行到原生应用市场。通过HBuilder、5+ Runtime、mui，我们很好的解决了HTML5的性工能障碍，做到了接近原生App的功能和体验，给开发者提供了更多便利。

MUI-最接近原生App体验的前端框架，真正彻底的跨平台开发，不是简单的跨iOS和Android。基于mui，一套HTML5工程，通过前端构建工具（如grunt）条件编译，可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信App和流应用。并且在每个平台上，都能调用该平台的专有API达到原生体验。

[DCloud官网](http://www.dcloud.io/index.html)

b2b2cApp项目目录结构

下表中，左侧列黑体字代表目录普通字代表文件

文件/目录名	作用
css	样式文件
fonts	字体文件
img	图片资源
js	js文件
view	app页面文件
config.js	app系统配置文件
index.html	首页文件

1.1. 创建b2b2cApp自定义页面

在b2b2cApp项目下新增自定义页面view/xxx/xxx.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopex Onex B2B2C</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/style.css" />
  </head>
  <body>
    <header class="page-header">
      <i class="header-left icon-func bbc-icon bbc-icon-back mui-action-back"></i>
      <div class="header-title">页面标题</div>
      <a href="#minimenu" class="header-right icon-func bbc-icon bbc-icon-more-vertical btn-mini-menu"></a>
    </header>

    //......

    <section class="container section-white">
    </section>
  </body>
  <script src="../../js/zepto.js"></script>
  <script src="../../js/mui.min.js"></script>
  <script src="../../js/template.min.js"></script>
  <script src="../../config.js"></script>
  <script src="../../js/app.js"></script>

  //......

</html>

1.1.1. 页面跳转方式

页面之间的跳转，可以通过data属性传递参数，对于data属性，将参数附着到data-后面。data-webparam必须是json格式。

名称	描述	实例	说明
data-webview	跳转地址	`data-webview="_www/view/artical/articaldetail.html"`	"_www"表示网站根目录
data-webparam	获取数据所需参数	`data-webparam='{"articleid": 3}'`	参数必须是json格式

完整实例如下：

 <a class="mui-navigate-right mui-linkto action-webview" data-webview="_www/view/artical/articaldetail.html" data-webparam='{"articleid": <%= articleList[i].article_id %>}'>

1.1.2. 页面数据获取

页面数据使通过请求topapi接口获取的，一般都写在mui.plusReady方法中。接口返回数据通过<%= 变量名 %>显示。

<script type="text/html" id="content-info">
    <section class="content-padded border-bottom">
      <h1 class="content-center content-padded"><%= title %></h1>
      <section class="content-center fonts font-gray-40"><%= $timestamp_To_Time(modified) %></section>
      <div class="fontS font-gray-20 single-img">

      </div>
    </section>
</script>
<script>
    mui.plusReady(function() {
      var article_id = plus.webview.currentWebview().articleid;
      var param = {
        queryData: {
          'method': config.apimethod.contentinfo,//config.js文件中的apimethod定义
          'article_id': article_id //api参数
        },
        method: 'POST'
      }
      $.dataRequest(param, function(rs) {
        var tempEl = template('content-info', rs.data);
        $('.container').html(tempEl);
        $('.single-img').html(rs.data.content);
      });
    });
  </script>

1.2. 创建topapi

b2b2c的手机app端的数据一般是通过请求topapi接口来获取数据，在b2b2c项目下（b2b2c/app/topapi/v1(v2)/your_api_name.php）创建api文件

<?php
/**
 * topapi
 *
 * -- item.detail
 * -- 获取商品详情
 *
 * @copyright  Copyright (c) 2005-2016 ShopEx Technologies Inc. (http://www.shopex.cn)
 * @license  http://ecos.shopex.cn/ ShopEx License
 */
class topapi_api_v2_item_itemDetail implements topapi_interface_api{

    /**
     * 接口作用说明
     */
    public $apiDescription = '获取商品详情';

    /**
     * 定义API传入的应用级参数
     * @desc 用于在调用接口前，根据定义的参数，过滤必填参数是否已经参入，并且定义参数的数据类型，参数是否必填，参数的描述
     * @return array 返回传入参数
     */
    public function setParams()
    {
        return [
            'item_id' => ['type'=>'int',      'valid'=>'required|numeric|min:1','example'=>'1',                     'desc'=>'商品id。必须是正整数',             'msg'=>'商品id必须为正整数'],
            'fields' => ['type'=>'field_list','valid'=>'',                      'example'=>'title,item_store.store','desc'=>'要获取的商品字段集。多个字段用“,”分隔','msg'=>''],
        ];
    }

    /**
     * @return
     */
    public function handle($params)
    {
         //......
    }

1.3. b2b2c项目添加topapi api接口路由

创建topapi之后，需要在b2b2c项目下的config/topapi.php文件中定义新添加的topapi api接口路由，定义好路由后，可通过b2b2c平台后台的api测试工具，测试当前新添加的topapi是否正确。

<?php

return array(
    /*
    |--------------------------------------------------------------------------
    | 定义所有topapi api接口路由
    |--------------------------------------------------------------------------
    | v1 表示API版本号
    | theme.modules API调用方法
    | topapi_api_v1_theme_modules API实现类默认调用handle方法
     */
    'routes' => array(
        'v1' => [
            //用户登录注册
            'user.login'         => ['uses'=>'topapi_api_v1_user_login'],
            'user.logout'        => ['uses'=>'topapi_api_v1_user_logout', 'auth'=>true],

            //......

1.4. b2b2cApp项目定义apimethod

新添加topapi之后，如果想要在app项目中调用，还需要配置b2b2cApp项目下的config.sj,在config.js中添加apimethod。

var config = {
    server: 'http://your website address', //配置网站地址
    apiversion: 'v1', //系统api版本
    apiname: 'topapi', //系统配置的api名称
    pagesize: 10, // 分页组件每页显示数量
    cpage: 1, //分页当前页
    apimethod: { //接口method集合
        login: 'user.login', //用户登录
        logout: 'user.logout', //用户登出
        contentinfo: 'content.info', //获取文章内容

        //......
    }
}

app开发文档