uniapp开发h5+小程序注意点

1.背景图片要用base64位，因为小程序不支持背景图片用本地的

2.在切换路由时注意是不是tab，切tab要用switchTab，在浏览器用navigate也可以跳转，小程序会不跳转

3.路由拦截（小程序拦截不了tab页，插件不支持，除非自定义tabbar）

　　1.安装 uni-read-pages 和 uni-simple-router

　　2.vue.config.js里面 　

　　　　const TransformPages = require('uni-read-pages')
　　　　const {webpack} = new TransformPages()
　　　　module.exports = {
　　　　　　configureWebpack: {
　　　　　　plugins: [
　　　　　　　　new webpack.DefinePlugin({
　　　　　　　　　　ROUTES: webpack.DefinePlugin.runtimeValue(() => {
　　　　　　　　　　　　const tfPages = new TransformPages({
　　　　　　　　　　　　　　includes: ['path', 'name', 'aliasPath']
　　　　　　　　　　　　});
　　　　　　　　　　return JSON.stringify(tfPages.routes)
　　　　　　　　}, true )
　　　　　　})
　　　　　　]
　　　　}
　　　}

　　3.router.js里面

　　　　import {RouterMount,createRouter} from 'uni-simple-router';
　　　　const router = createRouter({
　　　　　　platform: process.env.VUE_APP_PLATFORM，
　　　　　　routes: [...ROUTES]
　　　　});
　　　　//全局路由前置守卫
　　　　router.beforeEach(async (to, from, next) => {
　　　　　　next();
　　　　});
　　　　// 全局路由后置守卫
　　　　router.afterEach((to, from) => {
　　　　　　console.log('跳转结束')
　　　　})

　　　　export {
　　　　　　router,
　　　　　　RouterMount
　　　　}

　　4.main.js

　　　　import { router, RouterMount } from './router.js';

　　　　Vue.use(router);

　　　　// #ifdef H5
　　　　RouterMount(app,router,'#app');
　　　　// #endif

　　　　// #ifndef H5
　　　　app.$mount(); //为了兼容小程序及app端必须这样写才有效果
　　　　// #endif

　　4.请求拦截，响应拦截

　　　　##axios是http请求，可以改装下axios的请求，uniapp不自带拦截

　　　　import axios from "axios";
　　　　import { store } from "@/store"
　　　　const config = {
　　　　　　timeout: 60 * 1000
　　　　}

　　　　const request = axios.create(config);

　　　　axios.defaults.adapter = (config) => {
　　　　　　return new Promise((resolve, reject) => {
　　　　　　　　const settle = require("axios/lib/core/settle");
　　　　　　　　const buildURL = require("axios/lib/helpers/buildURL");
　　　　　　　　const baseUrl = config.baseURL ? config.baseURL : "";
　　　　　　　　uni.request({
　　　　　　　　url: baseUrl + buildURL(config.url, config.params, config.paramsSerializer),
　　　　　　　　method: config.method.toUpperCase(),
　　　　　　　　header: config.headers,
　　　　　　　　data: config.data,
　　　　　　　　complete: (response) => {
　　　　　　　　　　response = {
　　　　　　　　　　　　data: response.data,
　　　　　　　　　　　　status: response.statusCode,
　　　　　　　　　　　　errMsg: response.errMsg,
　　　　　　　　　　　　header: response.header,
　　　　　　　　　　　　config: config
　　　　　　　　　　};
　　　　　　　　　　settle(resolve, reject, response)
　　　　　　　　　}
　　　　　　　　});
　　　　　　})
　　　　}

　　　　request.interceptors.request.use(
　　　　　　config => {
　　　　　　　　uni.showLoading({
　　　　　　　　title: '加载中'
　　　　　　});
　　　　　　if(store.state.token) config.headers.token = store.state.token
　　　　　　　　return config
　　　　　　},
　　　　　　error => {
　　　　　　　　return Promise.reject(error)
　　　　　　}
　　　　)

　　　　request.interceptors.response.use(
　　　　　　response => {　
　　　　　　　　return response
　　　　　　},
　　　　error => {
　　　　　　return Promise.reject(error);
　　　　}
　　　)

　　export default request;

　　用的时候

　　export const GetOssToken = (data) => {
　　　　return request({
　　　　　　url: AI_XUE_SHI_API + "/Api/V3/Auxiliary/GetOssToken",
　　　　　　method: 'post',
　　　　　　data
　　　　});
　　}

　　5.env.js --- 根据环境使用不同的后端接口

　　　　if(process.env.NODE_ENV === 'production'){

　　　　}else{

　　　　}