Appearance

微信小程序入门

Pcjmy2024-02-06微信小程序微信小程序

微信小程序入门

什么是微信小程序

2017年,微信正式推出了⼩程序,允许外部开发者在微信内部运⾏⾃⼰的代码,开展业务。⼩程序是⼀种不需要下载安装即可使⽤的应⽤,它实现了应⽤“触⼿可及”的梦想,⽤户扫⼀扫或者搜⼀下即可打开应⽤。小程序体现了“⽤完即⾛”的理念,⽤户不⽤关⼼是否安装太多应⽤的问题。应⽤将⽆处不在,随时可⽤,但⼜⽆需安装卸载。

小程序与H5

相⽐ H5 ,⼩程序与其的区别有如下:

  • 运⾏环境:⼩程序基于浏览器内核重构的内置解析器
  • 系统权限:⼩程序能获得更多的系统权限,如⽹络通信状态、数据缓存能⼒等
  • 渲染机制:⼩程序的逻辑层和渲染层是分开的

⼩程序可以视为只能⽤微信打开和浏览的 H5 ,⼩程序和⽹⻚的技术模型是⼀样的,⽤到的 JavaScript 语⾔和 CSS 样式也是⼀样的,只是⽹⻚的 HTML 标签被稍微修改成了 WXML 标签。

小程序基础API

TIP

小程序热更新可能有bug,如果在代码正确的情况下控制台报错,可以尝试重新编译。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework

小程序代码构成

小程序中有.js.json.wxml.wxss四种文件格式。

  • JS文件:业务逻辑
  • JSON文件:小程序配置
  • WXML文件:描述小程序结构
  • WXSS文件:样式文件

小程序生命周期

全局生命周期函数

// 创建一个小程序
App({
  // 生命周期函数指的是在某一时刻会自动执行的函数
  // 在小程序启动的时候,自动执行的函数
  onLaunch(options) {
    console.log('onLaunch', options)
    this.sayHello()
  },
  // 在小程序重新展示的时候,自动执行的函数
  onShow(options) {
    console.log('onShow', options)
  },
  // 在小程序取消展示的时候,自动执行的函数
  onHide() {
    console.log('onHide')
  },
  // 当脚本执行错误时,自动执行的函数
  onError(msg) {
    console.log('onError', msg)
  },
  sayHello() {
    console.log('say hello')
  }
})

页面生命周期函数

Page({
  // 在页面运行的某个时刻会自动执行的函数
  // 是页面被加载到内存里的时候,或者说页面第一次启动的时候
  onLoad() {
    console.log('onLoad')
  },
  // 是页面被加载到内存里的时候,或者说页面第一次启动的时候
  // 并且,页面被渲染完成之后自动执行
  onReady() {
    console.log('onReady')
  },
  // 页面每次被展示的时候自动执行
  onShow() {
    console.log('onShow')
  },
  // 页面每次被取消展示的时候自动执行
  onHide() {
    console.log('onHide')
  },
  // 每次下拉刷新时执行
  onPullDownRefresh() {
    console.log('onPullDownRefresh')
  },
  // 页面到最低部时会自动执行
  onReachBottom() {
    console.log('onReachBottom')
  },
  // 当你点击分享时自动执行的函数
  onShareAppMessage() {
    console.log('onShareAppMessage')
    return {
      title: 'share',
      path: 'pages/index/index'
    }
  },
  // 当页面滚动时自动执行的函数
  onPageScroll() {
    console.log('onPageScroll')
  }
})

小程序视图层

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。

与 CSS 相比,WXSS 扩展的特性有:

  • 尺寸单位
  • 样式导入

尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

// index.js
Page({
  data: {
    content: "content"
  }
})
// index.wxml
<import src="./content.wxml" />

<view>header</view>
<template is="content" data="{{content: content}}" />
<view>footer</view>
// content.wxml
<template name="content">
  <view>{{content}}</view>
  <view>hello world</view>
</template>

小程序和HTML标签对应

小程序HTML
viewdiv
textspan
block</>
imageimg
Last Updated 2024-02-17 12:34:53