小程序实战二

项目地址

实现个人头像设置

.avatar{
  height: 400rpx;
  background-color: #f60;
}

.avatar image{
  width: 200rpx;
  height:200rpx;
   border: 10rpx solid rgba(0, 0, 0, .2);
   border-radius: 50%; //圆形边框由此处的两个属性决定
}

全局样式：

.center{
    display:flex;
    justify-content:center;
    align-items:center;
}

布局：

  

实现个人中心列表

将View使用可伸缩盒子模式，垂直方向排版列表。


  


  
    你好
  
  
    你好
  



  
    你好
  
  
    你好
  
  
    你好
  
  
    你好
  



  
    设置
  
  
    版本更新
  

使用封装思想快速开发新页面

封装CSS和布局，将公共的样式放入到app.wxss中

通过navigator实现页面间的跳转

//增加新页面shoplist
{
    pages:[
        '/pages/shoplist/shoplist'
    ]
}
//跳转至新页面shoplist

实现半颗星的效果

准备两套星星，这两套星星上下重叠，上面的星星通过裁剪，实现半颗星的效果


.shop-star{
  position: absolute;
  top: 20rpx;
  right:20rpx;
}

.star-after{
  color:#ccc;
}

.star-before{
  color:aqua;
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  overflow: hidden;
}

全局声明周期函数

jquery中：

window.onload=function(){

}


$(document).ready(function(){
    console.log(); 
});


小程序的声明周期：
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})


//options.scene 的值表明切后台后，返回当前页面的场景
onShow: function (options) {
    
}

小程序生命周期函数

onLoad->onShow->onReady

page({
    onLoad:function(){
        //TODO 加载数据
    },
    onReady:function(){
        //TODO show dialog
    }
})

WXML 数据绑定

语法 {{}}

注意 花括号与引号之间不能有空格

通过wx.requests请求数据

wx.request({
  //请求的url
  url: '',
  //请求参数
  data: '',
  //请求头
  header: {},
  //请求方式
  method: 'GET',
  //数据类型
  dataType: 'json',
  //响应类型
  responseType: 'text',
  success: function(res) {},
  fail: function(res) {},
  complete: function(res) {},
})

更新数据到视图 this.setData

index.js中的内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    bannerList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      //请求的url
      url: 'https://locally.uieee.com/slides',
      success: (res) => {
        this.setData({
           bannerList:res.data
        })
      },
        ...
        ...
    })
  },
})

index.wxml 内容如下：

 
    
      
    
    
      
    

微信小程序列表渲染wx:for

使用方式

    {{index}} 
    {{item}} 



  

店铺列表页面的渲染

/* 单行省略号 */
.epli-end{
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

页面间传递参数

1. 传入参数 
    

    
    {{item.name}}
 
 
2. 获取参数

onLoad: function (options) {
    console.log(options)
    wx.request({
       //# options.cat 的使用
    })
},

加载更多

加载更多样式：

/* 功能封装9：加载更多样式 */

.loadmore {
    color: #888;
    font-size: 16px;
    line-height: 100rpx;
    text-align: center;
}

.loadmore.loading::before {
    content: '';
    width: 40rpx;
    height: 40rpx;
    margin-top: -10rpx;
    margin-right: 10rpx;
    display: inline-block;
    vertical-align: middle;
    animation: loading 1s steps(12) infinite;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
    background-size: 100%;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

引用样式：

核心逻辑：

 loadmore : function () {
    this.data.pageIndex++ ,
      wx.request({
        url: 'https://locally.uieee.com/categories/' + this.data.catIndex + '/shops',
        data: { _page: this.data.pageIndex, _limit: this.data.pageSize },
        success: (res) => {
          console.log(res.data.length)
          var newList = this.data.shoplists.concat(res.data);
          newList.concat(newList)
          this.setData(
            {
              shoplists: newList
            }
          )
        }
      })
},

显示加载更多的动画

你好
你好
你好
你好