了解小程序的概念以及优势和劣势
掌握小程序的申请和创建流程
掌握小程序的基本模板语法
掌握小程序代码组成
了解小程序的渲染模型
掌握小程序事件的使用
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
任何一个普通的开发者,经过简单的学习和练习后,都可以轻松地完成一个小程序的开发和发布。
pages: wxml: 编写小程序界面结构的地方 wxss: 编写小程序样式的地方 json:编写界面配置的地方 js:编写界面逻辑的地方 utils: 编写工具类的地方 app.js:创建程序实例的位置 app.json: 编写全局配置地方 app.wxss: 编写全局样式的地方 project.config.json: 项目的配置文件 sitemap.json:配置哪些网站可以被检索到
WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。例如:
3.1标签的使用
view标签是我们开发过程中最常用的标签了,这个就相当于Html中的div。
text标签也是我们开发中常用的,这个相当于Html中的span
image标签相当于我们Html中的img。
3.2数据绑定
用户界面呈现会因为当前时刻数据不同而有所不同,或者是因为用户的操作发生动态改变,这就要求程序的运行过程中,要有动态的去改变渲染界面的能力。
在 Web 开发中,开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。在小程序中,使用 WXML 语言所提供的数据绑定功能,来完成此项功能。
引用数据
通过{{}}的方式可以引用数据。
除了引用数据之外,这里还可以进行一些计算,最终显示的结果是计算之后得到的结果。
<view>{{msg}},{{num + 10}}</view>
小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。
3.3逻辑渲染
WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
使用 wx:elif 和 wx:else 来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM,hidden属性则是通过display属性设置为none来进行条件渲染。
<view hidden="{{condition}}"> 隐藏 </view>
3.4列表渲染
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
<!-- array 是一个数组 --> <view wx:for="{{array}}"> {{index}}: {{item.name}} </view> <!-- 对应的脚本文件 Page({ data: { array: [{ name: '天亮教育', }, { name: '尚云科技' }] } })
使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名。
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.name}} </view>
3.5 key
wx:key 的值以两种形式提供:
3.6 template
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 内定义代码片段,如:
<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template>
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入。
msgList:[ { index: 0, msg: '这是一段模板', time: '2020-10-10' } ] <view wx:for="{{msgList}}"> <template is="msgItem" data="{{...item}}"></template> </view>
在 index.wxml 中引用了 item.wxml,就可以使用 item模板
<import src="item.wxml"/> <template is="item" data="{{text: '测试'}}"/>
3.6 include
include 可以将目标文件中除了 外的整个代码引入,相当于是拷贝到 include 位置。
index.wxml
<!-- index.wxml --> <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/>
WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。
4.1 尺寸单位
在小程序中,规定所有手机的屏幕宽度都是750rpx,所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = (屏幕宽度/750)px
在iphone6手机下,屏幕宽度是375px,所以1rpx=0.5px。
4.2 样式的导入
@import './test_0.wxss'
4.3 样式选择器
5.1 小程序中的js和浏览器中和node中的区别
浏览器中JS:
ES
DOM
BOM
Node中的JS:
ES
NPM
Native
小程序中的JS:
ES
小程序框架
小程序API
6.1 小程序和浏览器中有什么不同
浏览器中渲染是单线程的。
而在小程序中的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。
6.2 小程序中如何渲染
我们看看小程序是如何把脚本里边的数据渲染在界面上的。
WXML模板使用 view 标签,其子节点用 {{ }} 的语法绑定一个 msg 的变量。
<view>{{ msg }}</view>
在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”。
Page({ onl oad: function () { this.setData({ msg: 'Hello World' }) } })
6.3 小程序中通讯模型
App({ onLaunch: function(options) {}, onShow: function(options) {}, onHide: function() {}, one rror: function(msg) {}, globalData: 'I am global data' })
App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。
onLaunch: 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow:当小程序启动,或从后台进入前台显示,会触发 onShow
onHide:当小程序从前台进入后台,会触发 onHide
one rror:当小程序发生脚本错误,或者 API 调用失败时,会触发 one rror 并带上错误信息。
其他字段:可以添加任意的函数或数据到 Object 参数中,在App实例回调用 this 可以访问。
7.2 生命周期
onLoad:生命周期函数–监听页面加载,触发时机早于onShow和onReady
onReady:生命周期函数–监听页面初次渲染完成
onShow:生命周期函数–监听页面显示,触发事件早于onReady
onHide:生命周期函数–监听页面隐藏
onUnload:生命周期函数–监听页面卸载