微信小程序和uniapp对比区别

UniApp 与微信小程序对比

1. 开发环境

微信小程序：使用微信开发者工具
UniApp：主要使用 HBuilderX，但也可以使用 VS Code 等其他编辑器

2. 项目结构

微信小程序：pages, utils, app.js, app.json, app.wxss
UniApp：pages, static, App.vue, main.js, manifest.json, pages.json

3. 页面文件

微信小程序：.wxml, .wxss, .js, .json
UniApp：.vue (包含 template, script, style)

4. 基础组件

微信小程序	UniApp	说明
view	view	视图容器，类似于 div
text	text	文本组件
image	image	图片组件
button	button	按钮组件
input	input	输入框组件
scroll-view	scroll-view	可滚动视图区域
swiper	swiper	滑块视图容器

5. 生命周期

微信小程序	UniApp (Vue3 组合式 API)
onLoad	onLoad
onShow	onShow
onReady	onReady
onHide	onHide
onUnload	onUnload
onPullDownRefresh	onPullDownRefresh
onReachBottom	onReachBottom

注：UniApp 在 Vue3 组合式 API 中，这些钩子需要单独引入使用。

6. 数据绑定与更新

微信小程序：

javascript 复制代码

Page({
  data: {
    message: 'Hello'
  },
  changeMessage() {
    this.setData({ message: 'Hi' })
  }
})

UniApp (Vue3 组合式 API):

javascript 复制代码

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello')
    
    function changeMessage() {
      message.value = 'Hi'
    }
    
    return {
      message,
      changeMessage
    }
  }
}

7. 条件渲染

微信小程序：wx:if, wx:elif, wx:else
UniApp：v-if, v-else-if, v-else

8. 列表渲染

微信小程序：wx:for, wx:key
UniApp：v-for, :key

9. 事件处理

微信小程序：bindtap, catchtap
UniApp：@click, @tap

10. 路由导航

微信小程序：

javascript 复制代码

wx.navigateTo({ url: '/pages/about/about' })

UniApp：

javascript 复制代码

uni.navigateTo({ url: '/pages/about/about' })

11. 网络请求

微信小程序：

javascript 复制代码

wx.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log(res.data)
  }
})

UniApp：

javascript 复制代码

uni.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log(res.data)
  }
})

12. 存储

微信小程序：wx.setStorageSync, wx.getStorageSync
UniApp：uni.setStorageSync, uni.getStorageSync

13. 组件创建和使用

微信小程序：使用 Component() 创建，在 json 文件中引入
UniApp：创建 .vue 文件，在父组件中引入并注册

14. 全局配置

微信小程序：app.json
UniApp：pages.json, manifest.json

15. 条件编译

微信小程序：无内置条件编译，需要使用其他方法
UniApp：内置条件编译，如 #ifdef MP-WEIXIN, #endif

注意：UniApp 不仅支持编译到微信小程序，还支持其他平台如 H5、App 等，因此在某些方面会比微信小程序更加灵活和强大。