微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现-猿码集

1. 前言

微信小程序商城是越来越受欢迎的一种应用，而搭建商城的开发框架也十分关键。在本文中，我们将着重介绍https框架的搭建以及顶部和底部导航的实现，希望能够为大家提供一些参考。

2. https框架的搭建

在搭建微信小程序商城时，https框架搭建是必不可少的一步。下面我们来详细介绍如何搭建https框架。

2.1 申请https证书

在申请https证书的过程中，我们可以选择免费的证书或者购买收费证书。这里我们选择http://freessl.cn/免费https证书工具进行申请。

首先，我们需要在网站上进行注册，并填写相关信息。注册完毕后，在控制面板中申请证书，输入相关信息，等待审核即可。

2.2 升级微信小程序账号

为了支持https，请先将小程序账号升级到企业认证版本或个人认证版本。

2.3 设置request合法域名

打开小程序开发后台，在“开发设置 -> 服务器域名”中设置request合法域名，将申请的https证书绑定在域名上。

2.4 修改小程序请求方法

在开发过程中，所有的请求方法都需要使用https协议，而不是http协议。为了做到这一点，我们需要在request方法中添加一个配置参数，即“{https:true}”。


wx.request({
  url: 'https://example.com',
  https: true,
  success: function(res) {
    console.log(res)
  }
})

3. 顶部和底部导航的实现

在微信小程序商城中，顶部和底部导航起到了非常关键的作用，它们能够方便用户快速地访问相关页面。下面我们来介绍如何实现顶部和底部导航。

3.1 顶部导航的实现

顶部导航的实现需要在app.json中设置navigationBarTitleText和navigationBarBackgroundColor等属性。

"navigationBarTitleText": "商城首页", "navigationBarBackgroundColor": "#ffffff",

同时，在页面的wxml中添加顶部导航栏的相关代码。


<view class="page-header">
  <view class="page-header-title">{{pageTitle}}</view>
</view>

3.2 底部导航的实现

底部导航的实现需要在app.json中设置tabBar和pagePath等属性。


"tabBar": {
  "color": "#999999",
  "selectedColor": "#333333",
  "list": [
    {
      "pagePath": "/pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "/pages/category/category",
      "text": "分类"
    },
    {
      "pagePath": "/pages/cart/cart",
      "text": "购物车"
    },
    {
      "pagePath": "/pages/user/user",
      "text": "个人中心"
    }
  ]
}

在页面的wxml中添加底部导航栏的相关代码。


<view class="tab-bar">
  <view class="tab-bar-item {{currentTab == 0 ? 'active' : ''}}" bindtap="switchTab" data-tab="0">
    <image src="{{currentTab == 0 ? '/images/tab-home-active.png' : '/images/tab-home.png'}}" class="tab-bar-icon" />
    <text class="tab-bar-text">首页</text>
  </view>
  <view class="tab-bar-item {{currentTab == 1 ? 'active' : ''}}" bindtap="switchTab" data-tab="1">
    <image src="{{currentTab == 1 ? '/images/tab-category-active.png' : '/images/tab-category.png'}}" class="tab-bar-icon" />
    <text class="tab-bar-text">分类</text>
  </view>
  <view class="tab-bar-item {{currentTab == 2 ? 'active' : ''}}" bindtap="switchTab" data-tab="2">
    <image src="{{currentTab == 2 ? '/images/tab-cart-active.png' : '/images/tab-cart.png'}}" class="tab-bar-icon" />
    <text class="tab-bar-text">购物车</text>
  </view>
  <view class="tab-bar-item {{currentTab == 3 ? 'active' : ''}}" bindtap="switchTab" data-tab="3">
    <image src="{{currentTab == 3 ? '/images/tab-user-active.png' : '/images/tab-user.png'}}" class="tab-bar-icon" />
    <text class="tab-bar-text">我的</text>
  </view>
</view>

4. 结语

在本文中，我们详细介绍了https框架的搭建以及顶部和底部导航的实现。希望这些内容能够对大家在微信小程序商城开发中起到一定的帮助。

微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现