1,在app.json中配置状态栏参数,,包括背景色,状态栏字体颜色等等,可以在每一个page中重新重写,会被覆盖
2.app.js中是用来注册一个小程序。接受一个 object 参数,在这里放小程序实例的生命周期函数
App({
//说大白话就是放小程序生命周期的地方
//监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onLaunch(){
},
onShow(){
//监听小程序显示当小程序启动,或从后台进入前台显示,会触发 onShow
},
onHide(){
//当小程序从前台进入后台,会触发 onHide
},
onError(){
//错误监听函数当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
},
onPageNotFound(){
//页面不存在监听函数,当小程序出现要打开的页面不存在的情况,会带上页面信息回调该函数
}
})
3.创建page,每一个page相当于一个组件
//全局的 getApp() 函数可以用来获取到小程序实例,即放在最外面的app.js中的实例
const
app
=
getApp() 不用引入任何模块,getApp是小程序中的全局函数
//Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件
//处理函数等。Page和App的关系类似于vue中实例与组件关系,同样
Page可以有多个,也有生命周期
Page({
data: {
//页面的初始数据
},
onLoad () {
//生命周期函数--监听页面加载
},
onReady () {
//生命周期函数--监听页面初次渲染完成
},
onShow () {
//生命周期函数--监听页面显示
},
onHide () {
//生命周期函数--监听页面隐藏
},
onUnload () {
//生命周期函数--监听页面卸载
},
// 自定义函数,不属于生命周期,常用与处理多个函数的共同方法
a(){}
})
<view> {{message}} </view> 类似于html格式,view是一种容器组件,{{}}是表达式,可以放数据或逻辑判断
message是要挂载在Page函数中的data对象上
Page({
data: {
message: 'Hello MINA!'
}
})
<view wx:for="{{array}}"> {{item}} </view> wx:for相当于vue中的v-for,花括号中为要循环的数据,一般为数组或对象,默认情况下item为 array循环后的每一个值,
wx:if相当于v-if,v-elseif,v-else
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
模板:一般为通用组件的不同功能展示,根据参数不同显示不同的模板name和is一一对应,在其中传参
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
事件:
touchstart | 手指触摸动作开始 | |
touchmove | 手指触摸后移动 | |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 | |
touchend | 手指触摸动作结束 | |
tap | 手指触摸后马上离开 | |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 | 1.5.0 |
longtap | 手指触摸后,超过350ms再离开(推荐使用longpress事件代替) | |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
animationstart | 会在一个 WXSS animation 动画开始时触发 | |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
animationend | 会在一个 WXSS animation 动画完成时触发 | |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 |
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail
自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。
点击事件的detail
带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
5、WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
尺寸单位:
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
@import
语句可以导入外联样式表
6、组件!!!!
组件列表
基础组件分为以下七大类:
视图容器(View Container):
组件名 | 说明 |
---|---|
view | 视图容器 |
scroll-view | 可滚动视图容器 |
swiper | 滑块视图容器 |
基础内容(Basic Content):
组件名 | 说明 |
---|---|
icon | 图标 |
text | 文字 |
progress | 进度条 |
表单(Form):
标签名 | 说明 |
---|---|
button | 按钮 |
form | 表单 |
input | 输入框 |
checkbox | 多项选择器 |
radio | 单项选择器 |
picker | 列表选择器 |
picker-view | 内嵌列表选择器 |
slider | 滚动选择器 |
switch | 开关选择器 |
label | 标签 |
导航(Navigation):
组件名 | 说明 |
---|---|
navigator | 应用链接 |
多媒体(Media):
组件名 | 说明 |
---|---|
audio | 音频 |
image | 图片 |
video | 视频 |
地图(Map):
组件名 | 说明 |
---|---|
map | 地图 |
画布(Canvas):
组件名 | 说明 |
---|---|
canvas | 画布 |