初学微信小程序——配置问题(2)
六、生命周期函数:
在微信公众平台指南中搜索生命周期,找到页面生命周期
比如,我打开cate.js并编写,代码如下:
**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onload');
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onshow');
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onready');
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('下拉执行了');
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onhide');
},
调试结果如下:
七、数据绑定及同步异步操作:
同步操作:不需要实时反馈到页面,不会反映到页面
异步操作:需要实时反馈到页面,会反映到页面
步骤:
1.在app.json中,将“pages/cate/cate”放在首行,如图:
2.在cate.js文件添加:
<text>{{ name }}</text>
如图:
3.在cate.js中的data中添加元素:name,如图:
4.刷新页面,效果如图:
5.在onShow函数中添加指向:
如图:
另:执行顺序:先获取数据data,再执行生命周期函数onShow
同步操作:
所执行结果如下:
异步操作:
所执行结果如下:
八、WXML:for循环列表渲染
应用:
在cate.js中编写:
在cate.wxml中编写:
报错:
解决办法:添加———wx:key=" "
原因:提高执行效率!
报错消失:
模拟页面展示:
九、WXML:if条件判断
在cate.js中添加:
cate.wxml添加代码:
模拟页面显示:
另外,在表示范围时,不可连续,比如90>grade>60,就是错误的。
十:WXML:模板(难点)
使用模板原因:有很多代码重复,使用模板提高效率,避免代码重复!(仅限当前文件内)
只有调用才会被展示,并可重复调用。
1.在cate.js文件中编写代码:
其中,我设置了2个属性userinfo,userinfo2,里面分别有相同的元素和对应不同的值。
2.在cate.wxml文件中编写代码:
其中,该段代码为模板:
<template name="userinfo">
<view>
<view>姓名:{{name}}</view>
<view>地址:{{adress}}</view>
<view>学号:{{id}}</view>
</view>
</template>
该段代码为调用模板:
<template is="userinfo" data="{{...userinfo}}"></template>
<template is="userinfo" data="{{...userinfo2}}"></template>
模拟页面展示为:
初学微信小程序——配置问题(2)的更多相关文章
- 初学微信小程序——配置问题(1)
一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com 点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...
- 初学微信小程序
最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个demo时,忽然发现难道我的不是微信小程序的语法(我以前是iOS 开发,不用css),而是css样式的设 ...
- 初学微信小程序 TodoList
微信小程序的学习 微信小程序的开始尝试 TodoList 微信开发者工具生成 目录如下: . |-- app.js |-- app.json |-- app.wxss |-- pages | |-- ...
- 小程序——微信小程序初学踩过的坑
微信小程序初学踩过的坑 一.前言 最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...
- 《微信小程序七日谈》- 第一天:人生若只如初见
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
- 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...
随机推荐
- 大数据计算引擎之Flink Flink CEP复杂事件编程
原文地址: 大数据计算引擎之Flink Flink CEP复杂事件编程 复杂事件编程(CEP)是一种基于流处理的技术,将系统数据看作不同类型的事件,通过分析事件之间的关系,建立不同的时事件系序列库,并 ...
- RedisTemplate 获取过期时间的问题
RedisTemplate redisTemplate; Long seconds = redisTemplate.opsForValue().getOperations().getExpire(&q ...
- Plastic Bottle Manufacturer - Consumer Demand For Plastic Bottles Becomes Higher
Since transparent containers enable consumers to clearly see the contents, consumers are increasingl ...
- QAction菜单行为
/*File*/ QAction* close_action_; /*File*/ QAction* close_action_;
- 【代码学习】PYTHON 面向对象
一.方法重新 #!/usr/bin/python # -*- coding: UTF-8 -*- class Parent: # 定义父类 def myMethod(self): print '调用父 ...
- Spring Boot 2.x 入门前的准备-安装 Java JDK
本章节介绍在以 window7.window10 为代表的 window 和 mac book 下安装 Java 编译和开发环境JDK 1.8,在 window 上安装 Java JDK 的步骤,本章 ...
- springmvc项目的搭建
springmvc替代servlet的工作 Servlet - Springmvc jsp ->Servlet (Springmvc)->Jsp springmvc配置文件 ...
- Cisco AP-Flexconnect配置结果
一个部署Flexconnect AP(印度)注册到远端WLC(上海)的例子:1.连接AP的交换机接口的配置: nterface GigabitEthernet0/4switchport access ...
- 【SSM - druid 】配置与使用
web.xml 配置 <!-- druid的监控页面配置开始 --> <servlet> <servlet-name>StatViewServlet</ser ...
- 1. Elasticsearch startup on local
Download: https://www.elastic.co/downloads/elasticsearch 2. Setting: 1. [elasticsearch]\config\elast ...