V-if：依赖于DOM节点的控制，在切换模块时，Vue有一个局部编译/卸载的过程，v-if时真实的条件渲染，但同时也是"懒惰的"，当初始渲染条件时为假，则什么都不做，当条件为真时，才会渲染模块。
v-show：依赖于DOM节点的display属性，当v-show传入的值为true时，对应的display的值为block，当传入的值为false时，display的值为none。不管初始条件是什么，元素总是会被选入，但只是基于CSS进行切换。

列表渲染

使用wx:for绑定一个数组，默认数组下标名为index 变量名默认为item


<view wx:for="{{array}}"> {{index}}: {{item.message}} </view>
 
Page({
 
    data: {
 
        array: [{ message: 'foo', },
 
          { message: 'bar' }]
 
        }
 
})

wx:key的使用

指定唯一的key值，提高渲染效率

WXSS模板样式

类似于CSS

wxss独有的属性

rpx尺寸单位
- 能解决屏幕适配，rpx把屏幕宽度等分为750份，总和为750rpx。在不同大小的屏幕上一个rpx所代表的大小不同。
- rpx与px之间的换算：750rpx = 当前屏幕大小的px
@import导入
- import + “需要导入样式的相对路径”；

全局样式和局部样式

全局样式中的样式会应用于所有页面
当全局样式和局部样式冲突时，根据就近原则局部样式会覆盖掉全局样式
只有当局部样式的权重大于或等于全局样式时，才会覆盖全局样式。（如果全局样式的权重高，则采用全局样式）

全局配置

根目录下的app.json是小程序的全局配置文件

pages：记录所有页面的存放路径
window：设置小程序窗口的外观

常用配置项
tabBar：设置底部的tabBar效果
style：是否启用新版的组件样式

设置下拉菜单的样式


"window": { 
    //下拉 loading 的样式，仅支持 dark（小圆点是暗色的） / light(小圆点的是白色的）  
               
    "backgroundTextStyle": "light", 
 
    //导航栏的背景色，只支持十六进制的颜色，不支持文本格式的颜色     
        
    "navigationBarBackgroundColor": "#fff", 
 
    //导航栏顶部的文字 
 
    "navigationBarTitleText": "Weixin", 
 
    //设置导航栏的文字颜色(只支持黑色和白色) 
 
    "navigationBarTextStyle": "black", 
 
    //设置下拉菜单 
 
    "enablePullDownRefresh": true, 
 
    //设置下拉菜单刷新时窗口的背景色 
 
    "backgroundColor": "#eeeeee" },

设置上拉触底的距离

上拉触底是通过手指在屏幕上的上拉滑动操作，从而加载更多的数据的行为，默认距离是50px

"onReachBottomDistance": 50

tabBar

有顶部和底部tabBar
可以设置最少两个最多五个的tab页签
当渲染顶部tab时不显示icon，只显示文本

tabBar的六个组成部分

backgroundColor：tabBar的背景色
selectIconPath：选中时的图片路径
borderStyle：tabBar上边框的颜色
iconPath：未选中时的图片路径
selectedColor：tab上的文字选中的颜色
color：tab上的文字（默认）未选中的颜色

tabBar的节点的配置项

每个tab项的配置选项

配置tabBar的步骤

准备好图片资源
1. 包含active的是选中后的图标，不包含active的是未选中时的图标
在app.json文件中新增pages节点，新建对应的tab页面（tab页面必须放在普通页面的前面才能正常运行）
打开app.json,新增tabBar节点，新增list数组，在这个数组中存放着每个Tab项的配置对象，其中list中的每一个对象包含的属性有
1. pagePath：指定当前tab对应的页面路径（必填）
2. text：指定当前tab上按钮的文字（必填）
3. iconPath：指定当前tab未选择时的图片路径
4. selectedIconPath：指定当前tab被选中后高亮的图片路径

页面配置

每个页面中都有.json配置文件，用来对当前页面的窗口外观、页面效果进行配置。

页面配置文件和全局配置配置的关系

app.json中的window节点中的配置，对所有页面都生效。想单独配置页面时，只需要在对应的json文件中进行配置即可。

根据就近原则，如果产生冲突，最终效果以页面配置为准（全局配置将会被覆盖）

建议"enablePullDownRefresh": true属性不要再全局配置中使用，当某个页面需要使用下拉刷新时，再去添加这个属性

网络数据请求

出于安全性的考虑，小程序只能使用HTTPS类型的接口，必须将接口的域名添加到信任列表中。

配置request合法域名

登录到微信小程序管理后台—>开发管理—>开发设置—>服务器域名开始配置—>修改request合法域名

注意事项：

域名只支持https协议
域名不能使用IP地址或者localhost
域名必须经过ICP备案
服务器域名一个月内最多可申请5次修改

发起get请求

使用微信提供的wx.request()方法，可以发起GET数据请求


getInfo() { 
 
    wx.request({ 
 
        url: 'https://www.escook.cn.api/get', 
 
        method:'GET', 
 
        data: { 
            name:'xiaoyu', age:20 
        }, 
 
        success:(res) => { 
            console.log(res); 
        } 
    }) 
},

发起post请求


postInfo() { 
 
    wx.request({ 
 
        url: 'https://www.escook.cn.api/get', 
 
        method:'POST', 
 
        data: { 
 
            name:'zhangzan', 
 
            age:23 
 
        }, 
    
    success:(res) => { 
 
            console.log(res.data); 
 
        } 
    }) 
},

在页面刚加载时请求数据

在页面刚加载的时候，自动请求一些初始化的数据，只需要在页面的onLoad事件中调用获取数据的函数


onLoad() {
 
    this.getInfo()
 
   this.postInfo()
 
},

跳过request合法域名校验

在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及HTTPS 证书」选项，跳过request 合法域名的校验。

仅限在开发与调试阶段使用

关于跨域和Ajax的说明

以上两种情况在小程序中都不存在。

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

案例-本地生活（day2)

创建一个小程序项目，新建页面
设置头部导航栏
1. 在app.json中修改window节点的配置
设置tabBar
1. 每一个list都是一个小图标
2. pagePath和text必须设置
实现轮播图效果
实现九宫格效果

视图与逻辑

页面导航

实现页面间的相互跳转，<a>/location.href（js的API）都可以在浏览器在实现页面导航。

小程序实现页面导航的两种方式

声明式导航
1. 在页面上声明一个<navigator>导航组件，通过点击<navigator>组件实现页面跳转
编程式导航
1. 调用小程序的API，实现页面的跳转

声明式导航

导航到tabBar页面

在页面上声明一个<navigator>导航组件


//参考跳转到非tab页面
<navigator url="/pages/test/test?name=xiaoyu&age=20">跳转到test页面</navigator>

导航到非tabBar页面

通过点击<navigator>组件实现页面跳转


<navigator url="/pages/test/test" open-type="navigate">导航到非Tab页面</navigator> 
//url是要跳转的页面的路径必须是以/开头 
//open-type是跳转的方式，必须为navigate （可以省略，默认跳转到非tab页面）

后退导航


<navigator open-type="navigateBack" delta="1">后退</navigator> 
//open-type的值为navigateBack，表示进行后退 
//delta的值必须是数字，表示后退的层级，为1的时候可以省略（1为默认属性)

编程式导航

导航到tabBar页面

调用wx.switchTab(Object object)方法


<button bindtap="gotoMessage">跳转到Tab页面</button> 
 
//通过编程式导航，跳转到message页面 
 
gotoMessage() { 
 
    wx.switchTab({ 
 
        url: '/pages/message/message', 
 
    }) 
 
},

导航到非tabBar页面

调用wx.navigateTo(Object object)方法


<button bindtap="gotoTest">跳转到非Tab页面</button> 
 
//通过编程式导航，跳转到test页面 
gotoTest() { 
 
    wx.navigateTo({ 
 
        url: '/pages/test/test', 
 
    }) 
 
},

后退导航

调用wx.navigateBack(Object object)方法


<button bindtap="gotoBack">后退</button> 
 
// 编程式导航，后退到上一页面 
 
gotoBack() { 
 
    wx.navigateBack() 
 
},

导航传参

声明式导航传参

navigator 组件的url 属性用来指定将要跳转到的页面的路径。路径携带的参数：

参数与路径之间使用?分隔
参数键与参数值用=相连
不同参数用&分隔


//参考跳转到非tab页面 
 
<navigator url="/pages/test/test?name=xiaoyu&age=20">跳转到test页面</navigator>

编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数


<button bindtap="gotoTest2">跳转到test页面</button> 
 
 
gotoTest2() { 
 
    wx.navigateTo({ 
 
        url: '/pages/test/test?name=lele&age=23', 
 
    }) 
 
},

在onload中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad 事件中直接获取到


onLoad:function(options) { 
 
    //options就是导航传过来的参数对象 
 
    console.log(options) 
 
}

页面事件

下拉刷新

下拉页面从重新加载页面数据

全局开启下拉刷新


//在app.json的Windows中配置即可开启全局下拉刷新 
 
"enablePullDownRefresh": true

局部开启下拉刷新（推荐）


//在需要进行下拉刷新的页面的json配置文件中 
 
"enablePullDownRefresh": true

配置下拉刷新窗口的样式


//设置下拉刷新的背景颜色 
 
"backgroundColor": "#efefef", 
 
//设置小圆点的颜色 
 
"backgroundTextStyle": "dark"

监听下拉刷新事件

在页面的.js 文件中，通过onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件


<view>count值是{{count}}</view> 
 
