微信小程序

1.事件(https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)#

• 事件分为冒泡事件和非冒泡事件：

  • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
    • bindtap 绑定点击事件 会冒泡
  • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
    • catchtap 不会冒泡

• WXML的冒泡事件列表：

• 注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

尺寸单位#

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

• 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

• 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

1.welcome.js#

1
Page({
2
  /*页面的初始数据*/
3
  data: {
4
  },
5
  bindToHome(){
6
    //关闭当前页面,跳转到应用内的某个页面，所有的方法都是异步的
7
    //redirectTo 重定向 跳到下页，下页无返回按钮
8
    wx.redirectTo({
9
      url: '../home/home',
10
      success:function(){
11

12
      },
13
      fail:function(){
14

15
      },
16
      complete:function(){
17

18
      }
19
    });
20
    //navigateTo保留当前页面，跳转到应用内的某个页面 只适合导航跳转
21
    wx.navigateTo({
22
      url: '../home/home',
23
    })
24
  }
25
})

2.welcome.wxml#

1
<view class='container'>
2
  <image src='../../images/touxiang.jpg' class='avatar' bindtap='bindToHome'></image>
3
  <text class='title'>one</text>
4
  <text class='content'>hello world</text>
5
</view>

1.home.json#

• 子页面不需要写window了

1
{
2
    "navigationBarBackgroundColor": "green",
3
    "navigationBarTextStyle": "yellow",
4
    "navigationBarTitleText": "主页"
5
}

1.app.json#

• tabBar配置文档地址https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

• tabBar(tab的列表最少2个，最多5个)

  

  “当tab列表不足2个的时候会报错”

• tabBar列表有两个

1
"tabBar": {
2
    "borderStyle": "white",//tab盒子的border-top，有两个值black（黑色）、white（白色）
3
    "color": "red",//字体颜色
4
    "selectedColor": "orange",//激活的字体颜色
5
    "list": [{
6
      "pagePath": "pages/home/home",//页面路径(跳转的对应路径)，只能使用相对路径
7
      "text": "首页",
8
      "iconPath": "images/anhoo.png",//页面默认的icon路径，只能使用相对路径
9
      "selectedIconPath": "images/anhoo1.png"
10
    },{
11
      "pagePath": "pagePath",
12
      "text": "text",
13
      "iconPath": "images/anhoo.png",
14
      "selectedIconPath": "selectedIconPath"
15
    }]
16
  }

• 此处有坑

  • 升级到1.2版本后，如果有tabBar，只能使用switchTab方式切换

  1
  //保留当前页面，跳转到应用内的某个页面 navigateTo只适合导航跳转
  2
  // wx.navigateTo({
  3
  //   url: '../home/home',
  4
  // });
  5
  //跳转到tabBar页面,并关闭其他所有非tabBary页面
  6
  //如果有tabBar，只能使用switchTab方式切换
  7
  wx.switchTab({
  8
    url: '',
  9
  })

• 此时app.json文件

1
{
2
  "pages": [
3
    "pages/welcome/welcome",
4
    "pages/home/home",
5
    "pages/notes/notes",
6
    "pages/event/event"
7
  ],
8
  "window": {
9
    "navigationBarBackgroundColor": "#b0b0b0",
10
    "navigationBarTextStyle": "green",
11
    "navigationBarTitleText": "Welcome"
12
  },
13
  "tabBar": {
14
    "borderStyle": "white",
15
    "color": "red",
16
    "selectedColor": "orange",
17
    "list": [{
18
      "pagePath": "pages/home/home",
19
      "text": "首页",
20
      "iconPath": "images/anhoo1.png",
21
      "selectedIconPath": "images/anhoo.png"
22
    },{
23
      "pagePath": "pages/notes/notes",
24
      "text": "笔记",
25
      "iconPath": "images/anhoo1.png",
26
      "selectedIconPath": "images/anhoo.png"
27
    }]
28
  }
29
}

1.home.wxml#

• 不能使用jQuery等，因为微信小程序中没有dom

• swiper内置的组件，滑动插件

  • autoplay='{{true}}'自动播放，默认{{false}};
  • 此处有坑<不能写成>autoplay='true'或者autoplay='false'，这样写是字符串，默认转为布尔类型，即使设置为false，'false'转为布尔类型也是true，也会自动播放，所以一定要加双大括号
  • interval自动切换间隔时间
  • indicator-dots='{{true}}'轮播图对应的小点
  • 同autoplay，一定要加双大括号
  • circular='{{true}}'循环轮播
  • 同autoplay，一定要加双大括号
  • vertical='{{true}}' 轮播图上下滚动
  • 此处有坑<设置banner图的高>，不能给swiper-item标签设置，要给他的父级swiper标签设置

  1
  //设置banner图的高为600rpx,此处的style不需要加`双大括号`
  2
  <swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}' vertical='{{true}}' style='height:600rpx;'>
  3
    <swiper-item>
  4
      <image src='/images/banner1.jpg'></image>
  5
    </swiper-item>
  6
    <swiper-item>
  7
      <image src='/images/banner2.jpg'></image>
  8
    </swiper-item>
  9
    <swiper-item>
  10
      <image src='/images/banner3.jpg'></image>
  11
    </swiper-item>
  12
    <swiper-item>
  13
      <image src='/images/banner4.jpg'></image>
  14
    </swiper-item>
  15
    <swiper-item>
  16
      <image src='/images/banner5.jpg'></image>
  17
    </swiper-item>
  18
  </swiper>

  展开收起