微信小程序入门
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 |
---|---|
view | div |
text | span |
block | </> |
image | img |