新手入门实战，微信小程序开发导航页

最新推荐文章于 2023-04-22 11:12:27 发布

爱微客IVke

最新推荐文章于 2023-04-22 11:12:27 发布

阅读量285

点赞数

分类专栏：微信小程序文章标签：小程序 flex javascript css3

本文链接：https://blog.csdn.net/hzxuyp/article/details/115283573

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一直在做后端Java开发，前端一直是半桶水，先做个微信小程序练练手，可以学到：引入第三方组件库、简单flex布局、自定义组件等，废话不多说，直接开始。
先看最终效果：
在这里插入图片描述

引入第三方组件库

此处使用的是Lin UI，这款组件库是林间有风团队做的，语法形式基本和原生小程序一致，长得也比较好看，所以就选它了。
先来个官方网址： Lin UI官方文档。
安装流程是比较简单的，项目根目录运行：


1. npm init  
安装过程中会让输入一些描述信息，一路回车，最后来个yes就行。  

2. npm install lin-ui

这样就完成了安装，此时项目会多一个文件夹：node_modules，这个就是Lin UI的源代码了。
虽然安装好了，但是目前小程序里还不能直接使用，需要编译一下，在微信开发者工具找到：工具–构建npm，基本几秒钟就编译完成，编译完成后项目会多出文件夹：miniprogram_npm，到这里，表示组件已经安装完成，效果如下：

在这里插入图片描述
注意：微信开发者工具-详情-本地设置-增强编译，记得把这个勾选上，否则会报错。

tabBar配置

app.json源码如下：

{
  "pages":[
    "pages/index/index",
    "pages/recomm/recomm"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "导航",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "borderStyle": "white",
    "selectedColor": "#d4237a",
    "position": "bottom",
    "color": "#8a8a8a",
    "backgroundColor": "#F4F5F8",
    "list": [
      {
        "text": "导航",
        "pagePath": "pages/index/index",
        "iconPath": "/images/tabbar/daohang0.png",
        "selectedIconPath": "/images/tabbar/daohang1.png"
      },
      {
        "text": "推荐",
        "pagePath": "pages/recomm/recomm",
        "iconPath": "/images/tabbar/tuijian0.png",
        "selectedIconPath": "/images/tabbar/tuijian1.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

主要添加的内容是tabBar，tabBar的数量官方有规定2~5个，此处使用了两个：首页和推荐，每个字段的意义看字面意思就大概能猜出来，app.json包含了很多可配置项，具体可以查看官方文档。
app.json官方说明文档.

自定义组件

在这里插入图片描述

先看一下页面，我把页面抽出来三个组件，如上图所示，
①：panel，表示每个单独站点。
②：panelitem，表示一组相似站点。
③：panels，表示一类站点，与左侧的tab相结合。
组件的好处就是能很好的复用，抽象复用的理念，无论前后端开发都一样。

①panel的源码：

// index.wxml
<view class="container" bind:tap="goToPage">
  <image class="panel-img" src="{{ panelPage.pimg }}"></image>
  <text class="panel-text">{{ panelPage.ptitle }}</text>
</view>

// index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    panelPage:Object
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 跳转站外
     */
    goToPage (event) {
      wx.navigateToMiniProgram({
        appId: this.properties.panelPage.appid,
        path: this.properties.panelPage.ppage,
        envVersion: "release",
        success(res) {

        }
      });
    }
  }
})

// index.wxss
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel-img {
  width: 100rpx;
  height: 100rpx;
}

.panel-text {
  font-size: 25rpx;
  margin-top: 10rpx;
  color: rgb(128, 125, 125);
}

②panelItem的源码：

// index.wxml
<view class="container">
  <text class="plnelitem-title">{{ panelItem.panelTitle }}</text>
  <view class="i-container">
    <block wx:for="{{ panelItem.panels }}" wx:key="index">
      <my-panel panelPage="{{ item }}" class="my-panel-class"/>
    </block>
    
  </view>
</view>

// index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    panelItem:Object
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    ss() {
      console.log(this.properties.panelItem);
    }
  }
})

// index.wxss
.container {
  display: flex;
  flex-direction: column;
}

.plnelitem-title {
  font-size: 30rpx;
  margin-top: 30rpx;
  margin-bottom: 20rpx;
}

.my-panel-class {
  margin: 20rpx 20rpx;
}

.i-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.i-container:after {
  content: '';
  height: 0;
  width: 136rpx;
}

// index.json 引入①组件
{
  "component": true,
  "usingComponents": {
    "my-panel":"/components/panel/index"
  }
}

③panels的源码：

// index.wxml
<view class="container">
  <block wx:for="{{ panelList }}" wx:key="index">
    <my-panel-item panelItem="{{ item }}" />
  </block>
</view>

// index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    panelList:Array
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

// index.wxss
.container {
  display: flex;
  flex-direction: column;
  margin-left: 50rpx;
  margin-right: 50rpx;
}

// index.json，此处引入②组件
{
  "component": true,
  "usingComponents": {
    "my-panel-item":"/components/panelitem/index"
  }
}

首页

首页可以分为左右两部分，左侧使用了Lin UI的tabs组件，右侧使用的是我们自定定义的panels组件，引入第三方组件和自定义组件的方式一样：

// index.json
{
  "usingComponents": {
    "l-tabs":"/miniprogram_npm/lin-ui/tabs/index",
    "l-tabpanel":"/miniprogram_npm/lin-ui/tabpanel/index",
    "my-panels":"/components/panels/index"
  }

// index.wxml
<view class="container">
  <l-tabs  placement="left" 
            l-class-active="active commom" 
            l-class-inactive="inactive commom" 
            l-class-header="header"
            l-class-line="line">
    <block wx:for="{{ daohang }}" wx:key="index">
      <l-tabpanel tab="{{ item.tabName }}" key="{{ item.tabKey }}" slot="{{ item.tabKey }}" >
        <scroll-view scroll-y enable-flex class="tabplanel-scroll" >
          <my-panels panelList="{{ item.panelList }}" />
        </scroll-view>
      </l-tabpanel>
    </block>
  </l-tabs>

</view>

// index.js
import {daohangData} from '../../data/data.js';

Page({
  data: {
    daohang:Array
  },
  
  onLoad() {
    this.setData({
      daohang:daohangData
    })
    console.log(this.data.daohang);
  },
  
})

// index.wxss
.container {
  height: 100vh;
}
.commom {
  max-height: 50rpx !important;
}

.line {
  background-color: #d4237a !important;
  width: 10rpx !important;
  border-radius: 0 !important;
}
.active {
  color: #d4237a !important;
  /* background-color: white !important; */
}
.inactive {
  background-color: #F4F5F8 !important;
  color: #8a8a8a !important;
}

.tabplanel-scroll {
  height: 100vh;
}

}

代码比较简单，需要单独说明的是：

数据源使用了本地数据，正常一般是要后端提供API。
tabs组件的默认样式不满足要求，使用了外部样式类，具体使用方法可参考文档：tabs使用文档

推荐页

在这里插入图片描述
推荐页更加简单，其实就是一个item的列表，此处直接使用Lin UI的Card组件，源码如下：

//recomm.wxml
<view class="container">
  <block wx:for="{{ recomm }}" wx:key="index">

    <l-card  bind:tap="goToPage" data-it="{{ item }}"
    type="primary" 
              l-class="left-card"
            l-img-class="left-img" 
            l-title-class="left-title"
            position="left" 
            image="{{ item.pimg }}"
      title="{{ item.ptitle }}">
      <view class="content">
        {{ item.pdesc }}
      </view>
    </l-card>

  </block>

</view>

// recomm.js
import {recomData} from '../../data/data.js';


Page({

  /**
   * 页面的初始数据
   */
  data: {
    recomm:Array
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad (options) {
    this.setData({
      recomm:recomData
    });
    console.log(this.data.recomm);
  },

  /**
     * 跳转站外
     */
    goToPage (event) {
      wx.navigateToMiniProgram({
        appId: event.currentTarget.dataset.it.appid,
        path: event.currentTarget.dataset.it.ppage,
        envVersion: "release",
        success(res) {

        }
      });
    },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

// recomm.wxss
.container {
  display: flex;
  flex-direction: column;
}

.left-card {
  margin-top: 10rpx !important;
  margin-bottom: 10rpx !important;
  font-size: 28rpx !important;
  color:#8a8a8a;
}

.left-img {
  width: 100rpx !important;
  height: 100rpx !important;
}

.left-title {
  font-size: 35rpx !important;
  margin-bottom: 10rpx !important;
}

// recomm.json
{
  "usingComponents": {
    "l-card":"/miniprogram_npm/lin-ui/card/index"
  }
}

到这里，整个小程序的源码就完了，整体是比较简单的，尤其是引入Lin UI后，很多组件可以直接使用，节省了很多时间，作为一个新手入门级练手是比较合适的。
附上源码：小程序导航码云

爱微客IVke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手入门实战，微信小程序开发导航页

一直在做后端Java开发，前端一直是半桶水，先做个微信小程序练练手，可以学到：引入第三方组件库、简单flex布局、自定义组件等，废话不多说，直接开始。先看最终效果：引入第三方组件库此处使用的是Lin UI，这款组件库是林间有风团队做的，语法形式基本和原生小程序一致，长得也比较好看，所以就选它了。先来个官方网址： Lin UI官方文档。安装流程是比较简单的，项目根目录运行：1. npm init 安装过程中会让输入一些描述信息，一路回车，最后来个yes就行。 2. npm inst
复制链接

扫一扫

专栏目录