一、基础知识(目录与配置)
(1)标签
小程序的view相当于HTML的div标签一样,作占位
(2)每一个页面都需要在app.json里面注册,例如:
{
{
"pages": [
"pages/posts/posts",
"pages/welcome/welcome"
]
}
优先需要启动显示的页面放在第一位,该例子会先显示posts.wxml
(3)每一个页面对应一个目录,且目录下的文件名要一样
(4)app.json可以配置所有属性,而页面目录下的json只能配置window属性,所以在页面文件夹的json文件只需写需要配置的信息,不许要加上window
(5)配置全局变量
①在app.js添加全局值
globalData: {
douBan:"https://api.douban.com"
}
②在需要调用的js引入全局值
var app=getApp();
③获取具体指
app.globalData.douBan
二、常用属性
(1)数据绑定
①定义参数值
this.setData({
postdata: postData
});
②调用参数值
普通的获取绑定数据格式{{data}},而凡是标签属性都要加引号wx:if="{{post_data}}",
(2)If根据变量控制标签显示或隐藏:
在具体标签里面加wx:if="{{img_condition}}",condition是数据绑定为布尔值
(3)For循环渲染数据:
①后台返回数据格式如下:
post_data=[
{
date: "Sep 12 20",
title: "我是谁!",
},
{
date: "Dec 10 02",
title: "你是谁!",,
}
];
②小程序调用如下:
<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="idx"></block>
(4)事件绑定:
①在点击标签加上
bindtap='onTap'
②js里面编写 onTap函数
onTap:function(){
console.log("点击了")
},
(5)页面跳转和传参:
①存在子父关系,可返回
wx.navigateTo({
url: '../posts/posts?postid='+postid,
})
而此时会触发生命周期的onhide函数
②不存在关系,不可返回
wx.redirectTo({
url: '../posts/posts?postid='+postid,
})
而此时会触发onunload函数
(6)事件冒泡与非冒泡
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
子元素想要阻止父元素冒泡可以使用catchcap替换bindtap,一般都是用bindtap
三、模板template
①编写模板,在post-item-template.wxml编写模板,格式如下:
<template name="postItem"> 内容 </template>
②引入模板,在页面的wxml头部引入模板,格式如下:
<import src="posts-item/post-item-template.wxml" />
③添加模板,格式如下:
<template is="postItem" data="{{item}}" />这里的is就是对应模板的name名称
④模板引入样式。格式如下
@import "posts-item/post-item-template.wxss";
四、显示正在下拉效果
wx.showNavigationBarLoading();
五、缓存(上限10M,会永久保存)
①设置缓存:
wx.setStorageSync("test", {
game : "test",
deve : "wer"
})
②获取缓存:
wx.getStorageSync("test");
③清楚某个缓存:
wx.removeStorageSync("test")
④清除所有缓存:
wx.clearStorage()