微信小程序课程学习笔记

（1）页面切换操作

1）wxml的页面标签添加事件跟踪

<view bindTap='onTap'></view>

事件名称前加bind绑定；

2）js文件添加跟踪事件函数

onTap=function(){

//转到带返回的子页面

wx.navagateTo({

url:"../post/post"

})

//转到不带返回的页面

wx.redirectTo({

url:"../post/post"

})

}

（2）空白文件调试错误的处理

1）空白json文件，添加 {}，可以避免调试报错；

2）空白js文件，添加Page{}，可以避免调试报错；

Page{}的第一字母要大写，否则会报错；

3）app.js，空白文件不要添加page{}，否则会报错

如果在app.js中加入Page（{}），就会出现上面的报错，所以要，app.js文件不许加入。

错误提示如下：Please do not register multiple Pages in undefined.js

（3）数据捆绑问题

数据从wxml文件分离到js文件中

1）js文件data提供数据

var local_datas=[

{

"url":[

"www.tiantuo.net",

"www.jukebao.com",

"www.exsky.net"

],

"myname":"echo",

"school":"HIT"

},{

"url":[

"www.tiantuo.net",

"www.jukebao.com",

"www.exsky.net"

],

"myname":"echo",

"school":"HIT"

}

]

//导入数据

module.exports = {

  postlist: local_data

}

2）页面js文件导入

var postdatas=require('data.js');

onload:function(options){

this.setData=({

postlist2: postdatas

})

}

3）wxml捆绑数据

{{ postlist2.postlist[0].url[0] }}

（4）页面传递参数

1）页面元素捆绑事件，及传递参数

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

传递是采用标签内添加属性 “data-传递变量名”，传递变量名最好采用小写，如果用连字符“-”，第一个字母会转为大写，连字符省略。

<view bindtap='onTap' data-postid='1'></view>

2）js文件添加事件函数

onTap:function(event){

var postid=event.currentTarget.dataset.postid;

wx.navigaterTo({

url:"../post/post?id="+postid;

})

}

（5）tabbar底部（顶部）标签菜单

1）需要在app.json中设置

"tabbar":{

list:[{

"pagepath":"post/post",

"text":"首页"

},{

"pagepath":"wellcom/wellcom",

"text":"页面"

}]

}

2）添加首页后，其他页面都会出现

（6）导入样式表

@import "pages/style/weui.wxss"

（7）页面布局flexbox

在定义子元素<view>的时候，不要再单独定义class值来设定循环主参数，直接定义标签，否则垂直方向的效果（align-items，align-content）不起作用，单个循环元素可以定义class来处理

<view class='container'>

<view class='sp1'></view>

<view class='sp2'></view>

</view>

.container{

display: flex;

flex-flow: row wray;

}

.container view{

width:150rpx;

height:500rpx;

}

1）display

display: flex | inline-flex

flex 用于产生块级伸缩容器，

inline-flext 用于产生行内级伸缩容器

在flex-wrap:nowrap时，

flex状态下子元素会自动缩小把所有元素都显示

inline-flex状态下，子元素大小不变，超出的部分会自动剪切掉。

在flex-wrap:wrap时，两者没有看出有什么区别。

2）flex-direction

flex-direction: row  | row-reverse  | column  | column-reverse

row 水平方向从左向右

row-reverse 水平方向从右向左

column 伸缩容器为垂直方向，伸缩项目的排版方式为从上到下

column-reverse 伸缩容器为垂直，伸缩项目为从下到上

3）flex-wrap

该属性用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及该如何换行

flex-wrap: nowrap | wrap  | wrap-reverse 

nowrap 空间不足是也不换行

wrap 空间不足可以换行

wrap-reverse 空间不足可以换行，若主轴为水平轴，则换行的方向为从下到上，和wrap相反

4）flex-flow

该属性是flex-direction和flex-wrap属性的缩写版本，它同时指定了伸缩容器的主轴和侧轴，其默认属性为row nowrap

flex-flow: flex-direction | flex-wrap

5）justify-content

该属性用来定义伸缩项目沿主轴线的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start flex-start伸缩项目向主轴线的起始位置靠齐

flex-end 伸缩项目向主轴线的结束位置对齐

center 缩项目向主轴线的中间位置靠齐

space-between 伸缩项目会平均的分布在主轴线里，两端保留一半的空间

space-around 伸缩项目会平分在主轴线里，第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴线的终点位置

6）align-items

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline |  stretch;

flex-start 伸缩项目沿交叉轴的起始位置对齐

flex-end 沿交叉轴的结束位置对齐

center 伸缩项目沿交叉轴的中间位置靠齐

baseline 伸缩项目根据它们的基线对齐

stretch 伸缩项目在交叉轴方向拉伸填充整个伸缩容器

7）align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用justify-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex-start 伸缩项目向交叉的起始位置靠齐

flex-end 伸缩项目向交叉轴的起始位置靠齐

center 伸缩项目向交叉轴的中间位置靠齐

space-between 伸缩项目在交叉轴中平均分布（顶部底部不留空隙，元素垂直方向有空隙）

space-arround 伸缩项目在交叉轴平均分布，且两边各有一半空间（顶部底部留出空隙，元素处置方向有空隙）

stretch 伸缩项目将会在交叉轴上伸展以占用剩余空间

8）order

用于定义排列顺序，数值越小，排列越靠前，默认值为0

9）flex-grow

