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

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

1.微信小程序的头部导航栏问题

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

Taro+vue3开发微信小程序容易遇到的小问题_第1张图片

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

2.真机调试无法运行

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

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

其二,便是分包,

Taro+vue3开发微信小程序容易遇到的小问题_第2张图片

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

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

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

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

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

Taro+vue3开发微信小程序容易遇到的小问题_第3张图片

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

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的话或者没有进行配置的话,会出现下面的报错。

Taro+vue3开发微信小程序容易遇到的小问题_第4张图片

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

Taro+vue3开发微信小程序容易遇到的小问题_第5张图片

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

你可能感兴趣的:(vue.js,微信小程序)