目录

一、项目创建

二、基础库设置和默认清除

三、vant weapp的引入

四、自定义tabbar

4.1、添加自定义配置项

4.2、配合UI组件库

五、小程序的请求

六、基础组件

1.scrollview

2.Rich-text

3.picker

4.map

---

一、项目创建

  "pages": [
    "pages/home/home",
    "pages/topic/topic",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user",
    "custom-tab-bar/index"
  ],

二、基础库设置和默认清除

基础库选择 2.18.0

app.js中删除onLaunch方法

pages下删除logs页面

三、vant weapp的引入

vant weapp-小程序vant版文档：https://vant-contrib.gitee.io/vant-weapp/#/home

1、打开调试器终端，安装vant weapp：

npm init -y
​
# 通过 npm 安装 
npm i @vant/weapp -S --production  
​
# 或者 通过 yarn 安装
yarn add @vant/weapp --production

2、将 app.json 中的 "style": "v2" 删除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3、修改 project.config.json

把packNpmManually的值改成 "packNpmManually": true,

把 packNpmRelationList ，添加两个项

"packNpmManually": true,
"packNpmRelationList": [{
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./"
}],

4、构建npm包

打开微信开发者工具，点击 工具 -> 构建 npm，

点击右侧详情--> 本地设置 --> 并勾选 使用 npm 模块 选项， 新版没有这个选项了,不用选择了

构建完成后，即可引入组件。

引入组件 , 经常引入成功 , 但是不出来  -------- 先重启 再排错

5、测试使用vant内置的组件

app.json中：

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

在home组件中直接接着使用：

<van-button type="primary">按钮</van-button>

四、自定义tabbar

4.1、添加自定义配置项

app.json中配置默认tabbar：

  "tabBar": {
    "custom": true,
    "color": "#666",
    "selectedColor": "#8B0000",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页"
    }, {
      "pagePath": "pages/topic/topic",
      "text": "专题"
    }, {
      "pagePath": "pages/category/category",
      "text": "分类"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "购物车"
    }, {
      "pagePath": "pages/user/user",
      "text": "用户"
    }]
  }

想要配置自定义tabbar，tabBar中需要添加属性

"custom": true,

且在项目中需要配置路径(官方要求，不能改变)

"custom-tab-bar/index"
文件夹名/组件名

4.2、配合UI组件库

文档：https://vant-contrib.gitee.io/vant-weapp/#/tabbar

在custom-tab-bar/index.json中：

{
  "usingComponents": {},
  "component": true
}

在custom-tab-bar/index.wxml中：

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#8B0000"
  inactive-color="#666">
  <van-tabbar-item icon="{{item.icon}}" wx:for="{{tabbarArr}}" wx:key="index">{{item.text}}</van-tabbar-item>
</van-tabbar>

Component({
  data: {
    tabbarArr: [{
      pagePath: "/pages/home/home",
      text: "首页",
      icon: 'home-o'
    }, {
      pagePath: "/pages/topic/topic",
      text: "专题",
      icon: 'label-o'
    }, {
      pagePath: "/pages/category/category",
      text: "分类",
      icon: 'apps-o'
    }, {
      pagePath: "/pages/cart/cart",
      text: "购物车",
      icon: 'cart-o'
    }, {
      pagePath: "/pages/user/user",
      text: "用户",
      icon: 'user-o'
    }],
    // 当前项
    active: 0,
  },
  methods: {
    onChange(event) {
      console.log(event.detail);
      // event.detail 的值为当前选中项的索引
      this.setData({
        active: event.detail
      });

      // 切换tabbar
      wx.switchTab({
        url: this.data.tabbarArr[event.detail].pagePath,
      })
    },
  }
})

 保存编译就可以看到效果了。

但目前只能切换，当前样式还是有问题(active被重置了)，需要在进入到这个页面的时候修改这个active的值为对应的索引值

onShow: function () {
    this.getTabBar().setData({
        active:0
    })
},

