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

初使用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/

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

1. 下载源码解压获得/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
   		}
   	})
   }
   

2. pages.json 配置取消系统导航栏

   "globalStyle": {
   	"navigationStyle": "custom"
   },
   

   复制代码结构可以直接使用，注意全局变量的获取。

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

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

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

   <cu-custom bgColor="bg-gradual-blue" :isBack="true">
   	<block slot="backText">返回</block>
   	<block slot="content">导航栏</block>
   </cu-custom>
   

2）uView UI安装使用说明

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

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

"easycom": {
​    "^u-(.*)": "_uview-ui@1.8.4@uview-ui/components/u-$1/u-$1.vue"
  }

四、使用jsencrypt.js加解密

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

五、全局过滤器

1. 在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])
     })
   }
   
   

2. 在main.js中注册

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

3. 使用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配置结构

1. modules目录下tabBar.js内容如下

   import tabBar from '@/utils/tabBar'
   
   let type = uni.getStorageSync('roleName') === 'a' ? 'aTabs' : 'bTabs'
   
   const state = {
       list: tabBar[type]
   }
   
   export default{
       state
   }
   

2. getters.js内容如下

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

3. 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
   
   

4. 在main.js中引用store

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

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

   在 <template>中

    <view>
        <!-- 底部tabBar start -->
        <u-tabbar
        :list="tabBarList"
        :active-color="activeColor"
        :inactive-color="inactiveColor"
        :border-top="borderTop"
        >
        </u-tabbar>
        <!-- 底部tabBar end -->
    </view>
   

   在 <script>中

    import { mapGetters } from "vuex";
     export default {
         computed: {
         ...mapGetters(["tabBarList"]),
         }
     }
   

附件