<button bindtap="addCount">点我加1</button> 
 
addCount() { 
 
    this.setData({ 
 
        count:this.data.count + 1 
 
    }) 
 
} 
 
// 页面相关事件处理函数-监听用户下拉动作 
 
onPullDownRefresh() { 
 
    this.setData({ 
 
        count : 0 
 
    }) 
 
    wx.stopPullDownRefresh() 
 
}

上拉触底

通过上拉滑动从而加载更多数据的行为，调用onReachBottom() 函数即可实现当前页面上拉触底事件的监听效果。

onReachBottom() { }

配置上拉触底距离

触发上拉触底事件时，滚动条距离页面底部的距离，可以在页面的.json配置文件中，设置onReachBottomDistance属性开配置上拉触底的距离，默认为50px,（不带单位）

上拉触底小案例实现步骤

1.定义随机获取颜色的方法


data: { 
 
    colorList:[] 
 
}, 
 
getColors() {
 
}

2.在页面加载时获取初始数据


success:({data:res}) => { 
 
    this.setData({ 
 
        colorList:[...this.data.colorList,...res.data] 
 
    }) 
}

3.渲染UI 结构并美化页面效果

4.在上拉触底时调用获取随机颜色的方法


onReachBottom() { 
 
    this.getColors() 
 
}

5.添加loading 提示效果


wx.showLoading({ 
 
    title: '数据加载中...', 
 
})

6.对上拉触底进行节流处理

生命周期函数

生命周期：（时间段）是一个对象从创建-> 运行-> 销毁的过程。

生命周期函数：（时间点）是小程序框架提供的内置函数，会伴随生命周期自动按次序执行。它允许在特定的时间点，执行某些特定的操作。

应用的生命周期函数

特指小程序从启动->运行->销毁的过程

需要在app.js中声明


App({ 
 
    //初始化完成时，执行此函数，全局只触发一次 
 
    onLaunch:function(options){}, 
 
    //小程序启动或从后台切换到前台时触发 
 
    onShow:function(options){}, 
 
    //从前台切换到后台时触发 
 
    onHide:function(){} 
 
)}

页面的生命周期函数

特指小程序在每个页面的加载->渲染->销毁的过程

需要在页面的.js文件中声明


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

WXS脚本

（weixin Script)是小程序独有的一套脚本语言。在wxml中无法调用在.js文件中定义的函数，到那时可以调用wxs中定义的函数。

语法类似于JavaScript，但是存在很大区别。

wxs有自己的数据类型
- number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、date日期类型、regexp正则
不支持es6及以上的语法形式
- 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
- 支持：var 定义变量、普通function 函数等类似于ES5 的语法
wxs遵循CommonJS规范
- module对象
- require() 函数
- module.exports 对象

内嵌wxs脚本（内联式）

编写在wxml文件中的<wxs>标签内，必须提供module属性，指定当前wxs的模块名称，方便再wxml中访问模块中的成员


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

外联wxs脚本

编写在utils文件下，以.wxs后缀结尾


function toLower(str) { 
 
    return str.toLowerCase() 
 
} 
 
module.exports = { 
 
    toLower : toLower 
 
}

使用的时候必须为<wxs>标签添加module和src属性

mdule:指定模块的名称

src:指定要引入的脚本的路径（相对路径）


<view> {{m2.toLower(country)}} </view> 
 
<wxs src="../../utils/tools.wxs" module="m2"/>


//外联脚本 
 
function toLower(str) { 
 
    return str.toLowerCase() 
 
} 
 
module.exports = { 
 
    toLower : toLower 
 
}

wxs的特点

与JavaScript 不同
不能作为组件的事件回调
wxs 的运行环境和其他JavaScript 代码是隔离的

①wxs 不能调用js 中定义的函数

②wxs 不能调用小程序提供的API
在iOS 设备上，WXS会比JavaScript 快2 ~ 20 倍。但在android 设备上，二者的运行效率无差异。

小程序组件化开发

创建组件

在项目的根目录上新建components文件夹，新建test文件夹—>新建component，输入组件的名称，会自动生成四个文件。

局部组件

在页面的.json文件中引入组件（以键值对的形式）


"usingComponents": {
 
    "my-test1":"/componets/test/test"
 
}

然后在.html中使用

<my-test1></my-test1>

全局组件

过程和局部组件类似，只不过声明组件的位置在app.json中，在所有的.html文件中都可以使用声明过的组件。（全局引用）

当使用频率高时使用全局引用，反之则使用局部引用。

组件和页面的区别

组件的.json文件在需要声明"component":true属性
组件的.js文件中调用的是Component()函数
组件的事件处理函数需要定义到methods节点中

自定义组件

组件样式隔离

自定义组件只对当前组件生效，既可以防止外界的样式影响组件内部的样式，也可以防止组件的样式破坏外界的样式。