五、小程序的请求

wx.request({
    url:请求的路径,
    data:{参数},
    header:{请求头信息},
    timeout:延迟时间,
    method:请求方式(默认get),
    dataType:返回值类型(默认json),
    success:(res)=>{
    	res就是成功的数据
    },
    fail:(err)=>{
    	err失败的报错
    }
})

1. 登录小程序 微信公众平台 后台

六、基础组件

1.scrollview

当涉及到在微信小程序中使用 scroll-view 组件时，通常用于显示可滚动的内容区域，特别是当内容超过可视区域时。以下是一个带有注释的简单示例代码：

<scroll-view scroll-x style="white-space: nowrap; height: 200px;">
  <!-- scroll-x 表示允许横向滚动 -->
  <!-- white-space: nowrap; 禁止换行，让内容在一行内水平显示 -->
  <view wx:for="{{scrollItems}}" wx:key="index" class="scroll-item">
    <!-- 遍历 scrollItems 数组，并将每个项渲染为一个 .scroll-item -->
    {{item}}
  </view>
</scroll-view>

在这个示例中：

• <scroll-view> 是一个可滚动的视图容器。
• scroll-x 属性允许内容横向滚动。
• style="white-space: nowrap; height: 200px;" 设置了内联样式，禁止内容换行并限制容器高度为 200px。
• <view wx:for="{{scrollItems}}" wx:key="index" class="scroll-item"> 使用 wx:for 循环渲染 scrollItems 数组中的每个项为一个 <view> 元素，wx:key="index" 用于指定列表中项目的唯一标识。
• {{item}} 显示当前遍历到的项的内容。

在实际应用中，可以根据需要调整 scroll-view 的样式和属性，以实现不同的滚动需求，例如垂直滚动 (scroll-y) 或横向纵向同时滚动 (scroll-both)。

2.Rich-text

在微信小程序中，使用 rich-text 组件可以渲染包含富文本格式的内容，如 HTML 标签、样式和图片等。以下是一个带有注释的简单示例代码：

<rich-text nodes="{{richText}}" bindtap="onRichTextTap">
  <!-- 绑定 richText 变量作为 nodes 属性，渲染富文本内容 -->
</rich-text>

在这个示例中，richText 是一个包含富文本内容的变量，可以是一个字符串，也可以是一个经过处理的包含 HTML 标签的文本。例如：

Page({
  data: {
    richText: '<div style="color: red;">这是一段带有样式的富文本内容</div><p>这是一个段落</p><img src="https://example.com/image.jpg" />'
  },
  onRichTextTap: function(event) {
    // 点击富文本内容时触发的事件处理函数
    console.log('Rich-text tapped:', event);
  }
})

在这个 JavaScript 中：

• data 对象中的 richText 属性包含了一个带有样式和图片的富文本内容字符串。
• 在 rich-text 组件中，使用 nodes="{{richText}}" 将 richText 变量绑定到 nodes 属性，以渲染富文本内容。

在上述代码中，<div> 标签用于包裹一段带有红色文字颜色的文本，<p> 标签用于定义一个段落，<img> 标签用于插入图片。这些标签和样式会被 rich-text 组件解析和显示。

另外，可以通过 bindtap 绑定 onRichTextTap 方法来处理富文本内容的点击事件。当用户点击富文本内容时，会触发 onRichTextTap 方法，可以在方法中进行相应的处理逻辑。

这种方式可以实现在小程序中展示复杂的富文本内容，如带有样式、链接和图片的文本信息。

3.picker

在微信小程序中，picker 组件用于展示可选项列表，并允许用户从中选择。以下是一个示例代码，包含了注释以便理解每个部分的作用：

<view class="container">
  <picker mode="selector" range="{{array}}" bindchange="onPickerChange">
    <!-- mode="selector" 表示选择器模式，range="{{array}}" 绑定选择器的选项数组 -->
    <view class="picker">
      当前选择: {{array[index]}}
    </view>
  </picker>
