简介

常用组件

视图组件

<!--pages/list/list.wxml--><scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>A</view></scroll-view>

<!--pages/list2/list.wxml--><swiper class="swiper_container" indicator-dots="true" indicator-color="white"><swiper-item class="item">A</swiper-item><swiper-item class="item">B</swiper-item><swiper-item class="item">C</swiper-item></swiper>

文本组件text/rich-text

<view>长按选中效果<text selectable>18580236389</text></view><view>解析html字符串<rich-text nodes="<h1 style='color:red;'>成功</h2>"/></view>

button组件

<view>-----通过type指定按钮类型----</view><button>默认按钮</button><button type="primary">主色调按钮</button><button type="warn">警告按钮</button><view>-----size='mini'小尺寸按钮----</view><button size="mini">默认按钮</button><button type="primary" size="mini">主色调按钮</button><button type="warn" size="mini">警告按钮</button><view>-----plain镂空按钮----</view><button plain>默认按钮</button><button type="primary" plain>主色调按钮</button><button type="warn" plain>警告按钮</button>

image组件

  <view>------不保持纵横比，直至填满整个img元素</view><image src="/images/1.jpg" mode=""/><image src="/images/1.jpg" mode="scaleToFill"/><view>---------保持纵横比缩放,完整显示</view><image src="/images/1.jpg" mode="aspectFit"/><view>--------保持纵横比,保证一个方向上完整显示</view><image src="/images/1.jpg" mode="aspectFill"/><view>--------固定宽度不变，保持原本宽高比</view><image src="/images/1.jpg" mode="widthFix"/><view>--------固定高度不变，保持原本的宽高比</view><image src="/images/1.jpg" mode="heightFix"/>****

小程序API

事件监听API

同步API

异步API

动态操作

