正在路上的小白~~~
正在路上的小白~~~

学习记录-微信小程序

文章目录

  • 一、设计要素
    • 1.五大要点
    • 2.小程序集群搭建的六种方法
  • 二、概述
    • 1.诞生背景
    • 2.什么是小程序
    • 3.小程序能做什么
    • 4.小程序开发工作准备
    • 5.开发者工具下载
    • 6.开发者工具
      • 1)详情
      • 2)调试器
    • 7.官方开发文档
    • 8.小程序代码构成
      • 小程序配置文件介绍(.json)
  • 三、小程序框架与运行机制
    • 1.MINA框架
      • 1)视图层
      • 2)逻辑层(App Service)
      • 3)JSBridge
    • 2.小程序运行机制
      • 1)启动
      • 2)加载
      • 3)生命周期
      • 4)页面路由
      • 5)事件流
        • 事件绑定和冒泡
  • 四、小程序开发框架
    • 1.WXML(WeiXin MarkUp Language)
      • 1)语法
      • 2)通用属性介绍
        • a)class
        • b)data-
        • c)hidden
        • d)id
        • e)style
        • f)bind*/catch*
      • 3)语言特性
        • 数据绑定
        • 列表渲染
        • 条件渲染
        • 模板引用
    • 2.WXSS(WeiXin Style Sheets)
      • 1)尺寸单位rpx
      • 2)样式导入
      • 3)内联样式
      • 4)选择器
    • 3.JavaScript
      • 1)浏览器中JavaScript设计模式
      • 2)Node.js中JS的设计模式
      • 3)小程序中JavaScript设计模式
        • 小程序中宿主环境
    • 4.WXS(WeiXin Script)
      • 1)模块
      • 2)变量
      • 3)注释
      • 4)运算符
      • 5)数据类型
      • 6)基础类库
  • 五.小程序组件
    • 1.视图容器
      • 1)view
      • 2)scroll-view
      • 3)轮播图
        • a.swiper
        • b.[swiper-item](https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html)
      • 4)可移动缩放组件
        • a.movable-view
        • b.[movable-area](https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html)
      • 5)cover-view
    • 2.基础内容组件
      • 1)icon
      • 2)text
      • 3)rich-text
      • 4)progress
    • 3.表单组件
      • 1)多选框
        • a.checkbox-group
        • b.checkbox
      • 2)单选框
        • a.radio-group
        • b.radio
      • 3)input
      • 4)textarea
      • 5)slider
      • 6)switch
      • 7)选择器
        • a.picker
        • b.picker-view
      • 8)label
      • 9)button
        • 去除按钮默认样式
      • 10)form
        • 模板消息
        • "无限"发送模板消息
      • 11)富文本编辑器
    • 4.导航
    • 5.媒体组件
      • 1)image
      • 2)video
      • 3)audio
      • 4)live-pusher、live-player
      • 5)camera
    • 6.地图
    • 7.画布
    • 8.开放能力
      • 1)open-data
      • 2)web-view
      • 3)offical-account
  • 六、API
    • 1.基础
      • 1)系统
      • 2)小程序版本更新
        • UpdateManger
      • 3)小程序
        • 生命周期
      • 4)console
      • 5)定时器
        • a.setInterval
        • b.setTimeout
    • 2.设备
      • 1)联系人
      • 2)电话
      • 3)剪贴板
      • 4)网络
      • 5)屏幕
        • a.wx.setScreenBrightness
        • b.wx.setKeepScreenOn
        • c.wx.onUserCaptureScreen
        • d.wx.getScreenBrightness
      • 6)加速计
        • a.wx.onAccelerometerChange
        • b.wx.startAccelerometer
        • c.wx.stopAccelerometer
      • 7)罗盘
        • a.wx.onCompassChange
        • b.wx.startCompass
        • c.wx.stopCompass
      • 8)设备方向
        • a.wx.onDeviceMotionChange
        • b.wx.startDeviceMotionListening
        • c.wx.stopDeviceMotionListening
      • 9)陀螺仪
        • a.wx.onGyroscopeChange
        • b.wx.startGyroscope
        • c.wx.stopGyroscope
      • 10)扫码
    • 3.路由
      • 1)wx.switchTab
      • 2)wx.reLaunch
      • 3)wx.redirectTo
      • 4)wx.navigateTo
      • 5)wx.navigateBack
    • 4.界面
      • 1)弹窗[交互]
        • a.wx.showToast
        • b.wx.hideToast
        • c.wx.showLoading
        • d.wx.hideLoading
        • e.wx.showModal
        • f.wx.showActionSheet
      • 2)背景
        • wx.setBackgroundColor
        • wx.setBackgroundTextStyle
      • 3)字体
      • 4)导航栏
        • a.wx.showNavigationBarLoading
        • b.wx.hideNavigationBarLoading
        • c.wx.setNavigationBarTitle
        • d.wx.setNavigationBarColor
      • 5)tabBar
        • a.wx.showTabBar
        • b.wx.hideTabBar
        • c.wx.showTabBarRedDot
        • d.wx.removeTabBarRedDot
        • e.wx.setTabBarBadge
        • f.wx.removeTabBarBadge
        • g.wx.setTabBarStyle
        • h.wx.setTabBarItem
      • 6)下拉刷新
        • a.wx.startPullDownRefresh
        • b.wx.stopPullDownRefresh
      • 7)动画
        • 动画实例方法
    • 5.媒体
      • 1)图片
        • a.wx.saveImageToPhotosAlbum
        • b.wx.previewImage
        • c.wx.getImageInfo
        • d.wx.chooseMessageFile
        • e.wx.chooseImage
        • f.wx.compressImage
      • 2)视频
        • a.wx.saveVideoToPhotosAlbum
        • b.wx.chooseVideo
        • c.wx.createVideoContext
        • d.VideoContext
      • 3)相机
        • a.wx.createCameraContext
        • b.CameraContext
      • 4)音频
        • a.wx.createAudioContext
        • b.AudioContext
        • c.wx.createInnerAudioContext
        • d.InnerAudioContext
        • e.wx.getAvailableAudioSources
        • f.wx.setInnerAudioOption
      • 5)录音
        • a.wx.getRecordManager
        • b.RecordManager
      • 6)实时音视频
        • a.wx.createLivePusherContext
        • b.LivePusherContext
        • c.wx.createLivePlayerContext
        • d.LivePlayerContext
      • 7)富文本
        • EditorContext
      • 8)位置
        • a.wx.getLocation
        • b.wx.openLocation
        • c.wx.chooseLocation
        • d.onLocationChange
        • e.wx.startLocationUpdate
        • f.wx.startLocationUpdateBackground
        • g.wx.stopLocationUpdate
      • 9)地图
        • a.wx.createMapContext
        • b.MapContext
      • 10)canvas
        • 流程
        • canvasContext绘图方法
        • canvas保存为图片
    • 6.开放接口
      • 1)登录
        • a.wx.login
        • b.wx.checkSession
      • 2)授权
      • 3)用户信息
        • wx.getUserInfo
        • UserInfo
      • 4)小程序跳转
        • wx.navigateToMiniProgram
      • 5)设置
        • a.wx.openSeting
        • b.wx.getSetting
    • 7.转发
      • 1)wx.getShareInfo
      • 2)wx.showShareMenu
      • 3)wx.hideShareMenu
      • 4)wx.updateShareMenu
    • 8.数据缓存
      • 1)wx.getStorage(wx.getStorageSync)
      • 2)wx.getStorageInfo(wx.getStorageInfoSync)
      • 3)wx.setStorage(wx.setStorageSync)
        • 4)wx.removeStorage(wx.removeStorageSync)
        • 5)wx.clearStorage(wx.clearStorageSync)
    • 9.网络
      • 1).request
        • 快递查询
      • 2)socket
      • 3)下载
        • a.wx.downloadFile
        • b.DownloadTask
      • 4)上传
        • a.wx.uploadFile
        • UploadTask
    • 10.文件
      • 1)wx.openDocument
      • 2)wx.saveFile
      • 3)wx.removeSavedFile
      • 4)wx.getSavedFileList
      • 5)wx.getSavedFileInfo
      • 6)wx.getFileInfo
      • 7)wx.getFileSystemManager
      • 8)FileSystemManager
  • 七、云开发
    • 1.基础
      • 1)介绍
      • 2)云开发使用流程
      • 3)资源环境
      • 4)配额
    • 2.计费
    • 3.小程序端API
    • 4.服务端API
    • 5.其他
      • 1)具体使用
      • 2)视频链接
  • 八、第三方平台
  • 九、组件库

