微信小程序零基础入门踩坑之路

简介

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

本人是一名忠实的Android研发,没有出过轨,对于css html js等仅仅是一知半解,这是在业余之际觉得想接触一下web,其实刚出来小程序那时候就尝试过,不过由于工作较忙,中途放弃了,如今小程序发展的还是挺快的,还是特别想学下前端知识.一是总结,二是分享给有需要的人,节省时间,少百度一些.

不说废话,直接说有用的,开始吧.

---

申请帐号

1. 注册:小程序注册(不能是微信开放平台的邮箱)

2. 登录后, 我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 。

安装开发工具

1. 前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装.

2. 打开小程序开发者工具，用微信扫码登录开发者工具

3. 选择小程序项目类型

4. 填入你申请的APPID 会自动生成一个QuickStart Project 直接进入即可看到一个简单的小程序

5. 看看项目结构 挺清晰的.

​

6. 至此,第一个小程序已经呈现在你面前,开发工具顶部栏有预览,你可以用手机扫描体验一下.

   ---

   ​

编辑器选择

经过一顿百度和前端的朋友咨询,发现了目前网上流行的几款: 微信开发工具、VSCode、Subline、webstom......说多无益,我们就选朋友推荐的VSCode 其他的没用过,暂时不进行对比了.

• 当然了 我们是进行微信小程序开发,而且是没有前端基础的,所以建议先在微信开发工具中进行开发
• 如果喜欢其他编辑器也可以下载 VScode 里面有插件商店,提供各种插件,挺好的,主要是免费.

UI组件库使用

这里说明下为什么要有使用这个,正所谓站在前人的肩膀上,能够看的更远,看到的东西更多,省去了你在造轮子了,

为了更快更好的开放一款自己的小程序,对于UI有强烈要求的就要用到别人写好的组件库了,不为什么,因为我不懂前端,让我自己写要学基础好几天,不过话说回来,基础还是要学的,这里只是想最快速度了解前端和小程序开发整体

• 原生组件库 微信本身提供的一套基础组件 官方教程有详细文档
• WeUI 同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计
• MinUI 第三方基于规范的小程序组件库，简洁、易用、工具化,并支持wepy和组件化方案等
• ZanUI 第三方的一个颜值高、好用、易扩展的微信小程序 UI 库

立项

如果你有其他语言的开发基础,那么可以直接进行开发,别怕,我们边做边学,我用了一个星期搞定,你也可以3天或者1天.下面拿我的练习项目为例 《学安卓》数据来源 鸿洋大神的网站API 《玩安卓》用于搜集安卓技术文章及众多实用工具的,很方便,详细API可以查看玩安卓的API文档

下面我们就开始第一个页面的开发 这是效果图 功能很简单,banner+列表

##

页面的生命周期

Page({
  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {}
})
复制代码

首页

1.首页banner

http://www.wanandroid.com/banner/json

方法：GET
参数：无
复制代码

可直接点击查看示例：www.wanandroid.com/banner/json

2.首页文章列表

http://www.wanandroid.com/article/list/0/json

方法：GET
参数：页码，拼接在连接中，从0开始。
复制代码

可直接点击查看示例：www.wanandroid.com/article/lis…。

注意：页码从0开始，拼接在链接上。

其中有两个易混淆的字段:

"superChapterId": 153, 
"superChapterName": "framework", // 一级分类的名称
复制代码

superChapterId其实不是一级分类id，因为要拼接跳转url，内容实际都挂在二级分类下，所以该id实际上是一级分类的第一个子类目的id，拼接后故可正常跳转。

---

附上index.wxml参考代码:

<view class="swiper-container">
  <!--banner轮播组件-->
  <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="*this">
      <swiper-item>
        <image src="{{item.imagePath}}" mode="{{item.mode}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>
<!--banner文章列表组件-->
<view class="container artical-list">
  <block wx:for-items="{{articals}}" wx:for-item="artical" wx:key="*this">
    <view class="artical-item" bindtap='goToArticalDetail' data-index="{{index}}">
      <text class='artical-item-title'>{{artical.title}}</text>
      <wxc-flex class="warp" main="{{item_content_dir}}">
        <wxc-flex class="wrap" dir="{{dir}}">
          <view>
            <text class='artical-item-desc'>作者: </text>
            <text class='artical-item-desc_content'>{{artical.author}}</text>
          </view>
          <view class='category'>
            <text class='artical-item-desc'>分类: </text>
            <text class='artical-item-desc_content'>{{artical.superChapterName}}/{{artical.chapterName}}</text>
          </view>
          <view class='category'>
            <text class='artical-item-desc'>时间: </text>
            <text class='artical-item-desc'>{{artical.niceDate}}</text>
          </view>
        </wxc-flex>
        <image src="{{likesrc}}" style="width: 28px; height: 28px;" mode="{{mode}}" bindtap='onClickAddLike' ></image>
      </wxc-flex>

    </view>

  </block>
