• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序(九)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序运行环境与基本架构

  每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给它提供的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力。

  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":"复仇者联盟"
    })
  }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序开发 —— 微信支付发布时间:2022-07-18
下一篇:
uni-app开发小程序预览包过大发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap