readme

牧歌2025/3/24...大约 3 分钟

小程序开发

WXML模版与HTML的区别

标签名称不同：

HTML（div、span、img、a）
WXML（view、text、image、navigator）

属性节点不同

<a href="#">超链接</a>
<navigator url=".pages/home/home"></navigator>

提供类似与Vue中的模版语法

数据绑定
列表渲染
条件渲染

WXSS和CSS的区别

新增了rpx尺寸单位

CSS中需要手动进行像素单位的转换，例如rem
WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

提供了全局的样式和局部样式

项目根目录中的app.wxss会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效

WXSS仅支持部分css选择器

.class 和 #id
element
并集选择器、后代选择器
::after 和 ::before等伪类选择器

小程序中.js文件的分类

app.js：整个小程序项目的入口文件，通过App()函数启动整个小程序页面的.js文件：是页面的入口文件，通过调用Page()函数来创建并运行页面普通的.js文件：是普通的功能模块文件，用来封装公共的函数或属性供页面使用

常用的语法

条件渲染

<view wx:if="{{ type === 1}}">男</view>
<view wx:elif="{{ type === 2}}">女</view>
<view wx:else>无</view>

生命周期函数

App({
// 小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作
onLaunch: function(options) {}
// 小程序启动，或从后台进入前台显示时触发
onShow: function(options) {}
// 小程序从前台进入后台触发
onHide: function(options) {}
})

Page({
// 监听页面加载，页面只调用一次
onLoad: function(options) {}
// 监听页面显示
onShow: function(){}
// 监听页面初此渲染完成，一个页面只调用1次
onReady: function(){}
// 监听页面隐藏
onHide: function(){}
// 监听页面卸载，一个页面只调用一次
onUnload: function(){}
})

引入 Vant Vwapp

设置小程序npm使用使用Vant组件：在app.json的usingComponents节点中引入需要的组件，即可在wxml中直接使用的组件

// app.json
"usingComponents": {
	"van-button": "@vant/weapp/button/index"
}

// 页面的 .wxml 结构
<van-button type="primary">按钮</van-button>

css自定义属性（变量）

使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN

使用npm包-实现API Promise化

在小程序中，使用API Promise 化主要依赖于 miniprogram-api-promise 这个第三方 npm 包。

npm install --save miniprogram-api-promise@1.0.4

// 在小程序入口 app.js ，只需要调用一次 promisifyAll() 方法，即可实现异步 API的 Promise 化
import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}
// promisify all wx's api
promisifyAll(wx, wxp)

// 页面的 .wxml 结构
<van-button type="danger" bindtap="getInfo">vant 按钮</van-button>

// 在页面 .js 文件中，定义对应的 tap 事件处理函数
async getInfo() {
	const {data: res} = await wx.p.request({
		method: 'GET',
		url: "XXX/api/get",
		data: { name:'w', age:28 }
	})
	console.log(res)
}