微信小程序零基础入门踩坑之路-即速应用

小程序

微信小程序

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

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

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

申请帐号

注册:小程序注册(不能是微信开放平台的邮箱)
登录后, 我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 。

安装开发工具

前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装.
打开小程序开发者工具，用微信扫码登录开发者工具
选择小程序项目类型
填入你申请的APPID 会自动生成一个QuickStart Project 直接进入即可看到一个简单的小程序
看看项目结构挺清晰的.
至此,第一个小程序已经呈现在你面前,开发工具顶部栏有预览,你可以用手机扫描体验一下.

编辑器选择

经过一顿百度和前端的朋友咨询,发现了目前网上流行的几款: 微信开发工具、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 () {}})

首页

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}}”

//获取应用实例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+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjd