【uni-app】小程序使用框架整理（一）

最近开始入坑小程序，使用的框架是uni-app，ui组件用的是uview和uni-app的组件

1. tabBar链接的页面再使用uni.navigateTo或者navigate标签使用跳转失效
2. tabBar不支持小程序修改iconWidth，spacing，height
3. APP.vue不支持使用template模板及data数据定义
4. 使用vuex
5. 使用组件需要自调用时的方式
6. 调用接口使用方式

1. tabBar链接的页面再使用uni.navigateTo或者navigate标签使用跳转路由失效

解决办法：使用uni.switchTab进行页面跳转

uni.switchTab({
     
 url: '/pages/info/index'
})

2.tabBar不支持小程序修改iconWidth，spacing，height

解决办法：没有解决，不知道是不是我的打开方式不对，如果你页遇到这种问题的话，可以尝试自定义底部菜单栏

3. APP.vue不支持使用template模板及data数据定义

操作：按照普通vue模板的方式写如app.vue中，export default中的data一直报错

解决办法：更换了模板位置，并没有从源头解决问题

4.使用vuex

操作：

1. 项目最外层新建store文件夹，文件夹中包括index.js

//文件内容
import Vue from 'vue'
import Vuex from 'vuex'
import common from './common'

Vue.use(Vuex)

export default new Vuex.Store({
     
  modules:{
     
    common
  }
})

2. index.js中引入的common.js文件中根据vuex的写法写入需要保存的数据及操作

// 最后导出
export default {
     
  state,
  getters,
  actions,
  mutations,
  namespaced: true
}

3. 最后在main.js中写入store相关

import store from './store' 
Vue.prototype.$store = store
const app = new Vue({
     
 ...App,
 store
})

5. 使用组件需要自调用时的方式

*现象：按照vue的写法写上name再进行使用即可，但uni-app中这样写是不生效的

解决办法：按照普通引入组件的方式在当前组件中引入当前组件

<template>
<view class="tree">
  <view>
    <tree :list="list"></tree>
  </view>
</view>

</template>

<script>
import tree from '@/components/tree.vue'

export default {
     
  name:"tree",
  components: {
      tree },
};
</script>

6. 调用接口使用方式

现象：直接使用服务器地址会出现报错信息，提示需要在微信小程序开发工具中进行服务器域名配置，配置时会提示只能配置域名不支持服务器

解决办法：当没有域名时，可以选择微信开发者工具中的详情–本地设置–勾选不校验合法域名、webview、TLS版本以及HTTPS证书

总结:小程序还是挺有意思的，遇到问题的时候多看看文档不止是uni-app的文档，也要多看看微信小程序的官方文档，毕竟uni-app是基于微信小程序的，uni-app上找不到的答案可能就在微信小程序的官方文档上哦~还有一个就是框架不是万能的，可能不会满足你的所有需求，但是当不满足需求的时候换个思路去想问题，问题也能得到解决，可能满足不满足也没那么重要了。