微信小程序(九)
小程序运行环境与基本架构
每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给它提供的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力。
wxml视图文件和wxss样式文件都是对渲染层的描述
脚本文件js文件是对页面的逻辑层的描述
网页都内置了一个 webviewId 的内部状态变量,来记录他们各自是在几号 weview 进程之中进行渲染的
Page({
data:{
t:{i:false}
}
})
<!-- 网页-->
<text wx:if="{{t.i}}" style="font-size:16rpx;color:red;">推荐</text>
<!-- i 如果是true 就显示"推荐",反之...>
使用条件渲染与使用 hidden 属性有什么区别
使用 hidden 属性时,这个元素总是要先辈渲染生成的 hidden 属性只是控制了其可见性而已,对于可见性需要频繁切换的时候我们就不建议使用条件渲染
列表渲染
重复的渲染生成组件
wx:for 所绑定的数据数组,会循环遍历后显示。使用 item 生成对象的概念
<view class='movie' wx:for="{{WeeklyMovie}}">
<image class='movie-image' src='{{item.imges}}'></image>
<text>{{item.name}}</text>
<text>点:{{item.comment}}</text>
<text wx:if="{{item.i}}" style='font-size:16rpx;color:red;'>强烈推荐</text>
</view>
-------------------------------------------------------------------------------
使用 swiper 组件
从列表展示变为幻灯片轮播展示
<swiper style='background:#eee;'>
<swiper-item>123</swiper-item>
<swiper-item>456</swiper-item>
<swiper-item>789</swiper-item>
</swiper> <swiper style='background:#eee; height:260px;'>
<swiper-item>
<text>123</text>
<image src='/imges/g.jpg'></image>
</swiper-item>
<swiper-item>
<text>456</text>
<image src='/imges/g.jpg'></image>
</swiper-item>
<swiper-item>
<text>789</text>
<image src='/imges/g.jpg'></image>
</swiper-item>
</swiper>
------------------------------------------------------------------------
页面生命周期函数
页面状态数据如何初始化,onLoad(options) 第一被调用,完成页面初始化操作
onShow 初始加载之后调用一次
onReady 渲染完成后调用
onHide 每一次被隐藏的时候被调用一次
onUnload 当页面被下载后调用
onLoad:function (options){
this.setData({
currentIndex: this.data.WeeklyMovie.length -1
})
}
----------------------------------------------------------------------------------
this.setData() 方法
小程序并没有提供类似 DOM 的js api 来直接更新视图
this.setData() 方法-更新数据并让框架自动更新相关视图
更新是增量式的
单向绑定的
小程序中对内部状态数据进行更新,不能采用直接赋值写入的方式
f0:function(event){
this.setData({
count:this.data.count + 1,
"WeeklyMovie[0].name":"复仇者联盟"
})
}
微信小程序(九)的更多相关文章
- 微信小程序把玩(二十九)video组件
原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...
- 微信小程序把玩(十九)radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...
- 微信小程序把玩(九)scroll-view组件
原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用 ...
- 微信小程序把玩(三十九)navigation API
原文:微信小程序把玩(三十九)navigation API 演示效果也看到了小程序也就提供这几个处理导航控制.值得注意的是只能同时导航五个页面 主要属性: 导航条一些方法 wx.setNavigati ...
- 九,微信小程序开发浅谈
最近在帮朋友做一款微信小程序(后面统称为小程序),有简单的交互,以及分享和支付功能.下面就简单的对小程序开发做一个简单的介绍,希望可以帮助大家!!! 当前的小程序我们是在windows系统里开发的,如 ...
- 微信小程序开发教程(九)视图层——.wxss详解
WXSS是一套样式语言,用于描述WXML的组件样式. 官方文档表示,WXSS的选择器目前支持(“.class”.“#id”.“elemnt”.“element,element”.“::after”.“ ...
- uni-app开发经验分享十九: uni-app对接微信小程序直播
uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情> 记录这两个参数直播 ...
- 微信小程序与传统APP十大优劣对比
随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比 ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序常见问题集合(长期更新)
最新更新: 新手跳坑系列:推荐阅读:<二十四>request:fail错误(含https解决方案)(真机预览问题 跳坑指南<七十>如何让微信小程序服务类目审核通过 跳坑六十九: ...
随机推荐
- ThreadLocal基本使用和内存泄漏分析
ThreadLocal基础部分 ThreadLoal的作用 保存线程的独立变量,即每个线程维护一份.这种变量在线程的生命周期内起作用,减少同一个线程内多个函数之间公共变量传递麻烦. 使用场景 需要给不 ...
- Mybatis逆向工程和新版本MybatisPlus3.4逆向工程的使用
Mybatis和MybatisPlus3.4的使用 目录 Mybatis和MybatisPlus3.4的使用 1 RESTFUL 2 逆向工程 2.1 tkMybatis逆向工程 2.1.1 导入依赖 ...
- Unity——观察者模式
观察者模式 一.Demo展示 二.设计思路 我们假设一种情况,在app中修改了头像,在所有显示头像的UI中都需要更改相应的图片,一个个去获取然后调用刷新会非常麻烦: 因此我们需要一个自动响应机制--观 ...
- 关于突破 SESSION 0 隔离场景发现的一些问题
0x00 Tricks 0x01 用ZwCreateThreadEx 在 Windows 10 下直接通过管理员权限+SeDebugPrivilege启用. 0x02 用CreateRemoteThr ...
- mysql 建表后 重新构建 自增字段 (保留 原有字段结构)
添加字段 1.去除原id的自增功能:ALTER TABLE A_A MODIFY COLUMN id int(10) NOT NULL FIRST ; 2.添加名称为cstId,类型为bigint的字 ...
- 洛谷4475 巧克力王国(KD-Tree + 维护子树和)
(嘤嘤嘤 又是一个自闭了一晚上的题) qwq果然不是平面上的点的问题,也可以直接用KDTree打暴力 我们对于巧克力直接建kdtree 维护一个\(mx[i],mn[i]\) 但是有一个非常不友好的事 ...
- jenkins+allure中测试包括为空,没有数据
- SudokuSolver 1.0:用C++实现的数独解题程序 【一】
SudokuSolver 1.0 用法与实现效果 SudokuSolver 是一个提供命令交互的命令行程序,提供的命令清单有: H:\Read\num\Release>sudoku.exe Or ...
- 容器化之路Docker网络核心知识小结,理清楚了吗?
Docker网络是容器化中最难理解的一点也是整个容器化中最容易出问题又难以排查的地方,加上使用Kubernets后大部分人即使是专业运维如果没有扎实的网络知识也很难定位容器网络问题,因此这里就容器网络 ...
- 解决npm : 无法加载文件 D:\Code\renren-fast-vue\node_modules\.bin\npm.ps1,因为在......
解决这个问题: 看看错误信息: npm : 无法加载文件 D:\DevPath\nodejs\npm.ps1,因为在此系统上禁止运行脚本.有关详细信息,请参阅 https:/go.microsoft. ...