</view>
<!--上拉加载更多loading组件-->
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
  <view class="weui-loading"></view>
  <view class="weui-loadmore__tips">正在加载</view>
</view>
<!--上拉加载更多无数据提示-->
<view hidden="{{loadingMoreHidden ? true : false}}" class="no-more-photos">没有更多啦</view>
复制代码

附上index.js参考代码:

• data里是数据绑定的关键,即布局中定义的变量和这里都是对应的,当这里的值被赋值或变更,影响页面更新.

• 使用方法 变量名:默认值 如:imgUrls: []

• imgUrls:[] 为banner的数组来源,在布局wxml中可以找到 在wxml中一定是{{}}双层大括号才可以.

• ​ block为块 具体查看文档介绍

• ​ wx:for为循环列表对应的数据源 在小程序中即为数组对象

• ​ wx:key 为每个item的唯一标识

• item变量代指为循环列表默认的其中的元素对象 也可以指定名称 如:wx:for-item="{{banner_item}}"

//获取应用实例
var app = getApp()
Page({
  data: {
    imgUrls: [],
    mode: 'aspectFill',
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    articals: [],
    curPage: 1,
    perPageSize: 20,
    pageCount: 59,
    isHideLoadMore: false,
    loadingMoreHidden: true,
    dir:'top',
    item_content_dir:'between',
    likesrc:'../images/index/like_normal.png'
  },
  //进入文章详细页面
  goToArticalDetail: function (e) {
    var that = this
    var item_index = parseInt(e.currentTarget.dataset.index)
    console.log("item_index = " + item_index)
    wx.navigateTo({
      url: '../index-detail/index-detail?title=' + that.data.articals[item_index].title + '&link=' + that.data.articals[item_index].link
    })
  },
  onLoad: function () {
    console.log('onLoad')
    //显示标题菊花
    wx.showNavigationBarLoading()
    //获取轮播图
    this.getBanners()
    //默认加载第0页
    var curPage = 0
    //获取文章列表
    this.getArticals(curPage)
  },
  onPullDownRefresh: function () {
    this.data.curPage = 0
    this.getArticals(0)
    console.log('下拉刷新')
  },
  onReachBottom: function () {
    console.log('加载更多')
    if (!this.data.loadingMoreHidden) {

    } else {
      this.getArticals(this.data.curPage)
    }
    this.setData({
      loadingMoreHidden: true
    })

  },
  showAddItem: function () {
    this.setData({
      addVlue: !this.data.addVlue
    })

  },
  getArticals: function (artical_pageindex) {
    var that = this
    wx.request({
      url: 'http://www.wanandroid.com/article/list/' + artical_pageindex + '/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.hideNavigationBarLoading()
        that.setData({
          perPageSize: res.data.data.size,
          curPage: res.data.data.curPage,
          pageCount: res.data.data.pageCount
        })
        var articalsTemp = that.data.articals
        if (that.data.curPage == 1) {
          articalsTemp = []
        }
        var articals = res.data.data.datas
        if (articals.length < that.data.perPageSize) {
          console.log('没有更多了')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: false
          })
        } else {
          console.log('有更多可加载')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: true,
            curPage: that.data.curPage + 1
          })
        }


      }
    })
  },
  getBanners: function () {
    var that = this
    wx.request({
      url: 'http://www.wanandroid.com/banner/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.stopPullDownRefresh()
        that.setData({
          imgUrls: res.data.data
        })
      }
    })
  },
  //添加文章到我的收藏
  onClickAddLike: function(){
    
  }

})
复制代码

附上index.wcss参考代码:

/**index.wxss**/
.container {
  background-color: #fff;
  min-height: 100%;
}
.swiper {
  width: 100%;
  height: 416rpx;
  background-color: #F2f2f2;
}
.swiper-item image{
    width: 100%;
    height: 416rpx;
}
.slide-image{
    width: 100%;
    height: 416rpx;
}
.no-more-photos {
  text-align: center;
  font-size: 24rpx;
  padding-bottom: 48rpx;
  color: #999;
}
.artical-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.artical-item{
  border: lightgrey;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  min-height: 48px;
  width: 100%;
  padding: 10px;
  margin: 10rpx;
}
.artical-subtitle{
  display: flex;
  flex-wrap: wrap row;
  margin-top: 30rpx;
}
.label {
    margin-right: 20rpx;
}
.artical-item-title{
  font-size: 28rpx;
  color: #333333;
  font-weight:bold; 
}
.artical-item-desc{
  font-size: 10px;
  color: #ADADAD;
}
.artical-item-desc_content{
  font-size: 22rpx;
  color: #666666;
}
/* .category{

  margin-left: 8px;
} */
/*  加载更多   */
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}
复制代码

附上index.json参考代码:

说明: 我项目中的UI组件库引用了MinUI和WeUI,具体使用参照

{
  "navigationBarTitleText": "玩安卓",
  "usingComponents": {
    "wxc-toast": "../../dist/packages/@minui/wxc-toast/dist/index",
    "wxc-icon": "../../dist/packages/@minui/wxc-icon/dist/index",
    "wxc-label": "../../dist/packages/@minui/wxc-label/dist/index",
    "wxc-flex": "../../dist/packages/@minui/wxc-flex/dist/index"
  }
}

复制代码

将下载的weui.wxss文件放至项目的根目录下 在app.wxss文件中 @import 'weui.wxss'即可使用了.

---

底部tabBar

在app.json中配置即可

"tabBar": {
    "selectedColor": "#69C3AA",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/nav/home_normal.png",
        "selectedIconPath": "pages/images/nav/home_select.png"
      },
      {
        "pagePath": "pages/nav/nav",
        "text": "导航",
        "iconPath": "pages/images/nav/nav_normal.png",
        "selectedIconPath": "pages/images/nav/nav_select.png"
      },
      {
        "pagePath": "pages/project/project",
        "text": "项目",
        "iconPath": "pages/images/nav/project_normal.png",
        "selectedIconPath": "pages/images/nav/project_select.png"
      },
      {
        "pagePath": "pages/hierarchy/hierarchy",
        "text": "体系",
        "iconPath": "pages/images/nav/tool_normal.png",
        "selectedIconPath": "pages/images/nav/tool_select.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我",
        "iconPath": "pages/images/nav/mine_normal.png",
        "selectedIconPath": "pages/images/nav/mine_select.png"
      }
    ]
  }
复制代码

网络请求

示例代码

说明:

• url:为请求接口
• data:请求参数
• method: 请求方式
• header:请求头
• success:function(res){}请求回调函数 一般在这里进行数据绑定赋值 达到页面更新
• that.setData{()} 赋值data中的变量

wx.request({
      url: 'http://www.wanandroid.com/banner/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.stopPullDownRefresh()
        that.setData({
          imgUrls: res.data.data
        })
      }
})
复制代码

页面跳转及参数传递

示例代码

说明:

item_index:e.currentTarget.dataset.index 获取item下标索引 对应wxml中 data-index="{{index}}"

wx.navigateTo({})页面跳转

url:'path?xxx=xxx&xxx=xxx....' 页面路径+参数拼接

options.xxx 参数接收 在onload中

//进入文章详细页面
  goToArticalDetail: function (e) {
    var that = this
    var item_index = parseInt(e.currentTarget.dataset.index)
    console.log("item_index = " + item_index)
    wx.navigateTo({
      url: '../index-detail/index-detail?title=' + that.data.articals[item_index].title + '&link=' + that.data.articals[item_index].link
    })
  },
复制代码

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var title = options.title
    var link = options.link
    that.setData({
      artical_title: title,
      artical_link : link
    })
    //动态设置页面标题---文章标题
    wx.setNavigationBarTitle({
      title: that.data.artical_title
    })
  },
复制代码

下拉刷新/上拉加载更多

1.在app.json中加入开关 只有打开开关 生命周期函数才会被调用

在这里说明一个容易犯错的就是创建page的时候会自动生成四个文件,js文件中也会自动生成模板代码 生命周期函数都会自动生成,千万不要自己去在写一个 否则不报错 也不触发.

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#69C3AA",
    "navigationBarTitleText": "玩安卓",
    "navigationBarTextStyle": "white",
    <!--打开下拉刷新-->
    "enablePullDownRefresh": true,
    <!--打开上拉加载更多-->
    "onReachBottomDistance": true,
    "backgroundColor": "#69C3AA"
  },
复制代码

onPullDownRefresh: function () {
    this.data.curPage = 0
    this.getArticals(0)
    console.log('下拉刷新')
},
复制代码

