微信小程序基础知识（一）

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选择器") ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器

一颗小板栗~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
微信小程序基础知识（一）

学完Vue回头再复习微信小程序，感觉二者之间有着异曲同工之处，建议大家先学习完Vue之后再接触小程序，会轻松很多。
复制链接

扫一扫