数据绑定

  Page({// 页面的初始数据data:{//绑定数据info:'hello world',//绑定属性imgSrc:'https://www.itheima.com/images/logo.png',//三元运算randomNum: Math.random()*10//生成10以内的随机数}})

<!-- //动态绑定数据 --><view>{{info}}</view><view><!-- //动态绑定属性 --><image src="{{imgSrc}} " mode="widthFix"/></view><!-- 三元运算 --><view>{{randomNum>=5 ? "success" : "faile"}}</view>

事件绑定

事件
事件是渲染层（webview）到逻辑层(js)的通讯方式
通过事件将用户在渲染层产生的行为反馈到逻辑层进行业务的处理

常用事件

1. tap----bindtap/bind:tap----click
2. input----bindinput/bind:input
3. change–bindchange/bind:change

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event,详细属性如下表所示：

定义事件

通过事件给数据赋新值

  Page({data:{count: 0},//给data中的数据赋新值btnTest(){this.setData({count: this.data.count+1})}})

事件传参

Page({data:{count: 0},//事件传参（data-*,其中*代表的是参数的名字）btnTest(e){this.setData({count:this.data.count+e.target.dataset.info})}})

  <view>事件传参</view><view>{{count}}</view><button type="primary" bindtap="btnTest" data-info="{{2}}">+1</button>

input输入框的处理函数

  Page({data:{count: 0},//input 文本框的处理函数inputHandler(e){console.log(e.detail.value);}inputHandler2(e){console.log(e.detail.value);this.setData({msg:e.detail.value})}})

<view>bindinput 测试</view><input bindinput="inputHandler"/>
<input value="{{msg}} " bindinput="inputHandler2"/>

语法

条件语法

wx:if=“condition”
wx:elif=“condition”
wx:else=‘condition’

结合block使用wx:if

一次性控制多个组件的展示与隐藏
block不是组件，只是一个包裹性质的容器，不会在页面中做任何性质的渲染
wx:if 实质：动态地创建或者移除元素
< block wx:if=“condition”>
组件1；
组件2；
< /block>

hidden

实质：切换display：none/block 样式控制元素的显示或者隐藏
hidden=“{{condition}}”
condition===true 隐藏
反之显示

列表渲染

wx:for=“{{array}}”
默认：index 索引 item 循环项
wx:for-index="idx"指定索引名
wx:for-item="itemName"指定循环项名
wx:key=“id” 为渲染的列表项指定唯一的key,提高渲染效率

wxss模板样式

rpx

1.什么是rpx
小程序独有，解决不同屏的适配
2.实现原理
把屏幕从宽度上等分成750份

样式导入@import

@import “路径”；

全局配置

Window

控制导航栏区域以及背景区域

全局开启下拉刷新

添加配置项：enablePullDownRefresh
小圆点的色：“backgroundTextStyle”:“dark/light”

上拉触底距离

添加配置项：onReachBottonDistance

tabBar

{"pages":["pages/home/home","pages/like/like","pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor": "#666","navigationBarTitleText": "My","navigationBarTextStyle":"white","enablePullDownRefresh": true,"backgroundColor": "#efefef"},"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "/images/shouye-zhihui (2).png","selectedIconPath": "/images/shouye-zhihui.png"},{"pagePath": "pages/like/like","text": "收藏","iconPath": "/images/xihuan (2).png","selectedIconPath": "/images/xihuan.png"}]},"style": "v2","sitemapLocation": "sitemap.json"}

页面配置

app.json 中的window 全局配置小程序中的每个页面的窗口表现

网络数据请求

 wx.request({url: 'https://www.escook.cn/api/get',//请求的接口地址，必须基于https协议method:'GET',//请求方式data:{//发送到服务器的数据name:'zs',age:20},success:(res)=>{//请求成功之后的回调函数console.log(res.data);}，complete：()=>{}})

在页面刚加载的时候请求数据

在onload()生命周期函数中 调用 请求数据的 方法

 /*** 生命周期函数--监听页面加载*/onLoad(options) {this.getEvent()},

跳过request合法域名校验

详情-》本地设置-》不校验合法域名。。。

跨域 & Ajax

跨域问题：
前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。
跨域问题只存在基于浏览器的web开发中，小程序的宿主环境是微信客户端，不存在跨域问题
Ajax请求
ajax技术基于浏览器中的XMLHttpRequest对象，由于小程序的宿主环境是微信客户端，小程序中不能叫做发起Ajax请求，叫做发起网络数据请求

视图与逻辑

页面导航

实现导航的两种方式

1.声明式导航

使用navigator组件
1.1 导航到tabBar页面的时候一定要声明open-type

  <!-- 1.导航到tabBar页面 --><button type="primary"><navigator url="/pages/like/like" open-type="switchTab"> 导航到收藏页面</navigator></button><!-- 2.导航到非tabBar页面 --><button type="primary"><navigator url="/pages/index/index" open-type="navigate"> 导航到非tabBar面</navigator></button><button type="primary"><navigator url="/pages/index/index"> 导航到非tabBar面</navigator></button>

2.编程式导航

调用小程序的导航API

//页面结构
<button type="primary" bindtap="goto">编程式导航</button><button type="primary" bindtap="goback">编程式导航后退</button>//逻辑
//编程式导航跳转goto(){// wx.switchTab({//   url: '/pages/like/like',// })wx.navigateTo({url: '/pages/index/index',})},/编程式导航后退goback(){wx.navigateBack()}

接收传递参数

 /*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取传递过来的参数console.log(options);this.setData({query:options})},

页面事件

下拉刷新事件

1.启用下拉刷新效果
在window节点添加enableRefresh(全局开启/局部开启)

//页面结构<view>count:{{count}} </view><button bindtap="add">监听事件刷新</button>//逻辑add(){this.setData({count : this.data.count+1})},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {this.setData({count:0})//自动关闭下拉wx.stopPullDownRefresh()},

2.实例（含节流操作）

//页面结构<view wx:for="{{colorList}}" wx:key="index" style="background-color:rgba({{item}});">{{item}}</view>
//逻辑
// pages/message/message.jsPage({/*** 页面的初始数据*/data: {colorList:[],//随机颜色列表isloading:false},getColors(){this.setData({isloading:true})//1.展示loading效果wx.showLoading({title: '数据加载中',})//发起请求wx.request({url: 'https://applet-base-api-t.itheima.net/api/color',method:'get',success:(res)=>{this.setData({colorList:[...this.data.colorList,...res.data.data]})},//2.隐藏loading效果complete:()=>{wx.hideLoading()this.setData({isloading:false})}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getColors()},/*** 页面上拉触底事件的处理函数*/onReachBottom() {if(!this.data.isloading)this.getColors()},})

生命周期

指的是一个对象从创建-运行-销毁的过程

生命周期函数

是小程序框架提供的内置函数，伴随生命周期的运行，自动按次序执行
作用:
允许程序员在特定的时间点执行特定的操作

应用的生命周期函数

App({//1.小程序初始化完成时，执行此函数，全局只触发一次，可以做一些初始化操作onLaunch() {},//2.小程序启动，或从后台进入前台显示时触发onShow(){},//3.小程序从前台进入后台时触发onHide(){},globalData: {userInfo: null}})

页面周期函数

  /*** 生命周期函数--监听页面加载(一个页面调用一次)*/onLoad: function (options) {//获取传递过来的参数console.log(options);this.setData({query:options})},/*** 生命周期函数--监听页面初次渲染完成(一个页面调用一次)*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载(一个页面调用一次)*/onUnload: function () {},

WXS脚本

wxml中不能调用页面的js中定义的函数，但是wxml中可以调用wxs中定义的函数
常用于：过滤器

与JavaScript的关系

wxs有自己的数据类型1.number string boolean object2.function array date regexp
wxs不支持ES6及以上的语法格式1.不支持：let const 解构赋值 展开运算符 箭头函数 对象属性简写 etc2.支持：var定义变量，普通function函数等类似于ES5的语法
wxs遵循CommonJS规范module对象require()函数module.exports对象

wxs特点

不能作为组件的事件回调函数
bindtap=“m2.toLower”—错误用法
隔离性：
1.不能调用js中定义的函数
2.也不能调用小程序提供的API
性能好：
在ios上快

使用

内联

<view>{{m1.toUpper(data)}}</view><!-- 定义内联的wxs --><wxs module="m1">module.exports.toUpper=function(str){return str.toUpperCase();}</wxs>

外联的wxs脚本

1.新建wxs文件

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

2.页面引入使用

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

基础加强

自定义组件

创建组件

1.根目录下创建components目录
2.右键选择创建test文件夹
3.右键test文件夹选择新建componen文件

局部引用 & 全局引用

在app.json 或者页面.json，中引用
{"usingComponents": {"my-test1":"/components/test/test"}}//在wxml中使用<my-test1></my-test1>

组件与页面的区别

1.组件的json文件 需要声明 “component”: true,
2.组件的js文件中调用的是 Component()函数
3.组件的事件处理函数需要定义到methods节点中

自定义组件的样式

组件样式隔离

 默认情况下，自定义组件样式只在组件内部生效，不被全局样式影响也不影响全局的样式只适用于class选择器
修改样式隔离效果通过stylesolation 修改

	//在组件的json文件新增配置"styleIsolation":"isolated"//或在组件的js文件中Component({options:{styleIsolation:"isolated"}})

styleIsolation 默认：isolated 独立不受影响apply-shared:页面影响组件shared：双向影响

数据监听器

// components/test/test.jsComponent({/*** 组件的初始数据*/data: {n1:0,n2:0,sum:0},/*** 组件的方法列表*/methods: {addcountn1(){this.setData({n1:this.data.n1+1})},addcount2(){this.setData({n2:this.data.n2+1})}},observers:{//数据监听节点'n1,n2':function(n1,n2){//监听n1,n2的数据变化this.setData({sum:n1+n2})}}})//逻辑<!--components/test/test.wxml--><view>数据监听器的使用</view><view>{{n1}}+{{n2}}={{sum}} </view><button bindtap="addcountn1">n1+1</button><button bindtap="addcount2">n2+1</button>

纯数据字段

不用于界面渲染的data字段

定义

在options节点中，指定pureDataPattern为一个正则表达式

Components({
options:{//指定以_开头的数据字段为纯数据字段pureDataPattern:/^__/
}
})

生命周期函数

created—组件实例被创建时
attached----在组件实例进入页面节点树时
ready
moved
detached—在组件实例被页面节点树移除后执行
eeror

created

不能调用setData方法

attached

组件完全初始化完毕，进入页面节点树

detached

做一些清理性质的工作

如何定义生命周期函数

Coimponents({
lifetimes:{
attached(){};//组件实例进入页面节点树时执行
detached(){};//组件实例被页面节点树移除时执行
}
})

组件所在页面的生命周期

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

自定义组件的插槽

在自定义的wxml结构中，提供< slot>节点（插槽），用于承担组件使用者提供的wxml结构
1.单个插槽

<!--components/test1/test1.wxml--><text>components/test1/test1.wxml</text><view><view>这里是组件的内部结构</view><slot></slot></view>//使用<my-test2><view>调用者：填充插槽</view></my-test2>

2.启用多个插槽
在组件的js文件

// components/test1/test1.jsComponent({/*** 配置节点*/options:{multipleSlots:true},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}})

使用多个插槽使用多个slot标签，以不同的name来区分不同的插槽

	<!--components/test1/test1.wxml--><text>components/test1/test1.wxml</text><view><view>这里是组件的内部结构</view><slot name="before"></slot><slot name="after"></slot></view>//页面结构
<my-test2><view slot="before">插入组件的before位置</view><view slot="after">插入组件的after位置</view></my-test2>

组件通信

属性绑定

父传子--传递json兼容的数据

//父组件
<my-test2 count="{{count}} "></my-test2>
<view>~~~~~</view>
<view>父组件中count的值：{{count}}  </view>
//子组件
<view>子组件中coount的值：{{count}}  </view><button type="primary" bindtap="addCount">加一</button>

事件绑定

子传父--传递任意数据
1.在父组件的js中定义函数
2.在父组件的wxml中，将定义的函数引用传递给子组件
3.在子组件的js中，通过this.triggerEvent('自定义事件名'，{/*参数对像*/})，将数据发送到父组件
4.在父组件的js中，通过e.detail获取子组件传过来的数据

自定义事件

bind:自定义事件名

//父组件的js文件
syncData(e){console.log("这是父组件的函数");console.log(e.detail);this.setData({count:e.detail.value})},
//父组件的wxml文件
<my-test2 count="{{count}} " bind:syncData="syncData"></my-test2><view>~~~~~</view><view>父组件中count的值：{{count}}  </view>//子组件的jsmethods: {addCount(){this.setData({count:this.properties.count+1}),//触发自定义事件，将数值同步给父组件this.triggerEvent('syncData',{value: this.properties.count})}}

获取组件实例

父组件通过this.selectComponent(“id选择器/class选择器”)获取子组件实例对象

//父组件wxml
<my-test2 count="{{count}} " bind:syncData="syncData" class="getit"></my-test2>
<view>~~~~~</view>
<view>父组件中count的值：{{count}}  </view>
<button type="primary" bindtap="getChild">获取子组件实例</button>

//父组件js
getChild(){const child= this.selectComponent('.getit');child.setData({count:child.properties.count+1}),this.setData({count:this.data.count+1})},

behaviors

实现数据共享

1.创建组件

//调用behavior方法，创建实例对象//使用module.exports将behaviors实例对象共享出去module.exports=Behavior({//属性节点properties:{},//私有数据节点data:{username:'zs',},//事件处理函数与自定义的方法节点methods:{},//引入其他的behaviorsbehaviors:{}//其他节点})

2.使用组件

//1.在组件中导入需要的behavior，const myBehavior=require('../../behaviors/my-behaviors')Component({//2.将导入的behaviors实例对象，挂载到behaviorss数组节点中behaviors:[myBehavior],})

同名字段的覆盖与组合规则

组件和他引用的behavior中可以包含同名的字段

处理规则：
1.data同名
2.propeties或者methods同名
3.生命周期函数同名
参考开发者文档

使用npm包

限制：
依赖于nodeJs的内置包
依赖于浏览器内置对象的包
依赖于c++插件的包

Vant Weapp

小程序UI组件库

使用

定制主题

/* 1.在app.wxss中定义css变量*/page{--main-bg-color: brown;}.one {color: white;/* 2.使用css变量 */background-color: var(--main-bg-color);width: 500px;height: 500px;}

小程序API的promise化

API的promise化
通过相关配置将官方提供的基于回调函数的异步API升级改造为基于Promise的异步API,避免出现回调地狱
1.实现promise化
在app.is中

//调用promisifyAll() 方法//实现异步API的Promise化import{promisifyAll} from 'miniprogram-api-promise'const wxp=wx.p={}//promisify all wx's apipromisifyAll(wx,wxp)

2.调用Promise化后的异步API

//wxml结构
<view>初体验vant  weapp</view><view>~~~~ </view><van-button type="primary" bindtap="getInfo">按钮</van-button>//js
/*** async  声明getInfo 是个异步对象* await  将后续的promise的resolve返回*/async getInfo(){//1.基于回调函数的API// wx.request({//   url: 'url',// })//2.基于Promise的APIconst {data:res}=await wx.p.request({url: 'https://applet-base-api-t.itheima.net/api/get',data:{name:"zs",age : 20},})console.log(res);},

全局数据共享

即状态管理：
解决组件之间的数据共享问题
开发中常用的方案：
VueX,Redux,MobX
小程序中：
安装包：
1.mobx-miniprogram 创建Store实例对象
2.mobx-miniprogram-bindings 将Store中的共享数据或者方法绑定到组件或者页面中使用
1.新建store.js文件

//创建store实例对象//1.导入observable方法（返回值是store对象）import {action, observable} from 'mobx-miniprogram'//2.向外共享storeexport const store = observable({//数据字段Num1:1,Num2:2,//计算属性(添加前缀 get--声明只能得到)get sum(){return this.Num2+this.Num1},//actions 方法，用来修改store中的数据updateNum1: action(function(step){this.Num1+=step}),updateNum2:action(function(step){this.num2+=step})})

2.1将store的成员绑定到页面中

//页面的js文件import {createStoreBindings} from 'mobx-miniprogram-bindings'import{store} from '../../store/store'// pages/home/home.jsPage({/*** 生命周期函数--监听页面加载*/onLoad(options) {this.storeBindings=createStoreBindings(this,{store,//数据源fields:['num1','num2','sum'],//绑定的字段actions:['updateNum1']//需要的方法})},/*** 生命周期函数--监听页面卸载*/onUnload() {this.storeBindings.destroyStoreBindings()},

2.2 将store中的成员绑定到组件中去

//导入import{storeBindingsBehavior} from 'mobx-miniprogram-bindings'import{store} from '../../store/store'// components/numbers/numbers.jsComponent({//通过storeBindingsBehavior实现自动绑定behaviors:[storeBindingsBehavior],storeBindings:{//指定绑定的storestore,//指定绑定的字段数据fields:{//绑定字段的三种方式Num1:()=>store.Num1,Num2:(store)=>store.Num2,sum:'sum'},//指定绑定的方法actions:{updateNum2:'updateNum2'}},

3.1页面中使用绑定的成员

  //页面的wxml<view>{{Num1}} + {{Num2}} = {{sum}} </view><van-button type="primary" bindtap="btnHandler" data-set="{{1}} ">Num1加一</van-button><van-button type="danger" bindtap="btnHandler" data-set="{{-1}} ">Num1减一</van-button>//页面的jsbtnHandler(e){this.updateNum1((Number)(e.target.dataset.set))},

3.2 在组件中使用

<!--components/numbers/numbers.wxml--><view>{{Num1}} + {{Num2}} = {{sum}} </view><van-button type="primary" bindtap="btnHandler" data-set="{{1}} ">Num2加一</van-button><van-button type="danger" bindtap="btnHandler" data-set="{{-1}} ">Num2减一</van-button>

分包

将完整的小程序项目分解为一个主包+多个分包
主包：一般包含项目的启动页面与TabBar页面，以及分包所用到的公共资源
分包：只包含与当前分包有关页面与私有资源

分包的加载规则:

小程序加载后默认下载主包并启动主包的页面
当用户进入分包的某个页面的时候，客户端下载对应的分包

打包原则

1.小程序按照subpackages的配置进行打包，subpackages之外的目录将被打包到主包当中
2.主包可以有自己的pages(最外层的pages字段 app.js)
3.tabBar页面必须在主包内
4.分包之间不能嵌套

引用原则

1.主包不能引用分包的私有资源
2.分包之间不能互相引用私有资源
3.分包可以引用主包内的公共资源

独立分包

在不下载主包的情况下独立运行
不能引用主包中的资源

分包预下载

在进入小程序的某个页面的时候，由框架自动下载可能需要的分包，从而提升进入后续分包页面的启动速度

1.在app.js里面 使用preloadRule节点来定义分包的预下载

//分包预下载的规则"preloadRule": {
//触发分包预下载的页面路径"pages/message/message":{
//表示在指定的网络模式下进行预下载
//可选值为：all（不限网络）/wifi(仅wifi模式下加载)"network": "all",
//表示进入页面之后要下载哪些分包
//可以通过root 或者 name 指定预下载哪些分包"packages": ["pkgA"]}},

限制：
同一个分包的页面享有共同的预下载的大小限额2M