目录
0x00 Swiper组件
直接设置swiper item 的高度 和 image 的高度是没有用的,因为swiper 将高度写死了,决定轮播图组件高度的标签是swiper,直接设置swiper的高度即可。
swiper-item的高度默认自动充满swiper的高度。swiper-item也是一个容器,swiper-item的内容可以嵌套非常复杂的东西。
<swiper indicator-dots="true" autoplay="true" interval="5000" vertical="true">
<swiper-item>
<image src='/images/1.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/2.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/3.jpg'></image>
</swiper-item>
</swiper>
注意这里有一个坑:
vertical为true的时候,表示轮播图为纵向轮播图,那么是不是将true改为false,轮播图就变成横向轮播图了呢?其实不然,因为这里的true是用引号引起来的,也就是说并不是布尔类型,而是字符串类型,js中只要字符串有值,就会被转化 bool 值true,所以这里应该改为"" 这样 转化为的布尔值才是false; 也可以使用数据绑定的写法 vertical = '{{false}}'
0x01 App.json 中关于导航栏,标题的配置
页面级别 json配置文件: 直接写,不需要写window,只能配置应用程序级别json配置中,部分window配置项的内容
{
"navigationBarBackgroundColor":"#405f80"
}
应用程序级别json配置,需要些在window中
{
"pages": [
"pages/welcome/welcome",
"pages/posts/posts"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
}
}
css布局无非两种,要么垂直布局要么 水平布局
0x02 Page页面与应用程序的生命周期
页面的生命周期:
onload 页面加载
onshow 页面显示
onready 页面初次渲染
0x03 数据绑定(核心)(微信是单向绑定)
小程序中无法使用dom操作。(DOM优先的思想)
小程序使用的是数据优先的思想
页面级别的js文件:
/**
* 页面的初始数据
*/
data: {
date:"Nov 18 2020",
title:"出售一个二手螃蟹"
},
使用数据:{{date}} {{title}} 注意在属性中使用 不能把引号去掉 例如 src="{{img_url}}" 这样写才是正确的
一般情况下向服务器获取数据的代码写在onLoad中,
this.setData(js对象) 将数据拷贝到data中,下文中数据是对象的形式,所以会将对象中属性添加到data中。
注意这个坑:确保传给setData的是一个js对象
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var post_content1 = {
date:"Nov 19 2021",
title:"出售一个螃蟹!还活着!",
post_img:"/images/post/crab.png",
content:"出售一个螃蟹!真的还活着!想要的同学联系QQ 2227627947",
view_num:'112',
collect_num:'96',
author_img:'/images/avatar/1.png'
};
this.setData(post_content1);
},
0x04 数据绑定的运算 与逻辑
{{"hello"+date}}
{{a+b+c}} 当abc都是数字时,会进行数学运算
wx:if = "{{condition}}" 条件渲染指令,即某个元素的显示隐藏控制,当condition为true时显示该元素,否则隐藏
wx:for 列表渲染指令 指定数组
wx:for-item 指定数组中每个元素,如果不指定for-item,会默认定义为item
wx:for-index = 'idx' 指定序号 {{idx}} 如果没有指定 默认指定为 index {{index}}
<block wx:for="{{posts_key}}" wx:for-item="item">
<view class="post-container">
<view class='post-author-date'>
<image class='post-author' src='{{item.img.author_img}}'></image>
<text wx:if="{{item.text_condition}}" class='post-date'>{{item.date}}</text>
</view>
<text class='post-title'>{{item.title}}</text>
<image class='post-image' src="{{item.img.post_img}}"></image>
<text class='post-content'>{{item.content}}</text>
<view class='post-like'>
<image src='/images/icon/chat.png' class='post-like-image'></image>
<text class='post-like-font'>{{item.collect_num}}</text>
<image class='post-like-image' src='/images/icon/view.png'> </image>
<text class='post-like-font'>{{item.view_num}}</text>
</view>
</view>
</block>
页面级别的js文件:
onLoad: function (options) {
var posts_content =[
{
date:"Nov 19 2021",
title:"出售一个螃蟹!还活着!",
img:{
post_img:"/images/post/crab.png",
author_img:'/images/avatar/1.png'
},
content:"出售一个螃蟹!真的还活着!想要的同学联系QQ 2227627947",
view_num:'112',
collect_num:'96',
text_condition:true
},
{
date:"Nov 19 2021",
title:"找个妹妹一起看电影",
img:{
post_img:"/images/post/bl.png",
author_img:'/images/avatar/2.png'
},
content:"一起看比利林恩的中场战事,联系QQ 2227627947",
view_num:'112',
collect_num:'96',
text_condition:true
}
]
this.setData({'posts_key':posts_content});
},
0x05 AppData 区域
在appData区域中可以查看本页面的数据绑定相关的情况
0x06 事件与事件对象
小程序的事件处理机制和web开发基本相同:
- 产生事件
- 捕捉事件
- 回调函数
- 处理事件
(1)事件监听的两种方式
bind:tap = "回调函数名" 监听tap事件
catch:tap ="回调函数名"
两者的区别:
除了用bind 还可以用catch ,如果用bind,那么子元素的事件会冒泡到父元素,
如果用catch,则子元素会阻止事件冒泡到父元素
(2)两种页面跳转方式
wx.navigateTo({}) 跳转 ,跳转后有返回按钮
wx.redirectTo({}) 跳转,跳转后没有返回按钮
Page({
onTap:function(){
wx.navigateTo({
url: '/pages/posts/posts',
})
}
})
更深层次的区别:
wx.navigateTo 跳转后 原来的页面 将是 onHide状态,也就说原来的页面只是隐藏了,所以可以返回
wx.redirectTo 跳转后 原来的页面 将是 Unload 状态,也就说原来的页面已经卸载了,所以不能返回
Page({
onTap:function(){
// wx.navigateTo({
// url: '/pages/posts/posts',
// }),
wx.redirectTo({
url: '/pages/posts/posts',
})
},
onUnload:function(){
console.log('welcome Page is Unload');
},
onHide:function(){
console.log('welcome Page is onHide');
}
})
alt +shift +f 快速代码格式化
0x07使用require方法加载js模块文件
用于模拟通过api 从后端获取数据
posts-data.js
var local_database = [{
date: "Nov 19 2021",
title: "出售一个螃蟹!还活着!",
img: {
imgSrc: "/images/post/crab.png",
avatar: '/images/avatar/1.png'
},
content: "出售一个螃蟹!真的还活着!想要的同学联系QQ 2227627947",
reading: '112',
collection: '96',
text_condition: true
},
{
date: "Nov 19 2021",
title: "找个妹妹一起看电影",
img: {
imgSrc: "/images/post/bl.png",
avatar: '/images/avatar/2.png'
},
content: "一起看比利林恩的中场战事,联系QQ 2227627947",
reading: '112',
collection: '96',
text_condition: true
},
{
date: "Nov 19 2022",
title: "找我家猫咪",
img: {
imgSrc: "/images/post/cat.png",
avatar: '/images/avatar/2.png'
},
content: "找我家猫咪,联系QQ 2227627947",
reading: '112',
collection: '96',
text_condition: true
},
{
date: "Nov 19 2022",
title: "出售VR眼镜",
img: {
imgSrc: "/images/post/vr.png",
avatar: '/images/avatar/3.png'
},
content: "出售一个VR眼镜,联系QQ 2227627947",
reading: '112',
collection: '96',
text_condition: true
}
];
module.exports = {
postList:local_database
}
module.exports 导出一个对象,然后在posts.js中就可以通过require来获取到该对象
注意这里只能用相对路径。
var postsData = require('../../data/posts-data.js');
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
'posts_key': postsData.postList
});
},
0x07 缓存 Storage
微信限制:10MB
wx.setStorageSync('健名', 字符串/对象 ) 设置缓存(同步),如果该健名已经存在则会更新缓存
wx.setStorage() 设置缓存(异步)
如果不主动清除缓存,那么缓存将会一直存在
wx.getStorageSync("键名") 获取缓存
wx.removeStorageSync("键名" ) 删除缓存
wx.clearStorageSync() 清除所有缓存
异步操作演示案例:
getPostCollectedAsy:function(){
var that = this;
wx.getStorage({
key: 'posts_collected',
success:function(res){
var postsCollected = res.data;
var postCollected = postsCollected[that.data.postId];
postCollected = !postCollected;
postsCollected[that.data.postId] = postCollected;
that.showToast(postsCollected, postCollected);
}
})
},
0x08 列表渲染(核心)
0x09 Template模板的使用
模板化编程:实现wxml 和 wxss 的复用
template模板的好处:实现wxml代码 在多个页面之间的复用。将多个页面共用的wxml代码抽离出来,封装在一个template文件中。需要的时候,导入该文件即可。
post-item-template.wxml
name属性用于给模板命名
<template name='postItem'>
<view class="post-container">
<view class='post-author-date'>
<image class='post-author' src='{{item.img.avatar}}'></image>
<text wx:if="{{item.text_condition}}" class='post-date'>{{item.date}}</text>
</view>
<text class='post-title'>{{item.title}}</text>
<image class='post-image' src="{{item.img.imgSrc}}"></image>
<text class='post-content'>{{item.content}}</text>
<view class='post-like'>
<image src='/images/icon/chat.png' class='post-like-image'></image>
<text class='post-like-font'>{{item.collection}}</text>
<image class='post-like-image' src='/images/icon/view.png'> </image>
<text class='post-like-font'>{{item.reading}}</text>
</view>
</view>
</template>
post.wxml
import 导入模板文件
template 使用模板文件 is 指定 使用哪个模板,data用于传递数据给 模板。
技巧:data={{...item}} 将 item对象展开,在模板中就可以直接item中成员变量了
<import src="./posts-item/post-item-template.wxml"/>
<block wx:key="1" wx:for="{{posts_key}}" wx:for-item="item">
<template is="postItem" data='{{item}}'></template>
</block>
同样也可以将多个页面共用的wxss 样式抽离出来,封装到post-item-template.wxss中,需要时在wxss 文件中导入即可
@import "文件路径";
/* pages/posts/posts.wxss */
@import "./posts-item/post-item-template.wxss";
swiper{
width:100%;
height:480rpx;
}
swiper swiper-item image{
width:100%;
height:100%;
}
0x0A 事件中获取 组件的自定义属性:
组件的自定义属性,必须以data开头,然后可以若干个横线连接若干个单词,例如data-id = "{{}}"
<view catch:tap='onPostTap' data-postId="{{item.id}}" ></view>
如何获取到这个属性呢?
onPostTap:function(event){
var postId = event.currentTarget.dataset.postid;
console.log(post);
console.log("onPostTap");
},
event.currentTarget 获取到触发该事件的 组件对象
event.target 和 event.currentTarget的区别
event.target 指的是当前 点击的组件
event.currentTarget 指的是 事件捕获的组件
注意:dataset中 变量的横杠会被去掉,变成小驼峰命名法,例如:data-post-name 就变成了 postName ,data-postId 就变成了postid
前端编写的原则:先静后动,先样式后数据
0x0B 跳转页面并传参
onPostTap:function(event){
var postId = event.currentTarget.dataset.postid;
wx.navigateTo({
url: './post-detail/post-detail?id='+postid,
})
},
接收参数
onLoad:function(option){
var postId = option.id;
var postData = postsData.postList[postId];
this.setData({'postData':postData})
}
0x0C 界面交互API
显示消息提示框
wx.showToast({
"title":"提示内容",
"duration":"消失时间", 默认 1500ms
"icon":"success", 小图标 只支持 success 和 loading
success:function(){
},
fail:function(){
},
complete:function(){
}
})
wx.showModal(Object object)
显示模态对话框
实例代码:
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
wx.showModal({
title:"收藏",
content:"确认要收藏该文章?",
showCancel:true,
cancelText:"不收藏",
cancelColor: '#405f80',
confirmText:"收藏",
confirmColor:"#405f30"
})
wx.showActionSheet()
演示案例:
onShareTap: function (event) {
var itemList = [
"分享给微信好友",
"分享到朋友圈",
"分享到微博",
"分享到QQ"
];
wx.showActionSheet({
itemList: itemList,
itemColor: '#405f80',
success: function (res) {
//res.cancel 用户是不是点击了取消按钮
//res.tapIndex 数组元素的序号
wx.showModal({
title: "用户" + itemList[res.tapIndex],
content:"现在无法实现分享功能!"
})
}
})
}