Taro使用小结

最新推荐文章于 2024-12-30 11:55:56 发布

闷葫芦-

最新推荐文章于 2024-12-30 11:55:56 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端

本文链接：https://blog.youkuaiyun.com/qq_34527715/article/details/88813739

WEB前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种在小程序中配置路由的方法，通过在app.js中指定页面路径即可实现导航。此外，还详细说明了如何在代码中引用图片资源，包括直接在HTML中使用以及在循环数组中动态加载图片的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.不需要注册路由，只需要在app.js里写上文件对应的路径即是路由：

config = {
    pages: [
      'pages/case/index',
      'pages/index/index',
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

访问路径：http://127.0.0.1:10086/#/pages/solution/index

2.图片引用使用

<Image className='content-catalog-icon' src={require('../../assets/images/solution/icon_P01.png')}></Image>

但如果是使用数组循环时，需要在数组中使用require，而不是html代码中

//数据
contentList:[
        {
            id : "safe",
            name : "云安全解决方案",
            icon : require("../images/solution/icon_P01.png"),
            articleList : [{
                articleId:1,
                title:"111111",
                url: 'https://mp.weixin.qq.com/mp/homepage?__biz=MjM5MjcyMjU5NA%3D%3D&hid=11&sn=0a578331a3065e6bf0ad2262c7db6a27&scene=18'
            }]

        },
       
    ]


//js
import solutionList from '../../assets/json/solutions'

render () {
   // 列表
    const contentList = (
      solutionList.contentList.map((item,index) => {
        let content = (<View className="content" id={item.id}>
        <View className="content-catalog">
          <Image className='content-catalog-icon' src={item.icon}></Image>
          <View className="content-catalog-txt">{item.name}</View>
        </View>
        </View>)

        return content
      })
    )


<View>{contentList} </View>

}