网站开发团队架构,给别人做网站用什么,济南专业网站托管公司,设计公司网站要包含什么信息前言
哈喽大家好#xff0c;我是 SuperYing#xff0c;我们继续小程序入门系列#xff0c;本文将对小程序框架语法进行比较全面的介绍。在《小程序从入门到入坑》简介及工程创建中#xff0c;我们提到小程序项目结构#xff0c;主要包括 app.json#xff0c;app.js…前言
哈喽大家好我是 SuperYing我们继续小程序入门系列本文将对小程序框架语法进行比较全面的介绍。在《小程序从入门到入坑》简介及工程创建中我们提到小程序项目结构主要包括 app.jsonapp.jsapp.wxss 以及页面(组件)级的 .wxml.wxss.js.json。接下来我将逐步介绍以上重点组成部分。 读完本文您将收获 了解小程序项目主体文件明确 app.jsonapp.jsapp.wxss 等全局文件的作用及使用方式。了解小程序页面结构 WXML 语法完成诸如 数据绑定、列表渲染、条件渲染 等常用开发方式。了解小程序样式 WXSS 的使用以及基于 css 语法的扩展方面。了解小程序脚本 WXS 的使用及典型应用场景。了解小程序常用开发技巧基本可以独立完成小程序页面开发。 主体文件介绍
主体文件包括 app.jsonapp.jsapp.wxss。
app.json
app.json 位于小程序工程的根目录下负责对微信小程序进行全局配置。文件内容是一个 JSON 对象编写时需要严格按照 JSON 格式规范。
app.json 的常用配置项主要分为以下几类
pages: 设置页面路径必填项。window: 设置小程序外观。tabBar: 设置 tabBar 表现及对应页面。networkTimeout: 设置网络请求的超时时间。debug: 设置是否开启 debug 模式默认关闭。
app.json 整体结构如下
{ // 页面路径设置 pages : [] // 默认页面的窗口设置 window : {} // 底部tab设置 tabBar : {} // 设置网络请求API的超时时间 networkTimeout : {} // 是否为debug模式 debug : false
}pages 配置
用于指定小程序由哪些页面组成每一项都对应一个页面的 路径含文件名 信息。文件名不需要写文件后缀框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
未指定 entryPagePath 配置时数组的第一项代表小程序的初始页面即首页。
配置示例
pages: [pages/index/index,pages/logs/logs
],pages/index/index 即为小程序首页。 tip 使用微信开发者工具 增加 pages 配置会自动在小程序根目录默认 miniprogram的 pages 目录下创建对应页面文件包括 .wxml.wxss.js.json。 小程序每次需要增加/删除页面时都需要修改 pages 配置。另外小程序路由也是基于 pages 配置的路径进行导航的可以说 pages 是小程序不可或缺的重要配置。
window 配置
window 配置用于设置小程序的状态栏、导航条、标题、窗口背景色 等外观表现。
详细配置可参考小程序开发文档
配置示例
{
window: {// 导航栏标题、状态栏颜色仅支持 black / whitenavigationBarTextStyle: black,// 导航栏背景颜色navigationBarBackgroundColor: #ffffff,// 导航栏标题文字内容navigationBarTitleText: miniprogram-study,// 窗口的背景色backgroundColor: #eeeeee,// 下拉 loading 的样式仅支持 dark / lightbackgroundTextStyle: light},
}以下是 window 配置对应的小程序页面部分小伙伴们可参考以验证配置是否正确。 注意 关于颜色的配置应使用 十六进制 形式如 #ffffff。 tabBar 配置
什么是 tabBar
tabBar 是移动端应用比较常见的页面效果用于实现页面的快速切换。
在小程序中 tabBar 主要分为
顶部 tabBar底部 tabBar
配置项
如果小程序是一个多 tab 应用即客户端窗口的底部或顶部有 tab 栏可以切换页面可以通过 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。
tabBar 常用配置项如下
list 配置 tab 列表限制最少 2 个最多 5 个 tab。tab 每个项目可配置以下内容 pagePath: 必填页面路径必须在 pages 配置中先定义。text: 必填tab 上按钮文字。iconPath: tab 默认图标路径icon 大小限制为 40kb建议尺寸为 81px * 81px不支持网络图片。当 position 为 top 时不显示 icon。selectedIconPath: tab 选中时的图标路径icon 大小限制为 40kb建议尺寸为 81px * 81px不支持网络图片。当 position 为 top 时不显示 icon。 color 和 selectedColor 分别设置 tab 上的默认文字颜色及选中时的文字颜色。backgroundColor 设置 tab 的背景色。borderStyle 设置 tab 的边框的颜色 仅支持 black / white。position 设置 tab 的tabBar 的位置仅支持 bottom / top。
配置示例
{
tabBar: {list: [{pagePath: pages/index/index,text: 首页,iconPath: images/tabs/home.png,selectedIconPath: images/tabs/home-active.png},{pagePath: pages/mine/mine,text: 我的,iconPath: images/tabs/mine.png,selectedIconPath: images/tabs/mine-active.png}]},
}tabBar 部分标注 注意 tabBar 的数量应控制在 2 ~ 5 个之间。 当渲染顶部 tabBar 时不会渲染 icon仅渲染文字。 networkTimeout 配置
小程序中各种网络请求 API 的超时时间只能通过 networkTimeout 统一设置单位 毫秒ms。
配置项如下
requestwx.request 的超时时间默认 60000ms。connectSocketwx.connectSocket 的超时时间默认 60000ms。uploadFilewx.uploadFile 的超时时间默认 60000ms。downloadFilewx.downloadFile 的超时时间默认 60000ms。
配置示例
{networkTimeout: {request: 60000,connectSocket: 60000,uploadFile: 60000,downloadFile: 60000},
}debug 配置
此配置可以在开发者工具中开启 debug 模式默认 关闭。开启后在开发者工具的控制台面板调试信息以 info 的形式给出包括 Page 的注册页面路由数据更新事件触发 等。可以帮助开发者快速定位一些常见的问题。
配置示例
{debug: true
}控制台开启 debug 后打印信息 app.js
该文件是小程序应用的入口文件在该文件中调用 App() 函数来 注册小程序实例内容包括 全局生命周期函数全局函数全局属性 等。已注册的小程序实例可以在其他逻辑层代码中通过 getApp()获取。
示例
App({globalData: 我是全局属性,onLaunch() {// 小程序初始化完成时触发全局只触发一次},onShow() {// 小程序启动或从后台进入前台显示时触发},onHide() {// 小程序从前台进入后台时触发},onError(e) {// 小程序发生脚本错误或 API 调用报错时触发},onPageNotFound() {// 小程序要打开的页面不存在时触发},onUnhandledRejection() {// 小程序有未处理的 Promise 拒绝时触发},onThemeChange() {// 系统切换主题时触发}
})app.wxss可选
该文件是 全局样式表对项目中每个页面都有效可将一些系统级别的统一样式风格写入 app.wxss。页面渲染时页面组件级的 .wxss 文件样式会覆盖 app.wxss 中相同的选择器样式。关于 WXSS 使用详见后文 「小程序样式 - WXSS」。
页面文件介绍
配置文件 - .json
页面配置文件与 app.json 配置文件一样也是一个 json 文件。
app.json 中的部分配置也支持在页面(组件)级的 .json 文件进行配置。.json 文件配置项在当前页面会覆盖 app.json 中相同的配置项。
.json 配置文件的配置项设计 window 部分的即设置小程序的外观表现时不需要在 .json 中显示声明 window 属性直接设置指定配置即可。
配置示例
{ navigationBarBackgroundColor: #000000 navigationBarTextStyle: black navigationBarTitleText: 我的页面 backgroundColor: #efefef backgroundTextStyle: light
}注意 页面组件级的 .json 文件非必需若页面相关配置与 app.json 完全形同可省略该配置文件。 逻辑文件 - .js
小程序的每个页面都需要在对应的 .js 中进行注册。逻辑文件的主要功能包括注册小程序页面定义初始化数据注册页面声明周期函数注册事件处理函数 等。
小程序的逻辑文件使用 javascript 进行开发。所有的逻辑文件包括 app.js 最终将会打包成一份 JavaScript 文件。在小程序启动时运行直到小程序销毁类似于 ServiceWorker所以逻辑层也称为 App Service。
小程序中的每个逻辑文件都有独立的作用域具备模块化能力。由于小程序的逻辑层运行在 纯 javascript 引擎 中而并非是浏览器环境因此即便同样使用 javascript 编写但在小程序中无法使用浏览器对象如 documentwindow 等。同样的基于浏览器特有对象的框架也无法使用如 JQuery 等。因为无法通过操作 DOM 操作页面小程序中需要通过 数据绑定 和 事件响应 来处理页面。
注册页面
.js 逻辑文件中需要调用 Page() 函数来注册页面接受一个 Object 类型参数指定页面的初始数据、生命周期回调、事件处理函数等。
示例代码(属性特性见对应注释)
Page({/*** 页面的初始数据* 页面加载时data 将会以 JSON 字符串的形式由逻辑层传至渲染层因此 data 中的数据必须是可以转成 JSON 的类型字符串数字布尔值对象数组。* 渲染层可以通过 WXML 对数据进行绑定*/data: {},/*** 生命周期函数--监听页面加载* 一个页面只会调用一次可以在 onLoad 的参数中获取打开当前页面路径中的参数*/onLoad() {},/*** 生命周期函数--页面初次渲染完成时触发。* 一个页面只会调用一次代表页面已经准备妥当可以和视图层进行交互。 */onReady() {},/*** 生命周期函数--页面显示/切入前台时触发*/onShow() {},/*** 生命周期函数--页面隐藏/切入后台时触发如 wx.navigateTo 或底部 tab 切换到其他页面小程序切入后台等*/onHide() {},/*** 生命周期函数--页面卸载时触发如 wx.redirectTo 或 wx.navigateBack 到其他页面时*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},/*** 自定义事件响应*/handleButtonTap() {},/*** 自定义数据* 逻辑中可通过 this.customData 获取以下自定义数据*/customData() {hi: 我是自定义数据},
})获取当前页面栈
可在逻辑代码中调用 getCurrentPages() 获取当前页面栈的实例页面栈以数组形式按栈顺序给出数组第一个元素为 首页最后一个元素为 当前页面。 注意 不要尝试修改页面栈会导致路由以及页面状态错误。不要在 App.onLaunch 的时候调用 getCurrentPages()此时 page 还没有生成。 触发页面渲染
在逻辑代码中可以调用 this.setData() 函数触发页面渲染不能直接修改 data 数据。因为 this.setData() 被调用时会将数据从逻辑层发送到视图层触发视图层重绘同时会修改 Page 的 data 值。
setData 函数接受一个对象参数用于更新 data 中的指定数据。参数属性的键值非常灵活以下情况均可生效
data 键索引更新键对应的值。数组下标路径索引更新数组指定下标对应的值。对象属性路径索引更新对象指定属性对应值。动态路径索引按结果路径更新对应的值。
代码示例
Page({/*** 页面的初始数据*/data: {text: 123,userInfo: {name: SuperYing,age: 18},hobbies: [games, football, busketball],},handleTextChange() {/** data 键值索引更新 this.data.text 数据 */this.setData({text: 234})},handleArrayChange() {/** 数组下标路径索引更新 this.data.hobbies 第一个元素为 run */this.setData({hobbies[0]: run})},handleObjectChange() {/** 普通对象路径索引更新 this.data.useInfo.name 为 new name */this.setData({userInfo.name: new name,})},handleObjectChange2() {/** 动态路径索引更新 this.data.useInfo.name 为 new name */const prop namethis.setData({[userInfo.${prop}]: new name,})}
})结构文件 - .wxml
WXMLWeiXin Markup Language 是框架设计的一套标签语言用于渲染界面。
小程序框架通过 WXML在不同平台被渲染为不同端的渲染文件。 如上图WXML 语言最终会转译为宿主环境对应的语言所以 WXML 中使用的标签一定要使用小程序定义的标签不能使用自定义标签以保证页面结构能被正确的转译。
使用微信开发者工具开发时在 WXML 中编写 HTML 标签或自定义标签也可以正常渲染。这是因为微信开发者工具内核是浏览器内核而且微信开发者工具并没有对 WXML 和 WXSS 的内容进行强验证。但是无法保证在真机上可以正常渲染。因此微信开发者工具的效果仅用于方便开发调试而真正的效果一定要以真机效果为准。
WXML 可以实现 数据绑定、列表渲染、条件渲染、模板、事件等能力。
数据绑定
WXML 文件可以绑定对应 Page 中定义的 data 数据以在页面中直接使用 data 中的属性。
数据绑定使用 Mustache 语法双大括号将变量或简单运算包裹起来。主要有以下几种用法
简单绑定
简单绑定就是使用 Mustache 语法 将变量包裹起来。
代码示例
!--index.wxml--
view!-- 作为内容绑定 --view{{message}}/view!-- 作为属性绑定 --view iditem-{{id}} styleborder: {{border}}我是属性绑定/view!-- 作为控制属性绑定 --view wx:if{{show}}我是控制属性绑定/view!-- 关键字绑定 --checkbox checked{{false}}关键字绑定/checkbox
/viewindex.js
Page({data: {message: hello world,id: 0,border: 2rpx solid black,show: true}
})效果如下 注意 若关键字为布尔值时如 checkbox 的 checked 属性不能直接设置为 checkedfalse这样会将 checked 的值解析为一个 ‘false’ 字符串转成布尔值时为 true。这种情况需要将 false 用 {{}} 包裹起来。 运算
可以在 {{}} 内进行简单的运算支持以下运算
三元运算算数运算逻辑判断字符串运算数据路径运算
代码示例
!--index.wxml--
view!--三元运算--checkbox checked{{checked Y? true : false}}三元运算/checkbox!-- 算数运算 --view{{ a b}} {{c}} d/view!-- 逻辑判断 --view wx:if{{length 5}} /view!-- 字符串运算 --view{{hello name}}/view!-- 数据路径运算 --view{{object.key}} {{array[0]}}/view
/view// pages/index/index.js
Page({data: {checked: Y,a: 1,b: 2,c: 3,length: 1,name: world,object: {key: hello},array: [小程序从入门到入坑]}
})效果如下 组合
data 中的数据可以在 {{}} 中再次组合构成新的数组或对象。
代码示例
// index.wxml
text wx:for{{[zero, 1, 2, 3, 4]}} {{item}} /textbutton data-obj{{ { ...obj1, c: 3 } }} bind:taponButton1Tap按钮1/buttonbutton data-obj{{ { ...obj1, ...obj2 } }} bind:taponButton2Tap按钮2/buttonbutton data-obj{{ {field1, field2} }} bind:taponButton3Tap按钮3/button// index.js
Page({data: {zero: 0,obj1: {a: 1,b: 2},obj2: {c: 3,d: 4},field1: abc,field2: def},onButton1Tap(e) {console.log(按钮1, e.currentTarget.dataset.obj)},onButton2Tap(e) {console.log(按钮2, e.currentTarget.dataset.obj)},onButton3Tap(e) {console.log(按钮3, e.currentTarget.dataset.obj)}
})效果及控制台打印如下:
列表渲染
wx:for
在组建上使用 wx:for 控制属性绑定一个数组即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index数组当前项的变量名默认为 item。
代码示例
view wx:for{{myArray}}{{index}}-{{item}}
/viewPage({data: {myArray: [hello, world]}
})以上代码遍历 myArray重复渲染了两个 view。
效果如下 wx:for-index wx:for-item
wx:for-item 可以指定数组当前元素的变量名默认 item。
wx:for-index 可以指定数组当前下标的变量名默认 index。
代码示例
view wx:for{{myArray}} wx:for-indexmyIndex wx:for-itemmyItem{{myIndex}}-{{myItem}}
/viewPage({data: {myArray: [hello, world]}
})效果与 wx:for 示例一致。
单列表渲染时一般不需要手动设置 wx:for-index 和 wx:for-item当wx:for嵌套使用时就有必要设置以避免命名冲突。
嵌套列表代码示例
view wx:for{{nestedArray}} wx:for-indexmyIndex wx:for-itemmyItemview wx:for{{myItem}}{{index}}-{{item}}/view
/viewPage({data: {nestedArray: [[hello, world],[hello, 小程序]]}
})结果如下 wx:key
若列表中项目存在位置动态改变或者新增的情况且希望列表中的项目保持自己的特征和状态如 input 中的输入内容switch 的选中状态则需要使用 wx:key 来指定列表中项目的唯一的标识符。
熟悉 vue 的同学应该比较了解 v-for 的 key 属性。小程序的 wx:key 与 v-for 的 key 作用差不多目的在于提升列表渲染性能。
wx:key 的值可设为以下两种 1. 字符串应为 wx:for 循环的数组项目的某个属性该属性的值需要是数组中唯一的 字符串 或 数字且不能动态改变。 2. 保留关键字 *this 代表在 wx:for 循环的数组项目本身需要数组项目本身是一个唯一的 字符串 或者 数字。
当数据改变触发渲染层重新渲染的时候会校正带有 wx:key 的组件框架会确保他们被重新排序而不是重新创建以使组件保持自身的状态并且提高列表渲染时的效率。 注 如不提供 wx:key会报一个 warning如果明确知道该列表是静态或者不必关注其顺序可以选择忽略 代码示例
!-- item 属性 --
switch wx:for{{objectArray}} wx:keyunique styledisplay: block; {{item.id}}
/switch
button bindtapswitchSwitch/button
button bindtapaddToFront添加/button
!-- *this --
switch wx:for{{numberArray}} wx:key*this styledisplay: block; {{item}}
/switch
button bindtapaddNumberToFront添加/buttonPage({data: {objectArray: [{id: 5, unique: unique_5},{id: 4, unique: unique_4},{id: 3, unique: unique_3},{id: 2, unique: unique_2},{id: 1, unique: unique_1},{id: 0, unique: unique_0},],numberArray: [1, 2, 3, 4]},switch: function(e) {const length this.data.objectArray.lengthfor (let i 0; i length; i) {const x Math.floor(Math.random() * length)const y Math.floor(Math.random() * length)const temp this.data.objectArray[x]this.data.objectArray[x] this.data.objectArray[y]this.data.objectArray[y] temp}this.setData({objectArray: this.data.objectArray})},addToFront: function(e) {const length this.data.objectArray.lengththis.data.objectArray [{id: length, unique: unique_ length}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})},addNumberToFront: function(e){this.data.numberArray [ this.data.numberArray.length 1 ].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray})}
})体验以上代码后可以发现无论是更新列表顺序还是新增列表项目绑定了 wx:key 的 switch 组件的状态都不会刷新即没有重新创建 switch 组件而仅仅调整组件的位置。
wx:for block
wx:for 可以应用于 block 标签上用于渲染包含多个节点的结构块。 block/ 并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性。 代码示例
block wx:for{{myArray}}view {{index}}: /viewview {{item}} /view
/blockPage({data: {myArray: [hello, world]}
})效果如下
注意事项
当 wx:for 的值为字符串时会将字符串解析成字符串数组
view wx:forarray{{item}}
/view等同于
view wx:for{{[a,r,r,a,y]}}{{item}}
/view花括号和引号之间如果有空格将最终被解析成为字符串
view wx:for{{[1,2,3]}} {{item}}
/view等同于
view wx:for{{[1,2,3] }} {{item}}
/view条件渲染
wx:if
在页面结构中经常需要使用逻辑分支这时候可以使用 wx:if{{判断条件}} 来进行条件渲染当条件成立时渲染该代码块。
同时提供了 wx:elif 和 wx:else 来添加一个 else 块。
代码示例
view wx:if{{length 5}} 1 /view
view wx:elif{{length 2}} 2 /view
view wx:else 3 /view以上代码的渲染逻辑当 length 5 时渲染 1当 length 2 是渲染 2其余情况渲染 3。
wx:if block
与 wx:for 相同wx:if 也可以用于 block 标签上用于一次性判断多个标签而不影响布局。
代码示例
block wx:if{{true}}view view1 /viewview view2 /view
/block与 hidden 对比
除 wx:if 外组件还可以通过 hidden 属性控制显隐那么他们有什么区别呢
wx:if 用于控制是是否渲染控制块内的模板。当条件切换时会触发局部渲染以确保条件块在切换时销毁或重新渲染wx:if 是惰性的若初始渲染条件为 false框架什么也不做在条件第一次变 true 时才开始局部渲染。hidden 用于控制组件是否显示。组件始终会被渲染只是简单控制显示与隐藏并不会触发重新渲染和销毁。
一般来说wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此若需要频繁切换的情景下用 hidden 更好若在运行时条件基本不改变则 wx:if 更好。
事件绑定
WXML 中的事件通过 bind(或 catch)事件名 属性进行事件绑定。当触发事件时框架会调用逻辑层中对应的事件处理函数并将当前状态通过参数传递给事件处理函数。
由于小程序中没有 DOM 的概念因此事件只能通过 WXML 绑定不能在逻辑层动态绑定。
代码示例
view data-params123 bindtaphandleTap点击/viewPage({data: {},handleTap(e) {const params e.currentTarget.dataset.paramsconsole.log(参数${params})}
})点击按钮会触发 点击事件 tap, 在控制台打印 参数: 123。
效果如下
由于 事件系统 可以说的内容比较多后续会整一篇专题此处仅供小伙伴做初步了解。
模板
在实际项目开发中经常会遇到不同页面使用相同的页面结构的情况。这是可以将相同的页面结构放入到一个模板中然后在不同的页面调用传入对应的绑定数据即可。以提升代码复用性提升开发效率避免重复开发。
定义模板
模板的代码片段在 template 标签内定义通过 name 属性指定模板名称即可。
template namemyTemplateview内容/viewview{{content}}/view
/template使用模板
通过 is 属性指定需要渲染的模板。通过 data 属性传入模板所需的数据。
模板有自己的作用域只能使用传入的 data 以及模板定义文件中定义的 wxs / 模块不能直接使用 Page 中定义的 data。
template namemyTemplateview内容/viewview{{content}}/view
/template
template ismyTemplate data{{ content: hello 小程序 }} /模板也可以嵌套使用:
template namemyTemplateviewmyTemplate 内容/viewview{{content}}/view
/template
template namemyTemplate1viewmyTemplate1 内容/viewview{{content}}/viewtemplate ismyTemplate data{{ content: 我是 myTemplate 的 内容 }} /
/template
template ismyTemplate1 data{{ content: 我是 myTemplate1 的 内容 }} /is 属性可以使用 Mustache 语法来动态决定具体需要渲染哪个模板:
template namemyTemplateviewmyTemplate 内容/viewview{{content}}/view
/template
template namemyTemplate1viewmyTemplate1 内容/viewview{{content}}/view
/template
block wx:for{{[1,2]}}template is{{item 1 ? myTemplate : myTemplate1}} data{{content: item}} /
/block引用
WXML 提供两种方式来引用其他 WXML 文件import 和 include。
import
用于引入目标文件中定义的模板忽略模板定义之外的所有内容。
import / 通过 src 属性指定被引入文件的相对地址。import/ 引入会忽略引入文件中 template/ 定义以外的内容。如下例中仅引入了 tpl1.wxml 中定义的模板模板外的 view 标签内容不会渲染到页面中。
例如在 pages/template/tpls 目录下新增一个 tpl1.wxml 文件内容如下
// pages/template/tpls/tpl1.wxml
template nametpl1-Aview我是 tpl1-A 模板/view
/template
viewhello 小程序/view在 pages/template/template.wxml 中使用 import 引用 tpl1.wxml即可使用在 tpl1.wxml 中定义的模板 tpl1-A。
// pages/template/template.wxml
import src./tpls/tpl1.wxml /
template istpl1-A /效果如下
import 存在作用域的概念即只会引用目标文件中定义的模板而不会引用在目标文件中引用的模板。
如 pages/template/tpls 目录下新增 tpl1.wxml、tpl2.wxml存在如下引用关系template.wxml 引用 tpl1.wxmltpl1.wxml 引用 tpl2.wxml则 template.wxml 文件中可以使用 tpl1.wxml 中定义的 tpl1-A 模板而无法使用 tpl2.wxml 中定义的 tpl2-A 模板。
// pages/template/tpls/tpl1.wxml
import src./tpl2.wxml /
template nametpl1-Aview我是 tpl1-A 模板/viewtemplate istpl2-A /
/template// pages/template/tpls/tpl2.wxml
template nametpl2-Aview我是 tpl2-A 模板/view
/template// pages/template/template.wxml
import src./tpls/tpl1.wxml /
template istpl1-A /
!-- 不生效 --
template istpl2-A /inlcude
include 的作用域 import 恰恰相反会将目标文件中除 template 和 wxs / 以外的代码全部引入相当于将目标文件代码拷贝到 include 的位置。
我们对上面的例子做一下调整
// pages/template/tpls/tpl1.wxml
import src./tpl2.wxml /
template nametpl1-Aview我是 tpl1-A 模板/viewtemplate istpl2-A /
/template
view我是 tpl1 组件内容/view// pages/template/template.wxml
include src./tpls/tpl1.wxml /
view我是 template 内容/view
!-- 引用 tpl1-A 模板不生效 --
template istpl1-A /效果如下
通过以上应用可以发现
import 更适合引用模板定义文件而 include 更适合引用组件文件。
样式文件 - .wxss
WXSS (WeiXin Style Sheets) 是一套基于 CSS 拓展的样式语言用于描述 WXML 的组件样式。其具有 CSS 的大部分特性同时为了更适合小程序开发对 CSS 进行了扩充和修改。
扩展的特性包括
尺寸单位样式导入 注 熟悉 CSS 对于 WXSS 的使用有很大的帮助还不了解 CSS 的小伙伴建议先补习一下。可查阅 MDN 做个整体的了解。 尺寸单位
小程序新提供一个尺寸单位rpx以实现页面布局根据屏幕宽度进行自适应在渲染过程中 rpx 会按比例转化为 px。
rpx 转换规则
WXSS 规定屏幕宽度为 750 rpx若屏幕宽度为 375 px如 iphone6共有 750 个物理像素则 750rpx 375px 750 物理像素得出 1rpx 0.5px 1 物理像素。
常用设备屏幕转换如下
设备rpx 转 px公式屏幕宽度/750px 转 rpx(公式750/屏幕宽度)iPhone51rpx 0.42px1px 2.34rpxiPhone61rpx 0.5px1px 2rpxiPhone6 Plus1rpx 0.552px1px 1.81rpx
从上表可知iphone6 设备的转换结果最为标准即 1px 2rpx因此建议小程序的设计师可以以 iphone6 最为视觉标准进行页面设计。
样式导入
WXSS 中可以使用 import 导入外联样式表import 后跟要导入的外联样式表的相对路径结尾用 ; 表示语句结束。
代码示例
/** common.wxss **/
.small-p {padding:5px;
}/** app.wxss **/
import common.wxss;
.middle-p {padding:15px;
}内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style静态的样式统一写到 class 中。style 接收动态的样式在运行时会进行解析尽量避免将静态的样式写进 style 中以免影响渲染速度。
view stylecolor:{{color}}; /class用于指定样式类样式类名之间用空格分隔。
view classcustom_view normal_view /选择器
目前小程序支持的选择器如下
选择器样例样例描述.class.intro选择所有拥有 class“intro” 的组件#id#firstname选择拥有 id“firstname” 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容::beforeview::before在 view 组件前边插入内容
样式文件分为全局样式app.wxss和局部样式页面级的 .wxss局部样式只作用于对应页面且会覆盖全局样式中相同的选择器。
脚本文件 - .wxs
WXSWeiXin Script 是小程序独有的一套脚本语言结合 WXML可以构建出页面的结构。
WXML 无法调用页面的 .js 中定义的函数但是可以调用定义在 .wxs 中的函数鉴于此WXS 最典型的应用场景就是 筛选器。
WXS 语法上有与 JavaScript 相近的地方但他们属于完全不同的两种语言主要区别如下
WXS 有自己的数据类型。WXS 不支持类似于 es6 以上的语法。WXS 模块遵循 CommonJs 规范。
定义 WXS
WXS 代码可以编写在 wxml 文件中的 wxs 标签内或以 .wxs 为后缀名的文件内。
在 pages/wxs/a.wxs 中编写 wxs 代码
// pages/wxs/a.wxs
const foo hello 小程序
const bar function() {console.log(触发 a.wxs bar 函数)
}
module.exports {foo,bar
}在 pages/wxs/wxs.wxml 中引用 a.wxs 导出的内容
// pages/wxs/wxs.wxml
wxs src./a.wxs modulea /
view {{a.foo}} /view
view {{a.bar()}} /viewwxs 标签
该标签用于包裹 wxs 脚本段或引入指定脚本文件。
包含以下两个属性
module: 当前 wxs 标签的模块名。必填字段。src: 引用 .wxs 文件的相对路径。仅当本标签为 单闭合标签 或 标签的内容为空 时有效。
module 属性
在单个 wxml 文件内建议其值唯一。若有重复模块名则按照先后顺序覆盖后者覆盖前者。不同 wxml 文件之间的 wxs 模块名互补影响。
module 属性值的命名规则
首字符必须是字母a-zA-Z下划线_。剩余字符可以是字母a-zA-Z下划线_ 数字0-9。
src 属性
使用 src 引用其他 wxs 模块是需注意
只能引用 .wxs 文件模块且必须使用 相对路径。wxs 模块均为单例wxs 模块在第一次被引用时会自动初始化为单例对象。多个页面多个地方多次引用使用的都是同一个 wxs 模块对象。如果一个 wxs 模块在定义之后一直没有被引用则该模块不会被解析与运行。
模块
每一个 .wxs 文件和 wxs 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数默认为私有的对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数只能通过 module.exports 实现。
在 pages/wxs/a.wxs 中导出 foo 和bar
// pages/wxs/a.wxs
const foo hello 小程序
const bar function() {console.log(触发 a.wxs bar 函数)
}
module.exports {foo,bar
}若需要在.wxs模块中引用其他 wxs 文件模块可以使用 require 函数。
在 pages/wxs/b.wxs 中引用 a.wxs
// pages/wxs/b.wxs
var a require(./a.wxs)console.log(a.foo)
console.log(a.bar())使用 require 函数引用 wxs 模块时与使用 wxs src 属性引用类似同样需要注意以下几点
只能引用 .wxs 文件模块且必须使用相对路径。wxs 模块均为单例wxs 模块在第一次被引用时会自动初始化为单例对象。多个页面多个地方多次引用使用的都是同一个 wxs 模块对象。如果一个 wxs 模块在定义之后一直没有被引用则该模块不会被解析与运行。
注意事项
wxs 模块只能在定义该模块的 WXML 文件中被访问到。使用 include 或 import 引用时wxs 模块不会被引入到对应的 WXML 文件中。template 标签中只能使用定义该 template 的 WXML 文件中定义的 wxs 模块。
数据类型
WXS 目前支持以下数据类型
number 数值string 字符串boolean布尔值object对象function函数array : 数组date日期regexp正则
与 es5 差异
WXS 数据类型额外新增一个 constructor 属性
数据类型contructornumberNumberstringStringbooleanBooleanobjectObjectfunctionFunctionarrayArraydateDateregexpRegExp
对象生成方式
生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。生成 regexp 对象需要使用 getRegExp函数。其余数据类型均支持使用字面量方式定义数据对象。
数据类型判断
constructor 属性
由于每个数据类型都包含指定的 contructor 属性因此可以直接通过该属性进行判断。
var number 10;
console.log( Number number.constructor );var string str;
console.log( String string.constructor );var boolean true;
console.log( Boolean boolean.constructor );var object {};
console.log( Object object.constructor );var func function(){};
console.log( Function func.constructor );var array [];
console.log( Array array.constructor );var date getDate();
console.log( Date date.constructor );var regexp getRegExp();
console.log( RegExp regexp.constructor );tyoeof
此处 typeof 作用与 JavaScript 相同其中 object、array、date、regexp、null 类型均返回 object。
var number 10;
var boolean true;
var object {};
var func function(){};
var array [];
var date getDate();
var regexp getRegExp();console.log( number typeof number );
console.log( boolean typeof boolean );
console.log( object typeof object );
console.log( function typeof func );
console.log( object typeof array );
console.log( object typeof date );
console.log( object typeof regexp );console.log( undefined typeof undefined );
console.log( object typeof null );更多数据类型详细内容可以查阅小程序文档。
其他
小程序还支持其他如变量定义、注释、运算符、条件\循环语句以及内置的基础类库等其使用规则与 es5 大同小异此处就不多占篇幅了有疑问的小伙伴可以私聊或评论确实有必要补充的话后续可更新上来。
结语
今天的「小程序入门系列-简介及工程创建」就到这里啦读到这里的小伙伴应该对小程序主体文件处理小程序页面开发等有了大致的印象爱动手的小伙伴们快去动起来吧。
若本文内容有错误或遗漏的地方欢迎评论指出。感谢阅读愿你我共同进步谢谢
