uniapp使用小结

1、框架搭建：

初始化模版

2、manifest.json文件配置

• 配置代理

  • 在需要代理的应用里配上如下代码：（target是代理的域名，pathRewrite是拦截字段）

  "h5" : {
      "devServer" : {
          "port" : "8080",
          "disableHostCheck" : true,
          "proxy" : {
              "/api" : {
                  "target" : "http://ip:port",
                  "changeOrigin" : true,
                  "ssl" : false,
                  "pathRewrite" : {
                      "^/api" : ""
                  }
              }
          }
      }
  }
  
  

• 配置app图标：配置完成之后，打包才能看到效果

• 打包： appid在文件里点击获取即可，每个链接只能下载5次

3、uniapp无法使用svg图，用字体图标替换

4、集成iconfont图标库（线上)

• 问题： 复制文件unicode引入项目，图标无法加载
  • 解决：在unicode前面加上http:
• 使用v-for循环添加的font无法显示
  • 解决：将字体图标字符串替换：=>\ue7aa

5、vuex模块化和接口封装与拦截

• vuex模块化
  • 场景：当页面比较复杂，分为多个模块，每个模块又需要我们对数据进行操作或者存储，这时候如果我们把所有的数据都放在store下面的index.js进行操作的话，就会显得很乱，后面不好维护。
  • 使用

    • 1、 在store文件夹下新建一个modules文件夹用来存放各个模块的js文件

    • 2、在index文件里放入如下代码段，主要作用是通过正则匹配文件，当我们在页面调用vuex的同步异步方法时，通过这个文件去转发并执行。（store/index.js的代码如下）

      import Vue from 'vue'
      import Vuex from 'vuex'
      import getters from './getters'
      import createLogger from 'vuex/dist/logger'
      
      Vue.use(Vuex)
      
      const debug = process.env.NODE_ENV !== 'production'
      const store = new Vuex.Store({
        // strict: debug,
        plugins: debug ? [createLogger()] : [],
        getters
      })
      
      const storeContext = require.context('@/store/modules', true, /\.js$/)
      
      storeContext.keys().forEach((modules) => {
        store.registerModule(modules.replace(/(^\.\/)|(\.js$)/g, ''), storeContext(modules).default)
      })
      
      Vue.prototype.$store = store
      
      export default store
      

      • 3、在对应的modules/user.js里写存储的数据和同步异步方法，然后export出去
      • 4、页面调用数据：

      computed: mapState({
          hasLogin: state => state.user.hasLogin
      })
      

• 关于接口封装
  • 我们使用的是插件市场：通用轻量级api接口网络请求(支持拦截器),地址：https://ext.dcloud.net.cn/plugin?id=289,后面根据接口的具体情况我们可以在拦截器进行相关的设置

6、导航栏自定义按钮设置

      {
          "path": "pages/user/user",
          "style": {
            "navigationBarTitleText": "",
            "navigationBarBackgroundColor": "#0faeff",
            "app-plus": {
                "titleNView": {
                    "backgroundColor": "#0faeff",
                    "titleColor": "#fff",
                    "buttons": [ //原生标题栏按钮配置,
                        {
                            "type": "back", 
                            "text": "返回",
                            "float": "left",
                            "fontSize": "30px",
                            "color": "#fff"
                            
                        },
                        {
                            "type": "none", 
                            "text": "返回",
                            "float": "left", 
                            "fontSize": "14px",
                            "color": "#fff"
                        },
                        {
                            "width": "40px",
                            "type": "menu",  
                            "text":"\ue679",
                            "float": "right",
                            "fontSize": "30px"
                        }
                    ]
                }
            }
        }
    }

7、获取平台