微信小程序入门五: wxml文件引用、模版、生命周期

实例内容

  • wxml文件引用(include、import)
  • 模版
  • 小程序生命周期

实例一: include方式引用header.wxml文件

文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用。

微信小程序里面,是包含引用功能的——include、import。这两个引用文件的标签,使用基本差不多,这里先说一下include。

微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染。
实例说明

这里将默认创建的用户头像信息提取出到header.wxml中,做为头部引用,分别由index2.wxml和index3.wxml引用,引用方式为include。
实例代码

pages中创建common/header.wxml

index.wxml中将系统默认创建的用户信息结构复制到header.wxml中。

header.wxml代码:

<!–pages/common/header.wxml–> <view bindtap=”bindViewTap” class=”userinfo”> <image class=”userinfo-avatar” src=”{{userInfo.avatarUrl}}” background-size=”cover”></image> <text class=”userinfo-nickname”>{{userInfo.nickName}}</text> </view>

因为两个页面都要包含header.wxml,所以样式文件就不重复写了,这里直接将样式拷贝到app.wxss

app.wxss代码:

创建index/index2index/index3

index2.wxml内容:

<!–pages/index/index2.wxml–> <view class=”container”> <include src=”../common/header.wxml” /> <view class=”myBtn”> <button type=”primary” bindtap=”goIndex3″>进入index3</button> </view> </view>

因为index2.wxmlindex3.wxml都需要userInfo数据,所以这边在index2获取到数据后,使用本地存储进行存储,index3.wxml读取本地存储。

index2.js代码:

实例二: import方式引用footer.wxml文件

这个实例使用import来引用文件,import比include要强大的多,待会我再对于这两都进行一下对比。

import引用方式涉及到了微信的模版(template),这里先说一下template。
微信视图模版(template)

template也是写在.wxml中,然后使用<template>…</template>标记指定模版信息,模版下定义:

<template name=”msgItem”>
视图代码…
</template>

使用name属性,作为模板的名字。

实例说明

使用模版的方式创建footer视图代码片,然后用importtemplate进行代码的调用。

微信小程序入门四: 导航栏样式、tabBar导航栏

实例内容

  • 导航栏样式设置
  • tabBar导航栏

实例一:导航栏样式设置

小程序的导航栏样式在app.json中定义。

这里设置导航,背景黑色,文字白色,文字内容测试小程序

app.json内容

{
“pages”:[
“pages/index/index”,
“pages/login/login”,
“pages/logs/logs”
],
“window”:{
“backgroundTextStyle”:”red”,
“navigationBarBackgroundColor”: “#000”,
“navigationBarTitleText”: “测试小程序”,
“navigationBarTextStyle”:”#fff”
}
}

window中的样式说明:
属性 类型 默认值 描述
navigationBarBackgroundColor HexColor 000000 导航栏背景颜色,如”#000000”
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新

效果:

实例二:tabBar导航栏

tabBar挺好的,可以放置于顶部或者底部,用于不同功能页面的切换。

tabBar同样在app.json中进行定义,看一下我在app.json中对tabBar的相关定义:

“tabBar”: {
“selectedColor”: “#1296db”,
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “首页”,
“iconPath”: “images/ico-home.png”,
“selectedIconPath”: “images/ico-home-d.png”
},{
“pagePath”: “pages/setting/setting”,
“text”: “设置”,
“iconPath”: “images/ico-setting.png”,
“selectedIconPath”: “images/ico-setting-d.png”
},{
“pagePath”: “pages/help/help”,
“text”: “帮助”,
“iconPath”: “images/ico-help.png”,
“selectedIconPath”: “images/ico-help-d.png”
}]
}

效果:

tabBar相关属性定义说明:
属性 类型 必填 默认值 描述
color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar上边框的颜色, 仅支持 black/white
list Array 是 tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top

tabBar list定义说明:
属性 类型 必填 说明
pagePath String 是 页面路径,必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 是 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
selectedIconPath String 是 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

微信小程序入门三: 简易form、本地存储

实例内容

  • 登陆界面
  • 处理登陆表单数据
  • 处理登陆表单数据(异步)
  • 清除本地数据

实例一: 登陆界面

app.json中添加登陆页面pages/login/login,并设置为入口。

修改视图文件login.wxml

<!–pages/login/login.wxml–> <view class=”container”>
<form bindsubmit=”formSubmit”>
<view class=”row”>
<text>姓 名:</text>
<input type=”text” name=”userName” placeholder=”请输入用户名” />
</view>
<view class=”row”>
<text>密 码:</text>
<input type=”password” name=”userPassword” placeholder=”请输入密码” />
</view>
<view class=”row”>
<button type=”primary” form-type=”submit”>登陆</button>
</view>

</form>
</view>

修改登陆样式login.wxss

/* pages/login/login.wxss */ .container{
padding: 1rem;
font-size: 0.9rem;
line-height: 1.5rem;
border-shadow: 1px 1px #0099CC;
} .row{
display: flex;
align-items: center;
margin-bottom: 0.8rem;
} .row text{
flex-grow: 1;
text-align: right;
} .row input{
font-size: 0.7rem;
color: #ccc;
flex-grow: 3;
border: 1px solid #0099CC;
display: inline-block;
border-radius: 0.3rem;
box-shadow: 0 0 0.15rem #aaa;
padding: 0.3rem;
} .row button{
padding: 0 2rem;
}

这里使用到了wx.getStorageSyncwx.setStorageSync,这里说一下,上面这两个方法类似于HTML5的本地存储,属于同步存储方式。

这两个方法,使用很简单,列下参数:

wx.setStorageSync(KEY,DATA)

修改一下login.wxml

<view class=”row”> <text>姓 名:</text> <input type=”text” name=”userName” placeholder=”请输入用户名” value=”{{userName}}” /> </view> <view class=”row”> <text>密 码:</text> <input type=”password” name=”userPassword” placeholder=”请输入密码” value=”{{userPassword}}” /> </view>

实例四: 清除本地数据

这里就不详细写了,直接介绍一下这两个清除本地数据的方法。

wx.clearStorage()

wx.clearStorageSync()

直接执行即可实现。