原生框架的目录结构
全局配置文件:pages字段
全局配置文件:window字段
全局配置文件:tabbar字段
页面配置
{
"usingComponents": {},
"navigationBarBackgroundColor": "#0094aa",
"navigationBarTitleText": "我的应用Dmeo01"
}
数据绑定、运算、素组和对象循环、block标签的使用、条件渲染
wxml
<!--pages/demo03/demo03.wxml-->
<!--
text相当于以前web中的 span标签 行内元素 不会换行
view相当于以前web中的 div标签 块级元素 会换行
checkbox 就是以前的复选框标签
-->
<!-- <text>我相当于span标签</text>
<view>我相当于div标签</view> -->
<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 布尔类型 -->
<view>是否认真学习:{{isGirl}}</view>
<!-- 4 Object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>
<!-- 6 使用布尔类型充当属性时 checked等于true时为选中状态-->
<view>
<checkbox checked="{{isChecked}}"></checkbox>
</view>
<!--
7 运算 =》 表达式
1. 可以在花括号中 加入 表达式---“语句”
2.表达式
指的时一些简单 运算 数学运算 字符串 逻辑运算。。
1 数字的加减
2 字符串拼接
3 三元表达式
3.语句
1 复杂语句代码段
1 if else
2 switch
3 do while
4 for
4.花括号里只能加入表达式,不能够加入语句,否则会报错
-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{10%2===0? '偶数':'奇数'}}</view>
<!--
8 列表循环
1 wx:for="{{数组或对象}}"
wx:for-item="循环项的名称"
wx:for-index="循环项的索引"
2 wx:key="唯一值" 用来提高列表渲染的性能
1 wx:key 绑定一个普通的字符串的时候,那么这个字符串名称 肯定是循环数组中的对象的唯一属性
2 wx:key ="*this" 旧表示你的数组是一个普通的数组 *this表示是循环项
[1,2,3,4,5]
["1","222","adfdf"]
3 当出现数组的嵌套循环的时候,尤其注意,以下绑定的名称不要重名
wx:for-item="item" wx:for-index="index"
4 默认情况下,我们不写
wx:for-item="item" wx:for-index="index"
小程序也会把循环项的名称和索引的名称 item和index
只有一层循环的话(wx:for-item="item" wx:for-index="index")可以省略
9 对象循环
1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
2 循环对象的时候 最好把 item和index的名称都改一下
wx:for-item="value" wx:for-index="key"
-->
<view>
<view
wx:for="{{list}}"
wx:key="id"
>
索引:{{index}}
--
值:{{item.name}}
</view>
</view>
<view>
<view>循环对象</view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{keye}}
--
值:{{value}}
</view>
</view>
<!--
10 block标签
1 占位符标签
2 写代码的时候 可以看到这个标签存在
3 页面渲染,小程序就会把他移除掉
-->
<view>
<block
wx:for="{{list}}"
wx:key="id"
class="my_list"
>
索引:{{index}}
--
值:{{item.name}}
</block>
</view>
<!--
11 条件渲染
1 wx:if="{{true/false}}"
2 if,else,elif
we:if
we:elif
wx:else
3 hidden(隐藏)
1 在标签上直接加入hidden
2 hidden="{{true}}"
3 在什么场景下用哪个?
*当标签不是频繁切换显示 优先使用 wx:if
直接把标签从页面移除掉,会损耗性能
*当标签频繁切换显示的时候 优先使用hidden
通过添加样式的方式来切换显示的
hidden不要和样式display一起使用
-->
<view>
<view>条件渲染</view>
<view wx:if="{{true}}">该标签显示</view>
<view wx:if="{{false}}">该标签被隐藏</view>
<view wx:if="{{true}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>
<view>=========================</view>
<view hidden>test1</view>
<view hidden="{{true}}">test2</view>
<view hidden="{{false}}">test3</view>
</view>
js:
Page({
data: {
msg:"hello mina",
num:10000,
isGirl:false,
person:{
age:18,
height:170,
weight:200,
name:"富婆"
},
isChecked:false,
list:[
{
id:0,
name:"猪八戒"
},
{
id:1,
name:"天蓬元帅"
},
{
id:3,
name:"悟能"
}
]
}
})
事件绑定
wxml
<!--
1 需要给input标签绑定 input事件
绑定关键字 bindinput
2 如何获取输入框的值
通过事件源对象来获取:e.detail.value
3 把输入框的值 复杂到 data 当中
this.setData({
num:e.detail.value
})
4 需要加入一个点击事件
1 bindtap
2 无法在小程序当中的 事件中 直接传参
3 通过自定义属性的方式来传参数
4 事件源中获取 自定义属性
-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
{{num}}
</view>
js:
Page({
data: {
num:0
},
//输入框的input事件的执行逻辑
handleInput(e){
//console.log(e.detail.value);
this.setData({
num:e.detail.value
})
},
//添加 加和减按钮的事件
handletap(e){
//console.log(e);
//1.获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num:this.data.num + operation
})
}
})
样式:rpx
/*
1 小程序中 不需要引用样式文件
2 需要把页面中某些元素的单位 由px改成rpx
1.设计稿 750px
750px = 750rpx
1px = 1rpx
2.把屏幕宽度改成 375px
375px = 750rpx
1px = 2rpx
1rpx = 0.5px
3 存在一个设计稿,宽度414,或者未知 page
1.设计高page存在一个元素100px
2.拿以上的需求,去实现不同宽度的页面适配
750 * rpx =Y * px
rpx = Ypx/150
px = 750rpx/y\Y
4 利用一个属性 calc属性(css和wxss都支持)
*750 和 rpx中间不能有空格
*运算符的两边也不要留空格
*/
view{
/* width: 200rpx; 这句假设用100px规格,使用calc属性*/
width: calc(750rpx*100/375);
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
}
样式:导入外部样式
/*
1 引用的代码 是 通过@import来引入的
2 路径只能使用相对路径
*/
@import "../../style/common.wxss";
view和text标签
view
<view>
我是一段文字!!!
</view>
text
<!--
1 长按文字复制 selecttable
2 对文本内容进行 解码 decode
-->
<text selectable decode>
我是text标签中的一句话 123
</text>
image图片标签
<!--
images 图片标签
1 src 指定要加载的图片路径
图片存在默认的宽度和高度 320*240
2 modes属性决定图片内容如何和图片标签 宽高 做适配
*scaleToFill:不保持纵横比,宽高完全拉伸
*aspecFit:保持宽高比,确保图片的长边(宽)显示出来(常用于轮播图,平常也用的较多)
*aspecFill:保持比例缩放,只保证图片的 短 边能够完全显示出来。(较少用)
*widthFix:按照宽度保持宽高比进行缩放
3 小程序当中的图片,直接支持 懒加载 lazy-load
lazy-load 会字节判断,当图片出现在视口上下三屏的高度之内的时候,自己就会开始加载图片
-->
<image src="https://pic.imgdb.cn/item/622ccd485baa1a80abd16b8b.jpg" mode="aspecFit"/>
swiper轮播图
<!--
swiper 轮播图
1 轮播图外层容器 swiper
2 每一个轮播项 swiper-item
3 swiper标签存在默认样式
1.width 100%
2.heith 150px (测试图片宽高:1053*420)
3.swiper 高度无法实现由内容撑开
4 先找出 原图的宽高 等比例给swiper 定宽高
原图宽高:1053*420 px
swiper 宽度 / swiper 高度 = 原图的宽度 /原图的高度
swiper 高度 = swiper 宽度 * 原图的宽度 /原图的高度
图片高度 = 100vw * 420 / 1053
5 autoplay 自动轮播
6 interval 修改轮播时间
7 circular 循环轮播
8 indicator-dots 显示 指示器 分页器 索引器
9 indicator-active-color 选中索引器的颜色
10 indicator-color 未选中索引器的颜色
-->
<swiper autoplay interval="3000" circular indicator-dots indicator-active-color="#ff0094" indicator-color="#0094ff">
<!-- 第一张 -->
<swiper-item><image mode="widthFix" src="//m15.360buyimg.com/mobilecms/jfs/t1/214181/39/14450/77034/6229f053Ecbd498e7/7f7ceba1b2ec05f6.jpg!cr_1053x420_4_0!q70.jpg"></image></swiper-item>
<!-- 第二张 -->
<swiper-item><image mode="widthFix" src="//imgcps.jd.com/ling4/10039397773289/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5fb1f71ba031dc0afaf817cb/62967bfa/cr_1125x449_0_166/s/q70.jpg"></image></swiper-item>
<!-- 第三张 -->
<swiper-item><image mode="widthFix" src="//m15.360buyimg.com/mobilecms/jfs/t1/221720/22/12106/134756/6226a70bEfc538c49/85b35780ecf0a201.jpg!cr_1053x420_4_0!q70.jpg"></image></swiper-item>
</swiper>
navigator导航标签
11页面
navigator相当于a标签
<!--
导航组件 navigator
0 navigator 是块级元素,默认会换行,可以直接添加宽高
1 url 要跳转的页面路径,可以时绝对路径,也可以是相对路径
2 target 要跳转到当前小程序,还是其他的小程序的页面(self为默认值,指在自己程序内跳转。miniProgram跳转到其他的小程序页面)
3 open-type 跳转方式
*navigate 默认值,跳转到应用内的某个页面,但是不能跳转到tabbar页面
*redirect 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar页面
*switchTab跳转到 tabBar页面,并关闭其他所有非tabBar页面
*reLaunch关闭所有页面,打开到应用内的某个页面
*navigateBack 返回上一级
*exit 退出其他小程序,需要和miniProgram一起使用
-->
<navigator url="/pages/demo10/demo10">跳转到轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/demo10/demo10">跳转到轮播图页面(没有返回按钮) redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab直接跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch 可以随便跳</navigator>
<navigator open-type="navigateBack" url="/pages/demo10/demo10">返回上一级</navigator>
rich-text富文本标签
富文本标签
可以将字符串解析成对应标签,类似vue中v-html功能
<!--
rich-text 富文本标签
1 nodes属性来实现
1 接收标签字符串
2 接收对象数组
-->
<rich-text nodes="{{html}}"></rich-text>
Page({
data: {
// 1 标签字符串 //最常用的
//html:'<div class="sc-EHOje bYwTlh"><div class="sc-gzVnrw jHPDsO"><a class="sc-htoDjs dEOvzQ" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&spm=a2141.1.iconsv5.1&scm=1007.home_icon.tmallxp.d&wh_biz=tm&disableNav=YES"><img class="sc-dnqmqq egIvnd" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">'
// 2 对象数组
html:[
{
//1.div标签,name属性来指定
name:"div",
//2.标签上有naxie属性
attrs:{
//标签上的属性 class style
class:"my_div",
style:"color:red;"
},
//3.子节点 children 要去接收的数据类型和nodes第二种渲染方式的数据类型一致
children:[
{
name:"p",
attrs:{},
//放文本
children:[
{
type:"text",
text:"hello"
}
]
}
]
}
]
},
})
button:外观样式
<!--
button 标签
1 外观属性
*size控制按钮大小(default默认大小,mini小尺寸)
*type用来控制按钮的颜色(default白色,primary绿色,warn红色)
*plain按钮镂空
*loading添加等待图标
-->
<button>默认按钮</button>
<button size="mini">小按钮</button>
<button type="primary">绿色按钮</button>
<button type="warn">红色按钮</button>
<button type="warn" plain>镂空按钮</button>
<button type="primary" loading>绿色按钮</button>
button的开放能力
button 开放能力
open-type:
1.contact直接打开客服对话功能需要在微信小程序的后台配置
*只能通过真机进行测试
2.share 转发当前的小程序到微信朋友中,不能把小程序分享到朋友圈
3.getPhoneNumber获取当前用户的手机号码信息,结合一个事件来使用,不是企业的小程序账号,是没有权限来获取用户手机号码
*绑定一个事件bindgetphonenumber
*在事件的回调函数中,通过参数来获取信息
*获取到的信息,已经加密过啦,需要用户自己搭建小程序的后台服务器,在后台服务器中进行解析手机号码,返回到小程序中,就可以看到信息了
4.getUserInfo 获取当前用户的个人信息
*使用方法和获取手机号类似
*但是它可以直接获取信息,不采用加密
5.launchApp在小程序当中直接打开app
*需要先在App中通过app的某个链接打开小程序
*在小程序中在通过这个功能重新获取app
*案例:找到京东app和京东的小程序
6.openSetting打开小程序内置的授权页面
*打开小程序中的授权页面,只会出现用户曾经点过的权限
7.feedback打开小程序内置的意见反馈页面
*只能通过真机来调试
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber"
bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
效果
ico图标
<!--
小程序中的字体图标
-->
<icon type="success" size="23" color="#0094ff">
</icon>
radio:单选框
radio 单选框
1 radio标签必须要和父标签radio-group来使用
2 value 选中单选框的值
需求:给radio-group绑定change事件
需要在页面中显示选中的值
wxml:
<radio-group bindchange="handleChange">
<radio color="red" value="male">男</radio>
<radio color="red" value="female">女</radio>
</radio-group>
<view>
您选中的是:{{gender}}
</view>
js:
Page({
data: {
gender:""
},
handleChange(e){
//1.获取单选框中的值
let gender2 = e.detail.value;
//2.把赋值给data中的数据
this.setData({
gender:gender2
})
}
})
效果:
checkbox:复选框
案列:选中水果,然后将水果的值打印到下方
wxml:
<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>
</checkbox-group>
<view>
选中的水果:{{checkdList}}
</view>
</view>
js:
Page({
data: {
list:[
{
id:0,
name:"🍎",
value:"apple"
},
{
id:1,
name:"🍇",
value:"grape"
},
{
id:2,
name:"🍌",
value:"bananer"
}
],
checkdList:[]
},
//复选框的选中事件
handleItemChange(e){
//1.获取被选中的复选框的值
const checkdList = e.detail.value;
//2.进行赋值
this.setData({
checkdList
})
}
})
效果:
自定义组件的介绍
页面:demo17
步骤:
-
在pages同级目录下创建components文件夹,在其文件夹下创建组件文件夹,文件夹名字自定义,这里一Tabs为例
-
在自定义组件文件夹下面创建js,json,wxml,wxss文件
- 在需要使用自定义组件的json文件中注册组件
-
在页面中使用自定义组件
wxml文件:
<Tabs></Tabs>
自定义组件,样式优化
以下代码均在自定义组件文件下修改
wxml:
<view class="tabs">
<view class="tabs_title">
<!-- <view class="title_item">首页</view>
<view class="title_item">原创</view>
<view class="title_item">分类</view>
<view class="title_item">关于</view> -->
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view>
</view>
js:
// components/Tabs/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
}
]
},
/**
* 组件的方法列表
*/
methods: {
}
})
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{}
标题激活选中
wxml:
<view class="tabs">
<view class="tabs_title">
<!-- <view class="title_item">首页</view>
<view class="title_item">原创</view>
<view class="title_item">分类</view>
<view class="title_item">关于</view> -->
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view>
</view>
js:
// components/Tabs/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
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文件中 存放事件回调函数的时候,必须要存在发展methods中!!!
*/
methods: {
//1.绑定点击事件,需要在methods中进行绑定
//2.获取被点击的索引
//3.获取原数组
//4.对数组循环
//给每一个循环项 选中属性 改为false
//给当前的索引项 添加激活选中效果就可以了!!!
hanldeItemTap(e){
//获取索引
const {index} = e.currentTarget.dataset;
//获取data中的数组
//解构 对复杂类型进行解构的时候 复制了一份 遍历的引用而已
//最严谨的做法,重新拷贝一份数组,再对这个数组的备份进行处理
//let tabs = JSON.parse(JSON.stringify(this.data.tabs));
//不要直接修改this.data.数据
let {tabs} = this.data;
//循环数组
//数组.forEach 遍历数组,遍历数组的时候,修改了v,也会导致原数组被修改
tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
this.setData({
tabs
})
}
}
})
自定义组件:父向子传递数据
父向子传递数据的过程:
demo17(父元素).wxml:
<!--
1 父组件(当前页面)向子组件传递数据,通过标签属性的方式来传递
*在子组件上进行接收
*吧这个数据当成是data中的数据直接用即可
-->
<Tabs tabs="{{tabs}}"></Tabs>
demo17.js:
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
}
]
}
})
Tabs.js:
// components/Tabs/Tabs.js
Component({
/**
* 里面存放的是要从父组件中接收的数据
*/
properties: {
// //要接收的数据的名称
// aaa:{
// //type 要接收数据的类型
// type:String,
// //value 默认值(不写即为父数据)
// value:""
// }
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 1.页面.js文件中 存放事件回调函数的时候,存放在data同层级下!!!
* 2.组件.js文件中 存放事件回调函数的时候,必须要存在发展methods中!!!
*/
methods: {
//1.绑定点击事件,需要在methods中进行绑定
//2.获取被点击的索引
//3.获取原数组
//4.对数组循环
//给每一个循环项 选中属性 改为false
//给当前的索引项 添加激活选中效果就可以了!!!
hanldeItemTap(e){
//获取索引
const {index} = e.currentTarget.dataset;
//获取data中的数组
//解构 对复杂类型进行解构的时候 复制了一份 遍历的引用而已
//最严谨的做法,重新拷贝一份数组,再对这个数组的备份进行处理
//let tabs = JSON.parse(JSON.stringify(this.data.tabs));
//不要直接修改this.data.数据
let {tabs} = this.data;
//循环数组
//数组.forEach 遍历数组,遍历数组的时候,修改了v,也会导致原数组被修改
tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
this.setData({
tabs
})
}
}
})
自定义组件:子向父传递数据
Tabs.js
Component({
properties: {
tabs:{
type:Array,
value:[]
}
},
data: {
},
methods: {
//5.点击事件触发的时候:触发父组件中的自定义事件,同时床底数据给父组件
//this.triggerEvent("父组件自定义事件的名称",要传递的参数)
hanldeItemTap(e){
//获取索引
const {index} = e.currentTarget.dataset;
this.triggerEvent("itemChange",{index})
}
}
})
demo17.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;
//循环数组
//数组.forEach 遍历数组,遍历数组的时候,修改了v,也会导致原数组被修改
tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
this.setData({
tabs
})
}
})
demo17.wxml
<!--
2 子向父传递数据,通过事件的方式传递
*在子组件的标签上加入 自定义事件
-->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>
自定义组件:slot
场景:点击菜单栏上的选项显示不同的内容
tabs.wxml
<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">
<!--
slot标签,其实就是一个占位符、插槽
等到父组件调用子组件的时候,再传递标签过来,最终,这些被传递的标签就会替换slot插槽的位置
-->
<slot></slot>
</view>
</view>
demo17.wxml
<!--
2 子向父传递数据,通过事件的方式传递
*在子组件的标签上加入 自定义事件
-->
<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>
组件的其他属性
应用生命周期
app.js
// app.js
App({
//1 应用第一次启动就会触发的事件
onLaunch(){
//在应用第一次启动的时候 获取用户的个人信息
console.log("onLaunch");
},
//2 应用被用户看到时
onShow(){
//对应用的数据或者页面效果 重置
console.log("onShow");
},
//3 应用 被隐藏时
onHide(){
//暂停或者清除定时器
console.log("onHide");
},
//4 应用的代码发生了报错的时候就会触发
onError(err){
//在应用发生代码报错的时候,收集用户的错误信息,通过异步请求,将错误信息发送到后台
console.log("onError");
console.log("err");
},
//5 页面找不到就会触发
// 应用第一次启动的时候,如果找不到第一个入口页面,才会触发
onPageNotFound(){
console.log("onPageNotFound");
}
})
页面生命周期
demo18.js
// pages/demo18/demo18.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//onLoad发送异步请求来初始化页面数据
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
* 需要让页面 出现上下滚动才行
*/
onReachBottom: function () {
//常用于上拉加载下一页数据
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//页面滚动时就可以触发
onPageScroll(){
},
//页面尺寸发生改变的时候就会触发
onresize(){
//常用于手机横屏竖屏切换时出现
},
//必须要求当前页面,也是tabbar页面(注:当前测试页面并不是tabbar)
//点击自己的tab item的时候才触发
onTabItemTap(){
}
})
项目技术选型
小程序的第三方框架
- 腾讯:wepy (语法类似vue)
- 美团:mpvue (语法类似vue)
- 京东:taro (语法类似react)
- 滴滴:chameleon
- uni-app (语法类似vue)
- 原生框架MINA (本次项目就使用原生框架)