微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
实例内容
- 条件渲染
- 数据遍历
- 网络请求
- 获取本地图片
实例一: 条件渲染
如果motto
为Hello World
,则输出你好世界
,否则原样输出。
这里是分支条件判断,直接在视图文件里修改,修改index.wxml
<text wx:if="{{motto != 'Hello World'}}" class="user-motto">{{motto}}text> <text wx:else>你好世界text>
wx:if
、wx:else
、wx:elif
,是微信条件判断的控制属性,需要添加到组件中使用。
但是如果我们想一次性判断多个组件标签,我们可以使用一个标签将多个组件包装起来,并在上边使用wx:if
控制属性。
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
注意: 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
实例二: 数据遍历
在index.js
中加入数据。
在index.wxml
中读取数据。
wx:for-item
可以指定数组当前元素的变量名
wx:for-index
可以指定数组当前下标的变量名
这两个项也可以不指定,默认数组的当前项的下标变量名默认为index
,数组当前项的变量名默认为item
。
类似block wx:if
,也可以将wx:for
用在标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
实例三: 网络请求
当用ajax进行请求的时候,最讨厌的就是跨域问题,而在小程序上是没有这个问题的。
数据接口:https://raw.githubusercontent.com/jiangzy27/how_to_react/master/score.json
接口内容:
{"data":[{"id":201701,"name":"Jackson","score":100},{"id":201702,"name":"Mike","score":78},{"id":201703,"name":"Joe","score":62}]}
修改index.js
加入变量,添加请求的方法。
//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, myText: '你好,世界!', arr1: [{name:'张三', age:18},{name:'李四', age:19},{name:'王五', age:20}], removeData:'', }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, //自定义事件 myEventHandle : function(){ this.setData({myText:"世界你好"}); }, onLoad: function () { console.log('onLoad') var that = this //获取远程数据 wx.request({ url: 'https://raw.githubusercontent.com/jiangzy27/how_to_react/master/score.json', header:{ "Content-Type":"application/json" }, data: {}, success: function(res){ that.setData({removeData:res.data.data}); }, }) //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
修改index.wxml
,进行数据读取。
效果:
wx.request
说明:
参数说明:
实例四: 获取本地图片
这里使用微信组件wx.chooseImage
修改index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, myText: '你好,世界!', arr1: [{name:'张三', age:18},{name:'李四', age:19},{name:'王五', age:20}], myPic: null, }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, //自定义事件 myEventHandle : function(){ var that = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 success: function(res){ that.setData({myPic:res.tempFilePaths}); }, }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
修改index.wxml
效果:
wx.chooseImage
说明
wx.chooseImage
参数:
- 跟着柴毛毛学Spring(4)——面向切面编程![这里写图片描述](http://img.blog.csdn.net/20171031111402095)
- MYSQL数据闪回方式
- 剑指 offer代码解析——面试题39判断平衡二叉树
- 跟着柴毛毛学Spring(3)——简化Bean的配置
- 剑指 offer代码解析——面试题39二叉树的深度
- 跟着柴毛毛学Spring(2)——Bean的配置
- C++ 使用STL string 实现的split,trim,replace-修订
- 跟着柴毛毛学Spring(1)——纵观Spring
- MYSQL常用SQL汇总
- Linux 下设置SVN DIFF
- 剑指 offer代码解析——面试题38数字在排序数组中出现的次数
- 剑指 offer代码解析——面试题37两个链表的第一个公共结点
- 剑指 offer代码解析——面试题34丑数
- 剑指 offer代码解析——面试题35第一个只出现一次的字符
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 10行Python代码自动清理电脑内重复文件,解放双手!
- 【投稿】刀哥:Rust学习笔记 3
- 为你的数据添加置信区间
- Linux磁盘管理
- Vue项目中简单的store模式
- 5分钟学linux命令之split
- 分母为0一定会抛异常吗?
- 明明有class为什么还是报ClassNotFoundException?
- Maven 错误找不到符号
- 环境变量配置为jdk8,却显示java版本为jdk7
- Python脚本按照当前日期创建多级目录
- linux常用的读取文件内容指令
- Executors.newSingleThreadScheduledExecutor();线程池中放入多个线程问题
- SqlServer批量删除表
- java 获取一天内crontab任务执行的时间点