用于定义伸缩项目的放大比例，默认值0，即如果存在剩余空间，也不放大；

如果所有伸缩项目的flex－grow设置为1，那么每个伸缩项目将设置为大小相等的剩余空间，

如果你将其中一个flex－frow伸缩项设置为2，那么这个伸缩项目所占剩余空间是其他伸缩项目所占胜于空间的两倍

10）flex-shrink

该属性用来定义伸缩项目的收缩能力

11）flex-basis

该属性用来设置伸缩项目的基准值，剩余空间按比率进行伸缩

12）flex

该属性是flex-grow ,flex-shrink,flex-basis属性的缩写

flex: none | flex-grow flex-shrink flex-basis

其中第二个参数和第三个参数(flex-shrink,flex-basis)是可选参数，默认为0 1 auto

13）align-self

用于设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch

auto

flex-start 沿交叉轴开始位置对齐

flex-end 交叉轴结束位置对齐

center 沿交叉轴中心位置对齐

baseline 沿交叉轴的基线对齐

stretch 沿交叉轴方向占满伸缩容器

（8）组件image

注：image组件默认宽度300px、高度225px

1）属性值

src String 图片资源地址

mode String 'scaleToFill' 图片裁剪、缩放的模式

lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效1.5.0

binderror HandleEvent 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}

bindload HandleEvent 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

2）mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变

裁剪 top 不缩放图片，只显示图片的顶部区域

裁剪 bottom 不缩放图片，只显示图片的底部区域

裁剪 center 不缩放图片，只显示图片的中间区域

裁剪 left 不缩放图片，只显示图片的左边区域

裁剪 right 不缩放图片，只显示图片的右边区域

裁剪 top left 不缩放图片，只显示图片的左上边区域

裁剪 top right 不缩放图片，只显示图片的右上边区域

裁剪 bottom left 不缩放图片，只显示图片的左下边区域

裁剪 bottom right 不缩放图片，只显示图片的右下边区域

3）重点使用的mode数值，按照原图比例缩放，按短边显示缩放，或按长边显示缩放，或宽度不变高度变化

mode="aspectFill | aspectFit | widthFix"

4）注意的一个问题，image排列的时候，底部出现空白间隙的解决办法：需要父元素采用flexbox

<view>

<image></image>

<image></image>

</view>

view{

  display: flex;

  flex-direction: column;

}

（9）文本组件text

设置宽度、高度及居中显示时，需要通过设置 display:block；line-height:60rpx;

（10）滑块swiper

1）属性值

indicator-dots Boolean false 是否显示面板指示点

indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0

indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0

autoplay Boolean false 是否自动切换

current Number 0 当前所在滑块的 index

current-item-id String "" 当前所在滑块的 item-id ，不能与 current 被同时指定 1.9.0

interval Number 5000 自动切换时间间隔

duration Number 500 滑动动画时长

circular Boolean false 是否采用衔接滑动

vertical Boolean false 滑动方向是否为纵向

previous-margin String "0px" 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 1.9.0

next-margin String "0px" 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 1.9.0

display-multiple-items Number 1 同时显示的滑块数量 1.9.0

skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 1.9.0

bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}

bindanimationfinish EventHandle 动画结束时会触发 animationfinish 事件，event.detail 同上 1.9.0

2）swiper-item

仅可放置在<swiper/>组件中，宽高自动设置为100%。

（11）tabbar组件

注意一个问题，在组件中参数list中列出来的页面，在使用navigateTo跳转时会失灵，需要引起注意；

（12）微信小程序wx:for循环的数量问题

1）你可以新建一个变量，将数组列表的前5个赋值给这个变量，然后列表循环时使用这个变量

2）直接在模板页循环时控制index

<view wx:for="{{yourList}}" wx:if="{{index<5}}>

    ***

</view>

（13）动态设置页面的标题

wx.setNavigationBarTitle({

      title : "标题名称" 

    })

（14）页面分享功能

 //页面分享

  onShareAppMessage: function (res) {

    if (res.from === 'button') {

      // 来自页面内转发按钮

      console.log(res.target)

    }

    return {

      title: "标题",

      path: '/index/index',

      success: function (res) {

        // 转发成功

      },

      fail: function (res) {

        // 转发失败

      }

    }

  }

（15）js页面方法间数据的交换方法

js页面方法之间的数据交换，可以通过data{}设置的数据，这个data既可以用来渲染view页面，也可以在js的方法之间来交换或者更新

1）可以直接定义data项目

//index.js

Page({

  data: {

    text: 'init data',

    num: 0,

    array: [{text: 'init data'}],

    object: {

      text: 'init data'

    }

  },

  changeText: function() {

    // this.data.text = 'changed data'  // bad, it can not work

    this.setData({

      text: 'changed data'

    })

  },

  changeNum: function() {

    this.data.num = 1

    this.setData({

      num: this.data.num

    })

  }

})

2）可以隐形定义data

onLoad: function (options) {

    var localDatas = getApp().globalData.localDatas;

    var title = localDatas.localData.aboutus[0].title;

    this.setData({

      title:title

    })

  },

//页面分享

  onShareAppMessage: function (res) {

    if (res.from === 'button') {

      // 来自页面内转发按钮

      console.log(res.target)

    }

    var title = this.data.title;

    return {

      title: title,

      path: '/weixin/weixin',

      success: function (res) {

        // 转发成功

      },

      fail: function (res) {

        // 转发失败

      }

    }

  }