一、设计要素

来源:吴天2019小程序赚钱全攻略：零基础搭建、引爆、变现你的小程序

1.五大要点

  • 工具类小程序功能要专一
  • 应用类小程序交互要简单
  • 小程序裂变要及时反馈
  • 小程序开发要快
  • 小程序设计一定要自裂变

2.小程序集群搭建的六种方法

  • 以地域为维度策划小程序
  • 以时间为维度策划小程序
  • 以功能为维度策划小程序
  • 以服务为维度策划小程序
  • 小程序相互跳转
  • 单一功能小程序这成平台式小程序

二、概述

1.诞生背景

更好的用户体验
规范与管理

2.什么是小程序

小程序可以通过更好的用户体验，在微信内使用应用程序的功能

  • 触手可及:不需要下载安装即可使用的应用
  • 用完即走:用户扫一扫或者搜一下即可打开应用
    -无需安装卸载:随时可用，无需安装过多应用

学习记录-微信小程序_第1张图片

3.小程序能做什么

学习记录-微信小程序_第2张图片学习记录-微信小程序_第3张图片

4.小程序开发工作准备

  • 注册小程序账号

微信公众平台
一个邮箱只能在微信公众平台注册一次，即一个邮箱只能选择订阅号、小程序号、服务号或企业微信中的一种账号类型

  • 激活邮箱
  • 信息登记
  • 主体类型:个人主体不支持微信认证，微信支付及高级接口能力
  • 企业、政府、媒体或其他需要相关类型资质认证
  • 非个人主体类型的账号，已有线上版本需要注销账号或更名的情况，需要用与管理者微信绑定的银行账号打小额钱用来确认，完成操作后会返还
  • 登录小程序管理后台
  • 完善小程序信息
  • 绑定开发者

