手把手教你系列 - 普通项目使用chameleon跨端dialog组件

手把手教你系列 - 普通项目使用chameleon跨端dialog组件

背景介绍

这里考虑如下场景，很多基础组件是多端共用的，单独开发则需要维护多套代码，而使用chameleon维护一套跨端ui库，通过组件导出给某一端进行使用，这样提高的开发效率可想而知。本文将一步一步介绍如何导出某一端组件及应用。

项目初始化

关于chameleon-cli的安装及环境配置请参照快速上手，首先使用项目初始化命令cml init project完成项目初始化，然后cd projectName进入项目目录使用cml init component初始化diaolog组件，这里选择普通组件。最终dialog组件效果如下图：

web端组件导出及应用

导出

首先是配置chameleon.config.js，增加如下配置:

更多配置请参照组件导出应用完成配置后进入项目目录，使用cml web export命令执行web端组件导出，导出目录如下：

应用

组件导出后我们直接用vue-cli创建一个webpack项目，这里使用的是vue-cli@2.9.6。初始化项目如下图：

现在开始增加导出组件的配置。

第一步：修改.babelrc文件，删除modules: false，前后对比如下图：

第二步：将common文件夹拷贝至webpack项目资源目录，并在webpack项目的入口文件中引入web_global.js，代码如下图：

现在将前面导出的dialog组件拷贝至webpack项目的组件目录下，拷贝后webpack项目目录结构如下图：

然后app.vue文件中直接使用c-dialog组件，代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <CDialog :show="true" title="dialog" content="export-ui"></CDialog>
  </div>
</template>
<script>
import CDialog from './components/c-dialog/c-dialog.js'
export default {
  name: 'App',
  components: {
    CDialog
  }
}
</script>
<style>
@import "./components/c-dialog/c-dialog.css";
</style>

最终效果如下图：

weex端组件导出及应用

导出

首先是配置chameleon.config.js，为weex端增加如下配置：

更多配置信息请查看组件导出应用，配置好之后在该项目目录下执行cml weex export命令执行weex端组件导出，导出目录如下：

应用

首先通过weex官网提供的weex-toolkit初始化weex项目，初始化项目如下图：

将前面导出的dialog组件拷贝值weex项目的组件目录下，拷贝后目录结构如下图：

然后在index.vue组件中引入并使用c-dialog组件，代码如下：

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
    <CDialog :show="true" title="dialog" content="export-ui"></CDialog>
  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
import CDialog from '@/components/c-dialog/c-dialog.js';
export default {
  name: 'App',
  components: {
    HelloWorld,
    CDialog
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>
<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 424px;
    height: 200px;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 50px;
    color: #41B883;
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: #727272;
  }
</style>

最终效果如下图：

小程序端（wx、alipay、baidu）组件导出及应用

导出

首先在chameleon.config.js增加小程序端导出配置，这里以微信小程序举例：

{
  wx: {
    export: {
      entry: ['src/components/c-dialog'],
      publicPath: 'https://static/resource.com' //静态资源线上地址,
      hash: false      //方便使用，导出组件名不加hash
    }
  }
}

更多配置信息请查看组件导出应用，配置好之后在该项目目录下执行cml wx export命令执行wx端组件导出，导出目录如下：

支付宝小程序组件导出命令为：cml alipay export, 百度小程序组件导出命令为：cml baidu export

应用

首先通过微信小程序开发者工具初始化项目，如下图：

将导出的组件文件目录拷贝至微信小程序项目根目录下，拷贝后目录结构如下图：

这里我们直接在微信默认创建的首页中使用，代码如下：

// index.json
{
  "usingComponents": {
    "c-dialog": "/wx/components/c-dialog/c-dialog"
  }
}

// index.wxml
<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <c-dialog show="{{true}}" title="dialog" content="export-ui"></c-dialog>
</view>