微信小程序day02-

一、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. 全局监听错误函数
  onError(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. 生命周期函数--监听页面加载 (只能触发一次)

  onLoad(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声明周期函数中)

 onLoad(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:"分享后返回页面路径"
    }
}