小程序基础

343 阅读7分钟

笔记来源:拉勾教育 - 大前端就业集训营

文章内容:学习过程中的笔记、感悟、和经验

提示:项目实战类文章资源无法上传,仅供参考

小程序开发

小程序

原罪:传统App的开发、运营成本很高

相对传统App而言

  • 小程序无需单独下载,只需要搜一搜、扫一扫,就能直接使用小程序
  • 小程序寄宿在App中,App自带流量,所以小程序推广成本较低
  • 小程序简单易学 - 只需要掌握前端技术栈

相对于网页开发而言

  • 小程序中不能使用HTML
  • 小程序可以使用CSS
  • 小程序主要开发语言仍是JS,但要注意不是所有JS的API都可以使用
    • 比如DOM个BOM在小程序中不可用,基于DOM和BOM开发的库也不可用,比如JQuery
  • 小程序运行在操作系统上的微信客户端,网页运行在浏览器

小程序运行环境

  • 渲染层:内容、样式

  • 逻辑层:JS

  • 注意:在IOS和安卓内部支持还是有区别的,但是外观表现是一样的

截屏2021-08-18 09.48.27

微信小程序基础

小程序账号注册

  • 使用微信提供的官方注册地址进行注册
  • 注册过微信公众号的邮箱地址,无法再用来注册微信小程序账号
  • 注册成功后,在后台可以获取到小程序的AppID(设置 => 基本设置 => 账号设置)
  • AppID是小程序账号的唯一标识,注意保密

搭建开发环境

安装微信开发者工具

环境搭建

  1. 双击打开微信开发者工具

  2. 填写项目初始化信息,填写小程序名称、存放目录、AppID,填写

    • 项目名称: 可以任意设置
    • 目录: 设置本地空目录
    • AppID: 注册小程序账号之后, 点击左侧导航中的“设置”,查看账号信息
    • 开发模式: 小程序
    • 后端服务: 选择”不使用云服务” (不会创建服务器端目录或者文件)
  3. 点击新建按钮创建初始化小程序

  4. 进入项目后,熟悉微信开发者工具

    • 模拟器: 模拟小程序项目在真机上的运行效果
    • 编辑器: 修改/添加项目结构和代码
      • 代码目录
      • 代码编辑窗口
    • 调试器: 调试 JavaScript 逻辑, 调试CSS样式等
      • Wxml: 查看页面标签结构, 调试CSS样式
      • Console: 测试 JavaScript 代码
      • Sources: 添加断点 / 断点调试

    截屏2021-08-18 10.10.09

报错:当前开发者未绑定此 appid,请到小程序管理 解决:

  • 确保你使用的是小程序的 appid(而不是微信公众号的 appid)
    1. 去小程序管理后台绑定开发者(如第一步已解决,请忽略第二步)

进入小程序

点击获取头像昵称 => 允许授权 => 进入小程序(看到用户头像)截屏2021-08-18 10.15.28

初始化项目

全局文件 - 根目录

  • app.js - 小程序启动后加载的入口文件
  • app.json - 小程序整个项目的全局配置文件
  • app.wxss - 小程序全局样式文件,相当于CSS文件

页面文件 - pages目录

每一个具体页面都必须由四个文件组成,四个文件必须具有相同的路径与文件名

  • index.js - 页面入口
  • index.json - 页面配置
  • index.wxml - 页面内容,相当于HTML文件
  • index.wxss - 页面样式,相当于CSS文件

截屏2021-08-18 10.41.53

新建 / 生成页面

直接在跟目录下的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 - 从前台切到后台时触发

截屏2021-08-18 11.52.30

// 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

截屏2021-08-18 12.02.59

/// 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 - 页面卸载');
  }
})

微信小程序启动流程

  1. onLauch:小程序启动
  2. onShow:小程序显示 / 切前台
  3. onLoad:页面加载
  4. onShow:页面显示
  5. onReady:页面就绪

小程序前后台切换流程

小程序前后台切换生命周期函数触发顺序刚好相反

切后台

  1. onHide:页面切后台
  2. onHide:小程序切后台

切前台

  1. onShow:小程序切后台
  2. onShow:页面切后台

截屏2021-08-18 14.31.21

全局文件解读

文件必须作用
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相当于小程序中的模版引擎
    • 数据绑定 - {{ 数据 }}
    • 数据展示(条件渲染、列表渲染)
    • 截屏2021-08-18 15.16.24

部分小程序组件对应的HTML标签

作用小程序组件HTML标签
展示区块viewdiv
展示图片imageimg
展示文本textp
导航链接navigatora
.......................................

截屏2021-08-18 15.07.49

具体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": {}
}