简介
常用组件
视图组件
<!--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)的通讯方式
通过事件将用户在渲染层产生的行为反馈到逻辑层进行业务的处理
常用事件
- tap----bindtap/bind:tap----click
- input----bindinput/bind:input
- 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.js
Page({
/**
* 页面的初始数据
*/
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 object
2.function array date regexp
wxs不支持ES6及以上的语法格式
1.不支持：let const 解构赋值 展开运算符 箭头函数 对象属性简写 etc
2.支持：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.js
Component({
/**
* 组件的初始数据
*/
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.js
Component({
/**
* 配置节点
*/
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>
//子组件的js
methods: {
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:{},
//引入其他的behaviors
behaviors:{}
//其他节点
})
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 api
promisifyAll(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的API
const {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.向外共享store
export 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.js
Page({
/**
* 生命周期函数--监听页面加载
*/
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.js
Component({
//通过storeBindingsBehavior实现自动绑定
behaviors:[storeBindingsBehavior],
storeBindings:{
//指定绑定的store
store,
//指定绑定的字段数据
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>
//页面的js
btnHandler(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
