Uni-app 微信小程序零基础基础知识全面梳理

罗光宣

本文系统介绍 uni-app 开发微信小程序 的核心基础知识，包括内容：概念、环境、语法、页面、组件到发布相关的知识内容。

一、先搞懂：uni-app 是什么？和微信小程序什么关系？

1. 核心定义

uni-app 是 DCloud 公司推出的跨端开发框架

·一套代码，可发布到：微信小程序 / App / H5 / 支付宝小程序 / 抖音小程序 等

·语法基于 Vue.js，兼容小程序原生写法

2. 与微信小程序的关系

·你写 uni-app 代码 → 编译 → 标准微信小程序代码

·开发效率比原生小程序高很多

·能使用小程序所有原生能力 + uni-app 扩展能力

二、开发前必备环境（必须先装）

1. 必须安装的软件

1.HBuilderX（uni-app 官方编辑器，必用）

2.微信开发者工具（预览、调试、发布小程序）

3.注册 微信小程序账号（获取 AppID）

2. 项目创建步骤（最标准）

1.打开 HBuilderX

2.新建 → 项目 → 选择 uni-app → 选择默认模板

3.填写项目名、目录

4.创建完成

三、uni-app 项目目录结构（必须看懂）

├── pages页面文件（所有页面放这里）├── static静态资源（图片、视频、字体）├── unpackage编译后文件（自动生成）├── App.vue全局配置、生命周期、样式├── main.js入口文件├── manifest.json发行配置（App/小程序/各平台配置）├── pages.json页面路由、导航栏、tabBar 配置└── uni.scss全局样式变量

最重要的 3 个文件

1.pages.json → 配置页面、导航、tabBar

2.App.vue → 全局生命周期、全局样式

3.manifest.json → 微信小程序 AppID、发行配置

四、核心语法：基于 Vue + 兼容小程序

uni-app 使用 Vue 语法，你只需要掌握最基础的 Vue 知识即可。

1. 页面结构（.vue 文件三部分）

<template>  <!– 视图层（类似wxml）–>  <view>    <text>{{msg}}</text>    <button @click=”test”>点击</button>  </view></template><script>export default {  data() {    return {      msg: “hello uni-app”    }  },  methods: {    test() {      uni.showToast({ title:”点击成功“ })    }  }}</script><style>/* 样式（类似wxss）*/</style>

2. 数据绑定

·插值：{{ 变量 }}

·绑定属性：:src=”imgUrl”

·事件：@click=”fn”

3. 常用指令

·v-if / v-else

·v-for 循环列表

·v-model 表单双向绑定

五、页面配置与路由（pages.json）

1. 注册页面

“pages”:[{“path”:“pages/index/index”, “style”:{“navigationBarTitleText”:“首页”}},                {“path”:“pages/user/user”, “style”:{“navigationBarTitleText”:“我的”}}]

2. 全局样式

“globalStyle”:{“navigationBarTextStyle”:“white”,                “navigationBarTitleText”:“uni-app 小程序”,                “navigationBarBackgroundColor”:“#f00”,                “backgroundColor”:“#fff”}

3. 底部 tabBar

“tabBar”:{“list”:[{“pagePath”:“pages/index/index”, “text”:“首页”},                {“pagePath”:“pages/user/user”, “text”:“我的”}]}

六、uni-app 核心组件（直接用，不用引入）

uni-app 组件完全兼容微信小程序组件，写法几乎一样。

最常用基础组件

· = div

· = 文本

· = 图片

· = 按钮

· = 输入框

· = 滚动区域

· = 轮播

示例

<view class=”box”>  <image src=”/static/logo.png”></image>  <button type=”primary” @click=”goPage”>跳转</button></view> 

七、路由跳转（页面切换）

uni-app 提供统一路由 API，自动适配小程序。

1. 最常用跳转

// 保留页面（可返回）uni.navigateTo({url:‘/pages/detail/detail?id=1’})// 关闭当前页，跳转到新页uni.redirectTo({url:‘/pages/login/login’})// 跳转到 tabBar 页面uni.switchTab({url:‘/pages/index/index’})

2. 接收参数

onLoad(options) {console.log(options.id)}

八、生命周期（页面加载、显示、隐藏…）

页面最重要 4 个生命周期

exportdefault {onLoad() { // 页面加载（只执行一次）// 请求数据、获取参数},                onShow() { // 页面显示（每次显示都会执行）},                onReady() { // 页面初次渲染完成},                onUnload() { // 页面卸载}}

九、网络请求（uni.request）

uni.request({url:‘https://xxx.com/api’,              method:‘GET’,              success: (res) => {console.log(res.data)},              fail: (err) => {console.log(‘请求失败’)}})

注意：

·微信小程序必须配置合法域名

·开发阶段可在微信开发者工具中 勾选“不校验合法域名”

十、使用微信小程序原生能力

uni-app 100% 支持微信小程序原生 API，直接用 wx.xxx 或 uni.xxx。

例如：

·获取位置：uni.getLocation()

·扫码：uni.scanCode()

·支付：wx.requestPayment()

·云开发：wx.cloud.database()

十一、样式与布局

1.支持 rpx 自适应单位（和小程序一样）

2.750rpx = 屏幕宽度

3.支持 scss / less

4.只支持** flex 布局**（推荐）

示例：

.box {display:flex;justify-content:center;width:750rpx;}

十二、条件编译（跨端专用）

如果你只想微信小程序执行某段代码：

// #ifdef MP-WEIXINconsole.log(‘只有微信小程序才执行’)// #endif

支持：

·MP-WEIXIN 微信小程序

·MP-ALIPAY 支付宝

·APP App

·H5 H5

十三、运行、预览、发布微信小程序

1. 运行到微信开发者工具

1.HBuilderX 点击 运行 → 运行到小程序模拟器 → 微信开发者工具

2.第一次需配置微信开发者工具路径

3.自动打开微信开发者工具

2. 发布微信小程序

1.HBuilderX 点击 发行 → 小程序 → 微信小程序

2.输入小程序 AppID

3.生成小程序代码

4.在微信开发者工具点击 上传

5.去微信公众平台提交审核

十四、必须记住的 10 条核心规则

1.页面必须在 pages.json 注册

2.单位用 rpx

3.图片放 static 目录

4.事件用 @click

5.生命周期用 onLoad 而非 created

6.跳转用 uni.navigateTo

7.网络请求用 uni.request

8.支持 Vue2 / Vue3

9.一套代码多端发布

10.完全兼容微信原生 API

总结

这是最完整、最系统的 uni-app 开发微信小程序基础知识，覆盖：

·概念与环境

·项目结构

·Vue 语法

·页面配置

·组件与路由

·生命周期

·网络请求

·样式与适配

·运行与发布