onReachBottom: function () {
    console.log('上拉加载更多')
    if (!this.data.loadingMoreHidden) {

    } else {
      this.getArticals(this.data.curPage)
    }
    this.setData({
      loadingMoreHidden: true
    })
},
复制代码

2.主要的上拉加载逻辑控制在getArticals()f方法里处理的 我们慢慢分析

 getArticals: function (artical_pageindex) {
    var that = this
    <!--请求文章列表数据-->
    wx.request({
      url: 'http://www.wanandroid.com/article/list/' + artical_pageindex + '/json',
      data: {
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        wx.hideNavigationBarLoading()
        that.setData({
          perPageSize: res.data.data.size,
          curPage: res.data.data.curPage,
          pageCount: res.data.data.pageCount
        })
        <!--上拉加载更多的关键处理-->
        <!--定义一个新的文章对象数组 用于装载拼接所有页的数据-->
        var articalsTemp = that.data.articals
        <!--当前如果处于第一页 那么清空这个对象数组 只装载第一页数据即可-->
        if (that.data.curPage == 1) {
          articalsTemp = []
        }
        <!--定义一个新的文章对象数组 赋值于请求返回对应页码的文章数据-->
        var articals = res.data.data.datas
        <!--判断,如果返回的某页的数据长度小于每页的数据长度 说明当前加载的页是最后一页了-->
        if (articals.length < that.data.perPageSize) {
          console.log('没有更多了')
          that.setData({
            <!--contcat 意思是向articalsTemp数组中添加数组 -->
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: false
          })
        } else {
        <!-否则 当前不是最后一页,向articalsTemp数组中添加数组  -->
          console.log('有更多可加载')
          that.setData({
            articals: articalsTemp.concat(articals),
            loadingMoreHidden: true,
             <!--当前页码增加1 依次类推-->
            curPage: that.data.curPage + 1
          })
        }
      }
    })
  },
复制代码

自定义组件

• 创建自定义组件 与创建普通页面类似 也包含.js .json .wxml .wxcss四个文件
• 修改.json文件组件属性

{
  "component": true,
  "usingComponents": {}
}
复制代码

• 编写wantab.js 附上wantab.js源码

// dist/wantab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //标题列表
    tablist: {
      type: Array,
      value: []
    },
    currentTab: {
      type: Number,
      value: 0,
      observer: function (newVale, oldVal) {
        this.setData({
          currentTab: newVale
        })
      }

    },
    tabname: {
      type: String,
      value: ''
    },
    tabtype: {
      type: Number,
      value: ''
    }


  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClickNavBar: function (e) {
      this.triggerEvent('changeTab', {
        currentNum: e.currentTarget.dataset.current
      })
    }
  }
})

复制代码

• 编写wantab.wxml 附上wantab.wxml 模板代码

<!--dist/wantab.wxml-->
<!-- 自定义tab标签组件-->
<!-- 标题列表-->
<scroll-view scroll-x="true" class="scroll-view-x" wx:if="{{!tabtype || tabtype==2}}">
  <view class="scroll-view-item" wx:for="{{tablist}}" wx:key="*this">
    <view class="{{currentTab==(index) ? 'on' : ''}}" bindtap="onClickNavBar" data-current="{{index}}">{{ !tabname ? item.name : item[tabname].name }}</view>
  </view>
</scroll-view>
<!--内容列表-->
<slot>
</slot>
复制代码

• 编写wantab.wxcss 附上wantab.wxcss 组件样式

/* dist/wantab.wxss */
.scroll-view-x{
  background-color: #fff;
  white-space: nowrap;
  position:fixed;
  z-index:10;
  top:0
}
.scroll-view-x .scroll-view-item{
  display:inline-block;
  margin:0 35rpx;
  line-height: 33px;
  cursor: pointer;
}
.on{
  border-bottom: 2px solid #69C3AA;
  color: #69C3AA
}
复制代码

以上就可以完成一个组件的定义了,下面贴出使用方法

{
  "navigationBarTitleText": "项目",
  "usingComponents": {
    "wantab":"../../dist/component/wantab/wantab"
  }
}
复制代码

使用方式与其他第三方的组件引入一致,在页面的.json文件中加入以上代码即可 注意路径根据项目而改变

---

效果图展示

最后放上其他页面的效果图 实现过程基本差不多 刚接触web 所以多做了些重复的工作,为了更熟悉使用这些组件和交互

完结

感谢阅读,如有不对地方请见谅.