小程序开发之你需要掌握的基础知识点
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，元素上的属性节点获取：currentTarget和target
先了解两个属性：
-
currentTarget：事件绑定的当前组件。 -
target：触发事件的源组件。
比如我们给每一个元素赋值了一个值，如下我们想要拿到data-alpha-beta和data-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.totalCount + "&count=20"; util.http(nextUrl, this.processDoubanData) wx.showNavigationBarLoading() }, ...- 如果你使用
<view>，你就不需要在元素里面绑定任何事件，直接在js文件里面申明：
... onReachBottom: function (event) { var nextUrl = this.data.requestUrl + "?start=" + this.data.totalCount + "&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.totalCount = 0; util.http(refreshUrl, this.processDoubanData); wx.showNavigationBarLoading(); }, ...
6，音乐播放api
music.gif
文档中讲的很详细了微信小程序——音乐。
music-audio.png
music2.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，Toast和modal的显示
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
后记
此篇文章是参考是我在看了小程序实战视频之后，我是直接拿课程的代码来讲上述的知识点的，我记录了自己遇到最多问题，同时也附加上了自己的一些理解。
希望这篇文章对大家学习小程序能有帮助，来自一个奔跑在前端路上的前端小白。
