【Cxinny】微信小程序笔记

  • 事件绑定

bindtap：类似click

bindinput：文本框的输入事件

bindchange：状态改变时触发

事件对象的属性列表event

 target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

bindtap

<button bindtap="btnTapHandler">按钮</button>

// 页面的js文件
Page({
    data:{
        count:0
    }
    btnTapHandler(e){
        console.log(e)
        this.setData({
            count:this.data.count+1
        })
    }
})

事件传参：只能用data-*传参

<button bindtap="btnTap" data-step="{{2}}">按钮</button>

值在e.target.dataset.step

bindInput

<input value="{{msg}}"bindinput="inputHandler">输入<input>

data:{
    msg:"hh"
}
inputHandler(e){
    this.setData({
        msg:e.detail.value
    })
}

条件渲染：wx:if、hidden

wx:if：以动态创建和移除元素的方式，控制元素和展示与隐藏

hidden：以切换样式的方式控制

列表渲染：wx:for

<view wx:for="{{array}}">
    索引是：{{index}} 当前项是：{{item}}
</view>

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
    索引是：{{idx}} 当前项是：{{itemName}}
</view>

// 加key值,不用{{}}
<view wx:for="{{array}}" wx:key="id"></view>

全局配置app.json

window结点常用配置项

 下拉刷新：enablePullDownRefresh:true

tabBar导航栏

 配置项 app.json，与page平级

 每个tab项的配置选项

 页面配置中常用的配置项

 下拉刷新项建议不要全局配置，放到具体页面配置

 网络数据请求

限制：（1）只能请求HTTPS类型的接口

           （2）必须将接口的域名添加到信任列表中

配置request合法域名

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项：（1）域名不能使用IP地址或localhost

                  （2）域名必须经过ICP备案

                  （3）一个月最多可申请5次修改

发起GET请求

wx.request({
    url: 'https://www.escook.cn/api/get',
    method: 'GET',
    data: {
        name: 'zs',
        age: 22
    },
    success: (res) => {
        console.log(res.data)  //data是服务器返回的数据
    }
})

发起POST请求

wx.request({
    url: 'http://www.escook.cn/api/post',
    method: "POST",
    data: {
        name: 'ls',
        age: 22
    },
    success: (res) =>{
        console.log(res.data)
    }
})

onLoad：监听页面加载

onLoad:function(option){

}

跨域

跨域问题只存在于基于浏览器的Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax请求”，而是叫做“发起网络数据请求”。

页面导航

声明式导航+传参

// 导航到tabBar页面，url必须以'/'开头，open-type必须是'switchTab'
<navigator url="/pages/message/message?name=zs&age=20" open-type="switchTab">
    导航到tabBar页面
</navigator>

// 导航到非tabBar页面，url必须以'/'开头，open-type必须是'navigate'
<navigator url="/pages/message/message" open-type="navigate">
    导航到非tabBar页面
</navigator>
//非tabBar页面可以不写open-type

// 后退导航，open-type必须navigateBack，delta表示后退的层级
<navigator open-type="navigateBack" delta="1">
    返回上一页
</navigator>

编程式导航

// 导航到tabBar页面，有success、fail、complete
gotoMessage(){
    wx.switchTab({
        url: '/pages/message/message'
    })
}

// 导航到非tabBar页面，有success、fail、complete
gotoInfo(){
    wx.navigateTo({
        url: '/pages/info/info'
    })
}

// 后退导航，有success、fail、complete参数
goBack(){
    wx.navigateBack({
        delta: 1
    })
}

页面事件

下拉刷新

// 页面json文件
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"

// 页面js文件,监听用户下拉动作
onPullDownRefresh:function(){
    //处理

    //调用此函数，关闭下拉刷新效果，不调用就不会关闭
    wx.stopPullDownRefresh()
}

上拉触底事件

// js文件
onReachBottom:function(){
    
}

生命周期

应用生命周期：特指小程序从启动->运行->销毁的过程

// app.js文件
App({
    // 小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化的工作
    onLaunch: function(options){ },
    // 小程序启动，或从后台进入前台显示时触发
    onShow: function(options){ },
    // 小程序从前台进入后台时触发
    onHide: function(){ }
})

页面生命周期：特指小程序中，每个页面的加载->渲染->销毁的过程

// 页面的.js文件
Page({
    // 监听页面加载，一个页面只调用1次
    onLoad:function(options) { },
    // 监听页面显示
    onShow:function(options) { },
    // 监听页面初次渲染完成，一个页面只调用一次
    onReady:function(options) { },
    // 监听页面隐藏
    onHide:function(options) { },
    // 监听页面卸载，一个页面只调用1次
    onUnLoad:function(options) { },
})

WXS脚本

wxml中无法调用在页面的.js 中定义的函数，但是，wxml中可以调用wxs 中定义的函数。因此，小程序中wxs的典型应用场景就是“过滤器”，经常配合Mustache语法进行使用，不能作为组件的诗句回调函数。
wxs不能调用js中定义的函数，wxs不能调用小程序提供的API

wxs和JavaScript的关系

 基本用法：常用于过滤器

<view>{{m1.toUpper.username}}</view>
<wxs module="m1">
    module.exports.toUpper = function(str){
        return str.toUpperCase()
    }
