first commit

src/App.vue

@@ -0,0 +1,280 @@
+<template>
+  <div>
+    <van-pull-refresh class="content" v-model="isLoading" @refresh="onRefresh">
+      <br>
+      <br>
+
+      <Logo></Logo>
+      <div style="padding:10px 15px;text-align:center">
+        <small>下拉Ajax请求试试😋</small> 
+      </div>
+      <van-collapse v-model="activeName" accordion>
+        <van-collapse-item title="plus演示" name="1">
+          <van-cell-group>
+            <van-cell @click="openGoodsDetail()" title="预加载商品详情窗口" is-link />
+            <van-cell @click="openCart()" title="打开购物车窗口" is-link />
+            <van-cell @click="camera" title="拍照" is-link />
+            <van-cell @click="toast" title="原生Toast" is-link />
+          </van-cell-group>
+        </van-collapse-item>
+        <van-collapse-item title="Vant组件演示 " name="2">
+          <van-cell-group>
+            <van-cell @click="openAS" title="Actionsheet" is-link />
+            <van-cell @click="vantToast" title="Toast" is-link />
+            <van-cell @click="vantDialog" title="Dialog" is-link />
+          </van-cell-group>
+        </van-collapse-item>
+        <van-collapse-item title="Mui组件演示" name="3">
+          <van-cell-group>
+            <van-cell @click="openMui" title="Mui演示页" is-link />
+          </van-cell-group>
+        </van-collapse-item>
+        <van-collapse-item title="vux组件演示" name="4">
+          <van-cell-group>
+            <van-cell @click="openVux" title="vux演示页" is-link />
+          </van-cell-group>
+        </van-collapse-item>
+
+      </van-collapse>
+      <br>
+      <br>
+      <br>
+      <br>
+      <br>
+    </van-pull-refresh>
+    <van-actionsheet v-model="show" cancel-text="取消" :actions="actions" />
+    <van-tabbar v-model="active">
+      <van-tabbar-item icon="shop">标签</van-tabbar-item>
+      <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
+      <van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
+      <van-tabbar-item icon="gold-coin" info="20">标签</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import {
+  openWebview,
+  openWebviewFast,
+  preLoad,
+  showWebviewById
+} from "@/utils/webview";
+import { request } from "@/utils/request";
+import {
+  Dialog,
+  CellGroup,
+  Toast,
+  PullRefresh,
+  Tabbar,
+  TabbarItem,
+  Cell,
+  List,
+  Actionsheet,
+  NavBar,
+  Tag,
+  Collapse,
+  CollapseItem
+} from "vant";
+import Logo from "./components/logo.vue";
+export default {
+  components: {
+    Logo,
+    [Dialog.name]: Dialog,
+    [CellGroup.name]: CellGroup,
+    [Toast.name]: Toast,
+    [PullRefresh.name]: PullRefresh,
+    [Tabbar.name]: Tabbar,
+    [TabbarItem.name]: TabbarItem,
+    [Cell.name]: Cell,
+    [List.name]: List,
+    [Actionsheet.name]: Actionsheet,
+    [NavBar.name]: NavBar,
+    [Tag.name]: Tag,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem
+  },
+  created() {
+    window.addEventListener("customEvent", function(event) {
+      //通过event.detail可获得传递过来的参数内容
+      plus.nativeUI.toast("我是首页,我很慌,我收到了信息");
+      console.log(event.detail);
+    });
+    function plusReady() {
+      let ws = plus.webview.currentWebview();
+      console.log(ws);
+    }
+    if (window.plus) {
+      plusReady();
+    } else {
+      document.addEventListener("plusready", plusReady, false);
+    }
+
+    // 预加载一些窗口
+    preLoad([
+      {
+        url: "./vux.index.html",
+        id: "vux.index",
+        title: "vux演示页"
+      },
+      {
+        url: "./goods.detail.html",
+        id: "goods.detail",
+        title: "美国伽力果",
+        extras: {
+          id: 2018,
+          name: "超级红苹果"
+        }
+      },
+      {
+        url: "./goods.cart.html",
+        id: "goods.cart",
+        title: "购物车",
+        style: {
+          titleNView: {
+            backgroundColor: "#f7f7f7", // 导航栏背景色
+            titleText: "购物车", // 导航栏标题
+            titleColor: "#666", // 文字颜色
+            // type: "transparent", // 透明渐变样式
+            autoBackButton: true, // 自动绘制返回箭头
+            splitLine: {
+              // 底部分割线
+              color: "#cccccc"
+            }
+          },
+          popGesture: "none"
+        }
+      }
+    ]);
+  },
+  data() {
+    return {
+      activeName: "1",
+      count: 0,
+      isLoading: false,
+      active: 0,
+      list: [],
+      loading: false,
+      finished: false,
+      show: false,
+      actions: [
+        {
+          name: "选项",
+          callback: this.onClick
+        },
+        {
+          name: "选项",
+          subname: "描述信息"
+        },
+        {
+          name: "选项",
+          loading: true
+        }
+      ]
+    };
+  },
+
+  methods: {
+    // 使用预加载速度会很快,但是没法再次传值,只能通过页面之间的通讯完成传值,参考goods.detail页面中的fire
+    openGoodsDetail() {
+      showWebviewById("goods.detail");
+    },
+    openVux() {
+      showWebviewById("vux.index");
+    },
+    openCart() {
+      showWebviewById("goods.cart");
+    },
+    openMui() {
+      // 重写了标题样式
+      openWebview(
+        {
+          url: "./mui.index.html",
+          id: "mui.index"
+        },
+        {
+          titleNView: {
+            backgroundColor: "#f7f7f7", // 导航栏背景色
+            titleText: "MUI演示", // 导航栏标题
+            titleColor: "#666", // 文字颜色
+            // type: "transparent", // 透明渐变样式
+            autoBackButton: true, // 自动绘制返回箭头
+            splitLine: {
+              // 底部分割线
+              color: "#cccccc"
+            }
+          }
+        },
+        {
+          id: 2018,
+          name: "超级红苹果"
+        }
+      );
+      // openWebview("./mui.index.html", "mui.index", "Mui演示");
+    },
+    camera() {
+      var cmr = plus.camera.getCamera();
+      cmr.captureImage(
+        function(p) {
+          plus.nativeUI.alert("成功：" + p);
+          plus.io.resolveLocalFileSystemURL(
+            p,
+            function(entry) {
+              // createItem(entry);
+            },
+            function(e) {
+              console.log("读取拍照文件错误：" + e.message);
+            }
+          );
+        },
+        function(e) {
+          console.log("失败：" + e.message);
+        },
+        { filename: "_doc/camera/", index: 1 }
+      );
+    },
+    vantDialog() {
+      Dialog.alert({
+        title: "标题",
+        message: "弹窗内容"
+      }).then(() => {
+        // on close
+      });
+    },
+    vantToast() {
+      Toast("我是提示文案，建议不超过十五字~");
+    },
+    toast() {
+      plus.nativeUI.toast("Hier");
+    },
+
+    onRefresh() {
+      this.isLoading = true;
+      request({
+        url: DOUBANAPI + "/v2/book/search?q=javascript&count=2"
+      })
+        .then(res => {
+          this.isLoading = false;
+          plus.nativeUI.toast("Ajax请求成功");
+          console.log(res);
+        })
+        .catch(err => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    openAS() {
+      this.show = !this.show;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+:global {
+  body {
+    background-color: #f8f8f8;
+    -webkit-font-smoothing: antialiased;
+    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/content.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="content">
+    <slot></slot>
+  </div>
+</template>
+ 
+<script>
+import Vue from "vue";
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+  created() {}
+};
+</script>
+
+<style lang="less" scoped>
+.content {
+  padding: 0 15px;
+}
+</style>

src/components/logo.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div style="text-align:center">
+      <img width="60%" src="@/assets/logo.png" alt="">
+    </div>
+    <van-tag mark type="success">{{info.version}}</van-tag>
+
+  </div>
+
+</template>
+<script>
+import Vue from "vue";
+import { Tag } from "vant";
+
+import { getProperty } from "../utils/plus/runtime.js";
+Vue.use(Tag);
+
+export default {
+  data() {
+    return {
+      info: "0"
+    };
+  },
+  created() {
+    getProperty().then(info => {
+      // console
+      this.info = info;
+    });
+  }
+};
+</script>

src/main.js

@@ -0,0 +1,51 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from "vue";
+// import hotfix from 'h5plus-hotfix';
+import "./utils/common";
+import App from "./App";
+const appId = "com.femirror.mogoh5";
+// const updateUrl = FemirrorAPI + `/public/app/checkUpdate?bundleId=${appId}`;
+// hotfix({
+//   url: updateUrl,
+//   before(data) {
+//     // 确认安装
+//     return new Promise(resolve => {
+//       plus.nativeUI.confirm(data.description, (selected) => {
+//         if (selected.index === 0) {
+//           plus.nativeUI.showWaiting("下载更新文件...");
+//           resolve(data);
+//         }
+//       }, {
+//           title: data.title,
+//           buttons: ["确认更新", "取消"],
+//           verticalAlign: "bottom"
+//         });
+//     });
+//   },
+//   success() {
+//     console.log('安装成功')
+//     plus.runtime.restart(); // 重启app 
+//     plus.nativeUI.closeWaiting();
+//   },
+//   error(e) {
+//     // 错误显示
+//     plus.nativeUI.closeWaiting();
+//     console.log("安装wgt文件失败[" + e.code + "]：" + e.message);
+//     plus.nativeUI.alert("安装wgt文件失败[" + e.code + "]：" + e.message);
+//   },
+//   onProgress(p) {
+//     console.log(p) // 下载进度
+//   }
+// });
+
+
+
+Vue.config.productionTip = false;
+
+/* eslint-disable no-new */
+new Vue({
+  el: "#app",
+  components: { App },
+  template: "<App/>"
+});

src/page.json

@@ -0,0 +1,8 @@
+{
+  "index|plusReady": "./src/main.js",
+  "goods.detail": "./src/page/goods/detail.js",
+  "goods.cart|plusReady": "./src/page/goods/cart.js",
+  "mui.index|mui|plusReady": "./src/page/mui/index.js",
+  "user.index": "./src/page/user/index.js",
+  "vux.index|plusReady": "./src/page/vux/index.js"
+}

src/page/goods/cart.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import "@/utils/common";
+import App from "./cart.vue";
+
+new Vue({
+  el: "#app",
+  render: h => h(App)
+});

src/page/goods/cart.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <van-checkbox-group class="card-goods" v-model="checkedGoods">
+      <van-checkbox
+        class="card-goods__item"
+        v-for="item in goods"
+        :key="item.id"
+        :name="item.id"
+      >
+        <van-card
+          :title="item.title"
+          :desc="item.desc"
+          :num="item.num"
+          :price="formatPrice(item.price)"
+          :thumb="item.thumb"
+        />
+      </van-checkbox>
+    </van-checkbox-group>
+    <van-submit-bar
+      :price="totalPrice"
+      :disabled="!checkedGoods.length"
+      :button-text="submitBarText"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from "vant";
+import { confirm } from "../../utils/plus/nativeUI";
+export default {
+  components: {
+    [Card.name]: Card,
+    [Checkbox.name]: Checkbox,
+    [SubmitBar.name]: SubmitBar,
+    [CheckboxGroup.name]: CheckboxGroup
+  },
+  created() {
+    plus.key.removeEventListener("backbutton", function() {
+      console.log(5555);
+    });
+    plus.key.addEventListener(
+      "backbutton",
+      function() {
+        //  nativeUI.conf
+        // nativeUI.con
+        confirm("确认要离开么?").then(e => {
+          if (e.index === 0) {
+            plus.nativeUI.toast("离开了");
+            const ws = plus.webview.currentWebview();
+            ws.hide("auto");
+          } else {
+            plus.nativeUI.toast("留住了");
+          }
+        });
+      },
+      false
+    );
+    window.addEventListener("addGoodsToCart", event => {
+      //通过event.detail可获得传递过来的参数内容
+
+      let goods = this.goods.find(ele => {
+        return ele.id == event.detail.goods_id;
+      });
+      goods.num++;
+      plus.nativeUI.toast(`我是购物车页面,当前苹果数量为${goods.num}`);
+      console.log(event.detail);
+    });
+  },
+  data() {
+    return {
+      checkedGoods: ["1", "2", "3"],
+      goods: [
+        {
+          id: "1",
+          title: "进口香蕉",
+          desc: "约250g，2根",
+          price: 200,
+          num: 1,
+          thumb:
+            "https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg"
+        },
+        {
+          id: "2",
+          title: "陕西蜜梨",
+          desc: "约600g",
+          price: 690,
+          num: 1,
+          thumb:
+            "https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg"
+        },
+        {
+          id: "3",
+          title: "美国伽力果",
+          desc: "约680g/3个",
+          price: 2680,
+          num: 1,
+          thumb:
+            "https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg"
+        }
+      ]
+    };
+  },
+  computed: {
+    submitBarText() {
+      const count = this.checkedGoods.length;
+      return "结算" + (count ? `(${count})` : "");
+    },
+    totalPrice() {
+      return this.goods.reduce(
+        (total, item) =>
+          total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price : 0),
+        0
+      );
+    }
+  },
+  methods: {
+    formatPrice(price) {
+      return (price / 100).toFixed(2);
+    },
+    onSubmit() {
+      Toast("点击结算");
+    }
+  }
+};
+</script>
+
+<style lang="less">
+body {
+  background-color: #f8f8f8;
+}
+.card-goods {
+  padding: 10px 0;
+  background-color: #fff;
+  &__item {
+    position: relative;
+    background-color: #fafafa;
+    .van-checkbox__label {
+      width: 100%;
+      padding: 0 10px 0 15px;
+      box-sizing: border-box;
+    }
+    .van-checkbox__icon {
+      top: 50%;
+      left: 10px;
+      z-index: 1;
+      position: absolute;
+      margin-top: -10px;
+    }
+    .van-card__price {
+      color: #f44;
+    }
+  }
+}
+</style>

src/page/goods/detail.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import "@/utils/common";
+import App from "./detail.vue";
+
+new Vue({
+  el: "#app",
+  render: h => h(App)
+});

src/page/goods/detail.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="goods">
+    <van-swipe class="goods-swipe" :autoplay="3000">
+      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
+        <img :src="thumb">
+      </van-swipe-item>
+    </van-swipe>
+
+    <van-cell-group>
+      <van-cell>
+        <div class="goods-title">{{ goods.title }}</div>
+        <div class="goods-price">{{ formatPrice(goods.price) }}</div>
+      </van-cell>
+      <van-cell class="goods-express">
+        <van-col span="10">运费：{{ goods.express }}</van-col>
+        <van-col span="14">剩余：{{ goods.remain }}</van-col>
+      </van-cell>
+    </van-cell-group>
+
+    <van-cell-group class="goods-cell-group">
+      <van-cell value="进入店铺" icon="shop" is-link @click="sorry">
+        <template slot="title">
+          <span class="van-cell-text">有赞的店</span>
+          <van-tag type="danger">官方</van-tag>
+        </template>
+      </van-cell>
+      <van-cell title="线下门店" icon="location" is-link @click="sorry" />
+    </van-cell-group>
+
+    <van-cell-group class="goods-cell-group">
+      <van-cell title="查看商品详情" is-link @click="sorry" />
+    </van-cell-group>
+    <br><br><br><br><br>
+
+    <van-goods-action>
+      <van-goods-action-mini-btn icon="chat" @click="sorry">
+        客服
+      </van-goods-action-mini-btn>
+      <van-goods-action-mini-btn icon="cart" @click="onClickCart">
+        购物车
+      </van-goods-action-mini-btn>
+      <van-goods-action-big-btn @click="sendEvent">
+        触发首页事件
+      </van-goods-action-big-btn>
+      <van-goods-action-big-btn primary @click="sorry">
+        立即购买
+      </van-goods-action-big-btn>
+    </van-goods-action>
+  </div>
+</template>
+
+<script>
+import {
+  Tag,
+  Col,
+  Icon,
+  Cell,
+  CellGroup,
+  Swipe,
+  Toast,
+  SwipeItem,
+  GoodsAction,
+  GoodsActionBigBtn,
+  GoodsActionMiniBtn 
+} from "vant";
+
+import { fire } from "../../utils/envent.js";
+
+export default {
+  components: {
+    [Tag.name]: Tag,
+    [Col.name]: Col,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem,
+    [GoodsAction.name]: GoodsAction,
+    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
+    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
+  },
+  data() {
+    return {
+      goods: {
+        title: "美国伽力果（约680g/3个）",
+        price: 2680,
+        express: "免运费",
+        remain: 19,
+        thumb: [
+          "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
+          "https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg"
+        ]
+      }
+    };
+  },
+  created() {
+    function plusReady() {
+      let ws = plus.webview.currentWebview();
+      // 预载网络页面
+      plus.nativeUI.toast(
+        `我收到的信息是:{"id":"${ws.id}","name":"${ws.name}"}`
+      );
+      console.log(ws);
+    }
+    if (window.plus) {
+      plusReady();
+    } else {
+      document.addEventListener("plusready", plusReady, false);
+    }
+  },
+  methods: {
+    sendEvent() {
+      const indexWebview = plus.webview.getLaunchWebview();
+      fire(indexWebview, "customEvent", { name: "ArH", project: "MogoH5+" });
+    },
+    formatPrice() {
+      return "¥" + (this.goods.price / 100).toFixed(2);
+    },
+    onClickCart() {
+      // this.$router.push("cart");
+      const cartWebview = plus.webview.getWebviewById("goods.cart");
+      fire(cartWebview, "addGoodsToCart", { goods_id: 3, num: 1 });
+    },
+    sorry() {
+      Toast("暂无后续逻辑~");
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.goods {
+  padding-bottom: 50px;
+  &-swipe {
+    img {
+      width: 100%;
+      // height: 7.5rem;
+      display: block;
+    }
+  }
+  &-title {
+    font-size: 16px;
+  }
+  &-price {
+    color: #f44;
+  }
+  &-express {
+    color: #999;
+    font-size: 12px;
+    padding: 5px 15px;
+  }
+  &-cell-group {
+    margin: 15px 0;
+    .van-cell__value {
+      color: #999;
+    }
+  }
+}
+</style>

src/page/mui/index.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import "@/utils/common";
+import App from "./index.vue";
+
+new Vue({
+  el: "#app",
+  render: h => h(App)
+});

src/page/mui/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <br><br>
+    <center>
+      <img width="60%" :src="img" alt="">
+    </center>
+         
+
+    <br>
+    <h4 style="text-align:center">Mui V2.0 </h4>
+    <p style="text-align:center;padding:10px 20px">这里主要演示MUI的一些样式和JS,我仍然推荐您使用其他vueUI(Vux,Vant,mint)来代替mui</p>
+    <br> &nbsp;
+    <button @click="alert" type="button" class="mui-btn">alert</button>
+    <button @click="toast" type="button" class="mui-btn mui-btn-primary">toast</button>
+    <br><br>
+    <form class="mui-input-group">
+      <div class="mui-input-row">
+        <label>用户名</label>
+        <input type="text" class="mui-input-clear" placeholder="请输入用户名">
+      </div>
+      <div class="mui-input-row">
+        <label>密码</label>
+        <input type="password" class="mui-input-password" placeholder="请输入密码">
+      </div>
+      <div class="mui-button-row">
+        <button type="button" class="mui-btn mui-btn-primary">确认</button>
+        <button type="button" class="mui-btn mui-btn-danger">取消</button>
+      </div>
+    </form>
+    <br><br>
+    <ul class="mui-table-view">
+      <li class="mui-table-view-cell mui-collapse">
+        <a class="mui-navigate-right" href="#">面板1</a>
+        <div class="mui-collapse-content">
+          <p>面板1子内容</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      img: require("@/assets/logo.png")
+    };
+  },
+  methods: {
+    alert() {
+      mui.alert("Mogo H5+");
+    },
+    toast() {
+      mui.toast("嘿嘿,有问题issue哦");
+    }
+  }
+};
+</script>
+
+<style lang="less">
+</style>

src/page/user/index.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import "@/utils/common";
+import App from "./index.vue";
+
+new Vue({
+  el: "#root",
+  render: h => h(App)
+});

src/page/user/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png">
+    <van-row class="user-links">
+      <van-col span="6">
+        <van-icon name="pending-payment" /> 待付款
+      </van-col>
+      <van-col span="6">
+        <van-icon name="pending-orders" /> 待接单
+      </van-col>
+      <van-col span="6">
+        <van-icon name="pending-deliver" /> 待发货
+      </van-col>
+      <van-col span="6">
+        <van-icon name="logistics" /> 待发货
+      </van-col>
+    </van-row>
+
+    <van-cell-group class="user-group">
+      <van-cell icon="records" title="全部订单" is-link />
+    </van-cell-group>
+
+    <van-cell-group>
+      <van-cell icon="exchange" title="我的积分" is-link />
+      <van-cell icon="gold-coin" title="我的优惠券" is-link />
+      <van-cell icon="gift" title="我收到的礼物" is-link />
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import { Row, Col, Icon, Cell, CellGroup } from 'vant';
+export default {
+  components: {
+    [Row.name]: Row,
+    [Col.name]: Col,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  }
+}
+</script>
+
+<style lang="less">
+.user {
+  &-poster {
+    width: 100%;
+    // height: 4rem;
+    display: block;
+  }
+  &-group {
+    margin-bottom: 0.3rem;
+  }
+  &-links {
+    padding: 15px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: #fff;
+    .van-icon {
+      display: block;
+      font-size: 24px;
+    }
+  }
+}
+</style>

src/page/vux/index.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import "@/utils/common";
+import App from "./index.vue";
+
+new Vue({
+  el: "#app",
+  render: h => h(App)
+});

src/page/vux/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <group-title>THX to: https://github.com/wechatui/swiper</group-title>
+    <group-title>list模式下，默认高度为180px, 如果设置aspect-ratio会根据宽度自动计算高度</group-title>
+    <swiper :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
+    <p class="copyright">Image Source: http://www.gratisography.com/</p>
+    <p>current index: {{demo01_index}}</p>
+    <x-button @click.native="demo01_index = 0">go to 0</x-button>
+    <x-button @click.native="demo01_index = 1">go to 1</x-button>
+    <x-button @click.native="demo01_index = 2">go to 2</x-button>
+    <br/>
+    <br/>
+   
+  </div>
+</template>
+
+<script>
+import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from "vux";
+
+const baseList = [
+  {
+    url: "javascript:",
+    img: "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
+    title: "送你一朵fua"
+  },
+  {
+    url: "javascript:",
+    img: "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg",
+    title: "送你一辆车"
+  },
+  {
+    url: "javascript:",
+    img: "https://static.vux.li/demo/5.jpg", // 404
+    title: "送你一次旅行",
+    fallbackImg:
+      "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg"
+  }
+];
+
+const imgList = [
+  "http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff",
+  "http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff",
+  "http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff"
+];
+
+const urlList = baseList.map((item, index) => ({
+  url: "http://m.baidu.com",
+  img: item.img,
+  fallbackImg: item.fallbackImg,
+  title: `(可点击)${item.title}`
+}));
+
+const demoList = imgList.map((one, index) => ({
+  url: "javascript:",
+  img: one
+}));
+
+const only2ClickList = baseList.slice(0, 2).map(item => {
+  item.url = "http://m.baidu.com";
+  return item;
+});
+
+function b() {
+  return {
+    a: 1,
+    c: 2
+  };
+}
+
+// 解构
+let s = { ...b() };
+console.log("解构测试");
+console.log(s);
+
+export default {
+  components: {
+    Swiper,
+    SwiperItem,
+    GroupTitle,
+    XButton,
+    Divider
+  },
+  created() {
+    console.log(plus.webview.currentWebview());
+  },
+  methods: {
+    onSwiperItemIndexChange(index) {
+      console.log("demo item change", index);
+    },
+    demo01_onIndexChange(index) {
+      this.demo01_index = index;
+    },
+    demo05_onIndexChange(index) {
+      this.demo05_index = index;
+    },
+    demo05_onLoad(id) {
+      this.demo05_list = id === 1 ? baseList : demoList;
+    },
+    demo06_onIndexChange(index) {
+      this.demo06_index = index;
+    },
+    demo07_onIndexChange(index) {
+      this.demo07_index = index;
+    }
+  },
+  data() {
+    return {
+      demo01_list: baseList,
+      demo01_index: 1,
+      swiperItemIndex: 1
+    };
+  }
+};
+</script>
+
+<style scoped>
+.copyright {
+  font-size: 12px;
+  color: #ccc;
+  text-align: center;
+}
+.text-scroll {
+  border: 1px solid #ddd;
+  border-left: none;
+  border-right: none;
+}
+.text-scroll p {
+  font-size: 12px;
+  text-align: center;
+  line-height: 30px;
+}
+.black {
+  background-color: #000;
+}
+.title {
+  line-height: 100px;
+  text-align: center;
+  color: #fff;
+}
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+.vux-indicator.custom-bottom {
+  bottom: 30px;
+}
+@-webkit-keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.fadeInUp {
+  animation-name: fadeInUp;
+}
+.swiper-demo-img img {
+  width: 100%;
+}
+</style>

src/utils/README.md

@@ -0,0 +1,5 @@
+# 建议
+
+我们建议您将自己的常用函数库放在其他的文件夹.
+
+因为我们会时而更新此文件夹中的函数

src/utils/common.js

@@ -0,0 +1,95 @@
+/**
+ * 该js为所有页面都必须加载的js
+ * 可以用于全局添加某功能
+ */
+import FastClick from "fastclick";
+// 去除300ms延迟
+document.addEventListener(
+  "DOMContentLoaded",
+  function() {
+    FastClick.attach(document.body);
+  },
+  false
+);
+
+// 自动关闭窗口 可根据具体逻辑自定义
+function plusReady() {
+  plus.key.addEventListener(
+    "backbutton",
+    function () {
+      var ws = plus.webview.currentWebview();
+      if (ws.webviewPreload == true) {
+        plus.webview.hide(ws, 'auto');
+      } else {
+        plus.webview.close(ws, 'auto');
+      }
+    },
+    false
+  );
+}
+if (window.plus) {
+  plusReady();
+} else {
+  document.addEventListener("plusready", plusReady, false);
+}
+// 页面调试工具
+  var print = function (json, options) {
+      var reg = null,
+        formatted = "",
+        pad = 0,
+        PADDING = "    ";
+      options = options || {};
+      options.newlineAfterColonIfBeforeBraceOrBracket =
+        options.newlineAfterColonIfBeforeBraceOrBracket === true ? true : false;
+      options.spaceAfterColon = options.spaceAfterColon === false ? false : true;
+      if (typeof json !== "string") {
+        json = JSON.stringify(json);
+      } else {
+        json = JSON.parse(json);
+        json = JSON.stringify(json);
+      }
+      reg = /([\{\}])/g;
+      json = json.replace(reg, "\r\n$1\r\n");
+      reg = /([\[\]])/g;
+      json = json.replace(reg, "\r\n$1\r\n");
+      reg = /(\,)/g;
+      json = json.replace(reg, "$1\r\n");
+      reg = /(\r\n\r\n)/g;
+      json = json.replace(reg, "\r\n");
+      reg = /\r\n\,/g;
+      json = json.replace(reg, ",");
+      if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
+        reg = /\:\r\n\{/g;
+        json = json.replace(reg, ":{");
+        reg = /\:\r\n\[/g;
+        json = json.replace(reg, ":[");
+      }
+      if (options.spaceAfterColon) {
+        reg = /\:/g;
+        json = json.replace(reg, ":");
+      }
+      json.split("\r\n").forEach(function (node, index) {
+        //console.log(node);
+        var i = 0,
+          indent = 0,
+          padding = "";
+
+        if (node.match(/\{$/) || node.match(/\[$/)) {
+          indent = 1;
+        } else if (node.match(/\}/) || node.match(/\]/)) {
+          if (pad !== 0) {
+            pad -= 1;
+          }
+        } else {
+          indent = 0;
+        }
+
+        for (i = 0; i < pad; i++) {
+          padding += PADDING;
+        }
+
+        formatted += padding + node + "\r\n";
+        pad += indent;
+      });
+      console.log(formatted);
+    };

src/utils/envent.js

@@ -0,0 +1,17 @@
+/**
+ * 发送自定义事件
+ * @param {*} webview
+ * @param {*} eventType
+ * @param {*} data
+ */
+export const fire = function(webview, eventType, data) {
+  console.log(data);
+  webview &&
+    webview.evalJS(`
+  document.dispatchEvent(new CustomEvent("${eventType}", {
+    detail:${JSON.stringify(data)},
+    bubbles: true,
+    cancelable: true
+  }));
+  `);
+};

src/utils/plus/nativeUI.js

@@ -0,0 +1,6 @@
+//http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.confirm
+export function confirm(message, title = "确认") {
+  return new Promise(resolve => {
+    plus.nativeUI.confirm(message, resolve, title);
+  });
+}

src/utils/plus/runtime.js

@@ -0,0 +1,7 @@
+export function getProperty() {
+  return new Promise(resolve => {
+    plus.runtime.getProperty(plus.runtime.appid, function(inf) {
+      resolve(inf);
+    });
+  });
+}

src/utils/request.js

@@ -0,0 +1,14 @@
+/**
+ * http请求模块
+ */
+import axios from 'axios'
+
+export async function request (data) {
+  const conf = {
+    headers: {
+      // Authorization: "token"
+    },
+    ...data
+  }
+  return await axios(conf)
+}

src/utils/tools.js

@@ -0,0 +1,13 @@
+export function isAndroid() {
+  const ua = navigator.userAgent;
+  return ua.match(/(Android);?[\s\/]+([\d.]+)?/);
+}
+
+export function isIos() {
+  const ua = navigator.userAgent;
+  return ua.match(/(iPhone\sOS)\s([\d_]+)/);
+}
+
+// var iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/);
+// var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
+//	var wechat = ua.match(/(MicroMessenger)\/([\d\.]+)/i);

src/utils/webview.js

@@ -0,0 +1,108 @@
+/**
+ * 打开一个webview窗口
+ */
+export function openWebview(config, style = {}, extras = {}) {
+  var wv = plus.webview.create(
+    config.url,
+    config.id,
+    {
+      top: 0, // 新页面顶部位置
+      bottom: 0, // 新页面底部位置
+      render: "always",
+      popGesture: "hide",
+      bounce: "vertical",
+      bounceBackground: "#efeff4",
+      titleNView: {
+        // 详情页原生导航配置
+        backgroundColor: "#f7f7f7", // 导航栏背景色
+        titleText: config.title, // 导航栏标题
+        titleColor: "#000000", // 文字颜色
+        type: "transparent", // 透明渐变样式
+        autoBackButton: true, // 自动绘制返回箭头
+        splitLine: {
+          // 底部分割线
+          color: "#cccccc"
+        }
+      },
+      ...style
+    },
+    extras
+  );
+  var w = plus.nativeUI.showWaiting();
+  // 监听窗口加载成功
+  wv.addEventListener(
+    "loaded",
+    function () {
+      wv.show("slide-in-right"); // 显示窗口
+      w.close();
+      w = null;
+    },
+    false
+  );
+}
+
+// webview.open  打开得很快 但是不能传参
+export function openWebviewFast(url, id, title) {
+  plus.nativeUI.showWaiting("加载中");
+  plus.webview.open(
+    url,
+    id,
+    {
+      titleNView: {
+        backgroundColor: "#f7f7f7", // 导航栏背景色
+        titleText: title, // 导航栏标题
+        titleColor: "#666", // 文字颜色
+        // type: "transparent", // 透明渐变样式
+        autoBackButton: true, // 自动绘制返回箭头
+        splitLine: {
+          // 底部分割线
+          color: "#cccccc"
+        }
+      },
+    },
+    "slide-in-right",
+    420,
+    function () {
+      plus.nativeUI.closeWaiting();
+    }
+  );
+}
+// 预加载页面 速度很快,但是不要加载超过10个
+export function preLoad(webviews = []) {
+  webviews.map(webview => {
+    const fullExtras = {
+      webviewPreload: true,
+      ...webview.extras
+    };
+    plus.webview.create(
+      webview.url,
+      webview.id,
+      {
+        top: 0, // 新页面顶部位置
+        bottom: 0, // 新页面底部位置
+        render: "always",
+        popGesture: "hide",
+        bounce: "vertical",
+        bounceBackground: "#efeff4",
+        titleNView: {
+          // 详情页原生导航配置
+          backgroundColor: "#f7f7f7", // 导航栏背景色
+          titleText: webview.title, // 导航栏标题
+          titleColor: "#000000", // 文字颜色
+          type: "transparent", // 透明渐变样式
+          autoBackButton: true, // 自动绘制返回箭头
+          splitLine: {
+            // 底部分割线
+            color: "#cccccc"
+          }
+        },
+        ...webview.style
+      },
+      fullExtras
+    );
+  });
+}
+
+export function showWebviewById(id) {
+  plus.webview.show(id, "slide-in-right", 200);
+}