客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
小程序运行环境与基本架构 每个小程序都是运行在它所在的微信客户端上的，通过微信客户端给它提供的运行环境，小程序可以直接获取微信客户端的原生体验和原生能力。 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":"复仇者联盟" }) }
|
请发表评论