微信小程序的简单介绍

作者：张小龙 微信之父
定义：轻量级应用
诞生的事件 2016年 下半年 开发者才可以使用
特点：无需下载 随时可用 减少桌面app应用
微信小程序 和微信公众号
微信公众号：
订阅号：
服务号：
个人和企业

开发者工具：WeChat 开发工具
模拟器：不在用浏览器 模拟器内核 x5 uc浏览器

微信小程序的应用场景？
业务逻辑不复杂 使用频度不高 不要求太高性能的应用
例如：投票 购票 充值

小程序的文件结构
app.js 全局入口文件 全局的一些功能和方法
app.json 全局配置文件
app.wxss 全局样式
project.config.json 项目配置文件
appid 开发项目时 如果没有AppID 可以使用测试id 没有AppID的影响 功能受限

具体的文件结构
.json 单个文件的配置 页面的配置
.js 单个文件的功能和方法 页面的脚本
.wxss 单个文件的样式 页面样式
.wxml 单个文件的视图 页面视图 结构

微信小程序的单位
rpx 自使用屏幕宽度
pt 视觉单位 pt:point，点，印刷行业常用单位，等于1/72英寸
ppi 像素密度
px 像素单位

垂直方向如果数值较小 则采用px
水平方向 采用rpx

页面的生命周期
data 页面初始数据
onLoad 监听页面的加载 一个页面只会调用一次。
onReady 监听页面初次渲染完成、 每次打开页面都会调用一次。
onShow 监听页面显示
onHide 监听页面的隐藏
onUnload 监听页面卸载
onPullDownRefresh 监听用户下拉操作
onReachBottom 监听上拉触底事件

app的生命周期
onLaunch 监听小程序初次渲染加载 全局只执行一次
onShow 监听页面后台切换显示
onHide 监听页面后台切换隐藏
onError 监听脚本错误 触发事件onError

路由跳转
redirectTo 重定向wx.redirectTo 两个页面之间的平行跳转（属于页面关闭当前，卸载，跳转到第二个页面不会显示回退按钮）
relaunch 跳转 跳转到应用内某个页面 关闭所有页面 不能再返回其他页面 wx.navigateback 不可用了
navigateTo 跳转 保留当前页面的历史记录可以返回到当前页面 wx.navigateback 返回父级页面
父子之间的跳转（跳转到第二个页面会显示回退的按钮）wx.navigateBack({delta:1})返回的层级 路由可以嵌套 仅限五层
switchTab tabBar 跳转
.wx.switchTab 从启动页面跳转，第二页显示tabBar（没有回退按钮）

“pages”:[
“pages/texts/texts”, 写在第一行的就是首页的启动页
“pages/index/index”,
“pages/logs/logs”
]

navigateTo, redirectTo 只能打开非 abBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch可以打开任意页面, 但是没有返回按钮，需要定义一个可以点击回退的按钮。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

进入非tab页
进入首页(tab页)
回退

wxml跳转
url
open-type navigate redirect relaunch switchTab navigateTo redirectTo

常用的标签
view 相当于div
text 相当于文本
block 相当于vue的slot 占据位置
image
button
icon

轮播
swiper
swiper-item 撑不开元素 必须依赖于图片的高度
autoplay=“true” 自动播放
有默认时间 4s
intervail=“2000”
indicator-dots=“true” 下面有点击按钮
indicator-color 按钮颜色
indicator-active-color 当前点击按钮的颜色
duration=“1” 滑动区间时间
circular=“true” 是否采用衔接滑动
current 当前所在滑块的 index
circular 是否采用衔接滑动

修改值
this.setData({
key:value
})
获取值:this.data.xxx

冒泡事件
bind
bindtap
bindlongtap 长按
bindtouchstart 开始按下
bindtouchmove 按下并移动
bindtouchend 抬起
bindtouchCancel 中断事件

非冒泡事件 相当于阻止冒泡
catchtap
catchlongtap 长按
catchtouchstart 开始按下
catchtouchmove 按下并移动
catchtouchend 抬起
catchtouchCancel 中断事件

捕获事件
capture-bind:tap=""
阻止捕获
capture-catch:tap=""

微信小程序的配置
app.json 全局配置
文件.json 文件配置
page 页面路由
window 窗口
“navigationBarBackgroundColor”: “#fff”, 导航栏背景颜色
“navigationBarTitleText”: “WeChat”, 导航栏标题
“navigationBarTextStyle”:“black” 导航栏标题的文本 颜色 black white
“enablePullDownRefresh”: false 是否支持下拉刷新
“onReachBottomDistance”:false 是否支持上拉加载
“backgroundTextStyle” 下拉背景字体、loading 图的样式，仅支持 dark/light

  注意tabBar至少需要两个最多五个Item选项

tabBar 配置
color 未选择时 底部导航文字的颜色
“selectedColor”: “#0f0”, 选中当前文字的颜色
position:“top” 默认bottom
borderStyle: “” 边框样式 只支持white black 默认black 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）
backgroundColor:"" 背景颜色
list 列表项
pagePath:“页面路径”
“text”:"" 文字
iconPath:"" 未选中图标
selectedIconPath:""选中图标

标签的显隐
wx:if="" 默认隐藏false wx:elif="" 空默认是false 写false不管用 wx:else 当前面都不满足才会执行
循环
wx:for="{{}}" wx:key=“index”
wx:for-item=“data” {{data}} data就相当于item值

调试
断点调试 source
数据调试 AppData

模板：template name is
将有name的模板引入 在有is的模板里面显示

引入组件 usingComponent

组间传值
父子
将子组件引进来
“usingComponents”: {
“textcom”:"…/textcom/textcom"
}
<textcom 变量to={{数据}}>

子组件里面接收
properties:{
to:{
type:String,
default:""
}
}

子父 trigger自传值
this.triggerEvent(“getter”,{ child: “我是子元素的值” })
通过事件发送
发送

父元素里面通过 bind:getter=“getchild”
传一个e值 e.detail.child

交互获取数据
./表示当前目录
…/表示父级目录
/表示根目录

wx.request({})
https
http
json-server 在任意地方下载 node.modul在wechat-db文件夹下下载 配合node编写后台接口
本地服务器
easy-mock 前后端分离 提供接口数据

云开发

本地超过1m就不能打包预览了
微信小程序上传服务器要低于4m

小程序框架
mpvue 基于vue
wepy 微信小程序
uni-app
Taro 京东 多端统一 web 小程序 h5

环境 node Vue-cli
创建项目
vue创建项目
vue init webpack 项目名称

mpvue 创建项目
vue init mpvue/mpvue-quickstart 项目名称
Eslint 是什么？

.git 这是影藏文件

index.html 主页面文件
static 静态资源文件
main.js 程序主入口文件
app.json 配置
utils 工具函数
src 项目主目录
components 组件
pages 页面（小程序
node-modules 项目依赖
dist 打包后生成的文件
config 项目配置文件
build 构建时执行的命令

pc 移动端 vue全家桶 react node 微信小程序 app(混合app)
bootstrap