2018/4/16 15:08:10当前位置推荐好文程序员浏览文章
wx.jpg

最近学习了慕课网《微信小程序入门与实战——常消耗组件API开发技巧项目实战》这个课程,对于小程序有了一个比较新的认识,在课程中我碰到的少量问题,与大家分享一下。

1,事件能否冒泡

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

  • 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  • 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

有的时候我们不想要事件冒泡,由于会影响我们的效果。

小程序帮我们处理了,bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定能阻止冒泡事件向上冒泡。

// 事件冒泡<view class="journey-container" bindtap="onTap">     <text class="journey">开启小程序之旅     </text></view>// 事件非冒泡<view class="journey-container" catchtap="onTap">     <text class="journey">开启小程序之旅     </text></view>

要是想理解哪些事件是冒泡事件或者者非冒泡事件,大家能参考文档小程序事件。


2,元素上的属性节点获取:currentTargettarget

先理解两个属性:

  • currentTarget:事件绑定的当前组件。
  • target:触发事件的源组件。

比方我们给每一个元素赋值了一个值,如下我们想要拿到data-alpha-betadata-alphaBeta,当我们我们想要拿到这个在当前元素上的值。

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

我们能通过event.currentTarget.dataset取得到,

Page({  bindViewTap:function(event){    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写  }})

但是假如是下面的这种情形:我们的事件是写在swiper组件上的时候,但是我们想要通过点击image取得其上面的data-postId,我们就需要通过event.target.dataset.postid

<swiper catchtap="onSwiperTap" >    <swiper-item>        <image id="7" src="/images/wx.png" data-postId="3"></image>    </swiper-item>    <swiper-item>        <image src="/images/vr.png" data-postId="4"></image>    </swiper-item></swiper>

target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件,target这里指的是image,而currentTarget指的是swiper


3,底部tab栏设置

tabbar.png

这个还是比较简单的,只需在App.json进行相应的tabBar配置就行了。

{  "pages": [    "pages/index/index",    "pages/logs/logs"  ],  "tabBar": {    "borderStyle": "white",    "position": "bottom",    "list": [      {        "pagePath": "pages/posts/post",        "text": "阅读",        "iconPath": "images/tab/yuedu.png",        "selectedIconPath": "images/tab/yuedu_hl.png"      },      {        "pagePath": "pages/movies/movies",        "text": "电影",        "iconPath": "images/tab/dianying.png",        "selectedIconPath": "images/tab/dianying_hl.png"      }    ]  }}

4,尺寸单位:rpx

在小程序的里面,我们使消耗rpx来代替px,官方的定义如下:

rpx(responsive pixel): 能根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

假如想要更加理解,大家能参考微信小程序开发--从px到rpx。


5,图片轮播事件:swiper

swiper.gif
<swiper     vertical="{{false}}"     indicator-dots="true"     autoplay="true"     interval="5000">    <swiper-item>        <image id="7" src="/images/wx.png" data-postId="3"></image>    </swiper-item>    <swiper-item>        <image src="/images/vr.png" data-postId="4"></image>    </swiper-item>    <swiper-item>        <image src="/images/iqiyi.png" data-postId="5"></image>    </swiper-item></swiper>

这个就可以够实现一个最最简单的图片轮播。

上面的swiper的少量属性:

  • vertical:滑动方向能否为纵向
  • indicator-dots:能否显示面板指示点
  • autoplay:能否自动切换
  • interval:自动切换时间间隔

更多的参数大家能参考微信小程序——swiper。


6,上拉加载,下拉刷新。