</view>

在这个示例中：

• <picker> 是一个选择器组件，用于展示可选项列表和获取用户选择的值。
• mode="selector" 设置选择器的模式为选择器模式，即用于选择一个固定的范围内的选项。
• range="{{array}}" 绑定了 array 数组作为选择器的选项列表，其中 array 是在页面的 data 属性中定义的数据。
• bindchange="onPickerChange" 绑定了 onPickerChange 方法，当用户选择项发生改变时触发该方法。

在 JavaScript 部分，需要在页面的 data 中定义 array 数组和 index 变量：

Page({
  data: {
    array: ['选项1', '选项2', '选项3', '选项4'],
    index: 0  // 默认选中的索引，这里默认选择第一个选项
  },
  onPickerChange: function(e) {
    // 选择器改变时触发的方法
    console.log('picker发送选择改变，携带值为', e.detail.value);
    this.setData({
      index: e.detail.value  // 更新 index 值为选择器选择的值的索引
    });
  }
})

在这个 JavaScript 示例中：

• array 数组包含了选择器的选项列表，例如 ['选项1', '选项2', '选项3', '选项4']。
• index 变量用于存储当前选择的索引，默认为 0，即默认选择第一个选项。
• onPickerChange 方法是一个事件处理函数，用于处理用户选择选项改变时的逻辑。在这里，它会打印选择的值并更新 index 变量的值，以反映用户的选择。

这样的实现方式可以让用户通过选择器从预定义的选项中选择一个值，适用于需要用户选择固定选项的场景，如选择性别、年龄段等。

4.map

在微信小程序中，使用 map 组件可以集成地图功能，用于展示地理位置、标记点位、显示路线等。以下是一个简单的示例代码，包含了注释以便理解每个部分的作用：

<view class="container">
  <map 
    id="myMap" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    markers="{{markers}}" 
    show-location 
    bindmarkertap="onMarkerTap"
    bindcontroltap="onControlTap"
    style="width: 100%; height: 300px;"
  >
    <!-- 设置地图的基本属性 -->
  </map>
</view>

在这个示例中：

• <map> 是地图组件，用于在小程序中显示地图。
• id="myMap" 给地图设置一个唯一的 ID。
• longitude="{{longitude}}" 和 latitude="{{latitude}}" 绑定了地图的经度和纬度，用来确定地图的中心位置。
• markers="{{markers}}" 绑定了 markers 数组，用于在地图上显示标记点。
• show-location 表示在地图上显示当前位置，需要用户授权。
• bindmarkertap="onMarkerTap" 绑定了 onMarkerTap 方法，处理标记点被点击时的事件。
• bindcontroltap="onControlTap" 绑定了 onControlTap 方法，处理地图控件被点击时的事件。
• style="width: 100%; height: 300px;" 设置了地图的宽度和高度。

在 JavaScript 部分，需要在页面的 data 中定义 longitude、latitude 和 markers：

Page({
  data: {
    longitude: 113.324520,
    latitude: 23.099994,
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      title: 'T.I.T 创意园'
    }]
  },
  onMarkerTap: function(e) {
    // 标记点被点击时触发的事件处理函数
    console.log('Marker tapped:', e.markerId);
  },
  onControlTap: function(e) {
    // 地图控件被点击时触发的事件处理函数
    console.log('Control tapped:', e.controlId);
  }
})

在这个 JavaScript 示例中：

• longitude 和 latitude 定义了地图的初始中心位置。
• markers 数组定义了一个标记点，包含了标记点的经纬度、标题等信息。
• onMarkerTap 方法是一个事件处理函数，用于处理标记点被点击时的逻辑。
• onControlTap 方法是一个事件处理函数，用于处理地图控件被点击时的逻辑。

通过这样的实现，可以在微信小程序中集成地图功能，展示地理位置信息并响应用户的交互操作，如点击标记点或地图控件。