小程序实质上就是一个基于web基础的应用程序(网页)(但是不支持浏览器的api,小程序的api全部由微信提供,高度依赖微信,因此只能在微信中运行)
微信之父张小龙是这样描述小程序的:
小程序是一种不需要下载安装就可以使用的应用,它实现了应用触手可及的梦想。
用户扫一扫或者搜一下即可打开应用,也体现了用完即走的理念。
用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,但又无需安装卸载
微信小程序的接口服务器要求进行ICP备案,并且经过审核,才能发布小程序
微信小程序开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/
开发工具:微信开发者工具
小程序的宿主环境
在iOS中,使用JavaScriptCore,在Android中使用X5内核,在ide中使用nwjs
小程序的运行机制(冷启动,热启动)
小程序在后台中停留一段时间后,被微信销毁,再打开时需要重新加载该小程序的资源,也就是冷启动,而在没被销毁的时间段内,再打开该小程序,是不需要重新加载资源,是热启动
小程序发布更新时,会异步加载新资源,也会导致冷启动
小程序产品需求
发现真实需要
用户深度访谈,分析竞品,付费意愿
需求分期:最小化可行产品(MVP)
不是每个功能都要开发(优先开发最重要和最紧急的功能)
优化开发顺序,先开发基础可用,然后迭代更新功能,满足用户需求,功能文档
根据用户体验来优化服务
原型制作工具:墨刀,Axure
微信小程序结构
index.wxml页面结构
index.wxss页面样式
index.js页面逻辑
如果设置了单独的页面样式,那么会覆盖掉app.wxss的样式
app.json定义了页面和基本配置,采用json格式,必须包含pages属性,说明小程序有哪些页面
app.json文件结构
pages是用来定义页面的,是一个数组,每一个项都是代表一个页面,例如:
"pages":[
"pages/index/index",
"pages/demo/demo"
],
window属性是设置小程序的窗口样式,例如:
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
"navigationBarTitleText": "Weixin", // 导航栏文本
"navigationBarTextStyle":"black" // 导航栏文本颜色
},
从上面可以看出是一个三层结构,页面是放在pages目录下的,而demo和index都是代表这个页面叫什么
demo.js,Page()是小程序提供的一个函数,用来初始化页面,参数是一个对象,用来配置当前页面的属性
demo.wxml,该文件是用来描述页面的,和html类似
pages文件夹:存放小程序页面,每个页面代表为一个文件夹,文件夹名称为页面名称,在这个页面文件夹下的全部文件都是描述这个页面的
utils文件夹:用于存放公共的js程序,便于不同的页面进行调用
imgages文件夹:为方便管理小程序的用到的全部静态图片
app.js:当前项目的js(全局数据和反应)
json:全局配置
wxss:全局样式
project.config.json:项目配置文件,配置微信开发者工具,例如工具的页面颜色,编译配置等等个性化配置
page.json: 单独定义每个页面的一些属性,例如:顶部颜色,是否可以下拉刷新等等
app.json:这是一种数据格式,小程序的静态配置(全局配置),页面的路径,界面的表现,顶部样式,网络超时等等
pages字段:描述当前小程序所有页面的路径,让微信清楚小程序页面定义在哪个目录
window字段:定义小程序所有页面的顶部背景颜色,文字颜色等等
json是包裹在一个括号中,以键值对的方式表达数据,值必须包含在双引号中,在json中无法使用注释
wxml
WXML:从html中衍生而来一种专门在小程序页面中使用的语言,组合了基础组件,事件系统,构造出页面的结构
view元素是表示块级,和div类似
scroll-view元素是表示可滚动页面区域
text元素是表示行内文本,和span类似
image元素是表示图片,和img类似
swiper元素是用来搞轮播图
属性
<view 属性=“属性值”>
bindtap属性可绑定事件函数
hidden属性控制元素是否隐藏,true为隐藏
wxss样式,采用css样式语法,和写普通的css样式一样,选择器属性样式之类的就不写了,具备css大部分的特性,具体看我写的css笔记,背景,字体,边框,定位,大小之类的,用法是一样的,可以给wxml标签设置class,采用的是W3C标准盒模型,另外小程序官方推荐使用flex布局
推荐静态样式写入class中,style用来接收动态的样式,避免出样式优先级问题,例如:
Alt+shift+f:自动格式化代码
注意:微信小程序的基本单位是rpx,而不是px,不管是什么页面(无论多大或者多小),页面100%就是750rpx,因此页面的1%等于7.5rpx
另外微信官方提供了一套UI框架,https://weui.io/,github库地址:https://github.com/Tencent/weui-wxss/
用法,直接引用weui.wxss,然后像用bootstrap一样,给标签加类
例子:
<view style="width:100rpx;height:100rpx;background-color:{{color}}">hallo wrod</view>
Page({
data: {
color: '#ccc'
}
})
WXSS选择器支持.class,#id,组件选择(例如view,选择全部view组件),::after(view::after,在view组件后插入内容),::before(view::before,在view组件前面插入内容)
项目目录结构
app.js:必需,小程序的逻辑所在
app.json:必需,小程序的公共配置
app.wxss:不必需,小程序的公共样式
页面组成
js:必需,页面逻辑
wxml:必需,页面结构
json:不必需,页面的配置
wxss:不必需,页面的样式
小程序支持的文件:
wxs,png,jpg,jpeg,gif,svg,json,cer,mp3,aac,m4a,mp4,wav,ogg,silk,wasm,br
全局配置:app.json是用于小程序进行的全局配置,决定页面文件路径,窗口表现,网络超时等等
pages配置:定义页面的路径,优先显示第一个设置的页面
window配置:定义所有页面的顶部样式
tabBar配置:底部tab栏的表现
页面配置:每个页面都可以使用.json来配置当前页面的窗口表现,注意:会覆盖掉app.json相同的配置项
stiemap配置:通过配置sitemap.json或者后台页面收录开关来确定小程序页面是否允许被微信索引,当被允许时,微信会通过爬虫的形式,对小程序的页面内容进行索引
生命周期
应用生命周期
onLaunch:小程序初始化,当页面第一次加载时触发,跳转页面返回不触发
onShow:小程序显示(前台),当页面显示或者从后台返回小程序显示该页面时触发,从跳转页面返回时触发
onError:小程序页面异常触发
onPageNotFound:页面不存在
页面生命周期
onLoad:页面加载触发
onShow:页面显示触发
onReady:页面初次渲染完成触发
onHide:页面隐藏触发
onUnload:小程序页面卸载,例如: 重定向一个页面,原页面被关闭
onPullDownRefresh:用户下拉触发
onReachBottom:页面上拉触底触发
onPageScroll:页面被滚动触发
onResize:页面尺寸发生改变时输出
小程序组件生命周期
created:当组件实例被初始化时触发该生命周期钩子(在该钩子触发时,并不能使用setData,this.data等于Component.data)
attached:当组件实例初始化完毕,进入页面节点树后触发该生命周期钩子(this.data被初始化为组件的当前值)
ready:当组件实例在视图层布局完成后触发该生命周期钩子
moved:当组件实例被移动到节点树另一个位置时触发该生命周期钩子
detached:当组件实例被销毁时触发该生命周期钩子(退出当前组件的页面树,也会触发该生命周期钩子)
error:当组件方法抛出错误时触发该生命周期钩子
WXML,数据绑定,列表渲染,条件渲染,模板引用
数据绑定和vue类似,不过小程序的数据绑定是单向的
index.wxml
<view> {{message}} </view>
index.js
Page({
data: {
message: 'hallo word'
}
})
属性绑定
index.wxml
<view>
<text class='{message}'></text>
</view>
index.js
Page({
data: {
message: 'hallo word'
}
})
列表渲染
<block wx:for="{{arrs}}" wx:fot-item="abc" ws:key="index">
<view>
{{index}}:{{abc}}
</view>
</block>
Page({
data: {
arrs: [1,2,3,4,5]
}
})
条件渲染
<view wx:if="{{hallo}}"> True </view>
<view wx:if="{{abc === 1}}"> hallo wrod </view>
Page({
data: {
hallo: true,
abc: 2
}
}
允许使用wx:if,wx:elif和wx:else使用
wx:if是控制属性,可以判断组件是否是否显示,多个组件使用block元素包裹
vx:if和hidden组件的区别,hidden是通过hidden属性隐藏,vx:if是通过局部重新渲染的方式,直接将该组件移除出该DOM
WXML的共同属性,id,class,style,hidden,data-,bind/catch*
模板引用
data.wxml
<template name='tempa'>
<view>
id: {{id}}
name: {{name}}
age: {{age}}
</view>
</template>
index.wxml
index.js
Page({
data: {
dataitem: {
id: 1,
name: chenjunlin,
age: 20
}
}
})
注意:import模板时,是存在作用域的,只能import该模板的内容,如果这个wxml文件内有其他内容是不会被渲染到页面的,避免模板引用死循环
而使用include组件引用的话,是直接目标整个引入进来,这个时候引用模板和直接在声明模板的文件使用是一样的,就好像include组件将目标整个复制进来一样
WXS
WXS是小程序的脚本语言,搭配WXML使用,WXS不依赖于小程序的运行时基本库版本,和JavaScript环境隔离,WXS不能调用js文件定义的,也不能使用小程序提供的api,WXS函数不能作为事件回调函数
<wxs module='hhh'>
var abc = 'hallo word'
module.exports = {
xyz: abc
}
module.exports.value = 100
</wxs>
<view>{{hhh.xyz}}</view>
<view>{{hhh.value}}</view>
小程序事件
事件是视图层到逻辑层的通讯方式,监听用户的行为,通过事件的方式反映到逻辑层进行处理
点击事件(tap),长按事件(longpress),触摸事件(例如:开始触摸(touchstart),结束触摸(touchend),终止触摸(touchcancel))等等
事件(视图层到逻辑层的通信)
<view id='tap' bindtap='taptest'> hallo word </view>
Page({
taptest(event) {
console.log(event)
}
})
事件处理机制:事件捕获,事件处理,事件冒泡
路由
打开新页面通过调用wx.navigateTo API或者使用组件
页面重东西通过调用wx.redirectTo API或者使用组件
页面返回通过调用wx.navigateBack API或者使用组件
tab切换通过调用wx.switchTab API或者使用组件
重启动通过调用wx.reLaunch API或者使用组件
MINA(MINA IS NOT APP) 是微信开发小程序的框架
MINA框架由视图层(小程序的page页面),逻辑层,系统层(JSBridge,微信API,离线存储,网络请求等等)组成
渲染会将WXML节点转换成js对象(AST节点树),更新数据时会进行diff差异处理
小程序运行机制
启动(冷启动(首次启动需要加载,生命周期为销毁时),热启动(无需加载))
微信小程序提供2个线程来处理,分别是View Thread和AppService Thread,这2个线程同时进行加载(并行),View Thread加载完毕后,会通知AppService Thread,AppService Thread再将处理完毕的数据交付给View Thread
微信小程序API
网络请求,媒体处理,上传下载文件,数据缓存,位置信息,设备信息,路由控制
微信开放功能:登录授权,微信支持,模板消息,转发分享,打开APP
API一般有3个回调函数,success(api成功后),fail(api调用失败后),complete(api调用完成时,不管成功与否)
Api官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/