微信小程序日记(一)
一、基础知识(目录与配置)
(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()
最新文章
- JavaScript Patterns 6.7 Borrowing Methods
- JS-改变页面的颜色(三)
- Cocos2dx.3x入门三部曲-软件环境配置(一)
- HTML列表-框架
- 【转】包管理器Bower详细讲解
- 文字处理控件TX Text Control X10独家揭秘(一):数据源自动处理
- 百度:在O(1)空间复杂度范围内对一个数组中前后连段有序数组进行归并排序
- weblogic迁移随手记
- js深入研究之匿名函数
- Swift之函数语法详解
- BFS and Queue
- Nodejs.sublime-build 在sublime3中的配置
- 【MyBatis源码分析】insert方法、update方法、delete方法处理流程(下篇)
- NSUserDefaults standardUserDefaults使用注意事项
- Vue练手项目(包含typescript版本)
- word 2013 粘贴的图片自适应大小
- 源码学习:一个express().get方法的加载与调用
- js-day02
- C#读取对象实例的值和对对象的属性自动赋值方法
- ubuntu16安装mysql图形界面
热门文章
- 反射工具类.提供调用getter/setter方法, 访问私有变量, 调用私有方法, 获取泛型类型Class,被AOP过的真实类等工具函数.java
- Zeal——好用的离线 API 文档大全!
- sql: having使用,及删除重复数据
- React 异步组件
- Cocos2D-x-3.0 编译(Win7)
- Hibernate三种状态;query查询;ResultTransformer转换为pojo对象;能够将query语句写在xml中;Criteria查询;ProjectionList总和/f分组等函数
- Java常用的快捷键
- k8s1.8 ingress 配置
- 关于ssm框架使用mysql控制台出现警告问题
- 700. Search in a Binary Search Tree