Taro开发多端小程序的一些全局配置，页面配置，购物车，Taro UI组件库 以及API的使用_taro 全局配置缺少 pages 字段,请检查!

好多小白在做微信小程序开发的时候比较懵，今天给大家推荐一款Taro框架，简单的说明一下全局配置，以及页面配置

一. 完整配置项说明请参考Taro配置（注意各家小程序的配置差异）直接上干货

{
  "pages": [
    "pages/home/home",
    "pages/kind/kind",
    "pages/index/index",
    "pages/cart/cart",
    "pages/logs/logs",
    "pages/test/test",
    "pages/user/user",
    "pages/detail/detail",
    "pages/map/map"
  ],
  "window": {  //页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "嗨购",
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark",
    "backgroundColorTop": "#0f0",
    "onReachBottomDistance": 50
  },
  "tabBar": {  //用来配置底部导航栏
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#efefef",
    "borderStyle": "white",
    "list": [  //配置页面路径以及icon图标及其选中，最少2个，最多5个
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/resources/home.png",
        "selectedIconPath": "/resources/home_active.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath": "/resources/kind.png",
        "selectedIconPath": "/resources/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/resources/cart.png",
        "selectedIconPath": "/resources/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/resources/user.png",
        "selectedIconPath": "/resources/user_active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 6000,
    "connectSocket": 5000,
    "uploadFile": 4000,
    "downloadFile": 5000
  },
  "permission": {
    "scope.userLocation": {
      "desc": "小程序位置信息展示11111111111111111111111111"
    }
  },
  "navigateToMiniProgramAppIdList": [
    "wx5dfe0dd623d5ae6b"
  ],
  "sitemapLocation": "sitemap.json",
  "debug": false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

二.购物车逻辑

基于Taro React微信小程序购物车
建立pages/cartt/index.jsx的文件写法与React基本一致
首先引入各个需要使用的模块,

import Taro, { Component } from '@tarojs/taro'
// 为什呢 View 要单独引入，react 说明 组件的首字母一定要大写，小写被当做html标签
import { View, Checkbox, CheckboxGroup, Button } from '@tarojs/components'
import { request } from './../../utils'
import './index.scss'
1
2
3
4
5

构造组件

class Index extends Component {
  constructor (props) { //要么不写constructor,要么必须带props，以及super(props),
    super(props)
    this.state = { //拿到你所需要的数据的初始状态
      cartlist: [],
      isTrue: true,
      totalNum: 0,
      totalPrice: 0,
      allSelected: true
    }
  }
  componentDidShow () {  //生命周期钩子函数页面展示出来
1
2
3
4
5
6
7
8
9
10
11