Taro+vue3开发微信小程序容易遇到的小问题_xjc233_taro vue3

未知 02-07 4466

最近在和团队做一个微信小程序的应用，我也是第一次接触用vue开发小程序，不可避免的遇到了很多问题，我对遇到的问题进行一些汇总，如果大家有遇到类似的问题，希望可以帮助到大家。 1.微信小程序的头部导航栏问题

首先的话，微信小程序的头部导航栏和底部导航栏都是最高层级的，普通写页面的话，背景图片或者背景颜色是无法延伸到这两个地方的，但是这两个导航栏又有不同的地方，头部导航栏只需要在app.config.js里面配置一行代码就可以

注释起来的这句就可以实现去掉原生的头部导航栏，但是由于我们写了很多界面之后才发现可以这样配置，修改的话会改变原本页面的布局，所以最后还是没有使用。关于底部导航栏，实现起来就相对麻烦，需要自己进行封装，才可以实现上述的需求。

2.真机调试无法运行

微信小程序不像我们写网页一样，他是有相当多的限制的，因为微信小程序是非常“轻”的，需要给用户极致的体验，所以运行时越快越好，这就导致了很多问题，例如总包不可以超过8M，单个包不可以超过2M（听说以后会变成3M）。解决的办法也有很多。

其一，用到的几乎所有的图片都不要放在本地，而是全部放在云数据库里面，需要图片的地方直接请求过来，这样会减少非常多的内存占用。

其二，便是分包，

可以看到我们的pages 包是主包，而packactionitem与signporanswer是我单独分出来的包，之后在app.config.js里面进行分包的配置就可以完成了，这也是解决小程序无法真机调试时用到的最多的解决方案。代码如下：

subPackages:[ { "root" : 'IIIII', "pages" : [ 'AAA', 'BBB', 'CCC' ] }, ]

root就是包所在的路径，一般都是和app.config.js这个文件同级的。pages就是这个文件夹下面的文件。

其三，在微信开发者工具里面进行配置

如果上面两种方法都不行的话，还有一个官方外挂，

进行压缩之后可以发现，代码的体积减少了很多，并且可以进行真机调试了。

3.taro的路由跳转

平时使用vue3开发网页写习惯了，很自然的在使用taro时直接npm install vue-router去了，其实是不用的，taro自带了路由的跳转功能。在进行跳转之前，我们一定要确保app.config.js里面配置了这个页面，不管是分包还是直接配置界面。这个是很容易忘记的，我也经常会忘记这一步。其次

import Taro from '@tarojs/taro' // 跳转到目的页面，打开新页面 Taro.navigateTo({ url: '/pages/page/path/name?id=2&type=test' })

?想要传递参数的话，就在路由后面写上？加参数。

4.taro实现从后端接口拿到数据

平时大家在使用vue的时候，很自然的会运行npm install axios，如呼吸般一样自然，然后使用const xxx = axios.create()，停停停，taro是不需要这样的。我们不需要安装任何的拓展，直接引入taro自带的，请看：

import Taro,{useState, useEffect} from '@tarojs/taro' //测试数据请求,启动测试 const getData = () =>{ Taro.request({ url : "xxxxx", method : 'GET' }).then(res =>{ console.log(res.data.message) }) }

其实是和原生的写法非常类似的，使用promise，但是，有一个需要注意的地方，微信小程序推荐你使用的api是用https开头的，如果是用http的话或者没有进行配置的话，会出现下面的报错。

微信小程序是不太推荐你是用http的，当然你说，我就要用，当然也可以，需要在开发者工具中进行一下配置

还是上面那个图，选择不校验合法域名，你会发现，控制台一下子清净了，以后想要上线的话这样肯定是不可以的，需要去创建一个appID，然后把用到的接口全部绑定上去就可以了。?