vue_h5_tools/index.js

vue h5 开发小工具

import baidu_hm from './src/baidu_hm'
import site_pre_load from './src/site_pre_load'
import wechat from './src/wechat'
import utils from './src/utils'
import route from './src/route'
import auth from './src/auth'
import log from './src/log'
import bg_sound from './src/bg_sound'
import page_transition from './src/page_transition'
import axios_config from './src/axios_config'
import { Loading, MessageBox, Message } from 'element-ui'
import AlloyFinger from 'alloyfinger'
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue.js'
import EdgeCheck from 'vue-edge-check'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vue from 'vue'
import 'animate.css'

Vue.use(EdgeCheck)
Vue.use(VueAxios, axios)
Vue.use(AlloyFingerPlugin, { AlloyFinger })

// 设置微信默认值
const wechat_default = {
  have_jssdk_sign: false,
  debug: false,
  baseurl: location.origin + location.pathname,
  apis: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ'
  ],
  shareContent: {
    default: {
      title: '分享题目',
      desc: '分享内容',
      imgUrl: 'static/image/share_ico.png',
      link: location.origin + location.pathname
    }
  }
}
export default {
  install: (Vue, options) => {
    // 1. 添加全局方法或属性
    Vue.$h5 = {
      // 设置响应对象默认值
      store: {
        // 加载百分比
        site_load_percent: 0,
        // 用户信息
        userInfo: null,
        // 页面过渡
        page: {
          enter_class: null,
          exit_class: null
        }
      },
      // api路径
      api_path: {
        auth_ticket: 'login/ticket',
        userInfo: 'user',
        wechat_jssdk: 'wechat/jssdk',
        save_log: 'save_log',
        save_share: 'share'
      },
      // 加载图片序列
      site_images_array: [],
      // 背景音乐
      bg_sound: null,
      // 背景音乐是否自动播放
      bg_sound_autoplay: true,

      // 开发环境的链接
      devel_base_path: location.origin,
      devel_api_path: location.origin + '/do/api',
      devel_wechat_auth_path: location.origin + '/do/wechat/oauth/test',
      // 生产环境的链接
      prod_base_path: location.origin,
      prod_api_path: location.origin + '/do/api',
      prod_wechat_auth_path: location.origin + '/do/wechat/oauth',
      // 页面能否回弹
      site_prevent_scroll_back: false,
      // 百度监测的路径
      baidu_hm: options.baidu_hm_src ? baidu_hm(options.baidu_hm_src) : null,
      axiso_urls: [],
      axiso_res: []
    }
    // 合并初始化的数据
    Object.assign(Vue.$h5, options)
    // 微信数据需要分开处理，否则出现空值
    Vue.$h5.wechat = Object.assign(wechat_default, options.wechat)
    // 是否禁止页面回弹
    Vue.$h5.site_prevent_scroll_back && utils.preventDefault('can_scroll')
    // 初始化axios
    axios_config.init()
    // 初始化背景音乐
    bg_sound.init(Vue.$h5.bg_sound, Vue.$h5.bg_sound_autoplay)

    // 2. 添加全局资源
    // 背景音乐按钮
    Vue.directive('bg_sound_button', {
      bind(el, binding, vnode, oldVnode) {
        const hideClassName = vnode.data.attrs.hideClassName
        el.addEventListener('click', function(event) {
          // 切换播放与暂停
          bg_sound.switch()
          if (bg_sound.audio.paused) {
            // 暂停样式
            el.classList.add(hideClassName)
          } else {
            // 播放样式
            el.classList.remove(hideClassName)
          }
        })
      }
    })

    // 3. 注入组件
    Vue.mixin({
      data() {
        return {
          // 响应变量设定
          h5_store: Vue.$h5.store
        }
      },
      computed: {
      },
      watch: {
      },
      async created() {
        /*        // 判断页面是否加载完成
        if(Vue.$h5.store.site_load_percent!==1){
          await site_pre_load()
        }
*/
      },
      async mounted() {
      },
      methods: {
      }
    })

    // 4. 添加实例方法
    Vue.prototype.$h5 = {}
    // 初始化微信jssdk
    Vue.prototype.$h5.wechat = wechat
    // 定义背景音乐方法
    Vue.prototype.$h5.bg_sound = bg_sound
    // 工具类
    Vue.prototype.$h5.utils = utils
    // 认证类
    Vue.prototype.$h5.auth = auth
    // 路由类
    Vue.prototype.$h5.route = route
    // 日志类
    Vue.prototype.$h5.log = log
    // 页面过渡类
    Vue.prototype.$h5.page_transition = page_transition
    // 页面加载资源
    Vue.prototype.$h5.site_pre_load = site_pre_load

    // element-ui
    Vue.use(Loading.directive)
    Vue.prototype.$loading = Loading.service
    Vue.prototype.$msgbox = MessageBox
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
    Vue.prototype.$prompt = MessageBox.prompt
    Vue.prototype.$message = Message
  }
}