5.开发者工具下载

从微信开发文档即可下载，很方便，不建议从各大应用商城搜索
**下载地址:**https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
**下载版本建议:**尽量下载稳定版(Stable Build)，预发布版(RC Build)、开发版(Nightly Build)都多或少存在问题。即使稳定版也不稳定(闪退、黑屏现象)。

6.开发者工具

开发者工具的介绍：用不着挨着看，很多功能用到的时候再看也不急

1)详情

  • 基础库:代码调试的版本
  • ES6转ES5:JavaScript版本切换
  • 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书:当小程序中使用了外链域名，会对其合法性进行检验(小程序中只能使用在公众平台后台配置过的域名，可以在详情=>域名信息中查看)

2)调试器

七个模块

  • console:调试log信息
  • Sourses:列出小程序页面的所有脚本文件，可以对这些脚本文件做一些断点调试
  • Network:展示各个网络请求的状态信息以及请求资源的响应数据等
  • Storage：本地存储，通过调用wx.setStorage和wx.setStorageSync设置缓存时，可以动态的修改缓存数据
  • AppData：小程序页面上真实展示的数据
  • Wxml:展示小程序页面的各个组件元素以及对组件元素的样式属性进行修改
  • Sensor： 地理位置信息和设备旋转角度的展示

7.官方开发文档

官方文档是最好的学习资料，一定要重视

8.小程序代码构成

官方文档

  • app.js

注册小程序应用，处理小程序逻辑和数据交互

  • app.json

小程序全局配置

  • app.wxss

小程序全局样式

  • project.config.json

