VSCode+微信开发者工具开发小程序遇到问题1——点击某个AtGrid不能跳转

Posted 2022-11-29 一 研 为定

项目场景：

开发微信小程序的过程中，我想使用Grid 栅格布局，栅格布局中点击每个小图标都能跳转到相应的页面。我选择使用Taro UI官网的模板。

---

问题描述：

在我使用了官网给的代码后，发现点击某个图标并不能跳转到我想要的位置。
我使用官方代码的方法是：
1.在 Taro 文件中引入组件

import  AtGrid  from "taro-ui"

如果你的代码中引用了类似import AtGrid from "taro-ui"这样方式的代码，那末你可以直接把AtGrid写在里面，比如

import  AtInput, AtTabs,AtButton,AtTabsPane,AtGrid   from "taro-ui"

2.布局（粘贴官网上给的如下模板）
我选择的是矩形用法

<AtGrid mode='rect' data=
 [
    
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
      value: '领取中心'
    ,
    
      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      value: '找折扣'
    ,
    
      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
      value: '领会员'
    ,
    
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
      value: '新品首发'
    ,
    
      image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
      value: '领京豆'
    ,
    
      image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
      value: '手机馆'
    
  ]
 />

3.注意要把第2步的代码粘贴到

render() 

里面，以下是例子

render() 
    return (
      <View className='wrap-flex'>
          
        <AtGrid mode='rect'  columnNum=1 onClick=this.itemClick.bind(this) data=
    [
    
      image:  privatefunds,
      value: '到户资金'
    ,
    
      image: livelihoodprojects,
      value: '民生项目'
    ,
    
      image: livelihoodpolicy,
      value: '民生政策'
    ,
    
      image: socialsecurity,
      value: '社保查询'
    
  ]
 />
        
   </View>
    );
  

---

原因分析：

上面我讲述了如何使用Taro UI官方模板，然后我将从一下几个方面分析点击某个模块不能跳转的原因：
1.缺少以下代码
大家可以观察到，我下面的代码虽然很多，但主要分为两类，第一类跳转的代码，比如gohome这个代码，它后面的url里的路径就代表你点击gohome模块，会跳转到那个地方；
第二类代码是引入各个模块
想要页面准确跳转，这两类代码不能少

gohome() 
    Taro.navigateTo( url: '/pages/feedback/index' )
  
  gologin() 
    Taro.navigateTo( url: '/pages/feedback/index' )
  
  goregister() 
    Taro.navigateTo( url: '/pages/feedback/index' )
  
  goservice() 
    Taro.navigateTo( url: '/pages/feedback/index' )
  
  

  itemClick(item, index)  
    switch(index)
      case 0://主页
        this.gohome()
        break;
      case 1://登录
        this.gologin()
        break;  
      case 2://注册
        this.goregister()
        break;
      case 3://服务
        this.goservice()
        break;
      default:
        break;
    
    console.log(item, index) 
  

2.可能是缺少onClick=this.itemClick.bind(this)
观察官网给的模板就没有这个，我就在这里遇到过问题

<AtGrid mode='rect'  columnNum=1 onClick=this.itemClick.bind(this) data=
    [
    
      image:  privatefunds,
      value: '到户资金'
    ,

3、可能是你想要引入的网页没有在app.js中引入，比如你使用编辑home页，那你就要在app.js里写上它的路径，如本例：

class App extends Component 
  config = 
    pages: [
      'pages/login/index',
      'pages/home/index',
      'pages/my/index'
      ],

4.可能是你想用Grid栅格布局，但是没有在前面引入组件

import  AtGrid  from "taro-ui"

5.可能是引入某些图片时，扩展名没写对，或者图片路径没有写对，都是有可能导致页面不能加载出来的

解决方案：

我遇到的问题暂时就是这么多，欢迎大家来补充，大家共同学习，一起进步。