专栏首页达达前端小程序基础知识点讲解-WXML + WXSS + JS,生命周期

小程序基础知识点讲解-WXML + WXSS + JS,生命周期

标题图

查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

小程序基础

小程序官方地址,小程序开发者工具,点击此处下载。在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发。

微信小程序共支持5种文件,wxmlwxssjsjsonwxs以及图片文件等。每一页面都具有wxmlwxssjsjson文件,但比不是必须的,小程序和网页类似,一种以html+css+js,而小程序则是wxml+wxss+js,如wxml用来描述页面结构,wxss用例描述页面的样式,js用来添加逻辑信息的。

wxml

wxml用来构建页面的结构

//数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello world!'
  }
})

学会用数据绑定,wxml中的动态数据都可来自对应的Pagedata中的数据,如何绑定是很简单易懂的。如

// 使用{{ ... }}
<view> {{ message }} </view>

<view id="item-{{id}}"> </view>

// 对应中的Page的data数据
Page({
  data: {
    id: 0
  }
})

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})

重点

true:代表真值。 false:代表假值。

// 不可少的 {{ ... }}
<checkbox checked="{{ture}}"> </checkbox>

<view hidden="{{flag ? true : false}}"> Hidden </view>
// 必备掌握
<view>{{object.key}} {{array[0]}}{{array[1]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['hh','da']
  }
})
// 数组
<view wx:for="{{[zero, 1, 2, 3]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})
// item,条目
<template is="object" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})
// {for: 1, bar: 2}
// 用...来将一个对象展开
<template is="object" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})
// {a: 1, b: 2, c: 3, d: 4, e: 5}
<template is="object" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})
// {foo: 'my-foo', bar:'my-bar'}
// 后边的会覆盖前面
<template is="object" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})
// {a: 5, b: 3, c: 6}

列表的渲染,通过wx:for,下标变量名为 index,数组当前项的变量名为 item。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
wx:for-item
wx:for-index
<view wx:for="{{array}}" wx:for-index="indexcoding" wx:for-item="itemcoding">
  {{indexcoding}}: {{itemcoding.message}}
</view>
// wx:if="{{condition}}" wx:else wx:elif
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

重点

wx:if 为 false,框架什么也不做,只有为真的时候才开始局部渲染。 wx:if 有更高的切换消耗而, hidden 有更高的初始渲染消耗。

// 模板 template
<template is=" ... " data="{{...item}}"/>
Page({
  data: {
    item: {
      msg: 'this is a template'
    }
  }
})
// 事件
bindtap="tapName"

Page({
  tapName: function(event) {
    console.log(event)
  }
})

事件分类:(即区分父节点有事件也会被响应)

  1. 冒泡事件:会向父节点传递
  2. 非冒泡事件:不会向父节点传递
<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

import和include

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

WXSS

wxsscss大部分相同,但wxsscss进行了修改和补充,wxss的特性有尺寸单位样式导入,在小程序中你会看到rpx这样的尺寸单位,小程序开发初期是以iPhone 6标准的,固定750rpx为屏幕宽度。

尺寸单位,屏幕宽固定为750rpx,在iPhone6 上,屏幕宽度为375px,换算750rpx = 375px = 750物理像素。iPhone6中,1rpx = 0.5px

样式导入,使用@import语句,路径为相对路径;如:

/** index.wxss **/
.name {
  padding:5px;
}

/** app.wxss **/
@import "index.wxss";
.age {
  padding:15px;
}

选择器

.class
#id
element
::after
::before

JS

js中文件运用到API的调用,点击传送门

生命周期

不用马上懂,别做项目别懂就行。

生命周期

App()用来注册一个小程序,接受一个object参数。

onLaunch 监听小程序初始化
onShow 监听小程序显示
onHide 监听小程序隐藏

getApp()用来获取到小程序实例。

var app = getApp()
console.log(app.globalData)

页面 Page

onLoad 监听页面加载
onShow 监听页面显示
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载

前台、后台定义:击左上角关闭或者按了Home键离开,进入了后台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被销毁。

结语

  • 本文主要讲解 小程序基础知识点讲解-WXML + WXSS + JS,生命周期
  • 下面我将继续对小程序中的其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 2.x折腾记 - (22) Vue 打包图片在safari不显示的问题

    图片不显示这个问题在safari上会出现,不管是PC还是手机端,而其他浏览器是可以正常预览

    CRPER
  • SwiftUI - 百行代码变十行,Swift再创辉煌

    苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕。在这场大会上除了「史上最难看 Mac 主机」、首次出现的iPadOS以外,我们还终于可以对饱受诟病的...

    iOSSir
  • SwiftUI WWDC作为开发者的我最激动的部分

    我们都知道前端工作离不开适配,虽然之前Apple Xib的一些设计适配起来很方便了。但是在pad或者tv上还是要写不同的代码去做在不同的平台运行。

    ZY_FlyWay
  • Flutter 快速上手定时器/倒计时及实战讲解

    这里我们设置了超时时间为 5 秒。然后启动一个定时器,等到 5 秒时候到了,就会执行回调方法。

    AndroidTraveler
  • iOS系统的底层通知框架库

    观察者模式是一种用于解耦一系列需要相互协作的类之间进行通信的对象行为模式。它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时,所有依赖于它的对象...

    iOSSir
  • 史上最强最贵Mac Pro诞生,iPadOS和iOS分家!WWDC19全面总结

    一年一度的WWDC终于来了!43岁的苹果,产品经验位居世界前列。一个迈入中年的公司,该如何持续做出让人惊艳的产品呢?答案就在WWDC 2019!

    AI科技大本营
  • iOS中WKWebView交互使用总结

    现在多数项目中会有使用webView的情况,过去往往使用UIWebView解决问题,但是由于其各种不便,给开发者带来了很多麻烦。现在项目中有所使用,所以写一篇总...

    iOSSir
  • iOS两年前的面试题总结,现在的你掌握了嘛?

    这些面试题是两年前的标准了,虽然跟现在的面试需求显得相对简单了点,但是也是可以帮着梳理一下基础方面的知识的!

    iOSSir
  • 基于ARKit的iOS无限屏实现,还原锤子发布会效果

    通过在越狱环境下修改SpringBoard.app,实现了一个iOS桌面的无限屏模式!

    iOSSir
  • iOS (动态库,静态库) 的制作,使用及遇到的问题

    去年接的一个私活,制作SDK给其它游戏厂家使用,功能很简单就是集成 登录,注册,支付等功能。当初抵挡不住金钱的诱惑,对于从没做过SDK的我竟有莫名的勇气接了下来...

    honey缘木鱼

扫码关注云+社区

领取腾讯云代金券