小程序开发流程总结

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(){}

})

4、 WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合 基础组件 、 事件系统 ，可以构建出页面的结构

<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	画布