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

微信小程序.jpg

简介

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

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

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

申请帐号

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

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

appid.png

安装开发工具

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

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

  3. 选择小程序项目类型

    项目类型.png

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

    QuickStart.png

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

项目结构.png

​

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

    ​

编辑器选择

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

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

UI组件库使用

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

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

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

立项

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

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

1.png

页面的生命周期

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
参数：无

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

2.首页文章列表
http://www.wanandroid.com/article/list/0/json

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

可直接点击查看示例：http://www.wanandroid.com/article/list/1/json。

注意：页码从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}}"


    wxml.png
//获取应用实例
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组件样式

1522639536966.png

将下载的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.js 附上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.js 附上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 所以多做了些重复的工作,为了更熟悉使用这些组件和交互


1.png
2.png
3.png
4.png

5.png

完结

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345

推荐阅读更多精彩内容

  • 微信小程序学习资料
    转载链接 注：本文转载知乎上的回答 作者：初雪 链接：https://www.zhihu.com/question...
    pengshuangta阅读 28,485评论 9赞 295
  • 微信小程序开发 入门介绍 及个人demo
    转载请注明出处, 谢谢! (～ o ～)Y 1月9日，也就是今天，微信推出的“小程序”正式上线。“小程序”是一种无...
    Jimmy_P阅读 14,373评论 53赞 273
  • 《花灵主》——第三章，低谷
    “我们今天要嗨爆全场，oh yeah……”我挥舞着手中的花枝，动作夸张的跟着音乐的节奏要摆着身体的各个部位。 今夜...
    汪星人E阅读 143评论 0赞 1
  • 吻别
    当你的蓦然转身，我们已是离别。曾经的一份情，曾经的一段爱，只能像远去的记忆那样深深的被尘封。 曾经我们的相识...
    首丘_青阅读 126评论 0赞 1