</wxs>

外联的wxs脚本

// tools.wxs 文件
function toLower(str){
    return str.toLowerCase
}

modules.export = {
    toLower: toLower
}

// .wxml文件
<view>{{m2.toLower(country)}}</view>

//src必须是相对路径
<wxs src="../../utils/tools.wxs" module="m2"></wxs>

自定义组件

局部引用组件：在页面的json配置文件中；全局引用组件：app.json配置文件

{
    "usingComponents":{
        "my-test1": "/components/test1/test1"
    }
}

//wxml
<my-test1></my-test1>

组件和页面的区别

从表面来看，组件和页面都是由.js、.json、.wxml和.ws这四个文件组成的。但是，组件和页面的.js 与.json文件有明显的不同:
组件的.json文件中需要声明"component": true
属性组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义到methods节点中
 

修改组件的样式隔离选项

// 组件的.js
Component({
    option: {
        styleIsolation: 'isolated'
    }
})

// 或在组件的.json文件中新增如下配置
{
    "styleIsolation": "isolated"
}

 properties是组件的对外属性，用来接受外界传递到组件中的数据

Component({
    properties:{
        // 完整定义属性的方式，需要指定属性默认值
        max:{
            type: Number,
            value:10
        }
        // 简化定义属性的方式
        max：Number
    }
})

// 应用
<my-test max="10"></my-test>

数据监听器

Component({
    observers: {
        'n1, n2': function(n1,n2){
            this.setData({ sum: n1 + n2 })
        }
    }
})
// 监听对象上所有属性的变化
'rgb.**': function(obj){
    this.setData({
        fullColor: `${obj.r},${obj.g},${obj.b}`
    })
}

纯数据字段

不用于界面渲染的data字段，有助于提升页面更新的性能

在Component 构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下:

Component({
    options:{
        pureDataPattern: /^_/
    },
    data: {
        a: true, // 普通数据字段
        _b: true,     // 纯数据字段
    }
})

组件的生命周期

 在小程序组件中，最重要的生命周期函数有3个，分别是created、attached、detached。它们各自的特点如下:
（1）组件实例刚被创建好的时候，created生命周期函数会被触发

  • 此时还不能调用setData
  • 通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段

（2）在组件完全初始化完毕、进入页面节点树后，attached生命周期函数会被触发

  • 此时， this.data已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据)

（3）在组件离开页面节点树后，detached 生命周期函数会被触发

  • 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
  • 此时适合做一些清理性质的工作
Component({
    lifetimes: {
        attached() { }, // 在组件实例进入页面节点树时执行
        detached() { }, // 在组件实例被从页面节点树移除时执行
    }
})

组件所在页面的生命周期

自定义组件的行为依赖于页面状态的变化

Component({
    pageLifetime:{
        show: function() { }, // 页面被展示
        hide: function() { }, // 页面被隐藏
        resize: function(size) { } // 页面尺寸变化
    }
})

插槽

<view>
    <slot></slot>
</view>

多个插槽

// 在组件的js文件，启用多个插槽
Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot文件
    },
    properties: {  },
    methods: {  }

})

// 组件模板
<view class="wrapper">
    <slot name="before"></slot>
    <slot name="after"></slot>
</view>
// 填充
<view slot="before">before</view>

父子组件之间的通信

属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据

只能父传子，且只能传递普通类型的数据

// 父组件的data节点
data:{
    count: 0
}

// 父组件的wxml结构
<my-test count="{{count}}"></my-test>

// 子组件的properties节点
properties:{
    count:Number
}
// 子组件的wxml结构
<view>count值为：{{count}}</view>

事件绑定：用于子组件向父组件传递数据，可以传递任意数据

// 第一步:在父组件中定义syncCount方法
syncCount(){
    console.log("")
}

// 第二步:在父组件的wxml中通过自定义事件传递给子组件
<my-test count="{{count}}" bind:sync="syncCount"></my-test>

// 第三步: 子组件的js,用this.triggerEvent()
methods:{
    addCount(){
        this.triggerEvent('sync',{value:this.properties.count})
    }
}

// 第四步：在父组件的js中，通过e.detail获取
syncCount(e){
    this.setData({
        count: e.detail.value
    })
}

获取组件实例：父组件还可以通过this.selectComponent("id选择器或class选择器")获取子组件实例对象

// 父组件的wxml
<my-test5 count="{{count}}" bind:sync="syncCount" class="customA" id="cA">
<my-test5>

<button bindtap="getChild">btn</button>

// 父组件的js
getChild(){
    const child = this.selectComponent('.customA')
    child.setData({
        count: child.properties.count + 1
    })
}

behaviors：用于实现组件间代码共享的特性

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。每个组件可以引用多个behavior，behavior也可以引用其它behavior。

// 创建behavior
module.export = Behavior({
    properties:{},
    data:{},
    methods:{},
    // 其他节点....
})

// 导入并使用
const myBehavior = require("../../behavior")

Compnent({
    behaviors:[myBehavior]
})

 CSS变量

html{
    --main-color: #efefef
}
.box{
    background-color: var(--main-color)
}
版权声明：本文为Cxinny原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。