六、生命周期函数:

 

在微信公众平台指南中搜索生命周期,找到页面生命周期

比如,我打开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. 初学微信小程序——配置问题(1)

    一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com  点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...

  2. 初学微信小程序

    最近微信推出了微信小程序,为此我学了几天,基本了解了组件及简单语法,但是今天我自己想要独立写一个demo时,忽然发现难道我的不是微信小程序的语法(我以前是iOS 开发,不用css),而是css样式的设 ...

  3. 初学微信小程序 TodoList

    微信小程序的学习 微信小程序的开始尝试 TodoList 微信开发者工具生成 目录如下: . |-- app.js |-- app.json |-- app.wxss |-- pages | |-- ...

  4. 小程序——微信小程序初学踩过的坑

    微信小程序初学踩过的坑 一.前言     最近因为某些需要和个人兴趣打算开发一下微信小程序,经过在官方网站上的基本了解,我大体知道了微信小程序开发的大致过程,其实最本质的就是MVVM,借用了很多模式上 ...

  5. 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  6. 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 上篇文 ...

  7. 《微信小程序七日谈》- 第一天:人生若只如初见

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  8. 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...

  9. 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...

随机推荐

  1. spring data flow

    spring data flow相当于一个快速发布应用的平台.并可以通过消息队列(kafa,rabbitMQ)把多个应用链接在一起进行链式处理数据.支持的平台是: Cloud Foundry Apac ...

  2. python opencv:色彩空间

    RGB色彩空间 常见的色彩空间 色彩空间的转换 cv2.cvtColor(image, 转换选项) 常见的两个颜色转换 HSV与RGB YUV与RGB inRange方法 函数参数: 第一个参数:是原 ...

  3. Centos 安装 mysql 5.7

    下载mysql yum包 wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm 安转软件源 xxx.rpm是刚刚 ...

  4. docker部署-windows环境

    docker部署-windows环境 1.      docker windows 1.1.    安装 win7或者win8需要利用docker toolbox来安装,其是一个docker工具集,w ...

  5. 吴裕雄 PYTHON 神经网络——TENSORFLOW 学习率的设置

    import tensorflow as tf TRAINING_STEPS = 10 LEARNING_RATE = 1 x = tf.Variable(tf.constant(5, dtype=t ...

  6. AngularJS学习:第一个demo

    1. 引入angular.js 相应版本下载地址: https://code.angularjs.org/ 2. 编写html <!DOCTYPE html> <html> & ...

  7. 构造数列Huffman树总耗费_蓝桥杯

    快排! /** 问题描述 Huffman树在编码中有着广泛的应用.在这里,我们只关心Huffman树的构造过程. 给出一列数{pi}={p0, p1, …, pn-1},用这列数构造Huffman树的 ...

  8. linux 管道相关命令(待学)

    1.1 cut cut:以某种方式按照文件的行进行分割 参数列表: -b 按字节选取 忽略多字节字符边界,除非也指定了 -n 标志 -c 按字符选取 -d 自定义分隔符,默认为制表符. -f 与-d一 ...

  9. 【PAT甲级】1068 Find More Coins (30 分)(背包/DP)

    题意: 输入两个正整数N和M(N<=10000,M<=10000),接着输入N个正整数.输出最小的序列满足序列和为M. AAAAAccepted code: #define HAVE_ST ...

  10. 对FPM 模块进行参数优化!

    Nginx 的 PHP 解析功能实现如果是交由 FPM 处理的,为了提高 PHP 的处理速度,可对FPM 模块进行参数跳转.FPM 优化参数:pm 使用哪种方式启动 fpm 进程,可以说 static ...