前言

上周花了些时间写小程序，学习小程序的时间不是很长，在写项目的过程中可以学到更多。总结了一下我遇到的几点问题，如果你也有这类疑问，希望这篇文章可以帮到你。

wx.switchTab 与wx.navigateTo 跳转页面的区别：

wx.switchTab 用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。而wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabBar 页面。

他们使用场景的区别：当要从首页跳转到点单页面，实现tabBar页面的跳转，没有值的传递，使用wx.switchTab。当在商品页面需要点击进入商品的详情时，这时候有值的传递，则使用 wx.navigateTo。

//跳转到点单页面
taptoOrder() {
   wx.switchTab({
     url: '/pages/order/order',
   })
 },

// 去商品详情页 
 tapToDetail(e) {
   const id = e.currentTarget.dataset.fid;
   wx.navigateTo({
     url: '/pages/detail/detail?_id='+id,
   })
 },

使用vant组件

写小程序一定要学会使用组件，可以让页面很快看到效果，非常的方便，这也是小程序这么火的原因吧。我这次使用了vant组件。

通过npm安装

npm i @vant/weapp -S --production

调用组件在文档(vant-contrib.gitee.io/vant/v3/#/z…) 中找到要使用的组件，按照文档的步骤，取代码，修改成自己需要的数据。

组件化思想

在使用vant组件时，发现组件真的香啊，可以实现代码的复用，让小程序方便了很多。我们在写项目的时候也应该有组件化思想，可以少写很多代码，更重要的是让代码看上去更整洁。

这次的小程序中，我将轮播图的代码进行了组件化，只需要写一次代码，可以在多个页面调用。步骤如下：

首先是实现代码的封装创建一个Component文件夹，在该文件夹中新建page，命名为swiper

swiper.wxml

<view class="swiperContainer">
  <swiper class="swiper_box" autoplay="true" interval="5000" circular="true" indicator-dots="true">
    <block wx:for="{{imgUrls}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="750rpx" height="500rpx" mode="aspectFill"/>
      </swiper-item>
    </block>
  </swiper>
</view>

swiper.css

.swiperContainer{
  width: 750rpx;
  position: relative;  
}
.swiper_box {
  width: 100%;
  height:500rpx;
}
.slide-image {
  width: 100%;
  height:500rpx;
}

swiper.json

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

swiper.js

Page({
  properties: {
    imgUrls: Object
  },
  data: {
  }
  })

代码的复用在首页index中使用轮播图组件

index.json

{
  "usingComponents": {
    "index-swiper": "/components/swiper/swiper"
  }
}

index.wxml

<!-- 轮播图 -->
<view class="swiper-container">
<index-swiper imgUrls="{{imgUrls}}"></index-swiper>
</view>

只需要在index.js data中写入imgUrls的图片地址，就可以实现轮播图效果。

创建云数据库，显示到页面

我们知道，微信的云开发非常的火热，可以很方便对数据进行操作，学习小程序云开发是非常重要的，那么将数据存储到云数据库中，对数据处理，将数据显示到页面中是走进云开发的第一步。

1. 首先在创建小程序的时候使用云开发
1. 在数据库中创建数据集合
1. 在数据集合中添加具体数据
1. 添加云函数方法 addData

下面是代码部分的操作：

1. 在云函数方法 addData中的index.js 进行初始化

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()
const productsCollection = db.collection('products')
// 云函数入口函数
exports.main = async (event, context) => {
  return ({
    
  })
}

1. 在需要显示数据的页面 order.js 文件中拿到实例

const db = wx.cloud.database()
const productsCollection = db.collection('products')

在生命周期函数onload中添加代码

onLoad: function (options) {
    productsCollection.get().then(res =>{
      this.setData({
        products:res.data
      })
    })
  },

1. 在页面中显示数据，order.wxml代码如下

<view wx:if="{{currentSecName == '人气推荐'}}">
  <block wx:for="{{products}}">
  <van-card
  num="1"
  tag="hot"
  price="{{item.price}}"
  desc="{{item.desc}}"
  title="{{item.title}}"
  thumb="{{ item.img }}"
>

最终页面效果

总结

这次做的是一个仿古茗的点单小程序，感觉收获很多，学会使用vant组件，用组件化思想让代码更简洁，学习了云开发处理数据。希望看完这篇文章的你能有所帮助。

新手写小程序遇到的问题总结

前言

wx.switchTab 与wx.navigateTo 跳转页面的区别：

使用vant组件

组件化思想

创建云数据库，显示到页面

总结