we-chat-app-platform 微信小程序平台

为什么80%的码农都做不了架构师？>>>   

we-chat-app-platform 微信小程序平台

一个巨型项目。。。。 慢慢来。

技术栈

1、vue

2、vue-router

3、vuex

4、axios

5、iview

6、element-ui

7、moment

8、babel-polyfill

相关功能使用介绍

一、接口调用

1、get调用

 this.get('/type/list', params).then(res => {
        console.log(res);
      });

直接使用 this.get() 方法就可

2、post调用

 this.post('/type/list', params).then(res => {
        console.log(res);
      });

直接使用 this.post() 方法就可

其他相关功能以此类推

二、时间插件（moment.js）

1、格式化时间

 console.log(this.moment().format('YYYY-MM-DD HH:mm:ss'));
 console.log(this.moment().format('X'));

其他相关功能以此类推

三、Utils 工具类

1、time 模块

• formatTime 格式化时间

console.log(this.utils.formatTime());

其他相关功能以此类推

• formatAddTime 时间 加法 并 格式化时间

console.log(this.utils.formatAddTime(createTime, 'YYYY-MM-DD HH:mm:ss', days))

其他相关功能以此类推

• formatSubtractTime 时间 减法 并 格式化时间

• formatInitTime 格式化 初始 时间

• startTime 搜索 开始时间

• endTime 搜索 结束时间

2、public 模块

• getArrName 在 key name 数组中 获取 name

console.log(this.utils.getArrName(state.orderTypeList, orderType));

其他相关功能以此类推

• getArrTitle 在 key title 集合中 获取 title

3、cookie 模块

• 设置cookie

this.cookie.setCookie('wsl', { a: 122 },360,'/');

• 获取cookie

this.cookie.getCookieValue('wsl');

• 删除cookie

this.cookie.deleteCookie('wsl','/');

4、localStorage 模块

• 存储localStorage

this.storeage.setStore('wsl', { a: 122 });

• 获取localStorage

this.storeage.getStore('wsl');

• 删除localStorage

this.storeage.removeStore('wsl');

5、sessionStorage 模块

• 存储sessionStorage

this.session.setItem('wsl', { a: 122 });

• 获取sessionStorage

this.session.getStore('wsl');

• 删除sessionStorage(指定)

this.session.removeStore('wsl');

• 删除sessionStorage(所有)

this.session.clear();

6、过滤器

未封装完成

• 求时间差

四、阿里的 icon 图标

美工从 阿里 iconfont 导出后添加到项目 直接根据 iconfont.css 的 .icon-brush 使用

<i class="iconfont icon-brush" style="font-size:50px"></i>

五、百度编辑器使用

1、添加 js 挂载器

<template>
  <div class="components-container">
    <button @click="getUEContent()">获取内容</button>
    <div class="editor-container">
      <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
    </div>
  </div>
</template>

2、增加配置

<script>
// import UE from '@/components/ue/ue.vue';
import UE from '@/components/ue';

export default {
  components: { UE },
  data() {
    return {
      defaultMsg:
        'editor.vue?5c45:42 <p style="text-align: left; margin-bottom: 5px;">这里是U</p><p style="text-align: center; margin-bottom: 5px;"><img src="/ueditor/php/upload/image/20171015/1508063519822204.jpg" title="1508063519822204.jpg"/></p><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p style="line-height: normal; margin-bottom: 10px;"><img src="/ueditor/php/upload/image/20171015/1508063519100952.jpg" title="1508063519100952.jpg"/><img src="http://img.baidu.com/hi/jx2/j_0047.gif"/><img src="http://img.baidu.com/hi/jx2/j_0029.gif"/>szdfs18:44:04</p></li><li><p style="margin-bottom: 5px;">sdfsd</p></li><li><p style="margin-bottom: 5px;">sdf</p></li></ol><p style="margin-bottom: 5px;">sdf<br/></p><pre class="brush:php;toolbar:false;">h</pre><p style="margin-bottom: 5px;"><br/></p><p style="margin-bottom: 5px;"><br/></p><pre class="brush:diff;toolbar:false">sssfsdsdfsdfsdfsdf</pre><p><br/></p><p><br/></p><p style="margin-bottom: 5px;">E测试<br/></p>',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      },
      ue1: 'ue1' // 不同编辑器必须不同的id
    };
  },
  methods: {
    getUEContent() {
      let content = this.$refs.ue.getUEContent(); // 调用子组件方法
      // this.$notify({
      //   title: '获取成功，可在控制台查看！',
      //   message: content,
      //   type: 'success'
      // });
      console.log(content);
    }
  }
};
</script>

转载于:https://my.oschina.net/520wsl/blog/1650310