保存微信开发者工具的配置信息

  • pages

存放小程序的所有页面

  • utils

存放工具函数，达实现代码复用的目的

小程序配置文件介绍(.json)

官方文档

学习记录-微信小程序_第4张图片

页面配置的优先级高于全局配置:当两者配置重复时，页面配置会覆盖全局配置
全局配置
页面配置

三、小程序框架与运行机制

1.MINA框架

学习记录-微信小程序_第5张图片

1)视图层

官方文档

  • WXML，WXSS构建页面视图层，搭建视图结构和展现样式
  • WXS和WXML、WXSS一起在UI线程( UI Thread )中运行。平常在服务器请求到数据时，需要对数据处理，小程序提供的WXS脚本可以直接在UI线程中处理，避免了跨线程通信的消耗
  • WXML是具有元素、属性和文本的 结点树结构 ，在结点树结构中每一个结点都有上下文关系，所以在渲染WXML时，小程序运行环境会把 WXML结点树 转化为 JS对象
  • 在渲染时，会把从逻辑层传递来的数据进行差异对比，把差异应用在原来结点树上，渲染出正确的视图层界面

2)逻辑层(App Service)

数据交互和逻辑处理的中心
每个小程序只有一个APP Service,并且常驻内存

  • Manger

逻辑处理

  • API

封装的微信接口，是不同平台设备都能使用微信平台能力

3)JSBridge

视图层和逻辑层通过JS进行通信
在逻辑层发生数据变更的时候，需要通过App Service提供的 setData() 方法，把数据从逻辑层传递到视图层

2.小程序运行机制

1)启动

官方文档

  • 冷启动

用户首次打开或小程序被主动销毁(超时销毁-5分钟，连续收到两次系统告警)
在冷启动时发现有更新，会异步下载，最新版本的包会在下次打开才会应用

  • 热启动

在一定时间内再次打开小程序

2)加载

官方文档
学习记录-微信小程序_第6张图片

  • 小程序启动时会向CDN请求最新代码包，第一次启动会等到下载代码包并注入到视图层容器内才能看到小程序页面
  • 客户端会将代码包保存到本地，下一次启动时会先从CDN请求最新代码包，当有最新代码包时，会先运行已经缓存好的代码包，同时异步下载最新代码包存入CDN，再下一次启动时，使用最新代码包

CDN:内容分发网络，可以理解为最近的快递分发点

3)生命周期

官方文档

概述

  • 小程序启动时两个线程同时运行，两者协同工作完成小程序页面生命周期的调用

view 线程(View Thread)：负责页面视图渲染
服务线程(AppService Thread)：处理数据和服务

  • 当App Service线程创建时，会依次调用 onLoad 和 onShow 方法

一般在这两个方法中请求服务器数据

  • view线程初始化完毕之后，会向App Service线程发送消息，App Service线程会返回初始化数据
  • view线程获取到初始化数据之后，触发首次渲染，渲染完成后会再次向App Service线程发送消息
  • App Service线程会接收到 onReady 调用，此时App Service线程会把服务器数据发送给View 线程的视图层
  • view 线程获取到数据之后会再次渲染视图层
  • 程序生命周期
  • onLaunch

初始化小程序，一个生命周期内只能调用一次

  • onShow

从后台唤醒，小程序进入前台状态，调用该方法

  • onHide

小程序进入后台调用该方法

  • onError

当程序发生脚本错误或API调用失败时，调用该方法

  • globalData

小程序全局数据

  • 页面生命周期
  • onLoad

页面初次加载，触发该方法，一个页面构造时只能被调用一次

  • onShow

页面显示或从别的页面返回当前页面会调用该方法

  • onReady

页面初次渲染完成之后会调用该方法，在onShow方法之后被调用，只能被调用一次

  • onHide

页面进入后台调用该方法

  • onUnload

关闭当前页，触发该方法

4)页面路由

官方文档

  • 小程序的所有页面由框架维护的栈进行统一管理
  • navigateTo、redirectTo只能打开非tabBar页面
  • switchTab只能打开tabBar页面
  • reLaunch可以打开任意页面
