Sheep_WuYang

初使用uni-app，适配多端，踩坑及经验合集

一、微信小程序不支持axios

1）安装

使用小程序适配器 axios-miniprogram-adapter，使用npm安装

npm install axios-miniprogram-adapter -S

2）使用

在照常使用axios基础上：

头部import

import mpAdapter from 'axios-miniprogram-adapter'

尾部

export default service

之前添加

axios.defaults.adapter = mpAdapter

二、微信小程序不支持Cookies

使用以下代码处理相关操作，具体使用可参考DCloud官网"数据缓存"

uni.setStorageSync  uni.getStorageSync  uni.removeStorageSync

三、适配多端的UI选择

项目使用了两种UI:ColorUI、uView UI，声明：该项目使用 vue-cli 创建

1) ColorUI安装使用说明

官方说明 https://gitee.com/weilanwl/ColorUI/

个人实践操作步骤，仅供参考：

下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目src目录下,然后在App.vue 中，在style标签中引入

@import "colorui/main.css";
@import "colorui/icon.css";

App.vue获得系统信息

onLaunch: function() {
	uni.getSystemInfo({
		success: function(e) {
			// #ifndef MP
			Vue.prototype.StatusBar = e.statusBarHeight;
			if (e.platform == 'android') {
				Vue.prototype.CustomBar = e.statusBarHeight + 50;
			} else {
				Vue.prototype.CustomBar = e.statusBarHeight + 45;
			};
			// #endif
			// #ifdef MP-WEIXIN
			Vue.prototype.StatusBar = e.statusBarHeight;
			let custom = wx.getMenuButtonBoundingClientRect();
			Vue.prototype.Custom = custom;
			Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
			// #endif		
			// #ifdef MP-ALIPAY
			Vue.prototype.StatusBar = e.statusBarHeight;
			Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
			// #endif
		}
	})
}

pages.json 配置取消系统导航栏
```
"globalStyle": {
	"navigationStyle": "custom"
},
```
复制代码结构可以直接使用，注意全局变量的获取。

使用封装,在main.js 引入 cu-custom 组件。

import cuCustom from 'colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

page.vue 页面可以直接调用了

"bg-gradual-blue" :isBack="true">
	"backText">返回
	"content">导航栏

2）uView UI安装使用说明

官方说明https://www.uviewui.com/components/npmSetting.html

个人实践操作，大致和官方一致，区别在于最后一步配置easycom组件模式

"easycom": {
    "^u-(.*)": "[email protected]@uview-ui/components/u-$1/u-$1.vue"
  }

四、使用jsencrypt.js加解密

微信小程序中不支持navigator和window对象，需要安装jsencrypt后再对其修改，后续使用的时候，引用修改后的jsencrypt.js文件，个人配置后的jsencrypt.js文件内容见附件

五、全局过滤器

在src目录下新建目录filters，在filters下新建index.vue,内容如下,其中moment自行npm安装

// 全局过滤器
import moment from 'moment' // 导入文件

const filters = {
  dateFormate: function(val) {
    if (val == null || val === undefined || val === '') {
      return ''
    }
    return moment(val).format('YYYY-MM-DD')
  },
  iphoneFilter: function(value, isHide) {
    if (value === undefined || value === '' || value === null) return null
    if (isHide) {
      var first = value.substring(0, 3)
      var sec = value.substring(7, 11)
      return first + '****' + sec
    } else {
      return value
    }
  }
}

export default (Vue) => {
  Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
  })
}

在main.js中注册

// 全局过滤器注册
import filters from '@/filters'
filters(Vue)

使用demo
```
{{xxxDate | dateFormate}}
```

六、自定义tabbar

实现思路：使用vuex获取不同角色的tabbar列表。

1) `pages.json`文件中tabBar只保留list

"tabBar": {
    "list": [
        {
            "pagePath": "pages/a/index"
        },
        {
            "pagePath": "pages/b/expert"
        },
        {
            "pagePath": "pages/mine/index"
        }
    ]
}

2) 在utils目录下创建`tabBar.js`，内容如下

// 角色A tab列表
const aTabs = [
    {
        iconPath: "/static/icon/tabbar/a.png",
        selectedIconPath: "/static/icon/tabbar/a_selected.png",
        text: "a",
        pagePath: "/pages/a/index"
    },
    {
       	iconPath: "/static/icon/tabbar/mine.png",
       	selectedIconPath: "/static/icon/tabbar/mine_selected.png",
      	text: "我的",
      	pagePath: "/pages/mine/index"
    }
]

// 角色B tab列表
const bTabs = [
    {
        iconPath: "/static/icon/tabbar/a.png",
        selectedIconPath: "/static/icon/tabbar/a_selected.png",
        text: "b",
        pagePath: "/pages/a/index"
    },
    {
       	iconPath: "/static/icon/tabbar/mine.png",
       	selectedIconPath: "/static/icon/tabbar/mine_selected.png",
      	text: "我的",
      	pagePath: "/pages/mine/index"
    }
]

export default{
    aTabs,
    bTabs
}

3) vuex配置结构

modules目录下tabBar.js内容如下

import tabBar from '@/utils/tabBar'

let type = uni.getStorageSync('roleName') === 'a' ? 'aTabs' : 'bTabs'

const state = {
    list: tabBar[type]
}

export default{
    state
}

getters.js内容如下

const getters = {
  tabBarList: state => state.tabBar.list
}
export default getters

index.js内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

在main.js中引用store

import store from './store'
Vue.prototype.$store = store;

在对应角色的index.vue中使用tabbar
在

初使用uni-app，适配多端，踩坑及经验合集