微信开发者小程序
一.环境准备
1.注册账号
微信兄程序是谁开发的,有个唯一开发者的账号。建议使用全新的邮箱,没有注册过其他小程序或者公众号的。因为每个邮箱只能申请一个小程序。
注册链接
2.获取APPID
这个APPID相当于开发者唯一的身份验证。后期小程序的发布和上线必须要提供APPID
注册成功以后,在微信公众平台获取APPID。
找到APPID
3.开发工具
查看文档有详细的工具介绍和小程序api
下载出来的就是“微信开发者工具”,这个工具集开发,预览,调试,发布于一身。但由于编码的体验不好,因此建议使用vscode+微信小程序编辑工具来实现编码。也就是说vscode负责编辑代码,微信小程序负责预览。
二.如何新建项目或导入项目
点击开发者小程序工具,出现以下界面:
1.新建项目:
没有上线时的开发阶段,可使用“测试号”。但上线或者支付获取用户信息等高级功能,必须使用APPID。
2.导入
有现成的项目,可直接使用“导入”
三.微信开发者工具介绍
四.小程序框架的结构和每一个文件的作用
微信小程序开发者对内部框架的命名叫MINA,也就是说最开始使用微信开发者工具新建小程序项目的时候,这个目录结构默认用上了原生框架MINA框架的目录结果。一般的技术博客用了MINA这个字眼指的都是小程序的原生框架。
小程序有他子级的标签(WXML),样式(WXSS),逻辑文件(JavaScript),并且在视图层和逻辑层提供了数据传输事件系统,让开发者专注于事件和逻辑。
4.1小程序文件结构和传统web相比
对比可得,传统web是三层结构,而微信小程序是四层结构,多了一层配置.json。
4.2基本的项目目录
五.小程序配置文件
1)全局配置文件app.json_pages字段
在app.json里面的pages表示有哪几个页面。
在pages文件夹下如果要生成新的文件夹,只要在app.json的pages里面添加路径就会自动生成(仅在微信小程序开发工具有该快捷功能)。
pages数组里面的第一个就是编译后的第一个界面。
2)全局配置文件app.json_window
定义小程序所有页面的顶部背景颜色,文字颜色等
3)全局配置文件app.json_tabbar导航栏
4)页面.json单独配置
在单独配置的.json文件小进行头部样式的设置
六.模板语法
vscode里建议要安装“小程序开发助手”,这样,在vscode里面既有相关的标签提示
1.数据绑定
字符串,数字类型和boolean值都可以直接渲染,但object不行,要把里面的对象值取出来才能渲染。
效果:
注意:
1){{}}可以在标签的属性中使用
2)使用Boolean值充当属性时,字符串和花括号之间不能存在空格,否则会导致识别失败,一下就是错误的示范
2.列表渲染
2.1 wx:for
注意:
1)wx:for="{{数组或者对象}}" wx:for_item=“循环项的名称” wx:for-index=“循环项的索引” **
** wx:key=“唯一的值”,用来提高列表的性能,绑定一个普通字符串的时候,这个字符串的名称 肯定是 循环数组中的 对象的 唯一属性
**wx:key="this"表示你的数组是一个普通的数组,this是个循环项
2)当出现数组的嵌套循环的时候,注意一下绑定的名称不能重名
wx:for="{{数组或者对象}}" wx:for_item="循环项的名称"
3)默认情况下,我们不写 wx:for="{{数组或者对象}}" wx:for_item=“循环项的名称”。
如果只有一层循环的话,wx:for="{{数组或者对象}}" wx:for_item="循环项的名称"可以省略
4)对象循环 wx:for="{{对象}}" wx:for_item=“对象的值” wx:for-index="对象的属性"
循环对象的时候,最好Item和index的名称都修改一下, wx:for_item=“value” wx:for-index="key”
2.2 block占位符标签
这个标签写代码的时候是存在的,但页面渲染的时候会被移除掉
3.条件渲染
1)wx:if="{{true/false}}"
wx:if / wx:elif / wx:else
2)hidden用法
在标签上直接加属性Hidden
hidden="{{true}}"
3)什么场景下用那个?
不是频繁切换 用wx:if
直接把标签从页面结构移除掉
是频繁切换 用wx:hidden
通过添加样式的方式来切换
七.小程序事件绑定
微信小程序事件对象中e.target和e.currentTarget的区别详解
target:触发事件的元素,也就是当前鼠标点击的元素。
currentTarget:事件绑定的元素,代码上面绑定的元素。
1.简单的双向数据绑定
步骤:
①需要给Input标签绑定input事件,绑定关键字bindinput
②通过事件源对象 e.detail.value来获取输入框的值
③输入框的值直接赋值到data中
不能:this.data.num=e.detail.value 或者 this.num=e.detail.value
正确的写法:
this.setData({
num:e.detail.value
})
2.事件传参data-opertaion
注意:
①小程序中的点击事件是bindtap
②无法在小程序的事件中进行传参,需要通过自定义属性data-operation进行参数传递
③然后通过事件源获取自定义属性
做了个小demo:
<input type="text" bindinput="handleinput"/>
<button bindtap="handletap" data-opertaion="{{1}}">+</button>
<button bindtap="handletap" data-opertaion="{{-1}}">-</button>
<view>{{num}}</view>
// pages/demo01/demo01.js
Page({
/**
* 页面的初始数据
*/
data: {
num:0,
},
handleinput(e){
this.setData({
num:e.detail.value
})
},
handletap(e){
const opertaion=e.currentTarget.dataset.opertaion;
this.setData({
num:this.data.num+opertaion
})
},
})
八.样式wss
1.尺寸样式
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
注意:
1)小程序中不需要主动来引入样式文件,只要在一个文件夹包裹就会生效。
2)需要把页面中某些元素的单位 由 px改成 rpx
由于设计稿750px,而750px = 750rpx;所 以 1 px = 1 rpx
如果把屏幕宽度 改成 375px,375px=750rpx;所以1 px = 2 rpx,即 1 rpx = 0.5px
3)如果设计稿page宽度为100px,那以上需求实现不同宽度的适配。
page px = 750 rpx
1 px = 750rpx / page
100 px = 750 rpx * 100/page
计算的需要利用calc属性,这个属性css和wxss都支持,但数字和单位750和rpx中间不要留空格,运算符的两边要留空格。
view{
width: 200px;
height: 200px;
font-size: 40px;
background: red;
}
2.样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
1)在根目录引入全局css,新建个style文件夹,创建common.wxss
view{
color: red;
font-size: 12px;
}
2)在需要的.wxss文件里面引入这个全局css
/*
1.引入的代码只能通过@import
2.只能是相对路径引入
*/
@import '../../style/common.wxss';
3.选择器
小程序中不支持通配符*
4.小程序中使用less
原生小程序不支持Less,其他基于小程序的框架大体都支持,如webp,mpvue,taro。但我们不能为了使用Less,而引入一个框架,所以可以用下面的方法实现:
1)编辑器是vscode
2)安装插件 easy Less
3)在vscode中的设置中加入如下配置:
"less.compile":{
"outExt":".wxss"
}
4)在编写样式的地方,新建less文件或者把.wxss文件改为.less文件,如index.less,然后正常编辑即可。
把.wxss文件改为.less文件,保存以后会在这个文件夹内自动生成.css文件
在这个.less文件里面也可以引入其他Less文件,保存后可以自动在wxss文件里面编译
九.常见组件
view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox等
1.view
特点:代替以前的div
2.text
特点:
1)文本标签
2)只能嵌套text,只能嵌套自己
3)小程序中只有这个标签有长安文字可以复制的功能
4)可以对空格,大于号,小于号, 回车等 进行编码
<!--pages/demo01/demo01.wxml-->
<text user-select decode>
text
123 <
</text>
效果:
3.image
1)t图片统一用外网图片。因为小程序打包上线有大小要求,所以腾讯规定上线的大小不能超过2M,所以据欸的那个很多静态资源放到网上。
2)图片标签,image组件默认宽度320px,高度240px
3)mode决定图片内容如何和图片标签宽高做适配。
wxss:
image{
border: 1px solid #000;
width: 100px;
height: 100px;
}
<image src="https://www.baidu.com/img/flexible/logo/pc/result.png" mode="aspectFit"/>
4)小程序当中的图片 直接就支持懒加载 lazy-load
lazy-load开启后,会自动判断 当图片出现在视口上下三层的高度之内的时候,自己开始加载图片
4.swiper
4-1轮播图的特点
1.)轮播图的外层容器swiper,swiper高度无法由内容撑开
2.)每一项轮播图 swiper-item
3.)swiper标签 存在默认样式 width:100%;height:150px;
而image图片也存在默认宽高 320*240
4.)先找出来原图的宽度和高度,等比例给swiper定宽度和高度
假设原图的宽度和高度:1125*352px
swiper宽度(100vw / 100% / 375rpx) / swiper高度 = 原图的宽度 / 原图的高度
swiper高度=swiper宽度 * 原图的高度 / 原图的宽度
height = 100vw * 352 / 1125
4-2示例:
<swiper autoplay interval='1000' circular indicator-dots indicator-color='red' indicator-active-color='green'>
<swiper-item>
<image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="//img.alicdn.com/imgextra/i2/2206686532409/O1CN01B4edGv1TfMnWwcubz_!!2206686532409-0-lubanimage.jpg"/>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="//img.alicdn.com/imgextra/i4/2206686532409/O1CN01HtCoDf1TfMnR37wUR_!!2206686532409-0-lubanimage.jpg"/>
</swiper-item>
</swiper>
通过mode="widthFix"属性,宽度写死,就是100%,高度自适应。
swiper{
width: 100%;
height: calc(100vw * 352 / 1125);
}
image{
width: 100%;
}
4-3 swiper的属性
autoplay 自动切换
interval 切换时间间隔
circular 衔接滑动
indicator-dots 显示面板指示点
indicator-color 指示点颜色
indicator-active-color 选中的指示点颜色
5.navigator
1)块级元素,默认会换行,可以直接设置宽度和高度
2)url要跳转的页面路径,可设置绝对路径和相对路径
3)target 要跳转到当前的小程序还是其他的小程序页面
self 默认值,自己的小程序页面
miniProgram 其他的小程序页面
4)open-type跳转的方式
- navigate 默认值,保留当前页面,跳转到应用内的某个页面,但是不能跳到tabbar页面
- redirect 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面
- switchTab 跳转到tabbar页面,并关闭其他所有非tabbar页面
- reLaunch 关闭所有页面,打开到应用内的某个页面
- navigateBack 返回上一级页面,可设置返回上级或者多级
- exit 退出小程序,target="miniProgram"时生效
<navigator url="/pages/demo01/demo01">轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/demo01/demo01">redirect轮播图页面</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab直接跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch直接跳转到tabbar页面</navigator>
6.rich-text富文本标签
<rich-text nodes="{{html}}"></rich-text>
效果:
7.button
样式可直接看官网
Button开发能力
7-1 size 的合法值
default和ini
7-1 type 的合法值
primary,default,warn
7-1form-type 的合法值
submit和reset
7-1 open-type:
1) contact 打开客服会话,需要在未学小程序的后台配置,真机调试
<button open-type="contact" type="primary" >openSetting</button>
实现流程:
①将小程序的appid由测试号改为自己的appid
获取自己的appid
②添加客服
为了方便演示,准备两个账号:普通用户A,客服账号B
③用户A微信扫码
2) share 转发当前的小程序给微信朋友,不能把小程序分享到朋友圈,真机调试
<button open-type="share" type="primary" >share</button>
3) getPhoneNumber 获取用户手机号,结合一个事件来使用,不是企业的小程序账号没有权限获取用户的手机号
①绑定一个事件bindgetphonenumber(注意都是小写)
②在事件的回调函数中,通过参数来获取信息
③获取到的信息,已经加密过了。需要用户自己搭建小程序的后台服务器,在后台服务器中进行解析手机号,返回小程 序中。就可以看到信息了。
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" type="primary" >getPhoneNumber</button>
Page({
getPhoneNumber(e){
console.log(e)
}
})
4) getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 (小程序插件中不能使用)
直接获取,不存在加密字段
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="primary" >getUserInfo</button>
// pages/demo01/demo01.js
Page({
getUserInfo(e){
console.log(e)
}
})
5) launchApp 在小程序中打开APP
需要在app中通过app的某个链接打开小程序,在小程序中再通过这个功能,重新打开小程序。
找到京东app和京东小程序
<button open-type="launchApp" type="primary" >launchApp</button>
6) openSetting 打开授权设置页
授权页面中只会出现用户曾经点击过的权限
<button open-type="openSetting" type="primary" >openSetting</button>
如果清了缓存就没有
7) feedback 打开小程序内置的意见反馈页面,只能够通过真机打开
<button open-type="feedback" type="primary" >feedback</button>
8.icon
9.radio
需要搭配radio-group一起使用,可以通过color属性修改颜色
<radio-group bindchange="handleChange">
<radio color="red" value="male">男</radio>
<radio color="red" value="female">女</radio>
</radio-group>
<view>您选中的是:{{gender}}</view>
// pages/demo01/demo01.js
Page({
data:{
gender:""
},
handleChange(e){
//1.获取单选框中的值
let gender=e.detail.value;
//2.把值赋值给data中的数据
this.setData({
gender
})
}
})
10.checkbox
需要搭配checkbox-group一起使用
<checkbox-group bindchange="handleChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>您选中的是:{{checkList}}</view>
// pages/demo01/demo01.js
Page({
data:{
list:[
{
id:1,
name:'苹果',
value:'apple'
},{
id:2,
name:'香蕉',
value:'banana'
},{
id:3,
name:'橙子',
value:'orange'
}
],
checkList:[]
},
handleChange(e){
//1.获取单选框中的值
let checkList=e.detail.value;
//2.把值赋值给data中的数据
this.setData({
checkList
})
}
})
十.自定义组件
类似页面,一个自定义组件有json,wxml,wxss,js 4个文件组成。
可以在微信开发者工具中快速创建组件的文件结构
1.如何使用自定义组件
第一步:新增组件
根目录创建components,内部再内部创建一个Tabs,然后再Tabs文件夹里面右键,选择“新建components”,回车,就自动创建成功。
第二步:在dem01.json里面声明组件
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}
第三步:在demo01.xml里面引入组件
<Tabs></Tabs>
这样,页面就能直接展示组件的数据:
2.标题激活选中
效果:
tabs.wxml:
<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
<view class="tabs_title">
<view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap" data-index="{{index}}">{{item.name}}</view>
</view>
<view class="tabs_content">内容</view>
</view>
tabs.wxss:
/* components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
display: flex;
padding:10rpx 0;
}
.title_item{
flex:1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color:red;
border-bottom: 5rpx solid currentColor;
}
.tabs_content{}
tabs.js:
注意:
1.页面.js文件中 存放事件回调函数的时候,存放在data同层级下!!!
2.组件.js文件中 存放事件回调函数的时候,必须要存放在methosd中!!!
// components/Tabs/Tabs.js
Component({
/**
* 组件的初始数据
*/
data: {
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
}
]
},
/*
1.页面.js文件中 存放事件回调函数的时候,存放在data同层级下!!!
2.组件.js文件中 存放事件回调函数的时候,必须要存放在methosd中!!!
*/
/**
* 组件的方法列表
*/
methods: {
handleItemTap(e){
//1.获取索引
const {index}=e.currentTarget.dataset;
//2.获取data中的数组
let {tabs}=this.data;
//上面的写法相当于:let tabs=this.data.tabs
//3.循环数组,并且给当前索引的项 添加激活效果
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
this.setData({
tabs
})
}
}
})
3.父向子传值和子向父传值
1)父向子传值
父组件通过属性的方式给子组件传值
这边把tabs放在父级,传给子级
效果:
demo01.js:
// pages/demo01/demo01.js
Page({
data:{
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
}
],
}
})
demo01.wxml:
<Tabs tabs="{{tabs}}"></Tabs>
tabs.js:
子级组件properties接受参数
// components/Tabs/Tabs.js
Component({
properties:{
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/*
1.页面.js文件中 存放事件回调函数的时候,存放在data同层级下!!!
2.组件.js文件中 存放事件回调函数的时候,必须要存放在methosd中!!!
*/
/**
* 组件的方法列表
*/
methods: {
handleItemTap(e){
//1.获取索引
const {index}=e.currentTarget.dataset;
//2.获取data中的数组
let {tabs}=this.data;
//上面的写法相当于:let tabs=this.data.tabs
//3.循环数组,并且给当前索引的项 添加激活效果
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
this.setData({
tabs
})
}
}
})
2)子向父传值
子组件通过事件的方式给父组件传递参数
像上面父传子的情况,存在的问题就是子级的数据发生了改变,但父级还是原数组的样子,没有改变。如下。所以我们需要进行子传值给父级。
tabs.js:
this.triggerEvent(“父组件自定义事件的名称”,要传递的参数)
// components/Tabs/Tabs.js
Component({
properties:{
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItemTap(e){
//1.获取索引
const {index}=e.currentTarget.dataset;
//2.触发父组件的自定义事件,同时传递数据给父组件
//this.triggerEvent("父组件自定义事件的名称",要传递的参数)
this.triggerEvent("itemChange",{index})
}
}
})
demo01.wxml:
通过bind+子级触发的自定义事件名称 来触发父级的自定义事件
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>
demo.js
// pages/demo01/demo01.js
Page({
data:{
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
}
],
},
//自定义事件 用来接收子组件传递的数据结构
handleItemChange(e){
const {index}=e.detail;
let {tabs}=this.data;
tabs.forEach((v,i)=>i === index?v.isActive=true:v.isActive=false)
this.setData({
tabs
})
}
})
3)父组件插槽slot传值
slot标签其实就是一个占位符(插槽),等到父组件调用子组件的时候,再传递标签过来 最终 ,
这些被传递的标签就会得到替换slot插槽的位置
tabs.wxml:
<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
<view class="tabs_title">
<view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap" data-index="{{index}}">{{item.name}}</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>
demo01.wxml:
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>
</Tabs>
4.组件的其他属性
properties 组件对外接受的数据
data 组件内部的数据
observers 监听 properties 和 data 的变化(只存在于组件当中,页面当中是不存在的)
methods 事件中的回调函数
组件的生命周期:
created 在组件实例刚刚被创建时执行,注意此时不能调用 setData
attached 在组件实例进入页面节点树时执行
ready 在组件布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行
十一.小程序的生命周期
分为应用生命周期和页面生命周期
1.应用生命周期
只有一个文件,就是app.js
1)onLaunch 引用第一次启动的就会触发的事件
使用场景:第一次启动的时候,获取用户的个人信息
2)onShow 应用被用户看到
使用场景:切换时 每次进入应用都会触发这个生命周期。一般用于对应用数据或者页面效果的重置。
3)onHide 应用被隐蔽了
使用场景:离开就马上触发这个生命周期。一般用于暂停或者清除定时器。
4)onError 应用的代码发生了报错的时候,就会触发
使用场景:在应用发生代码错误的时候,手机用户的错误信息,通过异步请求,将错误的信息发送给后台。
5)onPageNotFound 应用第一次启动的时候,如果找不到第一个入口,才触发
解决方案:如果页面不存在了,通过js的方式来重新跳转页面,重新跳到第二个首页。
onPageNotFound(){
//这个跳转方法不能跳转到tabbar页面
wx.navigateTo({
url: '/pages/demo01/demo01',
})
console.log("onPageNotFound")
}
还原触发该生命周期的场景:
普通编译 ——>添加编译模式——>修改“模式名称”和“启动页面”,启动页面是不存在的路径
虽然控制台有报错,单页面没有报错,依旧能够正常显示页面。
2.页面生命周期
// pages/demo02/demo02.js
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log("onUnload")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
1)data 页面的初始数据
2)onLoad 类似于应用生命周期的onLaunch。
使用场景:发送异步请求来初始化页面数据
3)onShow 页面显示
4)onHide页面隐藏
使用场景:包括应用的隐藏和页面的隐藏
5)onReady 页面初次渲染完成
6)onUnload 页面卸载
下面带“关闭”字眼的的都是卸载页面
<text>pages/demo02/demo02.wxml</text>
<navigator url="/pages/demo01/demo01" open-type="redirect">
demo01
</navigator>
onUnload: function () {
console.log("onUnload")
},
7)onPullDownRefresh 监听用户的下拉操作
使用场景:对页面的数据或者效果进行下拉刷新
8)onReachBottom 页面上拉触底事件,触底自动触发
需要页面存在上下滚动才行,高度不够是不会触发的。
9)onShareAppMessage 用户点击右上角转发
10)onPageScroll 只要页面滚动就会触发
11)onResize 页面尺寸发生变化的时候就会触发
**使用场景:**小程序发生横屏或者竖屏切换的时候就会触发
**开发调试:**全局搜索onResize,可以搜索api.
在允许屏幕旋转的情况下,可分为横屏与竖屏
手机端设置 “pageOrientation”: “auto” 或 iPad 上设置 “resizable”: true 时会允许屏幕旋转,此时使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可对该操作进行监听,进而判断是使用横屏还是竖屏布局
可以全局设置,也可以在需要的页面设置。如下是在demo02.json文件里面设置
{
"pageOrientation": "auto"
}
就会多个这个图标,点击即可横屏和竖屏转换
12)onTabItemTap 当前是tab页时,点击tab时触发
满足两条件:
必须是tabbar页面;必须点击的是自己。点击其他的不会触发。
生成二维码
地址:https://mp.weixin.qq.com
设置->基本设置->小程序码