路由方式 页面栈表示 触发时机 路由前页面 路由后页面
初始化 新页面入栈 小程序打开的第一个页面 onLoad, onShow
打开新页面 新页面入栈 调用 API wx.navigateTo ,使用组件 onHide onLoad, onShow
页面重定向 当前页面出栈，新页面入栈 调用 API wx.redirectTo ;使用组件 onUnload onLoad, onShow
页面返回 页面不断出栈,新页面入栈 调用 API wx.navigateBack ;使用组件,用户按左上角返回按钮 onUnload onShow
Tab切换 页面全部出栈，只留下新的Tab页面 调用 API wx.switchTab;使用组件 ;用户切换 Tab
重加载 页面全部出栈，只留下新页面 调用 API wx.reLaunch;使用组件 onUnload onLoad,onShow

5)事件流

官方文档

  • 事件是视图层到逻辑层的通讯方式
  • 可以将用户的行为反馈到逻辑层进行处理
  • 可以绑定在组件上，触发事件后，会执行逻辑层中对应的事件处理函数
  • 事件对象可以携带额外信息

事件对象

  • type

触发事件的类型

  • timeStamp

触发事件的时间戳

  • target

触发事件的根源组件，包括触发组件的Id，data自定义数据 的集合

  • currentTarget

事件绑定的当前组件，当前组件的Id，当前组件的类型，data自定义数据的集合

  • touches

表示当前停留到屏幕上的触摸点的信息

  • detail

表示各个事件所携带的数据

事件模型
学习记录-微信小程序_第7张图片

  • 事件捕获阶段

事件会从最外层结点( currentTarget对象 )会向下传播到目标结点( target对象 )元素，依次检查经过的结点是否绑定了同一事件的监听回调函数

  • 事件处理阶段
  • 事件冒泡阶段

事件会从目标结点会向上传播到最外层结点元素，依次检查经过的结点是否绑定了同一事件的监听回调函数

事件绑定和冒泡

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    view>
  view>
view>
  • 点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)
  • 点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1

四、小程序开发框架

1.wxml:描述页面的内容
2.wxss:描述页面的样式
3.wxs:对wxml增强的一种脚本语言，用于wxml中对数据进行过滤或者计算处理
4.javaScript:处理页面的交互逻辑与数据交互

1.WXML(WeiXin MarkUp Language)

是框架设计的一套标签语言，结合组件、wxs和事件系统，可以构建出页面的结构

1)语法

  • 开始标签和结束标签是相匹配
  • 严格闭合
  • 大小敏感
<标签名 属性名="属性名1" 属性名="属性名2" ...>标签名>

2)通用属性介绍

a)class

用来给标签添加wxss(css)样式

b)data-

给标签添加数据集合(dataSet)，用于逻辑处理是传递参数，区分标签

c)hidden

当前标签的显示或者隐藏

d)id

组件的唯一标识

e)style

组件的内联样式

f)bind*/catch*

组件的事件

3)语言特性

数据绑定

官方文档

文本内容数据绑定
学习记录-微信小程序_第8张图片
属性内容数据绑定
学习记录-微信小程序_第9张图片
运算符绑定
学习记录-微信小程序_第10张图片

列表渲染

官方文档

wx:for
学习记录-微信小程序_第11张图片
wx:key

指定列表中项目的唯一的标识符
当数据改变触发渲染层重新渲染的时候（列表中项目的位置会动态改变或者有新的项目添加到列表中），会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

条件渲染

官方文档
学习记录-微信小程序_第12张图片

模板引用

模板文档
引用文档

模板

有作用域 :只能使用 data 传入的数据以及模板定义文件中定义的 模块


<template>
	<view>
		<view>收件人:{{name}}view>
		<view>联系方式:{{phone}}view>
		<view>地址:{{address}}view>	
	view>	
template>


<template is="templateItem" data="{{...item}}"/>template>

引用
学习记录-微信小程序_第13张图片

import只能引用目标文件中