注意：只有class选择器有样式隔离效果，id、属性、标签选择器都不受样式隔离的影响，所以在组件和引用组件的页面尽量不要使用以上三种选择器。

修改组件的样式隔离

可以在组件的.js文件下新增如下配置


Component({ 
 
    options:{ 
 
        styleIsolation:'isolated' 
 
    } 
 
})

或者.json文件中新增

styleIsolation:'isolated'

styleIsolation的可选值

自定义组件的数据、方法和属性

data数据

定义用于组件模板渲染的私有数据

methods方法

定义事件处理函数和自定义方法（建议以_开头）

properties属性

用来接收外界传递到组件中的数据，可以使用setData 为properties 中的属性重新赋值

完整定义属性的方式


max:{ 
 
    type:Number,
 
    //属性值的数据类型 
 
    value:10
 
    //默认属性值 
 
}

简化定义的方式


max:Number
 
//不需要指定属性的默认值，可以使用简化方式

data 和properties 的区别

data存储组件的私有数据
properties存储外界传递到组件中的数据
二者都是可读可写（不同于vue中的prop只能读取不能更改值）使用setData为properties中的属性重新赋值。

数据监听器

observers类似于Vue重点watch侦听器

监听器支持监听对象中单个或多个属性的变化


component({ 
 
    observers: { 
 
        '对象.属性A，对象.属性B': function(属性A的新值，属性B的新值){ 
 
            //触发此监听器的3种情况: 
 
            //【为属性A赋值】使用setData设置this.data.对象.属性A 时触发 
 
            //【为属性B赋值】使用setData 设置this.data.对象.属性B 时触发 
 
            //【直接为对象赋值】使用setData 设置this.data.对象 时触发 
 
        } 
 
    }
 
})

纯字段数据

不用于界面渲染的data字段

有助于提高页面性能

使用：在Component 构造器的options 节点中，指定pureDataPattern为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段

组件的生命周期

组件全部的生命周期函数

Created组件刚刚被创建时执行

Attached 在组件实例进入页面节点树时执行

Ready 在组件在视图层布局完成后执行

Moved 在组件实例被移动到结点数的另一个位置时执行

Detached 在组件实例被从页面节点树移除时执行

Error 每当组件方法抛出错误时执行

最重要的生命周期函数有3 个，分别是created、attached、detached。特点如下：

组件实例刚被创建好的时候，created 生命周期函数会被触发
- 还不能调用setData
- 通常在这个生命周期函数中，只应该用于给组件的this 添加一些自定义的属性字段
组件完全初始化完毕、进入页面节点树后，attached 生命周期函数会被触发
- this.data已被初始化完毕
- 绝大多数初始化的工作在这个时机进行（例如发请求获取初始数据）
组件离开页面节点树后，detached 生命周期函数会被触发
- 退出一个页面时，会触发页面内每个自定义组件的detached 生命周期函数
- 清理性质的工作

生命周期函数可以直接定义在Component的，在lifetimes字段内进行声明（优先级最高）

组件所在页面的生命周期

Show 组件所在页面被展示时执行
Hide 组件所在页面被隐藏时执行
Resize 组件所在页面尺寸变化时执行

组件所在页面的生命周期函数，需要定义在pageLifetimes 节点中


pageLifetimes: { 
 
    show() { }, 
 
    hide() { }, 
 
    resize() { } 
 
}

父子组件之间的通信

属性绑定
- 父向子的指定属性设置数据，仅限JSON兼容的数据
事件绑定
- 子向父传递数据，可传递任何数据
获取组件实例
- 父组件通过this.selectComponent()获取子组件实例对象，可以访问子组件的任意数据和方法

属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，不能传递方法
子组件在properties节点中声明对应的属性并使用

事件绑定

实现子向父传值，可以传递任何类型的数据

在父组件的js中定义一个函数
在父组件的wxml中通过自定义事件的形式，将之前定义的函数传递给子组件
在子组件的js中，调用this.triggerEvent('自定义事件名称', { /* 参数对象*/ })，将数据发送到父组件
在父组件的js 中，通过e.detail 获取到子组件传递过来的数据

获取组件实例

在父组件里调用this.selectComponent("id或class选择器") ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/416843

微信小程序基础知识（一）_微信小程序 常用事件与属性列表

简介

了解项目结构

小程序页面的组成部分

Json配置

json语法

项目根目录中的app.json配置文件

项目根目录中的sitemap.json配置文件

每个页面文件夹中的.json配置文件

新建小程序页面

修改项目首页

WXML模板

区别

WXSS样式

区别

js逻辑交互

小程序的宿主环境

宿主环境包含的内容

通信主题

通信模型

运行机制

启动过程

页面渲染过程

组件

分类

小程序的三类API

协同工作和发布

模板与配置

模板语法

数据绑定