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

不念不忘少年蓝@ 2023-03-03 12:26 10阅读 0赞

最近开始入坑小程序，使用的框架是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
      }
    })

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

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

1.  最后在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上找不到的答案可能就在微信小程序的官方文档上哦~还有一个就是框架不是万能的，可能不会满足你的所有需求，但是当不满足需求的时候换个思路去想问题，问题也能得到解决，可能满足不满足也没那么重要了。