一、template模板
1. 定义模板(其他wxml文件中)
<template name="模板名"></template>
2. 使用模板(当前wxml文件中)
<template is="模板名"></template>
3. 传递参数(当前wxml文件中)
<template is="模板名" data="{{实参}}"></template>
4. 引入模板(当前wxml文件中)
<import src="模板路径"></import>
二、WXS的两种格式
wxs类似script标签, 可以用内嵌式和外链式写法
但是其中有模块化思想,所以,书写的函数需要导出使用
2.1 WXS第一种写法(内嵌)
.wxml中:
<!-- 数组渲染 -->
<!-- 注意: wxml文件中中,不能直接写一些js默认方法,如果想写一些类似于js的代码,需要引入wxs脚本.-->
<wxs module="wxs1">
var name="小红";
function _toFixed(price,len){
return price.toFixed(len);
}
module.exports={
name:name,
_toFixed:_toFixed
}
</wxs>
<!-- 需求：把价格保留2位小数 -->
<view wx:for="{{goods}}">
商品名称:{{item.goodsname}}
商品价格:{{wxs1._toFixed(item.price,2)}}
</view>
2.2 WXS的第二种写法(外链式)
<!--需要在.wxs文件中写类似于js的代码-->
<!--引入wxs文件-->
<wxs src="../common/wxs/common.wxs" module="wxs2"></wxs>
<!--渲染数据-->
<view> {{wxs2._toFixed(goods[0].price,3)}} </view>
三、生命周期函数
3.1 应用的生命周期
// 应用的生命周期
App({
globalData:{
userInfo:{
username:"admin",
password:"123123"
}
},
//1. 小程序初始化
onLaunch(){
console.log("小程序初始化");
//可以在当前App中使用this获取属性
console.log(this.globalData);
},
//2. 小程序切前台
onShow(){
console.log("小程序切前台");
},
//3. 小程序切后台
onHide(){
console.log("小程序切后台");
},
//4. 全局监听错误函数
one rror(err){
console.log(err,"错误信息");
},
//404
onPageNotFound(){
console.log("404");
}
})
3.2 页面生命周期
文档：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
//页面获取小程序实例的唯一方式 getApp()
var app = getApp();
let { username, password } = app.globalData.userInfo
Page({
data: {
username,
password
},
//1. 生命周期函数--监听页面加载 (只能触发一次)
onl oad(options) {
//options 获取页面参数
console.log("页面加载--onLoad");
},
//2. 生命周期函数--监听页面显示
onShow() {
console.log("页面显示--onshow");
},
//3. 生命周期函数--监听页面隐藏
onHide() {
console.log("页面隐藏--onhide");
},
//4. 页面相关事件处理函数--监听用户下拉动作
/*
下拉动作需要设置的属性
"enablePullDownRefresh": true,
"backgroundColor": "#ff0",
*/
onPullDownRefresh() {
//监听停止下拉动作
setTimeout(function () {
wx.stopPullDownRefresh()
}, 1000)
},
//5. 页面上拉触底事件的处理函数
onReachBottom() {
console.log("我向下滚动了");
},
//6. 用户点击右上角分享
onShareAppMessage() {
console.log("分享小程序");
}
})
3.3 组件生命周期(了解)
文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
子组件js中:
// 页面构造器是Page({})
//组件构造器是Component({})
Component({
data:{
},
// 组件的生命周期
lifetimes:{
created(){
console.log("组件创建完成--不能操作this.setData");
},
attached(){
console.log("组件在页面渲染完成--可以操作this.setData");
},
detached(){
console.log("组件销毁");
}
},
// 组件所在页面的生命周期
pageLifetimes:{
show(){
console.log("页面显示");
},
hide(){
console.log("页面隐藏");
},
resize(){
console.log("页面尺寸发生变化");
}
}
})
四、全局变量
在app.js中,有一个globalData,可以添加全局数据:
App({
globalData:{
userInfo:{
username:"admin",
password:"123456"
}
},
}）
在任意页面中就可以通过以下代码来获取:
// 页面获取小程序实例的唯一方式 getApp()
var app = getApp();
let {username,password} = app.globalData.userInfo;
五、路由导航
5.1 声明路由导航
.wxml文件
<!--
声明式导航 <navigator open-type="" url="">
跳转目标: target self
跳转方式(open-type):
navigate: 跳转普通页面,保留当前页,不能跳tab页,最多跳10层(页面栈-10层)
redirect: 跳转普通页面,但关闭当前页面,不能跳tab页
switchTab: 跳转tab页面,不能跳普通页,关闭其他非tab页
reLaunch: 跳转所有页,但关闭其他页
navigateBack: 返回上一页
-->
5.2 编程式导航 (推荐)
.wxml
<!-- 使用js跳转其他页面 -->
<button bindtap="toPage" type="primary">跳转页面</button>
.js
Page({
toPage(){
//1. 跳转到普通页面,保留当前页面
wx.navigateTo({
url: '../share/share?id=99&name=zs',
})
// 2. 跳转到普通页面,关闭当前页面
wx.redirectTo({
url: '../share/share',
})
// 3. 跳转到tab页面
wx.switchTab({
url: '../share/share',
})
// 4. 跳转所有页面
wx.reLaunch({
url: '../share/share',
})
}
})
5.3 路由传参接参
传递参数
使用?id=''&name=''
1. 声明方法导航
<navigator open-type="navigate" url="../share/share?id=100&name='小明'">
<button>跳转到普通页-navigator</button>
</navigator>
2. 编程式导航
wx.navigateTo({
url: '../share/share?id=99&name=zs',
})
接收参数: (在目标页面的onLoad声明周期函数中)
onl oad(options){
console.log(options);
},
六、组件化开发
注意: 要在当前子组件文件中的.json文件中设置
{
"component": true,
"usingComponents": {}
}
6.1 调用子组件
全局注册: app.json
{
"usingComponents": {
"my-comp":"/components/comp1/comp1"
}
}
局部注册: 对应页面的.json文件
{
"usingComponents": {
"my-comp":"/components/comp1/comp1"
}
}
6.2 使用子组件
<my-comp1></my-comp1>
6.3 组件的属性和方法
.wxml
<view>我是自定义组件</view>
<view>username:{{ username }}</view>
<view>color:{{ color }}</view>
<button bindtap="click">点击</button>
.js
Component({
//组件的属性列表 -- 对外开放属性
properties: {
color:{
type:String,
value:"red"
}
},
//组件的初始数据-当前组件私有的属性
data: {
username:"admrootin"
},
//组件的方法列表
methods: {
click(){
console.log('click');
}
}
})
七、父子组件通信
7.1 父传子
1. 在父组件中传入父组件定义的数据
<!--调用子组件-->
<my-comp num="{{num}}"></my-comp>
<my-comp></my-comp>
2. 在子组件中定义好properties数据
在组件.js中声明
Component({
properties:{
num:{
type:String,
value:"默认值"
}
}
})
3. 就可以在子组件中直接使用num了
<view>这是我们第一个组件{{num}}</view>
7.2 子传父
1. 在子组件内部做绑定事件(.wxml)
<button bindtap="father">点击</button>
2. 在子组件中声明事件(.js)
father(){
this.triggerEvent('send', {
value: 100
})
}
3. 在父组件调用子组件的地方传入自定义事件函数(.wxml)
<my-comp bindtap="send"></my-comp>
4. 在父组件中声明这个子组件传入的自定义事件函数(.js)
send(e){
console.log(e.detail)
}
八、分享功能
<button open-type="share"> 分享 </button>
<!-- 用户点击右上角分享,内部设置 -->
onShareAppMessage() {
return {
title:"自定义标题",
imageUrl:"图片路径",
path:"分享后返回页面路径"
}
}