通常我們的個人中心頁面，都具備有其他模組的入口方式。入口方式主要有以下兩種：

例如：

將小程式的跳轉頁面的連結，放入JS中的 data  資料。wxml中通過使用wx:for 實現入口模組跳轉問題。

HTML:

<view class='service'>
    <view class='service-title'>我的服務</view>
    <view class='icons'>
      <block wx:for="{{list}}" wx:key="{{index}}">
        <view class='user-item' bindtap='toMyMore' data-url='{{item.url}}'>
          <button open-type="{{item.url}}" class='button'>
            <image src='{{item.img}}' class='list-icon'></image>
            <view class='list-title'>{{item.title}}</view>
          </button>
        </view>
      </block>
    </view>
  </view>
 

JS:

toMyMore(event){
    let url = event.currentTarget.dataset.url
    if(url){
      wx.navigateTo({
        url: url,
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '功能還在開發中....',
      })
    }
    
  },

CSS：

.order-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  vertical-align: middle;
}

.order-title {
  font-size: 28rpx;
  width: 100%;
  vertical-align: middle;
}

.list-icon {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

.list-title {
  font-size: 28rpx;
  width: 100%;
  margin-top: 8rpx;
}

.all-order {
  color: #999;
  font-size: 28rpx;
}

.order {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 20rpx);
  height: 94rpx;
  line-height: 94rpx;
  padding: 0 20rpx;
  margin: 10rpx;
  box-sizing: border-box;
  border-radius: 6rpx;
  background-color: #fff;
}

.service {
  width: calc(100% - 20rpx);
  margin: 10rpx;
  background-color: #fff;
}

.service-title {
  width: 100%;
  height: 82rpx;
  line-height: 82rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #333;
  font-size: 32rpx;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
}

.service .icons {
  display: inline-flex;
  flex-direction: row;
  /* 自動換行 */
  flex-wrap: wrap;
  width: 100%;
}

.service .icons .user-item {
  width: 25%;
  height: 156rpx;
  padding-top: 24rpx;
  text-align: center;
  border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
}

.button {
  border: none;
  outline: none;
  background: transparent;
  margin: 0;
  padding: 0;
  line-height: 44rpx;
  padding-bottom: 46rpx;
}

.button::after {
  border: none;
}
 

JS:

list: [
      {
        img: '../../images/mine/[email protected]',
        title: '晒單',
        url: '../sunburn/sunburn'
      },
      {
        img: '../../images/mine/[email protected]',
        title: '地址管理',
        url: '../address/address'
      },
      {
        img: '../../images/mine/[email protected]
 
',
        title: '衣櫥',
        url: '../wardrobe/wardrobe'
      }, 
      {
        img: '../../images/mine/[email protected]',
        title: '優惠券',
        url: '',
      },
      {
        img: '../../images/mine/[email protected]',
        title: '客服',
        url: 'contact'
      },
      {
        img: '../../images/mine/[email protected]',
        title: '意見反饋',
        url: 'feedback'
      }
    ]