小程序全面基础知识归纳
一、基础要点
1.文件结构
1-1 page.json全局配置 | 微信开放文档
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。普通快速启动项目里边的app.json配置
{"pages": ["pages/index/index", "pages/demo02/demo02","pages/demo01/demo01", "pages/logs/logs","pages/search/search"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black","enablePullDownRefresh":true,"backgroundColor":"#f0f00f"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icons/index.png","selectedIconPath": "icons/_index.png"},{"pagePath": "pages/search/search","text": "搜索","iconPath": "icons/search.png","selectedIconPath": "icons/_search.png"}],"color": "#000000","selectedColor": "#1296db","backgroundColor": "#7dc5eb","borderStyle": "black","position": "top"},
字段含义:
- a.pages 字段 ——用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序定义在哪个目录
- b.window 字段 —— 用于定义小程序所有页面的顶部北京颜色,文字颜色定义等。
1-2 tabbar 全局配置 | 微信开放文档
1-3 页面配置 | 微信开放文档
每一个小程序页面也可以使用 .json
文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json
的 window
中相同的配置项。
{"usingComponents": {},"navigationBarBackgroundColor":"#000000","navigationBarTextStyle":"white","navigationBarTitleText":"首页啊"
}
1-3-1自定义小程序标题栏颜色及标题
wx.setNavigationBarTitle({title: "我是点击后的标题"})wx.setNavigationBarColor({frontColor: '#000000',backgroundColor: '#f5f5f5',})
1-4 sitemap 配置 | 微信开放文档
微信现已开放小程序内搜索,开发者可以通过 sitemap.json
配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler
及场景值:1129
。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中。
2.标签
text 相当于web中的 span标签 行内元素 不会换行
view 相当于web中的 div标签 块级元素 会换行
block 占位符的标签 写代码的时候可以看到这标签存在 页面渲染小程序会把它移除掉
(如果不想额外的添加标签可以使用block)
使用vscode编辑器,可安装 微信开发助手 插件
快捷键:鼠标插入多行:alt+鼠标左键 复制多行:鼠标+alt+往下拖动
3.数据绑定
wxml:<!--1 字符串-->
<view>{{msg}}</view>
<!--2 数字类型-->
<view>{{num}}</view>
<!--3 bool类型-->
<view>{{isGril}}</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 使用bool类型充当属性 checked 字符串和花括号之间一定不要存在空格,否则会导致识别失败-->
<view><checkbox class="" value="" disabled="" color="" checked="{{ischecked}}"></checkbox>
</view>js:data: {msg:"hello mina",num:1100,isGril:false,person:{age:49,height:156,weight:130,name:'富婆'},ischecked:false,},
4.运算
运算 =>表达式
1.可以在花括号中 加入 表达式 ≠ " 语句 "
2.表达式:指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算...
a.数字的加减
b.字符串拼接
c.三元表达式
3.语句:指的是复杂的代码段
a.if else
b.switch
c.do while...
d.for...
<view>{{1+3}}</view>
<view>{{"1"+"3"}}</view>
<view>{{10%2 === 0 ? "偶数" : "奇数"}}</view>
5.数组和对象循环 wx:for
列表循环
a.wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
b.wx:key="唯一的值" 用来提高列表渲染的性能
1. wx:key 绑定一个普通的的字符串的时候,那么这个字符串名称肯定是循环数组中
的对象的唯一属性
2.wx:key="*this" 就表示 你的数组 是一个普通的数组 *this 标识是循环项
[1,2,3,4,5]
["1","222","aaa"]
c.当出现数组的嵌套循环的时候,尤其要注意以下绑定的名称 不要重名
wx:for-item="item" wx:for-index="index"
d.默认情况下,我们不写 (wx:for-item="item" wx:for-index="index" )
小程序也会把循环项的名称和索引的名称 item 和 index
只有一层循环的话 (wx:for-item="item" wx:for-index="index" ) 可以省略
<view wx:for="{{list}}" wx:for-item="item" //单层循环这里可以省略wx:for-index="index" //单层循环这里可以省略wx:key="id"
>{{item.name}}
</view>
对象循环
a.wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
b.循环对象的时候最好把item和index的名称修改一下
wx:for-item="value" wx:for-index="key"
<view
wx:for="{{person}}"
wx:key="age"
wx:for-item="value"
wx:for-index="key">属性:{{key}}值:{{value}}
</view>
6.条件渲染
a. wx:if="{{true/false}}" 显示/隐藏
if,else,if else
wx:if
wx:elif
wx:else
b. hidden
1.在标签上直接加入属性 hidden
2.hidden="{{true}}"
注:什么情境下用哪个
1.当标签 不是频繁的切换显示 优先使用 wx:if ( 直接把标签从页面结构给移除掉 )
2.当标签频繁切换显示的时候优先使用hidden ( 通过添加样式的方式来切换显示 )
所以hidden 不能 和 display 一起使用
7.事件绑定
小程序中的数据双向绑定 . 首先通过 bindinput 绑定文本框的输入事件 . 在 data 中声明一个变量 content ,将其动态绑定成文本框的 value 值 . 在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值 . 通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定
a. 需要给input标签绑定 input事件
绑定关键字 bindinput
b. 如何获取 输入框的值
通过事件源对象来获取
e.detail.value
c. 把输入框的值赋值到data当中 不能直接
1.this.data.num = e.detail.value
2.this.num = e.detail.value
正确的写法
this.setData({
num:e.detail.value
})
d. 需要加入一个点击时间
1. bindtap
2. 无法在小程序当中的 事件中 直接传参
3. 通过自定义属性的方式来传递参数
4. 事件源中获取 自定义属性
wxml:<input type="text" bindinput="handleInput" value="{{num}}" /><button bindtap="handletap" data-oper="{{1}}">+</button> //data-oper 通过自定义属性传参<button bindtap="handletap" data-oper="{{-1}}">-</button><view>{{num}}</view>js:handleInput(e){console.log(e);this.setData({num:e.detail.value})
},
handletap(e){// console.log(e);// 获取自定义属性 operconst oper = e.currentTarget.dataset.oper; // console.log(oper);this.setData({ //this.setData({}) 赋值// num:Number(this.data.num) + oper //this.data.num 获取值num:this.data.num*1 + oper*1 //number()转为数字类型 *1隐式转为数字类型})},
二、样式wxss
1.尺寸单位
- rpx(responsive pixel)是小程序所独有的尺寸单位,可根据屏幕宽度进行自适应。
- 规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px=1物理像素
设备 | rpx换算px (屏幕宽度 / 750) | px换算rpx (750 / 屏幕宽度) |
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
建议:开发微信小程序时设计师可以用iphone6作为视觉稿的标准
使用步骤:
- 确定设计稿宽度 pageWidth
- 计算比例 750rpx = pageWidth px.因此 1px=750rpx / pageWidth
- 在less文件中只要把设计稿中的 px = > 750 / pageWidth rpx 即可
2. 样式导入
- wxss 中直接就支持样式导入功能
- 也可以和less 中的导入混用
- 使用@import 语句可以导入外连样式表,只支持相对路径
3. 选择器
需要注意的是, 小程序不支持通配符 * 因此以下代码无效
通配符*无效
*{padding:0;margin:0;box-sizing:border-box
}
可改为
view,text,image,navigator ...{padding:0;margin:0;box-sizing:border-box
}
4.小程序中使用less
原生小程序不支持less, 其他小程序的框架大体都支持,如wepy , mpvue, taro 等,但仅仅因为一个less功能,而去引入一个框架,肯定是不可取的,因此可以用一下方式来实现。
1. 编辑器是vscode
2. 安装esay less
3.在vs code中的设置中加入 如下配置
"less.compile":{"outExt":".wxss"
}
4. 在要编写样式的地方,新建less 文件,如index.less 然后正常编写即可
5.也可@import导入
5.使用CSS自定义属性(变量)
使用CSS自定义属性(变量) - CSS(层叠样式表) | MDN (mozilla.org)
6.vant weapp 定制全局主题样式
在 app.wxss 中,写入 CSS 变量,即可对全局生效
page {--button-border-radius: 10px;--button-default-color: #f2f3f5;--toast-max-width: 100px;--toast-background-color: pink;
}
定制主题:Vant Weapp - 轻量、可靠的小程序 UI 组件库
配置文件:https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less
三、常见组件
- 小程序中常用的布局组件
- view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox.等
- 官网文档:view | 微信开放文档
1.view
代替原来的div标签 ( 还可加按下去的样式类)
1-1. scroll-view | 微信开放文档
<scroll-view class="box" scroll-y> //scroll-y属性 允许纵向滚动 scroll-x属性 允许横向滚动<view>A</view><view>B</view><view>C</view>
</scroll-view>
2.text
- a. 文本标签
- b. 只能嵌套 text
- c. 长按文字可以复制( 只有此标签有这个功能 )
- d. 可以对空格 回车 进行编码
类型 | 默认值 | 必填 | 说明 | |
---|---|---|---|---|
selectable | boolean | false | 否 | 文本是否可选 (已废弃) |
user-select | boolean | false | 否 | 文本是否可选,该属性会使文本节点显示为 inline-block |
space | string | 否 | 显示连续空格 | |
decode | boolean | false | 否 | 是否解码 |
space:
合法值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
<!-- user-select 文本可选 -->
<text user-select decode>我在这里 哈哈哈</text>
<!-- decode 编码解析 -->
<view><text decode>姓  名:</text></view>
<view><text decode>手 机 号:</text></view>
<view><text decode>收货地址:</text></view>
3.image
- 小程序打包上线要求不能超过2M,建议图片使用外网图片
- 默认支持懒加载 lazy-load (图片懒加载,在即将进入一定范围(上下三屏)时才开始加载)
- image | 微信开放文档
- image默认组件宽度 :320px 高度:240px
mode string 默认:scaleToFill 图片裁剪、缩放的模式 模式 值 说明 缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。(常用) 缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。(少用) 缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变(常用) 缩放 heightFix 高度不变,宽度自动变化,保持原图宽高比不变 裁剪 top、bottom、left... 不缩放图片,只显示图片的 “ 顶部 ” 区域
4.swiper | 微信开放文档
- 轮播图外层容器 swiper
- 每个轮播项 swiper-item
- autoplay 自动轮播
- interval 修改轮播时间
- circular 衔接轮播
- indicator-dots 显示 指示器 分页器 索引器
- indicator-color 指定未选择的颜色
- indicator-active-color 选中时指示器的颜色
- swiper 标签存在默认样式 width 100% height:150px image 存在默认宽高
- 原图的宽度 和高度 1125 * 352 px
- swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
- swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
- height:100vw * 352 / 1125
<swiper autoplay interval="1000" circular indicator-dots indicator-color="pink" indicator-active-color="deeppink"><swiper-item><image mode="widthFix" src="//xxxx.com/1.jpg" /></swiper-item><swiper-item><image mode="widthFix" src="//xxxx.com/2.jpg" /></swiper-item><swiper-item><image mode="widthFix" src="//xxxx.com/3.jpg" /></swiper-item>
</swiper>
// less
swiper{width: 100%; height: calc(100vw * 352 / 1125);image{width: 100%;}
}
5.navigator | 微信开放文档
- 导航组件 类似超链接标签
- 块级元素 默认会换行 可以加宽度高度
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
target | string | self | 否 | 在哪个目标上发生跳转,self 默认当前小程序 miniProgram 其他小程序 | 2.0.7 |
url | string | 否 | 当前小程序内的跳转链接 | 1.0.0 | |
open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
open-type:
1.navigate:保留当前界面,跳转到应用内的某个界面
2.redirect:关闭当前界面,跳转到应用内的某个界面
3.reLaunch:关闭所有页面,打开跳转的页面
4.switchTab:跳转到TabBar页面,关闭其他非tabBar页面
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
6.rich-text | 微信开放文档
富文本标签 nodes
- 标签字符串(最常用) <rich-text class="" nodes="{{html}}"></rich-text>
- 对象数组
7.button | 微信开放文档
1.外观样式:
2.open-type
通过open-type属性可以调用微信提供的各种功能(客服 、转发、获取用户授权、获取用户信息等)
<button open-type="contact">contact</button> //客服对话功能 需要在微信小程序后台配置
<button open-type="share">share</button> //转发当前小程序 到微信朋友中
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
//获取当前用户的手机号码信息 结合一个事件使用 不是企业的小程序账号 没有权限来获取用户的手机号
// 1 绑定一个事件 bindgetphonenumber
// 2 在事件回调函数中 通过参数来获取信息
// 3 获取到的信息 已经加密过了 需要自己搭建小程序的后台服务器 ,在后台服务器中进行解析手机号码 ,返回到小程序中就可以看到信息了。
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
//获取当前用户的个人信息 可以从bindgetuserinfo回调中获取到用户信息
<button open-type="launchApp">launchApp</button>
//在小程序中 直接打开 app 1.需要先在app中通过app的某个链接 打开小程序 2.在小程序中再通过这个功能重新打开app
<button open-type="openSetting">openSetting</button>
//打开小程序的内置授权页面 只会出现用户层间点过的权限
<button open-type="feedback">feedback</button> //打开小程序内置的一件反馈页面
<button open-type="chooseAvatar">chooseAvatar</button> // 获取用户头像,可以从bindchooseavatar回调中获取到头像信息
8.icon | 微信开放文档
<icon type="success" size="50" color="#ff00ff"></icon>
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 | |
size | number/string | 23 | 否 | icon的大小,单位默认为px,2.4.0起支持传入单位(rpx/px),2.21.3起支持传入其余单位(rem 等)。 | 1.0.0 |
color | string | 否 | icon的颜色,同css的color | 1.0.0 |
9.radio | 微信开放文档
- radio标签 必须和父元素 radio-group 来使用
- value 选中单选框的值
- 需要给radio-group 绑定change事件
- 需要在页面中显示 选中的值
<radio-group bindchange="handleChange"><radio color="red" value="man">男</radio><radio value="woman">女</radio>
</radio-group>
<view>选择的是{{selectRadio}}</view>//js中 handleChange(e){//1.获取单选框中的值console.log(e.detail.value);let selectRadio = e.detail.value;// 2.把值赋给data中的数据this.setData({//selectRadio:selectRadioselectRadio})}
10.checkbox | 微信开放文档
- checkbox标签 必须和父元素checkbox-group 来使用
<checkbox-group bindchange="handleChangeCheck"><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>选择的水果是:{{selectList}}</view>data: {selectRadio:'',list:[{id:1,name:'apple',value:'苹果',},{id:2,name:'pear',value:'梨',},{id:3,name:'banana',value:'香蕉',},],selectList:[],
},
handleChangeCheck(e){//1.获取复选框中的值console.log(e.detail.value);let selectList = e.detail.value// 2.把值赋给data中的数据this.setData({selectList})
},
11.自定义组件
- 类似vue或者react中的自定义组件
- ⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
在⽂件夹内 components/myHeader ,创建组件 名为 myHeader
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
// myHeader.json
{"component": true
}
11.1.2. 编辑组件
- 同时,还要在组件的 wxml ⽂件中编写组件模板,在 wxss ⽂件中加⼊组件样式
- slot 表⽰插槽,类似vue中的slot
// myHeader.wxml
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">{{innerText}}<slot></slot>
</view>
在组件的 wxss ⽂件中编写样式
- 注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
//myHeader.wxss
/* 这里的样式只应用于这个自定义组件 */
.inner {color: red;
}
11.1.3. 注册组件
在组件的 js ⽂件中,需要使⽤ Component() 来注册组件,并提供组件的属性定义、内部数据和 ⾃定义⽅法
//myHeader.js
omponent({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定innerText: {// 期望要的数据是 string类型type: String,value: 'default value',}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod: function(){}}
})
11.2. 声明引⼊⾃定义组件
⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
{// 引用声明"usingComponents": {// 要使用的组件的名称 // 组件的路径"my-header":"/components/myHeader/myHeader"}
}
11.3. ⻚⾯中使⽤⾃定义组件
<view><!-- 以下是对一个自定义组件的引用 --><my-header inner-text="Some text"><view>用来替代slot的</view></my-header>
</view>
11.5. 定义段与⽰例⽅法
Component 构造器可⽤于定义组件,调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。
11.6. 组件-⾃定义组件传参
- ⽗组件通过属性的⽅式给⼦组件传递参数
- ⼦组件通过事件的⽅式向⽗组件传递参数
11.6.1. 过程
- ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
- ⽗组件 监听 handleItemChange事件
- ⼦组件 触发 binditemChange中的 handleItemChange事件 ( ⾃定义组件触发事件时,需要使⽤ triggerEvent ⽅法,指定 事件名 、 detail 对象 )
- ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs")
⽗组件代码
// page.wxml
<!-- 父组件(页面)向子组件传递数据通过便签属性的方式来传递在子组件上进行接收把这个数据当做data中的数据直接使用即可子向父传递数据通过事件的方式传递-->
<tabs tabItems="{{tabs}}" binditemChange="handleItemChange">内容-这里可以放插槽
</tabs>
// page.jsdata: {tabs:[{id:0,name:"首页",isActive:true},{id:1,name:"原创",isActive:false},{id:2,name:"分类",isActive:false},]},//自定义事件,用来接收子组件传递的数据的handleItemChange(e){//接收传递过来的参数const index = e.detail;//获取数组let tabs = this.data.tabs;console.log(tabs);//循环数组,所有的isActive改为false,当前改为true, [].foreachtabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);this.setData({tabs})},
⼦组件代码
// com.wxml
<view class="tabs"><view class="tabs_title"><view class="title_item {{item.isActive ? 'active':''}}" wx:for="{{tabItems}}" wx:key="id" bindtap="handleItemTab" data-index="{{index}}">{{item.name}}</view></view><view class="tabs_content"><slot></slot></view>
</view>
// com.js
Component({
//组件的属性列表//要从父组件接收的数据properties: {tabItems:{type:Array, //要接收的数据类型value:[] //默认值}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemTab(e){// console.log(e.currentTarget.dataset.index);//获取当前索引const index = e.currentTarget.dataset.index;// 点击触发事件的时候// 触发父组件的自定义事件,同时传递事件给父组件// this.triggerEvent("父组件自定义事件的名称",要传递的参数);this.triggerEvent("itemChange",index); }}
})
11.7. ⼩结
- 标签名 是 中划线的⽅式
- 属性的⽅式 也是要中划线的⽅式
- 其他情况可以使⽤驼峰命名 3-1. 组件的⽂件名如 myHeader.js 的等 3-2.组件内的要接收的属性名 如 innerText
- 更多Component 构造器 | 微信开放文档 (qq.com)
四.小程序的生命周期
生命周期强调的是一个时间段
1. 应用生命周期
特指小程序从启动 ->运行 ->销毁的过程
应用生命周期函数 App(Object object) | 微信开放文档 (qq.com)
// app.js
App({/*** 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)*/onLaunch: function () {},/*** 当小程序启动,或从后台进入前台显示,会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台,会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息*/onError: function (msg) {}
})
2.页面生命周期
特指小程序中,每个页面的加载-> 渲染 -> 销毁的过程
页面生命周期函数Page(Object object) | 微信开放文档 (qq.com)
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
3.生命周期函数
是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行,强调的是时间点
生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如页面刚加载的时候,可以在onLoad生命周期函数中初始化页面的数据
小程序全面基础知识归纳相关推荐
- 【微信小程序丨第三篇】小程序的基础知识储备
前言 微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序 ...
- 幸运抽奖小程序-java基础知识
目录 1.前言 2.幸运抽奖小程序LuckyDraw.java 1.前言 大学没学好java,为了学代码审计,得重新拾起java了.世界上本没有代码语言,敲的人多了,便成了语言. 2.幸运抽奖小程序L ...
- 微信小程序开发基础知识1(黑马)
小程序简介 1.小程序与普通网页开发的区别: 1.运行环境不同:网页运行在浏览器中,小程序运行在微信环境中: 2.API不同:由于运行环境不同,小程序无法调用DOM和BOM的API 3.开发模式不同: ...
- 微信小程序开发—— 基础知识
一.目录结构 二.配置 一个小程序应用程序会包括最基本的两种配置文件.一种是全局配置文件 app.json 和 页面自己的配置文件 page.json. 配置文件中不能出现注释 2.1 全局配置 ap ...
- 微信小程序的基础知识
1.小程序的简介 1.小程序与普通网页开发的区别 1. 运行环境不同:网页运行在浏览器环境中,小程序运行在微信环境中 2.由于运行环境的不同,所以小程序中,无法调用 DOM 和 BOM 的 A ...
- 微信小程序开发基础知识2(黑马)
WXML模板语法-数据绑定 1.数据绑定的原则 1.在data中定义数据 2.在WXML中使用数据 2.在data中定义页面的数据 在页面对应的.js文件中,把数据定义到data对象中即可 3.Mus ...
- 小程序 和 web 功能对比_小程序的基本知识及功能
"小沃"为客户开发项目中经常遇到客户要求开发小程序,"小沃"也是一个刨根问底的工作狂,从而收集了对"小程序生态变化"市场调研报告,一方面让客 ...
- 头歌-信息安全技术-用Python实现自己的区块链、支持以太坊的云笔记服务器端开发、编写并测试用于保存云笔记的智能合约、支持以太坊的云笔记小程序开发基础
头歌-信息安全技术-用Python实现自己的区块链.支持以太坊的云笔记服务器端开发.编写并测试用于保存云笔记的智能合约.支持以太坊的云笔记小程序开发基础 一.用Python实现自己的区块链 1.任务描 ...
- 大学计算机技术知识大全,大学计算机全章节重点基础知识归纳大全.doc
大学计算机全章节重点基础知识归纳大全 PAGE \* MERGEFORMAT 18 大学计算机基础重点归纳 第一章:计算机概论 19646年,第一台计算机,ENIAC 计算机分类(6):巨型,小巨型, ...
最新文章
- 查看Linux系统软硬件信息
- 每日踩坑 2018-11-26 MVC Razor ActionLink 生成的URL中多生成了一个参数 ?length=n
- CATALINA_BASE与CATALINA_HOME的区别
- js控制页面刷新大全
- 打印机每天都要重新连接
- 核心对象+持久对象全析(3)
- DefaultKeyedVector和KeyedVector用法
- getElementById和ByTagName的区别
- Leetcode之路径总和II
- SQL Server数据导入导出的几种方法
- everything如何搜索文件内容?(这软件搜索文件可以,搜索文件内容不行)
- 算法动画图解 | 被 “废弃“ 的 Java 栈,为什么还在用
- Android车载技术之蓝牙通讯——如何蓝牙播放音乐
- Office2013办公软件简体中文专业增强版
- MATLAB 中有哪些命令,让人相见恨晚?
- 编写hello world
- oracle 11g duplicate database基于备份复制数据库(五)
- WSA系列API函数
- 美国访问学者生活之行-开车租车及停车
- cs224n 2019 Lecture 9: Practical Tips for Final Projects