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

mooonyuan

已于 2024-08-20 15:54:53 修改

阅读量1.6k

点赞数 1

分类专栏： uni-app 文章标签：微信小程序 uni-app uView

于 2020-07-31 16:10:46 首次发布

本文链接：https://blog.csdn.net/mooonyuan/article/details/107712490

版权

uni-app 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了在使用uni-app框架开发微信小程序时遇到的一些问题，如tabBar跳转失效、自定义底部菜单栏、APP.vue模板支持、vuex使用、组件自调用以及接口调用方式等，并提供了相应的解决办法。建议开发者遇到问题时查阅uni-app和微信小程序的官方文档，灵活思考问题的解决方式。

摘要由CSDN通过智能技术生成

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

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

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

操作：

项目最外层新建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
  }
})

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

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

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