scroll.gif
  • 上拉加载

    • 假如你使消耗的是<scroll-view>组件:他有一个事件叫做:bindscrolltolower,滚动究竟部/右边,会触发 scrolltolower 事件。
    // wxml<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">  // 你的代码</scroll-view>// wxss...onScrollLower: function (event) {    var nextUrl = this.data.requestUrl +      "?start=" + this.data.total+ "&count=20";    util.http(nextUrl, this.processDoubanData)    wx.showNavigationBarLoading()},...
    • 假如你使消耗<view>,你就不需要在元素里面绑定任何事件,直接在js文件里面申明:
    ...onReachBottom: function (event) {    var nextUrl = this.data.requestUrl +      "?start=" + this.data.total+ "&count=20"; // 请求借口,加载数据,并升级数据    util.http(nextUrl, this.processDoubanData);    wx.showNavigationBarLoading(); // 显示loading},...
  • 下拉刷新

    在你需要的进行下拉刷新的页面的json文件里面:

    {  "enablePullDownRefresh": true}

    而后在js中,进行相应的数据操作:

    ...onPullDownRefresh: function (event) {    var refreshUrl = this.data.requestUrl +      "?start=0&count=20";    this.data.movies = {};    this.data.isEmpty = true;    this.data.total= 0;    util.http(refreshUrl, this.processDoubanData);    wx.showNavigationBarLoading();},...


6,音乐播放api

music.gif

文档中讲的很详细了微信小程序——音乐。

music-audio.pngmusic2.png

这里面的监听音乐播放的api很重要,举一个简单的例子,当整首音乐播放完了的时候,我们设置相应的数据状态,来改变前台的相应的ui变化;这些方法都是需要配合使消耗的。


7,缓存

数据缓存.png

每个微信小程序都能有自己的本地缓存,能通过wx.setStorage(wx.setStorageSync)wx.getStorage(wx.getStorageSync)wx.clearStorage(wx.clearStorageSync)能对本地缓存进行设置、获取和清除。同一个微信誉户,同一个小程序 storage 上限为 10MB。localStorage 以消耗户维度隔离,同一台设施上,A 消耗户无法读取到 B 消耗户的数据。

总共有8个关于缓存的方法,4个是同步的,4个是异步的。

如下图,不过基本上我们消耗到缓存,都是同步的方法,异步的时候太难预测,除非是少量特定的业务场景。

wx.setStorageSync("posts_collected", postsCollected); // 设置缓存var postsCollected = wx.getStorageSync("posts_collected"); // 读取缓存wx.clearStorage(); // 清理缓存

8,Toastmodal的显示

modal.gif

如下,通过

  //data数据  data: {     postCollected:false, // 能否收藏了文章  },    // modal  showModal: function (postCollected) {    var that = this;    wx.showModal({          title: "收藏",          content: postCollected ? "收藏该文章?" : "取消收藏该文章?",          showCancel: "true",          cancelText: "取消",          cancelColor: "#333",          confirmText: "确认",          confirmColor: "#405f80",          success: function (res) {            if (res.confirm) {              // modal点击了成功            }          }        })  }      // Toast  showToast: function (postCollected) {    // this.setData({    //   collected: postCollected    // })    wx.showToast({      title: postCollected ? "收藏成功" : "取消成功",      duration: 1000,      icon: "success"    })  },

具体的modal的属性大家能参考官方文档。


9,template语法

template.png

这样的一个页面能分成三个template写,一个是星星star-template,我标了1;一个是单个电影页面的movie-template,我标了2;最后是一个三列的电影列表movie-list-template,我标了3.

如下:

star-template:星星组件

star.png

movie-template:单个电影页面

movie.png

movie-list-template:电影列表

movie-list.png

10,数据绑定

微信小程序中,ui的显示都是依靠数据绑定来完成了,没有Dom这个概念。

比方控制一个图片的显示与否:

// wxml<image class="head-image" src="{{isPlayingMusic?postData.music.coverImg : }}"></image>// js...data: {    isPlayingMusic: false},...

假如我们是根据接口来获取数据的,我们在接口回调成功之后去设置我们data中的数据:

this.setData({    movies: totalMovies});

如下图:

我们首先通过访问接口,接口成功之后,调消耗回调方法。

util.png

对返回的结果进行解决之后,set相应的data

setdata.png

后记

此篇文章是参考是我在看了小程序实战视频之后,我是直接拿课程的代码来讲上述的知识点的,我记录了自己遇到最多问题,同时也附加上了自己的少量了解。

希望这篇文章对大家学习小程序可以有帮助,来自一个奔跑在前台路上的前台小白。

网友评论