微信小程序和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. 基础组件

5. 生命周期

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

6. 数据绑定与更新

• 微信小程序：

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

• UniApp (Vue3 组合式 API):

  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. 路由导航

• 微信小程序：

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

• UniApp：

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

11. 网络请求

• 微信小程序：

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

• UniApp：

  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 等，因此在某些方面会比微信小程序更加灵活和强大。