笔记来源:拉勾教育 - 大前端就业集训营
文章内容:学习过程中的笔记、感悟、和经验
提示:项目实战类文章资源无法上传,仅供参考
小程序开发
小程序
原罪:传统App的开发、运营成本很高
相对传统App而言
- 小程序无需单独下载,只需要搜一搜、扫一扫,就能直接使用小程序
- 小程序寄宿在App中,App自带流量,所以小程序推广成本较低
- 小程序简单易学 - 只需要掌握前端技术栈
相对于网页开发而言
- 小程序中不能使用HTML
- 小程序可以使用CSS
- 小程序主要开发语言仍是JS,但要注意不是所有JS的API都可以使用
- 比如DOM个BOM在小程序中不可用,基于DOM和BOM开发的库也不可用,比如JQuery
- 小程序运行在操作系统上的微信客户端,网页运行在浏览器
小程序运行环境
-
渲染层:内容、样式
-
逻辑层:JS
-
注意:在IOS和安卓内部支持还是有区别的,但是外观表现是一样的
微信小程序基础
小程序账号注册
- 使用微信提供的官方注册地址进行注册
- 注册过微信公众号的邮箱地址,无法再用来注册微信小程序账号
- 注册成功后,在后台可以获取到小程序的AppID(设置 => 基本设置 => 账号设置)
- AppID是小程序账号的唯一标识,注意保密
搭建开发环境
安装微信开发者工具
- 前往小程序官网,下载微信开发者工具,选择自己系统匹配的下载包即可
- 安装微信开发者工具
环境搭建
-
双击打开微信开发者工具
-
填写项目初始化信息,填写小程序名称、存放目录、AppID,填写
- 项目名称: 可以任意设置
- 目录: 设置本地空目录
- AppID: 注册小程序账号之后, 点击左侧导航中的“设置”,查看账号信息
- 开发模式: 小程序
- 后端服务: 选择”不使用云服务” (不会创建服务器端目录或者文件)
-
点击新建按钮创建初始化小程序
-
进入项目后,熟悉微信开发者工具
- 模拟器: 模拟小程序项目在真机上的运行效果
- 编辑器: 修改/添加项目结构和代码
- 代码目录
- 代码编辑窗口
- 调试器: 调试 JavaScript 逻辑, 调试CSS样式等
- Wxml: 查看页面标签结构, 调试CSS样式
- Console: 测试 JavaScript 代码
- Sources: 添加断点 / 断点调试
报错:当前开发者未绑定此 appid,请到小程序管理 解决:
- 确保你使用的是小程序的 appid(而不是微信公众号的 appid)
- 去小程序管理后台绑定开发者(如第一步已解决,请忽略第二步)
进入小程序
点击获取头像昵称 => 允许授权 => 进入小程序(看到用户头像)
初始化项目
全局文件 - 根目录
- app.js - 小程序启动后加载的入口文件
- app.json - 小程序整个项目的全局配置文件
- app.wxss - 小程序全局样式文件,相当于CSS文件
页面文件 - pages目录
每一个具体页面都必须由四个文件组成,四个文件必须具有相同的路径与文件名
- index.js - 页面入口
- index.json - 页面配置
- index.wxml - 页面内容,相当于HTML文件
- index.wxss - 页面样式,相当于CSS文件
新建 / 生成页面
直接在跟目录下的app.json文件的pages中添加一条页面信息即可,保存后程序会自动在pages目录中新建页面目录
// 下面是部分全局配置
{
"pages":[
"pages/index/index",
"pages/logs/logs",
// 添加一条页面信息保存即可
"pages/test/test"
],
// window对应当前小程序窗口配置
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff", // 头部标题背景色
"navigationBarTitleText": "Weixin", // 小程序头部标题
"navigationBarTextStyle":"black" // 头部字体颜色
},
// 指定小程序地步Tab栏表现,数组,内部书写需要添加的Tab配置即可
"tabBar": {
"list": [{
// Tab对应页面
"pagePath": "pages/index/index",
// Tab标题
"text": "首页",
// 未选中图标
"iconPath": "./static/images/featured.png",
// 选中图标
"selectedIconPath": "./static/images/featured-actived.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "./static/images/profile.png",
"selectedIconPath": "./static/images/profile-actived.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
详细全局配置可参考官方文档
生命周期
- 整个小程序的生命周期:声明在app.js
- 单个页面生命周期:声明在页面入口文件中
小程序生命周期
- onLaunch - 小程序启动时触发,全局只调用一次
- onShow - 初始化完成,从后台切到前台时触发
- onHide - 从前台切到后台时触发
// app.js
App({
onLaunch() {
console.log('onLaunch - 小程序启动');
...............
},
onShow() {
console.log('onShow - 小程序初始化完成 - 切前台');
},
onHide() {
console.log('onShow - 小程序切后台');
},
globalData: {
userInfo: null
}
})
页面生命周期
- onLoad - 页面加载(一次)
- onShow - 页面显示(切前台)
- onHide - 页面隐藏(切后台)
- onReady - 页面就绪(一次)
- inUnload - 页面卸载(一次)
- 页面生命周期流程顺序:onLoad => onShow => onReady
/// logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad() {
console.log('onLoad - 页面加载');
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return {
date: util.formatTime(new Date(log)),
timeStamp: log
}
})
})
},
onShow() {
console.log('onShow - 页面显示');
},
onHide() {
console.log('onHide - 页面切后台');
},
onReady() {
console.log('onReady - 页面就绪');
},
inUnload() {
console.log('inUnload - 页面卸载');
}
})
微信小程序启动流程
- onLauch:小程序启动
- onShow:小程序显示 / 切前台
- onLoad:页面加载
- onShow:页面显示
- onReady:页面就绪
小程序前后台切换流程
小程序前后台切换生命周期函数触发顺序刚好相反
切后台
- onHide:页面切后台
- onHide:小程序切后台
切前台
- onShow:小程序切后台
- onShow:页面切后台
全局文件解读
文件 | 必须 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
云API
小程序官方推出的,功效程序调用的云端API
- 不需要自己开发
- 不需要自己部署
- 云API全部放在wx对象当中,所以基本上wx打点调用的方法都是云API
- 注意:新版小程序初始化项目中,已经没有获取用户信息的代码了
// app.js
App({
onLaunch() {
console.log('onLaunch - 小程序启动');
// 展示本地存储能力
// 云API - wx.getStorageSync - 获取本地缓存数据
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
// 云API - wx.setStorageSync - 设置本地混存数据
wx.setStorageSync('logs', logs)
// 云API - wx.login - 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
onShow() {
console.log('onShow - 小程序初始化完成 - 切前台');
},
onHide() {
console.log('onShow - 小程序切后台');
},
globalData: {
userInfo: null
}
})
解读index页面
- WXML - 微信开发的一款标签语言 - 框架设计的一套语言标签
- WHML中的具体标签,称之为组件
- WXML和组件之间的关系就相当于HTML和标签
- WXML相当于小程序中的模版引擎
- 数据绑定 -
{{ 数据 }}
- 数据展示(条件渲染、列表渲染)
- 数据绑定 -
部分小程序组件对应的HTML标签
作用 | 小程序组件 | HTML标签 |
---|---|---|
展示区块 | view | div |
展示图片 | image | img |
展示文本 | text | p |
导航链接 | navigator | a |
............. | ............. | ............. |
具体WXML组件可以扫描官方提供的小程序二维码查看
解读logs页面
- 模块化开发
- 小程序中的模块化开发遵循CommonJS规范 - exports、require
- WXML列表渲染 - wx:for
- 页面级别配置
- .json文件配置页面
- .wxss文件设置样式
// logs.js
// require - 引入外部模块
const util = require('../../utils/util.js')
Page({
// 页面数据
data: {
logs: []
},
// 页面生命周期 - 页面挂载
onLoad() {
// 设置数据
this.setData({
// 设置logs
// wx.getStorageSync - 云API - 获取本地数据
// 遍历数据使用util对数据的日期格式进行处理然后逐条保存
logs: (wx.getStorageSync('logs') || []).map(log => {
return {
date: util.formatTime(new Date(log)),
timeStamp: log
}
})
})
}
})
// logs.json
{
// 配置页面独有的顶部标题
"navigationBarTitleText": "查看启动日志",
"usingComponents": {}
}