uniapp使用小结

uniapp踩坑

1、框架搭建：

初始化模版

2、manifest.json文件配置

• 配置代理

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

  "h5" : {
      "devServer" : {
          "port" : "8080",
          "disableHostCheck" : true,
          "proxy" : {
              "/api" : {
                  "target" : "http://10.16.21.29:8998",
                  "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、获取平台